Margin Top for Header Bar in React Native Navigation

user_4246507 0
Viewed 37092

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.

enter image description here

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

react-navigation react-native javascript
8 Answers

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

user_92233280

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

In my case, StatusBar will cause this problem.

to fix that:

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

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

user_146086540

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
   }
});
user_12620450

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
  },
});
user_21599790
Related