0

I am trying to nest a top navigator within a bottom navigator in react navigation. However when I do that, the top navigator collides with the status bar. I'm assuming it's because the bottom navigator is pushing it up. But how can I make it so both navigators show up, alongside the status bar? Below is an image of the overlapping issue. I'm using react navigation 5 and any other solution uses older versions which I've tried and don't work.

By the way I'm coding this on an iPhone 11 if that info is needed.

enter image description here

mcabrejos24
  • 33
  • 4

1 Answers1

1

You should set your app container styles to have a marginTop value equal to the status bar height. Then your whole app will show below the status bar.

Something like this:

import Constants from "expo-constants";

...

const styles = StyleSheet.create({
  container: {
    marginTop: Constants.statusBarHeight
  }
});
Jono
  • 627
  • 4
  • 8
  • I tried adding that to the navigation container but it doesn't work. with react navigation 5 it doesn't use appContainer and I'm using functional components like it the new documentation shows, not sure if that's why it wont work or not? – mcabrejos24 Jul 10 '20 at 19:01
  • wait actually I added it to the createMaterialTopTabNavigator.Navigator and it worked there! thank youo – mcabrejos24 Jul 10 '20 at 20:14