React-native-navigation: [v6] Nesting Stack -> BottomTabs -> Stack creates empty space above topBar

[NBoychev]

Issue Description

Nesting Stack -> BottomTabs -> Stack creates empty space above topBar on iOS

Steps to Reproduce / Code Snippets / Screenshots

Reproduced in the playground app:
https://github.com/NBoychev/react-native-navigation/blob/master/playground/src/app.js

Screenshot:

---

Environment

• React Native Navigation version: 6.5.0
• React Native version: 0.62.2
• Platform(s): iOS
• Device info: Simulator iPhone 11 Pro and real device iPhone X 13.3.1

[ShabanovPavel]

Same. Only on ios. The problem in my opinion in SafeArea is two stacks. Checked for android everything is fine

#6132

[NBoychev]

I've just checked and can confirm that there's no issue on Android. What I've found is that on iPhone 8, where we don't have a notch, so SafeArea shouldn't apply, the issue is still presented.

[lkwjohn]

I have similar issue but it's on Android and the issue is bottom having too much empty space (shown in red) when I have the setting for the topBar:
topBar: { title, visible: true drawBehind:false, }
RN: 0.60.6
RNN: 6.9.0

Page Navigation to reach this page: Main Screen => Open new Screen

However, if I change the topBar setting to below the empty space reduced (shown in red)
topBar: { title, visible: false, drawBehind: true,

[ashokkumar88]

@lkwjohn did you find any workaround? I am facing the same issue.

[lkwjohn]

@ashokkumar88 sadly no, seems to me it's a bug introduced after 2.62.1. This only happen on Android.

[jinshin1013]

@NBoychev If you refer to the playground app, you can see that bottomTabs.children does not contain any stack layout. If you remove stack under bottomTabs.children, it will fix the issue for you 👍

[NBoychev]

@jinshin1013 , unfortunately, this doesn't resolve the issue. In my case, I want a structure of stack -> bottom tabs -> stack. It's a specific case, but I'm sure that others will also bump in the same. In the example, a stack is actually nested in the bottomTabs: https://github.com/wix/react-native-navigation/blob/master/playground/src/app.ts#L39

@guyca helped me to resolve the issue with the idea to use custom tabs, but I hope that I'll see this one fixed at some point, so I can transition to the native solution.

[jinshin1013]

@NBoychev My bad I said the wrong thing 😅 Meant to say, do not wrap BottomTabs with a Stack hahaha.
If you don't mind me asking, what's your use case of going Stack -> BottomTabs ??

[NBoychev]

@jinshin1013 , no worries :) it's actually more complicated: SideMenu -> Stack (like a home screen with items) -> Bottom tabs (each item has modules) -> Stack (each module has lists and list item detailed screens).