RnDanovinExpo/src/components/Progress.js

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

import Colors from "../constants/Colors";

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

function Progress({percent, alignItems}) {
  const colorScheme = Appearance.getColorScheme();
  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: Colors.theme1[colorScheme].green79 + '22'},
      ]}>
      <View
        style={[
          tw('h-full rounded-full'),
          {
            backgroundColor: Color.theme1[colorScheme].greenCF,
            width: percent + '%',
            // backgroundColor: Color.theme1.light.blue4,
          },
        ]}></View>
    </View>
  );
}

export default Progress;