Double headers are shown

[DanielHosseini]

Current Behavior I'm currently facing a problem with IOS, where two app bar headers are shown. On my local dev setup, it's working perfectly fine on Android, where only one Header is shown. However, when running the same code on an iPhone, two headers are shown.

When creating a Snack, I can also see that the problem is on both an Android and iPhone device.

Expected Behavior I expect that on IOS only one header is shown, just like on my local Android development setup.

Android Device

On IPhone: ´

Also, when trying to add headderMode='none' or showHeader: false it will remove the custom header and not the default one

headerMode = none or showHeader = false

How to reproduce

• [Snack] https://snack.expo.io/@danielhosseini/tactless-nachos

Your Environment

software	version
iOS or Android	BOTH
@react-navigation/native	5.8.9
@react-navigation/stack	5.12.6
react-native-gesture-handler	1.7.0
react-native-safe-area-context	3.1.4
react-native-screens	- 2.10.1
react-native	0.63
expo	39.0.4
node	12.18.0
npm or yarn	yarn

[TheWirv]

Do you have a drawer? If yes, it is probably because of this commit. I have the same problem. For now, just set the headerShown prop of your DrawerNavigator to false.

In the mean time: @satya164, is there any particular reason, why headerShown eventually has been defaulted to true, thus breaking quite a few apps that maybe have been updated withouth looking too closely at the changelogs?

[DanielHosseini]

@TheWirv I do have a Drawer as shown in the Expo snack. Is there even an headerShown option available in the DrawerNavigation?

[TheWirv]

@DanielHosseini Did you have a look at my link?

@react-navigation/drawer v5.11.0 introduced the headerShown property via commit dbe961. Then, commit 7bc385 defaulted it to true. It's part of the navigation options, so you have to add options={{headerShown: false}} to all the screens inside your <Drawer.Navigator>.

[DanielHosseini]

@TheWirv Yeah, I did.

Hmm, but I'm running the @react-navigation/drawer": "^5.9.3" (which probably gets the 5.11.xx version due to ^) in the Expo snack. Adding headerShown = false will just remove the custom bar and not the default bar as I show in the pictures above.

So your solution works in a way, but it still removes the custom app bar, which is not the correct behavior. It should keep the Custom header and hide the default one if a custom one is provided

[TheWirv]

@DanielHosseini

1. "^5.9.3" installs the most recent version that's equal to or newer than 5.9.3, but not above 5.x.x. For example, 6.0.1 would not be installed, but on a fresh project, without a yarn.lock file, it would install 5.11.2, as of the time of writing this comment. (Have a look at this for more information.)
2. If you set headerShown: false to the Drawer.Screen in your snack, it will hide the header that you don't want. So what exactly is the problem?

[DanielHosseini]

@TheWirv

Tried doing on my local project and not it in the expo. I'm using Typescript and I'm not getting any IntelliSense headerShown in the options object so that's why I'm a little confused. However, if I add it, it seems to work as you said. Thanks!

Still a bit annoying, been spending a couple of hours on this :/

EDIT: Probably need to re-install stuff, it should be in the type defs :)

[TheWirv]

@DanielHosseini I have saved your snack under a separate link with one change: I gave the <Drawer.Screen /> the property options={{headerShown: false}}. Isn't this exactly what you want?

[TheWirv]

I am using TypeScript too. It has not been any problem for me. You should maybe restart your TS server. While you have a TS file open, press Ctrl/Cmd+Shift+P. Then just start typing restart and you'll find it.

Also, since all of react-navigation is built in TypeScript, "the type defs" shouldn't be a problem. Just make sure in your package.json that you have the most recent versions of the navigation packages you want/need, and then maybe even check the actual packages inside ./node_modules to verify that. Then, after you restart the TS server, it should, in theory, be fine.

[DanielHosseini]

@TheWirv The restart worked wonders.

Thanks a lot for the help!

[TheWirv]

No thing, glad I could help!

@satya164 I would still be interested to know whether it is necessary to default headerShown for drawer screens to true.

[pke]

I agree, such breaking changes should not be introduced in a minor version.

You guys planning to apply for the beta "discussions" feature here at GH? The answer rate of StackOverflow questions regarding this lib (especially v5) is kind of low.

[satya164]

Thanks for the feedback folks. It should be hidden in latest version.

You guys planning to apply for the beta "discussions" feature here at GH

Not sure if it's available publicly, but we'll enable it once it's available.

[gavinolsen]

I'm still seeing in version ^6.1.8

[github-actions[bot]]

Hey! This issue is closed and isn't watched by the core team. You are welcome to discuss the issue with others in this thread, but if you think this issue is still valid and needs to be tracked, please open a new issue with a repro.

[yorickshan]

I'm still seeing in version ^6.3.2, if set options={{headerShown: false}}, two headers are both removed

[umrashrf]

Putting the following CSS on top container of Drawer.Screen helped me.

topContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: "#fff"
},

I don't understand exactly what it does but it removed or overlapped the double header and made it a single header. In my case, I had to use a header on the screen and a global navigator header to be hidden.

Edited: I also have 2nd level container height set to hp(100). More code below.

return <View style={styles.topContainer}>
<SafeAreaView style={{ height: hp(100) }}>
</SafeAreaView>
</View>;