Margin Top for Header Bar in React Native Navigation

javascript react-native react-navigation

Pham Minh Tan · Jul 18, 2017 · Viewed 24.2k times · Source

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

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