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 have a fix for this?

Answer 1

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 2

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 3

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)

Answer 4

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.