React Native: How to use the Animated API for a roll-in animation?

1import { Animated } from "react-native";
2
3function RollInView({ children }) {
4  const rollAnim = useRef(new Animated.Value(-360)).current;
5  const translateX = useRef(new Animated.Value(-200)).current;
6  const opacity = useRef(new Animated.Value(0)).current;
7
8  useEffect(() => {
9    Animated.parallel([
10      Animated.spring(rollAnim, {
11        toValue: 0,
12        friction: 8,
13        useNativeDriver: true,
14      }),
15      Animated.spring(translateX, {
16        toValue: 0,
17        friction: 8,
18        useNativeDriver: true,
19      }),
20      Animated.timing(opacity, {
21        toValue: 1,
22        duration: 500,
23        useNativeDriver: true,
24      }),
25    ]).start();
26  }, []);
27
28  return (
29    <Animated.View style={{
30      opacity,
31      transform: [
32        { translateX },
33        { rotate: rollAnim.interpolate({
34          inputRange: [-360, 0],
35          outputRange: ["-360deg", "0deg"],
36        }) },
37      ],
38    }}>
39      {children}
40    </Animated.View>
41  );
42}