RnDanovinExpo/src/components/Progress.js

import React, {useState, useEffect} from 'react';
import {View} from 'react-native';
import tw from 'tailwind-rn';

//Color
import Color from '../constants/Colors';

function Progress({percent, alignItems}) {
  const [delayPercent, setDelayPercent] = useState(0);
  useEffect(() => {
    setTimeout(() => {
      setDelayPercent(() => percent);
    }, 1000);
  }, [percent]);
  return (
    <View
      style={[
        tw(`w-full h-1.5 rounded-full  overflow-hidden my-3 flex ${alignItems}`),
        {backgroundColor: '#D3E9FF'},
      ]}>
      <View
        style={[
          tw('h-full rounded-full'),
          {
            backgroundColor: Color.theme1.light.blue5,
            width: percent + '%',
            // backgroundColor: Color.theme1.light.blue4,
          },
        ]}></View>
    </View>
  );
}

export default Progress;