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

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