React Native: How to use the Animated API for a scroll-driven animation?

1import { Animated, ScrollView, View, Text, StyleSheet } from "react-native";
2
3function ScrollAnimation() {
4  const scrollY = useRef(new Animated.Value(0)).current;
5
6  const opacity = scrollY.interpolate({
7    inputRange: [0, 200],
8    outputRange: [1, 0],
9    extrapolate: "clamp",
10  });
11
12  const scale = scrollY.interpolate({
13    inputRange: [0, 200],
14    outputRange: [1, 0.8],
15    extrapolate: "clamp",
16  });
17
18  return (
19    <View style={styles.container}>
20      <Animated.View style={{ opacity, transform: [{ scale }] }}>
21        <Text style={styles.header}>Header</Text>
22      </Animated.View>
23      <Animated.ScrollView
24        onScroll={Animated.event(
25          [{ nativeEvent: { contentOffset: { y: scrollY } } }],
26          { useNativeDriver: true }
27        )}
28        scrollEventThrottle={16}
29      >
30        <View style={styles.content}>
31          {Array.from({ length: 20 }).map((_, i) => (
32            <Text key={i}>Item {i + 1}</Text>
33          ))}
34        </View>
35      </Animated.ScrollView>
36    </View>
37  );
38}