NativeBase + Exponent Header

Question

I am using NativeBase with Exponent. The header lights up under the StatusBar status. You can see this in the demo version of NativeBase released by Exponent.

Who has a fix for this?

Answer 1

Since this problem only occurs in Android, the recommended way to fix it will target Android specifically using the Platform :

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

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

        }
})

Where the container is the main container in the application.

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

Answer 2

I ended up adding marginTop with a StatusBar status value.

import {
  StatusBar,
} from 'react-native'

In my global stylesheet:

header: {
  marginTop: StatusBar.currentHeight,
}

Answer 3

I found a better way to handle this using StyleProvider with my theme, and then in the components folder (native-base-theme / components) I found the Header.js file and changed the value of paddintTop (about 305 lines)