React Native: How to use the Animated API for a list item animation?

1import { Animated, FlatList, View, Text, StyleSheet } from "react-native";
2
3function AnimatedList({ data }) {
4  const animatedValues = useRef(
5    data.map(() => new Animated.Value(0))
6  ).current;
7
8  useEffect(() => {
9    Animated.stagger(
10      100,
11      animatedValues.map((anim) =>
12        Animated.timing(anim, {
13          toValue: 1,
14          duration: 500,
15          useNativeDriver: true,
16        })
17      )
18    ).start();
19  }, []);
20
21  return (
22    <FlatList
23      data={data}
24      renderItem={({ item, index }) => (
25        <Animated.View
26          style={{
27            opacity: animatedValues[index],
28            transform: [{
29              translateX: animatedValues[index].interpolate({
30                inputRange: [0, 1],
31                outputRange: [50, 0],
32              }),
33            }],
34          }}
35        >
36          <View style={styles.item}>
37            <Text>{item.name}</Text>
38          </View>
39        </Animated.View>
40      )}
41      keyExtractor={(item) => item.id}
42    />
43  );
44}