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

1import { Animated } from "react-native";
2
3function RotateOutView({ visible, children }) {
4  const rotateAnim = useRef(new Animated.Value(1)).current;
5  const fadeAnim = useRef(new Animated.Value(1)).current;
6
7  useEffect(() => {
8    Animated.parallel([
9      Animated.timing(rotateAnim, {
10        toValue: visible ? 1 : 0,
11        duration: 300,
12        useNativeDriver: true,
13      }),
14      Animated.timing(fadeAnim, {
15        toValue: visible ? 1 : 0,
16        duration: 300,
17        useNativeDriver: true,
18      }),
19    ]).start();
20  }, [visible]);
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}