Support for hiding navigation header when headerMode: float

[satya164]

Currently it's supported only with headerMode: screen. We should support it on float also and hide the header with animation.

[satya164]

Let's merge headerMode: 'none' | 'screen' | 'float' and header.visible: boolean, to header.mode: 'none' | 'screen' | 'float'.

[grabbou]

@ericvicenti ^ ?

[ericvicenti]

Only problem I see is that header.visible changes the header on a per-screen basis, and headerMode changes it for the whole navigator. What happens if you transition from a float screen to a screen with mode: 'screen'?

The animation for that isn't very easy.. what would it look like?

[satya164]

@ericvicenti the only difference between them is when the animation is happening, right? it shouldn't be visible if changed just before the animation starts, .i.e when the state changes.

[ericvicenti]

To be clear, you are suggesting to have the floating header simply hide when the next header.mode:screen screen enters? Such that either A) the floating header instantly disappears, or B) both headers are visible during the transition?

Depending on the animation implementation, B might be quite nice.

[si-harps]

Working on a similar transition, I would love to see B implemented

[pvinis]

i would like to be able to hide the header when the mode is float. we could just have it as is now, and just enable the hiding. i guess thats simpler than the suggestions above.

[ms88privat]

With react-router-flux it was working quite well for my use case: Starting of with no header visible on the main screen. Then navigate to the next screen by using the "screen mode animation", which will have a header. All animations ontop of this view are of type "float" then

[pvinis]

yea i was using react native router flux too. feels more native now, but also feels weirdly set up. the api of flux is better I think. I like some stuff here but even though this is muuuuuch better than previous navigator attempts, it still feels half way there. I guess it will get better with time :)

[backnotprop]

 static navigationOptions = {
    header: {
      style: { position: "absolute" }
    }
  };

Anyone see any problems with using this hack in order to hide the header on a specific view?

[fritz-c]

@mdramos I gave that a try, and it shifted down the content of the hidden header page during the animation.

[lprhodes]

I'll be working on this in the morning. I'll keep you posted!

[lprhodes]

Having worked on this today I think it needs some further discussion.

To fit into what's already in the code I worked on a method named "shouldEmbedHeader" which determines whether the header should float outsides all scenes or sit inside the current scene depending on the navigationOptions of the current scene and the one previously shown.

When we transition from headerVisible: false to headerVisible: true it keeps the header inside the view (as if it were mode: 'screen') but then seamlessly swaps it out to a floating header when the transition is complete.

There's various edge cases to deal with so it's not ready to release but I'm concerned that it already feels very much like a hack so I'd like to get some thoughts from the core developers.

@skevy @grabbou @satya164 @cooperka

[lprhodes]

...to be clear I'm attempting to allow any combination of modes and visible header and allowing for modal as we can natively.

[montaserfzy]

There are may hacks
Try this solution

const style = StyleSheet.create({ hideText:{ display:"none" } })

static navigationOptions = { header: <Text style={style.hideText} ></Text> };

[mymai91]

static navigationOptions = {
    header: null
}

[nicoara]

complete solution:
app.js:

auth: {
  screen: StackNavigator({
    auth: { screen: AuthScreen },
    login: { screen: LoginScreen }
  })
},

auth: (shows no header)

class AuthScreen extends Component {
	static navigationOptions = {
		header: null
	}

login: (shows header)
class Login extends Component {...

[nicoara]

@fritz-c did you find a solution? or switched to another navigation library?

[brentvatne]

check out this example: https://github.com/react-navigation/react-navigation/blob/master/examples/NavigationPlayground/js/StackWithHeaderPreset.js

you can hide header on specific screens and it will transition as expected between header/no header

[Nevtep]

Why is this issue closed? on Android the header is still shown even thou I set header: () => null (just setting it to null will throw errors for me). the screen is moved up as id there where no header when I set this but the floating header is still visible.

<Stack.Navigator
        initialRouteName="Register"
        mode="modal"
        headerMode="float"
        screenOptions={{
            header: ({ scene, previous, navigation }) => (
              <NavMenu handleDrawerMenu={handleToggleDrawer}/>
            ),
        }}
    >
      <Stack.Screen
        name="Register"
        component={RegisterRecyclablesFormScreen}
        options={{ headerTitle: 'Register' }}
      />
      <Stack.Screen
        name="Scan"
        component={ScanBarcodeScreen}
        options={{
          header: () => null,
        }}
      />
</Stack.Navigator>

@lprhodes Could there be some clarification as to how to hide a header that works with headerMode = 'float'?

[Guiw5]

I've tried to use this on the screen that overrides the float header... but doesn't works!
React.useLayoutEffect(() => {
navigation.setOptions({
headerShown: false,
});
}, [navigation]);

any workaround for this in v5???