React Native: How to use the Animated API for a parallax scroll effect?

1import { Animated, ScrollView, View, StyleSheet, Image } from "react-native";
2
3function ParallaxScreen() {
4  const scrollY = useRef(new Animated.Value(0)).current;
5
6  const headerTranslate = scrollY.interpolate({
7    inputRange: [0, 200],
8    outputRange: [0, -100],
9    extrapolate: "clamp",
10  });
11
12  const headerOpacity = scrollY.interpolate({
13    inputRange: [0, 200],
14    outputRange: [1, 0],
15    extrapolate: "clamp",
16  });
17
18  return (
19    <View style={styles.container}>
20      <Animated.View style={{
21        transform: [{ translateY: headerTranslate }],
22        opacity: headerOpacity,
23      }}>
24        <Image source={{ uri: "hero.jpg" }} style={styles.hero} />
25      </Animated.View>
26      <Animated.ScrollView
27        onScroll={Animated.event(
28          [{ nativeEvent: { contentOffset: { y: scrollY } } }],
29          { useNativeDriver: true }
30        )}
31      >
32        <View style={styles.content}>
33          <Text>Scroll content here</Text>
34        </View>
35      </Animated.ScrollView>
36    </View>
37  );
38}