React Native: How to use the Animated API for a progress bar animation?

1import { Animated, View, StyleSheet } from "react-native";
2
3function ProgressBar({ progress, color = "#333" }) {
4  const width = useRef(new Animated.Value(0)).current;
5
6  useEffect(() => {
7    Animated.spring(width, {
8      toValue: progress,
9      friction: 8,
10      useNativeDriver: false,
11    }).start();
12  }, [progress]);
13
14  return (
15    <View style={styles.container}>
16      <Animated.View
17        style={[
18          styles.progress,
19          {
20            backgroundColor: color,
21            width: width.interpolate({
22              inputRange: [0, 100],
23              outputRange: ["0%", "100%"],
24            }),
25          },
26        ]}
27      />
28    </View>
29  );
30}
31
32const styles = StyleSheet.create({
33  container: {
34    height: 10,
35    backgroundColor: "#e0e0e0",
36    borderRadius: 5,
37    overflow: "hidden",
38  },
39  progress: {
40    height: "100%",
41    borderRadius: 5,
42  },
43});