address-verification-app/ProgressBar.tsx

import { COLORS } from '@rn-ui-lib/colors';
import React, { useState, useEffect } from 'react';
import { View, Animated, StyleSheet } from 'react-native';

type ProgressBarProps = {
  progress: number;
  height?: number;
  color?: string;
};

const ProgressBar = ({ progress, height = 10, color = COLORS.TEXT.BLUE }: ProgressBarProps) => {
  const [animatedWidth] = useState(new Animated.Value(0));

  console.log({ progress });
  useEffect(() => {
    Animated.timing(animatedWidth, {
      toValue: progress * 100,
      useNativeDriver: false,
    }).start();
  }, [progress]);

  return (
    <View style={[styles.container, { height }]}>
      <Animated.View
        style={[
          styles.fill,
          {
            width: animatedWidth.interpolate({
              inputRange: [0, 100],
              outputRange: ['0%', '100%'],
            }),
            backgroundColor: color,
          },
        ]}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#e0e0e0',
    borderRadius: 8,
    overflow: 'hidden',
  },
  fill: {
    height: '100%',
  },
});

export default ProgressBar;