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

1import { Animated } from "react-native";
2
3function BounceOutView({ visible, children }) {
4  const bounceAnim = useRef(new Animated.Value(1)).current;
5
6  useEffect(() => {
7    Animated.sequence([
8      Animated.spring(bounceAnim, {
9        toValue: visible ? 1 : 1.2,
10        friction: 3,
11        useNativeDriver: true,
12      }),
13      Animated.spring(bounceAnim, {
14        toValue: visible ? 1 : 0,
15        friction: 1,
16        tension: 100,
17        useNativeDriver: true,
18      }),
19    ]).start();
20  }, [visible]);
21
22  return (
23    <Animated.View style={{
24      transform: [
25        { scale: bounceAnim },
26        { translateY: bounceAnim.interpolate({
27          inputRange: [0, 1],
28          outputRange: [50, 0],
29        }) },
30      ],
31    }}>
32      {children}
33    </Animated.View>
34  );
35}