CODEWITHSUNDEEP
react-nativereact-navigation
Eshant Bist
Eshant Bist

Reputation: 1635

In nested react navigation, extra header space is coming at top

Extra empty header space is coming at top of screen

I tried making header null for posts screen but empty space is still coming for the other two screens.

enter image description here

 const Posts=createStackNavigator({
    Posts:{screen:createMaterialTopTabNavigator(screens,{
                        tabBarOptions: {
                          scrollEnabled: true,
                        },
                        animationEnabled:false,
                      })},
    VideoDetailScreen:{screen:VideoDetail},
    NewsDetailScreen:{screen:NewsDetail},
  });

  const AppContainer = createAppContainer(Posts);

Upvotes: 2

Views: 2956

Answers (4)

Narek Ghazaryan
Narek Ghazaryan

Reputation: 3123

It might come from StatusBar.

You can try setting headerStatusBarHeight: 0

<Stack.Screen
  options={{
    headerStatusBarHeight: 0,
  }}
  ...
/>

Upvotes: 0

Joelson Rocha
Joelson Rocha

Reputation: 163

If you use StatusBar with translucent options, you need to use in your screenOptions on Stack.Navigator, the option headerStatusBarHeight: 0

https://stackoverflow.com/a/69213691/7641774

Upvotes: 2

jayanth
jayanth

Reputation: 62

You need to pass headerMode:'none'

export default StackNavigator({
    LoginScreen: { screen: Login.component }
}, {
    initialRouteName: 'LoginScreen',
    headerMode: 'none' 
})

Upvotes: 0

bluenex
bluenex

Reputation: 349

I fixed following this workaround by adding an option to navigationOptions as follows:

navigationOptions: {
    ...
    headerForceInset: { top: 'never', bottom: 'never' },
},

Upvotes: 3

Related Questions