Untitled

import React, { useState, useEffect } from 'react';
import { View, StyleSheet, Animated } from 'react-native';

const ProgressBar = ({ progress }) => {
  const [animation, setAnimation] = useState(new Animated.Value(0));

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

  const width = animation.interpolate({
    inputRange: [0, 1],
    outputRange: ['0%', '100%'],
  });

  return (
    <View style={styles.container}>
      <View style={styles.progressBar}>
        <Animated.View style={[styles.innerProgressBar, { width }]} />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    width: '100%',
    height: 20,
    backgroundColor: '#f2f2f2',
    borderRadius: 10,
    overflow: 'hidden',
  },
  progressBar: {
    width: '100%',
    height: 20,
    backgroundColor: '#2196f3',
  },
  innerProgressBar: {
    height: '100%',
    backgroundColor: '#fff',
  },
});

export default ProgressBar;