React Native: How to use the Animated API for a header animation on scroll?

1import { Animated, ScrollView, View, Text, StyleSheet } from "react-native";
2
3function ScrollHeader() {
4  const scrollY = useRef(new Animated.Value(0)).current;
5
6  const headerHeight = scrollY.interpolate({
7    inputRange: [0, 200],
8    outputRange: [200, 60],
9    extrapolate: "clamp",
10  });
11
12  const headerOpacity = scrollY.interpolate({
13    inputRange: [0, 150, 200],
14    outputRange: [1, 0.5, 0],
15    extrapolate: "clamp",
16  });
17
18  const titleScale = scrollY.interpolate({
19    inputRange: [0, 200],
20    outputRange: [1, 0.8],
21    extrapolate: "clamp",
22  });
23
24  return (
25    <View style={styles.container}>
26      <Animated.View style={{
27        height: headerHeight,
28        backgroundColor: "#333",
29        justifyContent: "center",
30        alignItems: "center",
31      }}>
32        <Animated.Text style={{
33          opacity: headerOpacity,
34          transform: [{ scale: titleScale }],
35          color: "white",
36          fontSize: 24,
37        }}>
38          Header Title
39        </Animated.Text>
40      </Animated.View>
41      <Animated.ScrollView
42        onScroll={Animated.event(
43          [{ nativeEvent: { contentOffset: { y: scrollY } } }],
44          { useNativeDriver: false }
45        )}
46      >
47        <View style={styles.content}>
48          <Text>Scroll content</Text>
49        </View>
50      </Animated.ScrollView>
51    </View>
52  );
53}