How can I use Top Navigator and Bottom Navigator without having Top Navigator overlap with the Status Bar in React Navigation?

Question

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.

Answer 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
  }
});