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

Possible duplicate of [React Native Expo StackNavigator overlaps Notification bar](https://stackoverflow.com/questions/45044941/react-native-expo-stacknavigator-overlaps-notification-bar) — Michael Cheng, Jul 18 '17 at 17:26

Poptocrack · Answer 1 · 2020-06-01T17:36:11.893

15

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

edited Jun 01 '20 at 17:36

answered Jul 18 '17 at 15:46

Poptocrack

2,879
1
12
28

2

This doesn't work as well on iOS. [Accepted answer to the duplicate](https://stackoverflow.com/a/45045132/383414) works better on both platforms i.e. `marginTop: StatusBar.currentHeight` – Richard Le Mesurier Nov 23 '17 at 13:11
@RichardLeMesurier According to the [React Native site](https://facebook.github.io/react-native/docs/statusbar.html#constants) `currentHeight (Android only) The height of the status bar`. So that solution doesn't seem to be working on iOS. – Charlie Fish Jan 25 '18 at 21:19
@CharlieFish RN changes so quickly, but when I made that comment, I was developing an Expo app on an iPhone 4c and Android Nexus 5 and got a better experience with the duplicate as said. But this is an every-flowing technology we are working on for better or worse. – Richard Le Mesurier Jan 26 '18 at 08:59
for Ios use – Rokas Devolskis Apr 01 '20 at 16:25
`import Constants from 'expo-constants'` – Alon Dahari Jun 01 '20 at 17:33

score 9 · Answer 2 · edited Jun 15 '20 at 16:57

9

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

edited Jun 15 '20 at 16:57

instanceof

1,404
23
30

answered Mar 08 '19 at 12:29

Ahmad Khoja

483
6
10

score 4 · Answer 3 · answered Jul 30 '18 at 17:47

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
  }
}

nima · Answer 4 · 2023-07-02T20:20:16.850

3

In my case the StatusBar component cause this problem.

set translucent props to false

<StatusBar
        animated={true}
        backgroundColor={Styles.statusBar.color}
        barStyle={barStyle}
        hidden={false}
        networkActivityIndicatorVisible={true}
        showHideTransition="fade"
        translucent={false} // <----------------- add false to translucent
      />

edited Jul 02 '23 at 20:20

answered Dec 29 '20 at 13:51

nima

7,796
12
36
53

score 2 · Answer 5 · answered Mar 22 '18 at 17:08

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.

score 2 · Answer 6 · answered Oct 14 '21 at 17:07

2

For me, it was as simple as include the property "headerStatusBarHeight" with the value I wanted.

const  defaultHeaderConfig = {
    headerStatusBarHeight: 20,
    headerTintColor: "white",
    headerStyle:{
        backgroundColor: "blue"
    }
}

answered Oct 14 '21 at 17:07

Mariana Reis Silveira

131
5

score 0 · Answer 7 · answered Jan 14 '19 at 16:45

If you are using Expo,you can use Platform from expo core so :

import { Constants } from "expo";
import { Platform } from "expo-core"; //inside of Platfrom from 'react-native'

after that create an stylesheet:

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

score 0 · Answer 8 · answered Sep 23 '19 at 05:43

With Expo, you could use Constants:

import Constants from 'expo-constants';

const styles = StyleSheet.create({
  container: {
    marginTop: Constants.statusBarHeight
  },
});

You can also use the StatusBar component from ReactNative:

import { StatusBar } from 'react-native';

const styles = StyleSheet.create({
  container: {
    marginTop: StatusBar.currentHeight
  },
});

Margin Top for Header Bar in React Native Navigation

8 Answers8