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

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.

 // rest of the code here