React native + expo topbar Material navigation leaves gap at top - reactjs

Question

I'm trying to add a tabbed navigation to a React Native app, also using expo if that matters, and whenever I do this I get a big chunk of white at the top of the screen. I'm not seeing what's causing this though, the status bar background shouldn't be pushing it down and as far as I can tell changing the height style of my navigation or main view doesn't do anything.
This looks like:
The complete source to recreate this is:
// utils/colors.js
export const white = '#fff'
export const orange = '#f26f28'
// App.js
import React, { Component } from 'react'
import { StyleSheet, View, StatusBar, Dimensions } from 'react-native'
import {
createMaterialTopTabNavigator,
createStackNavigator
} from 'react-navigation'
import { Constants } from 'expo'
import List from './components/List'
import Add from './components/Add'
import { orange, white } from './utils/colors'
function StatusBarBackground ({ backgroundColor, ...props }) {
return (
<View style={{ backgroundColor, height: Constants.statusBarHeight }}>
<StatusBar translucent backgroundColor={backgroundColor} {...props} />
</View>
)
}
const Tabs = createMaterialTopTabNavigator({
List: {
screen: List,
navigationOptions: {
tabBarLabel: 'List',
},
},
Add: {
screen: Add,
navigationOptions: {
tabBarLabel: 'Add',
},
},
}, {
navigationOptions: {
header: null
},
tabBarOptions: {
activeTintColor: white,
style: {
height: 56,
backgroundColor: orange,
shadowColor: 'rgba(0, 0, 0, 0.24)',
shadowOffset: {
width: 0,
height: 3
},
shadowRadius: 6,
shadowOpacity: 1
}
}
})
const MainNavigator = createStackNavigator({
Home: {
screen: Tabs,
},
})
export default class App extends Component {
render() {
return (
<View style={{flex: 1}}>
<StatusBarBackground backgroundColor={orange} barStyle="light-content" />
<MainNavigator />
</View>
)
}
}
The Add and List components are just a view with a text, both look similar to this:
import React, { Component } from 'react'
import { View, Text } from 'react-native'
class Add extends Component {
render() {
return (
<View>
<Text style={{fontSize: 20}}>Add</Text>
</View>
)
}
}
export default Add

Answer 1

You are adding Your Tab Navigator inside Stack Navigator, That is why that white header is showing from Stack Navigator.
1) If You want to add header then style your header like below
const MainNavigator = createStackNavigator({
Home: {
screen: Tabs,
},
},{
navigationOptions:{
headerStyle : {
backgroundColor:'#243346'
},
headerTintColor:"#fff"
},
})
2) If you want to remove header then you can either remove your Tab Navigator from Stack Navigator or add headerMode:'none' inside navigationOprions object.