Search code examples
androidreact-nativereact-navigationnative-baseandroid-statusbar

React native statusbar not working with react-navigation in android

Versions:

   "native-base": "^2.4.2",
    "react": "16.3.1",
    "react-native": "0.55.2",
    "react-native-global-font": "^1.0.1",
    "react-native-router-flux": "^4.0.0-beta.28",
    "react-navigation": "^1.5.11"

When i add react-navigation i am not able to change statusbar color, my statusbar become blue.

Here's my Navigationview.js code

    render() {
          return (
            <Root style={styles.container}>
                <StatusBar
                  backgroundColor="white"
                  barStyle="dark-content"
                />
                <MainView />
            </Root>
          );
        }

    const drawerHeader = (props) => (
  <Container style={styles.container}>
    <Header style={styles.header}>
      <Body style={styles.body}>
        <Icon name="person" style={{ fontSize: 40, color: '#CCCCCC' }} />
      </Body>
    </Header>
    <Content>
    <SafeAreaView forceInset={{ top: 'always', horizontal: 'never' }}>
        <DrawerItems {...props} />
        <Button title="Logout" onPress={() => Actions.reset('login')} />
    </SafeAreaView>
    </Content>
  </Container>
);

    const MainView = DrawerNavigator({
      DASHBOARD: {
        screen: Dashboard,
      },
      LOGOUT: {
        screen: LoginForm,
      }
    }, {
        initialRouteName: 'DASHBOARD',
        contentComponent: drawerHeader,
        drawerOpenRoute: 'DrawerOpen',
        drawerCloseRoute: 'DrawerClose',
        drawerToogleRoute: 'DrawerToogle'
    });

i even set statusbar color in Dashboard screen, still not change.

Dashboard.js

    <Container>
            <Header androidStatusBarColor="#FFF" style={{backgroundColor:'#000'}}>
              <StatusBar
                  backgroundColor="white"
                  barStyle="dark-content"
                />
              <Body>
                <Title style={{color:'#FFF'}}>My App</Title>
              </Body>
            </Header>
            <Content>
              //content of your app goes here
            </Content>
          </Container>
I m also using native-base, so i add this code in my App.js file

    render() {
        return (
          <Root style={styles.container}>
              <StatusBar
                backgroundColor="white"
                barStyle="dark-content"
              />
              {this.spinerRender()}
          </Root>
        );
      }

and this is working for my login and signin screen, but not with my navigationview screen.

Login and signin screen statusbar

enter image description here

Navigation screen statusbar

enter image description here

Solution

  • It Fixed Now.

    Problem, is native-base component so I change contentComponent view to this.

    <SafeAreaView style={{flex: 1}}> 
<View style={styles.container}> 
   <StatusBar backgroundColor={'red'} barStyle={'dark-content'} translucent={false} /> 
.... 
</SafeAreaView>