Disable animation for a custom header in React Navigation

Question

I would like to disable the screen animation for the header part of the Stack Navigator.

I have a common custom Header defined in the Stack Navigator via screenOptions.

And have default animations for screen transitions. I want to make sure the animation happens only to the screen and not to my header component. Since the header will a static content.

I've also tried making the headerMode as screen and float but that did not help. I wanted to see if there is a property similar to animationEnabled but for the header component.

<Stack.Navigator
  screenOptions= {{
    headerMode: 'screen',
    animation: 'fade',
    header: (props) =>
        <Header {...props} />
  }}>
  // Rest of my screens
</Stack.Navigator>

Answer 1

What you could do is completely separate the header from your Navigator, and use a ref to control navigation from it. Something like this:

const App = () => {
  const navigationRef = useNavigationContainerRef()

  return (
    <View>
      <Text>This header won't animate!</Text>
      <Text onPress={() => navigationRef.navigate('Home')}>Link</Text>
    </View>
    <NavigationContainer ref={navigationRef}>
      <Stack.Navigator screenOptions={{ headerShown: false }}>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Other" component={OtherScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  )
}