Hide Custom Header in specific screen with headerMode float

Question

I have 3 screen in my app: "Home, Contacts, Profile". I created a custom header to show in Home and Contacts, but not in Profile screen. The problem is: my custom header don't hide in Profile Screen. If I remove my custm header to use the default header, it hides, but when I back to my custom header this doesn't happen.

App.js

       <NavigationContainer ref={navigationRef}>
            <Stack.Navigator
            headerMode="float"
            initialRouteName="Home"
            screenOptions={{ 
                header: props => <CustomHeader {...props} />
            }}>

                <Stack.Screen
                name="Home"
                component={Home}
                options={{
                    cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS    
                }}/>

                <Stack.Screen name="Contacts" component={Contacts}
                options={{
                    cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS    
                }}/>

                <Stack.Screen
                name="Profile"
                component={Profile}
                options={{
                    headerShown: false
                }} />  

            </Stack.Navigator>
        </NavigationContainer>

Answer 1

You can provide screen wise header like.

<NavigationContainer ref={navigationRef}>
  <Stack.Navigator
    headerMode="float"
    initialRouteName="Home">
    <Stack.Screen
      name="Home"
      component={Home}
      options={{
        cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
        header: (props) => <CustomHeader {...props} />
      }}
    />

    <Stack.Screen
      name="Contacts"
      component={Contacts}
      options={{
        cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
        header: (props) => <CustomHeader {...props} />
      }}
    />

    <Stack.Screen
      name="Profile"
      component={Profile}
      options={{
        headerShown: false,
        header: null,
      }}
    />
  </Stack.Navigator>
</NavigationContainer>;

Or you can create custom function for all header

function getHeader(route, props) {
  const routeName = route.state
    ?
      route.state.routes[route.state.index].name
    : || 'Home';

  switch (routeName) {
    case 'Home':
    case 'Contacts':
      return <CustomHeader {...props} />
    case 'Profile':
      return null;
  }
}

and use it like


 <Stack.Screen
      name="Profile"
      component={Profile}
      options={({ route }) => ({
        header: (props)=> getHeader(route, props),
      })}
    />

Source : https://reactnavigation.org/docs/screen-options-resolution