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

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