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

1import { Animated } from "react-native";
2
3function FadeOutView({ visible, children }) {
4  const fadeAnim = useRef(new Animated.Value(1)).current;
5  const slideAnim = useRef(new Animated.Value(0)).current;
6
7  useEffect(() => {
8    Animated.parallel([
9      Animated.timing(fadeAnim, {
10        toValue: visible ? 1 : 0,
11        duration: 300,
12        useNativeDriver: true,
13      }),
14      Animated.timing(slideAnim, {
15        toValue: visible ? 0 : 30,
16        duration: 300,
17        useNativeDriver: true,
18      }),
19    ]).start();
20  }, [visible]);
21
22  return (
23    <Animated.View style={{
24      opacity: fadeAnim,
25      transform: [{ translateY: slideAnim }],
26    }}>
27      {children}
28    </Animated.View>
29  );
30}