Header grows after rendering inside react native application

Question

I am creating an application using react native/expo, using react-navigation for navigation.

I need a bottom tab navigator, and for every tab i need a stack navigator. I have followed the example on the website and it functionally works fine. (https://reactnavigation.org/docs/en/tab-based-navigation.html)

Everytime i select a different stack from on the tab navigator the new header renders (great)! but it then grows as if its adding padding to compensate for the status bar.

is there any way to solve this?

thankyou.

satya164 satya164 · Accepted Answer · 2020-01-17T02:50:31

You can add the following to remove extra statusbar height for all screens in a navigator:

const MyStack = createStackNavigator({
 // screens
}, {
  defaultNavigationOptions: {
    headerStatusBarHeight: 0
  }
});

Or you can do it per screen:

static navigationOptions = {
  headerStatusBarHeight: 0
}

You can also specify a custom value if you need.

Header grows after rendering inside react native application

1 Answers