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?

i had the same issue mine mysteriously disappeared after running "yarn install" on the project — Alfred Alfizo Mosima, Apr 18 '18 at 08:26

Varun Nath · Accepted Answer · 2018-06-16T11:40:31.477

35

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>

edited Jun 16 '18 at 11:40

answered Sep 08 '17 at 04:31

Varun Nath

5,230
3
21
38

2

By far the best answer I have found so far! – Silex Sep 08 '17 at 16:51
1

Please fix `` by removing double brackets. You are assigning an object to style, not declaring one in-place. Edit for peer review must be at least 6 chars long therefore I can't edit it. – pbn Jun 15 '18 at 11:24
Thanks Varun. Works great fo rme. – Yossi Nov 08 '18 at 15:58

score 6 · Answer 2 · answered Feb 08 '17 at 01:50

6

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,
}

answered Feb 08 '17 at 01:50

Molly Harper

2,093
3
24
30

score 2 · Answer 3 · answered Aug 03 '18 at 08:35

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.

score 0 · Answer 4 · answered Jun 23 '17 at 16:38

0

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)

answered Jun 23 '17 at 16:38

nexthor1978

55
1
5

score 0 · Answer 5 · answered Jul 31 '19 at 11:12

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

NativeBase + Exponent Header

5 Answers5

Linked