Untitled

const ProgressBar = ({progress, height, width, backgroundColor, barColor}) => {
  const animatedValue = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    Animated.timing(animatedValue, {
      toValue: progress,
      duration: 500,
      useNativeDriver: false,
    }).start();
  }, [progress]);

  const progressWidth = animatedValue.interpolate({
    inputRange: [0, 100],
    outputRange: ['0%', '100%'],
  });

  return (
    <View
      style={[
        styles.container,
        {height, width, backgroundColor},
      ]}>
      <Animated.View
        style={[
          styles.bar,
          {width: progressWidth, backgroundColor: barColor},
        ]}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    borderRadius: 4,
  },
  bar: {
    borderRadius: 4,
    height: '100%',
  },
});