Scrollview with non fixed header

scrollview-non-fixed-header.tsx

import { useState } from 'react'
import Animated, {
  Extrapolation,
  interpolate,
  useAnimatedScrollHandler,
  useAnimatedStyle,
  useSharedValue,
} from 'react-native-reanimated'
import { Card, Text, View } from 'tamagui'

export default function () {
  const scrollValue = useSharedValue(0)

  const [headerHeight, setHeaderHeight] = useState(0)

  const scrollHandler = useAnimatedScrollHandler({
    onScroll: (evt) => {
      scrollValue.value = evt.contentOffset.y
    },
  })

  const headerAnimatedStyle = useAnimatedStyle(() => {
    return {
      transform: [
        {
          translateY: interpolate(
            scrollValue.value,
            [0, headerHeight],
            [0, -headerHeight],
            Extrapolation.EXTEND
          ),
        },
      ],
    }
  }, [scrollValue, headerHeight])

  return (
    <>
      <Animated.View
        style={[
          { position: 'absolute', left: 0, right: 0, zIndex: 999 },
          headerAnimatedStyle,
        ]}
        pointerEvents="box-none"
      >
        <View
          onLayout={(evt) => {
            setHeaderHeight(evt.nativeEvent.layout.height)
          }}
          pointerEvents="box-none"
        >
          <Text color="red">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta accusantium
            saepe ullam aliquam laudantium! Placeat in earum qui architecto similique
            perspiciatis expedita odit ut quibusdam nobis, animi odio tempore quisquam
            sint dolores deleniti possimus voluptatibus vitae officia quam ipsam totam
            libero sit eveniet? Placeat earum unde eius accusamus, illo ipsam.
          </Text>
        </View>
      </Animated.View>
      <Animated.ScrollView
        onScroll={scrollHandler}
        contentContainerStyle={{ gap: 4, paddingTop: headerHeight }}
      >
        {[...new Array(10)].map((_, index) => (
          <Card backgroundColor="$blue4" bordered p="$4" key={index}>
            <Text>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias facere nam
              hic aspernatur veritatis neque vel sed non, officiis perspiciatis temporibus
              nesciunt distinctio soluta! Nulla ducimus quibusdam amet distinctio? Quia.
            </Text>
          </Card>
        ))}
      </Animated.ScrollView>
    </>
  )
}