Margin Top for Header Bar in React Native Navigation

Question

I'm new in React Native. I'm using React-Navigation. But, on my device has problem with header navigation. This overlay by status bar like this.

This issue occur both on my code and from React Navigation showcase example. How to fix it? Thanks

Answer 1

You are using Expo, so this behavior is normal.

static navigationOptions = {
  title: "Welcome",
  headerStyle: { marginTop: 24 },
}

You can define your header like this.

Edit about a year later:

With Expo, you can now use this:

import Constants from 'expo-constants'

static navigationOptions = {
  title: "Welcome",
  headerStyle: { marginTop: Constants.statusBarHeight },
}

Install it with expo install expo-constants

More informations here in the expo doc

Answer 2

I found this useful when running in the same problem

export default StackNavigator({
    LoginScreen: { screen: Login.component }
}, {
    initialRouteName: 'LoginScreen',
    headerMode: 'none' // <------------- This line
})

Just add headerMode: 'none' in the configuration object

Hope this helps

By the way Credit goes to This Link

Answer 3

This should do what you want.

import {
  StyleSheet,
  View,
  Platform
} from 'react-native';
import { Constants } from 'expo';

const App = () => (
    <View style={styles.container}>
        // Your content with margin for statusBar goes here
    </View>
)

const styles = StyleSheet.create({
  container: {
    marginTop: Platform.OS === 'ios' ? 0 : Constants.statusBarHeight
  }
}

Answer 4

If you are using expo, try to set the navigation options like this

navigationOptions:{
  headerStyle:{
    marginTop: (Platform.OS === 'ios') ? 0 : Expo.Constants.statusBarHeight }
  }
}

With this the padding will only take affect in android platform. For more info you can visit link.