Nativebase: Header Component overrides StatusBar

Created on 9 Jun 2018 · 7Comments · Source: GeekyAnts/NativeBase

When using the Header component it is overriding the StatusBar text theme to always be dark.

Is there a way to use the Header component but still override the StatusBar theme to have light-content?

Sample code below to test.

Here is the Snack I used for testing: https://snack.expo.io/BkcKiBtg7

screen shot 2018-06-09 at 8 40 44 am

Does NOT work:

import React, { Component } from 'react';
import { Text, View, StyleSheet, StatusBar } from 'react-native';

import { Header, Content } from 'native-base';

export default class App extends Component {
  render() {
    return (
      <View style={{flex:1, backgroundColor:'red'}}>
      <StatusBar barStyle="light-content" />
            <Header>
              <Text>Header</Text>
            </Header>

          <Content />

            </View>
    );
  }
}

DOES work (but have to disable the Header component with using a View):

import React, { Component } from 'react';
import { Text, View, StyleSheet, StatusBar } from 'react-native';

import { Header, Content } from 'native-base';

export default class App extends Component {
  render() {
    return (
      <View style={{flex:1, backgroundColor:'red'}}>
      <StatusBar barStyle="light-content" />
            <View>
              <Text>Header</Text>
            </View>

          <Content />

            </View>
    );
  }
}

awaiting response

Source

svallen

Most helpful comment

@svallen use iosBarStyle style props of header component. This will work for android too. Also try to use NativeBase components. Read about NativeBase screen structure here. Attaching a gif

Code

import React, { Component } from 'react';
import { Container, Header, Left, Body, Right, Button, Icon, Title } from 'native-base';
export default class HeaderExample extends Component {
  render() {
    return (
      <Container>
        <Header iosBarStyle={"light-content"}>
          <Left>
            <Button transparent>
              <Icon name='arrow-back' />
            </Button>
          </Left>
          <Body>
            <Title>Header</Title>
          </Body>
          <Right>
            <Button transparent>
              <Icon name='menu' />
            </Button>
          </Right>
        </Header>
      </Container>
    );
  }
}

Gif

header

akhil-geekyants on 11 Jun 2018

👍7

All 7 comments

@svallen use iosBarStyle style props of header component. This will work for android too. Also try to use NativeBase components. Read about NativeBase screen structure here. Attaching a gif

Code

import React, { Component } from 'react';
import { Container, Header, Left, Body, Right, Button, Icon, Title } from 'native-base';
export default class HeaderExample extends Component {
  render() {
    return (
      <Container>
        <Header iosBarStyle={"light-content"}>
          <Left>
            <Button transparent>
              <Icon name='arrow-back' />
            </Button>
          </Left>
          <Body>
            <Title>Header</Title>
          </Body>
          <Right>
            <Button transparent>
              <Icon name='menu' />
            </Button>
          </Right>
        </Header>
      </Container>
    );
  }
}

Gif

header

akhil-geekyants on 11 Jun 2018

👍7

Thanks for the quick response.

I also found out super late last night (after some deep-dive googling) that I can do this:

Header

Appreciate the response. I didn't see this in the documentation or the version that you had mentioned so perhaps that can be added to the documentation somewhere for its known better.

Thanks again.

svallen on 11 Jun 2018

This still has problems on Picker's Header as that part is not directly styleable.

itsnotvalid on 29 Aug 2018

👍3

Same question: How do I style the status bar of a popup that has been opened by a Picker?

jan-happy on 10 Oct 2018

👍2

@akhil-geekyants Thanks I was lost my many times in this problem. you solved

khilendra on 10 Apr 2019

@akhil-geekyants same code is not working for me.

import React, { Component } from 'react';
import { Container, Header, Left, Body, Right, Button, Icon, Title } from 'native-base';
export default class HeaderExample extends Component {
  render() {
    return (
      <Container>
        <Header iosBarStyle={"dark-content"} style={{backgroundColor:'white'}}>
          <Left>
            <Button transparent>
              <Icon name='arrow-back' />
            </Button>
          </Left>
          <Body>
            <Title>Header</Title>
          </Body>
          <Right>
            <Button transparent>
              <Icon name='menu' />
            </Button>
          </Right>
        </Header>
      </Container>
    );
  }
}

I have just modified background color and dark-content.

if i set background color to black, it shows status bar.

This means, dark-content is not working.

React-native: 0.60.5
"native-base": "^2.13.8"

ShuKTan on 25 Oct 2019

This iosBarStyle={"light-content"} props is working super fine Android 6(sdk 23) and up. But below Android 5.1(sdk 22) is not working. Please go through on this