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>