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

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