Expo Router GitHub-style header animation

Have the title scroll-in with the content like the GitHub app. This is pretty easy with the new Reanimated scrolling features.

Simulator.Screen.Recording.-.iPhone.16.-.2025-01-25.at.19.57.40.mp4

export default function Page() {
  const ref = useAnimatedRef();
  const scroll = useScrollViewOffset(ref);
  const navigation = useNavigation();
  const headerStyle = useAnimatedStyle(
    () => ({
      transform: [
        { translateY: interpolate(scroll.value, [0, 100], [50, 0], "clamp") },
      ],
    }),
    []
  );

  useEffect(() => {
    navigation.setOptions({
      headerTitle(props: HeaderTitleProps) {
        return (
          <View
            style={{
              overflow: "hidden",
              paddingBottom: 9,
              marginBottom: -9,
            }}
          >
            <Animated.View style={headerStyle}>
              <HeaderTitle {...props} />
            </Animated.View>
          </View>
        );
      },
    });
  }, [scroll]);

  return (
    <Animated.ScrollView ref={ref}>
      <Content />
    </Animated.ScrollView>
  );
}