LargeHeader.md

Large Header Style Animation on Android

Code

import { Text, View } from "react-native";
import Animated, {
  Extrapolation,
  interpolate,
  useAnimatedScrollHandler,
  useAnimatedStyle,
  useSharedValue,
} from "react-native-reanimated";
import { useSafeAreaInsets } from "react-native-safe-area-context";

export default function LargeHeader() {
  const scrollY = useSharedValue(0);
  const { top } = useSafeAreaInsets();

  const onScroll = useAnimatedScrollHandler({
    onScroll: (event) => {
      scrollY.value = event.contentOffset.y;
    },
  });

  const largeTitleStyle = useAnimatedStyle(() => {
    const opacity = interpolate(
      scrollY.value,
      [0, 45],
      [1, 0],
      Extrapolation.CLAMP
    );
    return { opacity };
  });

  const smallHeaderStyle = useAnimatedStyle(() => {
    const opacity = interpolate(
      scrollY.value,
      [45, 80],
      [0, 1],
      Extrapolation.CLAMP
    );
    const translateY = interpolate(
      scrollY.value,
      [40, 80],
      [20, 0],
      Extrapolation.CLAMP
    );
    return {
      opacity,
      transform: [{ translateY }],
    };
  });

  return (
    <View
      style={{ flex: 1, paddingHorizontal: 10, backgroundColor: "#ffffff" }}
    >
      <Animated.View
        style={[
          {
            position: "absolute",
            top: 0,
            left: 0,
            right: 0,
            height: 100,
            paddingTop: top,
            backgroundColor: "#ffffff",
            alignItems: "center",
            justifyContent: "center",
            zIndex: 1,
          },
          smallHeaderStyle,
        ]}
      >
        <Text style={{ fontSize: 20, fontWeight: "600" }}>Notes</Text>
      </Animated.View>
      <Animated.ScrollView
        scrollEventThrottle={16}
        onScroll={onScroll}
        contentContainerStyle={{
          paddingBottom: 50,
        }}
        showsVerticalScrollIndicator={false}
      >
        <Animated.View
          style={[
            {
              paddingTop: 120,
              paddingBottom: 25,
              paddingLeft: 10,
            },
            largeTitleStyle,
          ]}
        >
          <Text style={{ fontSize: 36, fontWeight: "500" }}>Notes</Text>
        </Animated.View>
        {Array.from(Array(30).keys()).map((i) => (
          <View
            key={i}
            style={{
              height: 100,
              borderRadius: 12,
              marginBottom: 16,
              backgroundColor: "#f0f0f0",
            }}
          />
        ))}
      </Animated.ScrollView>
    </View>
  );
}