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

1import { Animated, Easing } from "react-native";
2
3function HingeView({ children }) {
4  const rotateAnim = useRef(new Animated.Value(0)).current;
5  const translateY = useRef(new Animated.Value(0)).current;
6
7  useEffect(() => {
8    Animated.sequence([
9      Animated.timing(rotateAnim, {
10        toValue: 0.8,
11        duration: 200,
12        easing: Easing.out(Easing.ease),
13        useNativeDriver: true,
14      }),
15      Animated.timing(rotateAnim, {
16        toValue: 1,
17        duration: 100,
18        easing: Easing.in(Easing.ease),
19        useNativeDriver: true,
20      }),
21      Animated.timing(translateY, {
22        toValue: 200,
23        duration: 500,
24        easing: Easing.in(Easing.ease),
25        useNativeDriver: true,
26      }),
27    ]).start();
28  }, []);
29
30  const rotation = rotateAnim.interpolate({
31    inputRange: [0, 1],
32    outputRange: ["0deg", "80deg"],
33  });
34
35  return (
36    <Animated.View style={{
37      transform: [
38        { rotate: rotation },
39        { translateY },
40      ],
41    }}>
42      {children}
43    </Animated.View>
44  );
45}