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

1import { Animated } from "react-native";
2
3const slideAnim = useRef(new Animated.Value(100)).current;
4
5useEffect(() => {
6  Animated.spring(slideAnim, {
7    toValue: 0,
8    friction: 8,
9    useNativeDriver: true,
10  }).start();
11}, []);
12
13<Animated.View
14  style={{
15    transform: [{ translateY: slideAnim }],
16    opacity: slideAnim.interpolate({
17      inputRange: [0, 100],
18      outputRange: [1, 0],
19    }),
20  }}
21>
22  <Text>Slide in content</Text>
23</Animated.View>

1const slideAnim = useRef(new Animated.Value(-300)).current;
2
3Animated.timing(slideAnim, {
4  toValue: 0,
5  duration: 500,
6  useNativeDriver: true,
7}).start();
8
9<Animated.View
10  style={{ transform: [{ translateX: slideAnim }] }}
11>
12  <Text>Content</Text>
13</Animated.View>