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

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