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

1import { Animated, Modal, View, Text, StyleSheet } from "react-native";
2
3function AnimatedModal({ visible, onClose, children }) {
4  const scaleAnim = useRef(new Animated.Value(0)).current;
5  const opacityAnim = useRef(new Animated.Value(0)).current;
6
7  useEffect(() => {
8    if (visible) {
9      Animated.parallel([
10        Animated.spring(scaleAnim, {
11          toValue: 1,
12          friction: 8,
13          useNativeDriver: true,
14        }),
15        Animated.timing(opacityAnim, {
16          toValue: 1,
17          duration: 300,
18          useNativeDriver: true,
19        }),
20      ]).start();
21    } else {
22      Animated.parallel([
23        Animated.timing(scaleAnim, {
24          toValue: 0,
25          duration: 200,
26          useNativeDriver: true,
27        }),
28        Animated.timing(opacityAnim, {
29          toValue: 0,
30          duration: 200,
31          useNativeDriver: true,
32        }),
33      ]).start();
34    }
35  }, [visible]);
36
37  return (
38    <Modal transparent visible={visible} onRequestClose={onClose}>
39      <View style={styles.overlay}>
40        <Animated.View style={{
41          opacity: opacityAnim,
42          transform: [{ scale: scaleAnim }],
43        }}>
44          <View style={styles.modalContent}>
45            {children}
46          </View>
47        </Animated.View>
48      </View>
49    </Modal>
50  );
51}