Not able to use Animated to animate the transparency of the header.

Description

I am trying to make the React Navigation header change it’s transparency from 0 to .95 and back to 0 while scrolling up and down. I have followed many different methods to get this working but it does not work with the createNativeStackNavigator, but it does work with createStackNavigator.

I surmise this is because the way it gets handled is adding the opacity to the headerBackground, which does not exist with the Native Stack.

I have also noticed that when scrolling I do not see the change in the headerOpacity value when I try log it in the useEffect hook. It only does it once, and never calls it again.

Code

const headerOpacity = yOffset.interpolate({
  inputRange: [0, 200],
  outputRange: [0, 1],
  extrapolate: "clamp",
});

<Animated.ScrollView
  onScroll={Animated.event(
    [
      {
        nativeEvent: {
          contentOffset: {
            y: yOffset,
          },
        },
      },
    ],
    { useNativeDriver: true }
  )}
  scrollEventThrottle={16}
>

useEffect(() => {
  navigation.setOptions({
    headerStyle: {
      opacity: headerOpacity,
    },
    headerBackground: () => (
      <Animated.View
        style={{
          backgroundColor: "white",
          ...StyleSheet.absoluteFillObject,
          opacity: headerOpacity,
        }}
      />
    ),
    headerTransparent: true,
  });
}, [headerOpacity, navigation]);

Package versions

• Expo: 38.0.0
• React: 16.11.0
• React Native: 0.63
• React Native Screens: 2.9.0

[xmflsct]

@WoLewicki Sure!

So my stack has one screen like this:

    const [opacity, setOpacity] = useState(0)

    <Stack.Screen
      name='name'
      options={({ navigation }) => {
        return {
          headerTranslucent: true,
          headerStyle: {
            backgroundColor: `rgba(255, 255, 255, ${opacity / 200})`
          },
          headerCenter: () => null,
          )
        }
      }}
    >
      {({ route }) => (
        <SomeComponent route={route} setOpacity={setOpacity} />}
    </Stack.Screen>

And then in my component:

    <ScrollView
      bounces={false}
      onScroll={({nativeEvent}) => setOpacity(nativeEvent.contentOffset.y)}
      scrollEventThrottle={10}
    >
      ......
    </ScrollView>

[WoLewicki]

I am closing it due to no response in more than 30 days and I am not sure if there is something more to be done here. Feel free to comment to reopen it.