NativeBase + Exponent Header

Question

I\'m using NativeBase with Exponent. The Header goes beneath the phone\'s StatusBar. You can see this in the NativeBase demo that Exponent released.

Does anyone

Answer 1

I ended up adding a marginTop with the value of the device's StatusBar.

import {
  StatusBar,
} from 'react-native'

In my global stylesheet:

header: {
  marginTop: StatusBar.currentHeight,
}

Answer 2

Old post but recently I've faced same issue with Expo. And I overcome this issue by adding this line to app.json file.

"androidStatusBar": { "backgroundColor": "#000000" }

app.json file

{
  "expo": {
    "name": "You App Name",    
    "androidStatusBar": {
      "backgroundColor": "#000000"
    }
  }
}

That solved my issue. I think this may help to others.

Answer 3

Since this issue only comes up in Android, the recommended way to fix this would be to target Android specifically using Platform :

import {Platform, StatusBar} from 'react-native'

const styles = StyleSheet.create({
    container: {
            flex: 1,
            ...Platform.select({
                android: {
                    marginTop: StatusBar.currentHeight
                }
            })

        }
})

Where container is the main container in the app.

<View style={styles.container}>
 // rest of the code here
</View>

Answer 4

There is a simple solution for this problem just import StatusBar component and use this tag:

<StatusBar hidden />

for example in a page:

/*
  Page with no statusbar
*/
import React, {Component} from 'react'
import {Platform, View, Text, StatusBar} from 'react-native'

export default class App extends React.Component{
  render(){
    return(
        <View>
        <StatusBar hidden />
         <Text> Hello World </Text>
        </View>
    );
  }
}

This Component work well with expo and react-native-cli latest virsions. for more help you can use ReactNative docs for StatusBar

Answer 5

I found a better way to handle this using the StyleProvider with my theme, and then into de components folder (native-base-theme/components) found the Header.js file and change the paddintTop value (around 305 line)