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

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