Turnstile app screens header opacity interpolation

Settings.tsx

import { useHeaderHeight } from "@react-navigation/elements";
import { Stack } from "expo-router";
import { Platform, ScrollView, StyleSheet, View } from "react-native";
import Animated, {
  interpolate,
  useAnimatedScrollHandler,
  useAnimatedStyle,
  useSharedValue,
} from "react-native-reanimated";
import { useTheme } from "src/context/ThemeProvider";
import { Sizing } from "src/styles";

const AnimatedScrollView = Animated.createAnimatedComponent(ScrollView);

const Settings = () => {
  const { theme } = useTheme();

  const headerHeight = useHeaderHeight();
  const scrollY = useSharedValue(0);
  const scrollHandler = useAnimatedScrollHandler({
    onScroll: (e) => {
      scrollY.value = e.contentOffset.y;
    },
  });

  const animatedStyles = useAnimatedStyle(() => {
    const opacity = interpolate(
      scrollY.value,
      Platform.OS === "android" ? [headerHeight, 100] : [35, headerHeight],
      [0, 1]
    );

    return {
      opacity,
    };
  });

  return (
    <View
      style={[styles.container, { backgroundColor: theme.background["100"] }]}
    >
      <Stack.Screen
        options={{
          headerTitle: () => (
            <Animated.Text
              style={[
                styles.headerTitle,
                animatedStyles,
                { color: theme.text["100"] },
              ]}
            >
              Settings
            </Animated.Text>
          ),
        }}
      />
      <AnimatedScrollView
        onScroll={scrollHandler}
        scrollEventThrottle={16}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  headingContainer: {
    paddingBottom: Sizing.base,
    paddingTop: Platform.OS === "android" ? Sizing.xxl : 0,
  },
  headerTitle: {
    fontWeight: Platform.OS === "android" ? "500" : "600",
    fontSize: Sizing.base,
    marginHorizontal: Sizing.xs,
  },
});

export default Settings;