Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Header Component overrides StatusBar

See original GitHub issue

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>
    );
  }
}

Issue Analytics

State:
Created 5 years ago
Comments:7 (1 by maintainers)

Top GitHub Comments

7reactions

akhil-gacommented, Jun 11, 2018

@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

3reactions

itsnotvalidcommented, Aug 29, 2018

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

Top Results From Across the Web

Configuring the header bar - React Navigation

A Screen component accepts options prop which is either an object or a function that returns an object, that contains various configuration options....

Configuring the status bar - Expo Documentation

The StatusBar component provided by expo-status-bar allows you to control the appearance of the status bar while your app is running. expo-status-bar also ......

Customizing your React Native status bar based on route

Learn to master status bars in React Native for any device by using the StatusBar component and the imperative API.

StatusBar - React Native

It is possible to have multiple StatusBar components mounted at the same time. The props will be merged in the order the StatusBar...

Can I override the color of default header and the footer

You can use the component StatusBar . Just make sure to add it above your navigator styles or other component