Animate navigation header opacity while scrolling in ScrollView in React Native?

Question

I need your help for animation in React native. In my screen, I want to change opacity of navigation header 0 to 1 when I scroll up.

Here is code in Snack

I declare animated value in HomeScreen like this.

In Homescreen.js

export const translationY = new Value(0)

Why I am using 'export' is to use animated value in navigation header

In HomeStackNavigator.js file

import {translationY} from './HomeScreen';

const forFade = () => {
  const opacity = interpolate(translationY, {
    inputRange: [
      0,
      BUTTON_CONTAINER_HEIGHT - 100,
      height - getStatusBarHeight(),
    ],
    outputRange: [0, 1, 1],
    extrapolate: Extrapolate.CLAMP,
  });
  return {
    backgroundStyle: {opacity},
  };
};

export function HomeStack() {
  return (
    <Stack.Navigator initialRouteName="Intro" headerMode="screen">
      <Stack.Screen name="Intro" component={IntroScreen} />
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{
          headerStyleInterpolator: forFade,
        }}
      />
    </Stack.Navigator>
  );
}

The other animatio in HomeScreen works. But animation doesn't work in navigation header. How can I do this? What am I missing? Is it problem exporting animated value(translationY)?