React native statusbar not working with react-navigation in android

Question

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

Navigation screen statusbar

Try wrapping it in a view and adding some height in the root container as mentioned [here](https://stackoverflow.com/questions/49804764/react-native-ios-statusbar-invisible-after-build/49805094#49805094) — Pritish Vaidya, Apr 25 '18 at 11:56
@NabeelK yes, the problem is native-base component.. i change contentComponent view. and problem solved. — Sagar Chavada, Sep 12 '18 at 12:53
@PhanSinh do not use native-base component in contentComponent.. thats it. — Sagar Chavada, Oct 22 '18 at 04:05
@SagarChavada My layout base: ``` .... ``` In content component i don't use container component. — Sinh Phan, Oct 22 '18 at 04:14
@SagarChavada I see that my issue only in android version < 21. I test on android 26, it's working fine. — Sinh Phan, Oct 22 '18 at 04:55

score 6 · Accepted Answer · answered Dec 24 '18 at 04:34

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>

Gnardog · Answer 2 · 2021-01-03T18:05:32.977

4

My issue was slightly different.

The previous screen that I navigated from had set StatusBar hidden to true.

// previous screen that I navigated from
<StatusBar hidden animated />

So I had to explicitly change StatusBar hidden to false and animated to true on the new screen:

// new screen needs hidden={false} to show up
<StatusBar hidden={false} animated />

edited Jan 03 '21 at 18:05

answered Nov 19 '20 at 18:37

Gnardog

193
1
9

score 1 · Answer 3 · answered Jul 19 '21 at 04:33

1

For any one using native-base Header and having this problem, you could use the prop iosBarStyle like the following

    <Header
      iosBarStyle="dark-content"

answered Jul 19 '21 at 04:33

Faisal Taibi

21
2

score 0 · Answer 4 · answered Feb 08 '21 at 22:09

0

For any one using native-base Header and having this problem, you could use the prop androidStatusBarColor like the following

<Header style={styles.header} androidStatusBarColor="#f8bb12">

answered Feb 08 '21 at 22:09

Ian Guimarães

371
3
12

score 0 · Answer 5 · answered Nov 17 '21 at 06:38

you can do like this to exclude the notch if present.

import React from "react";
import {Text, SafeAreaView, StatusBar} from "react-native";

export default function App() {
  return (
    <React.Fragment>
      <StatusBar hidden />
      <SafeAreaView> 
        <Text>Your Code</Text>
      </SafeAreaView>
    </React.Fragment>
  );
}

by using StatusBar with hidden can exclude the top notch.

score 0 · Answer 6 · answered May 14 '22 at 18:26

0

statusbar color in react native app

<View>
    <StatusBar backgroundColor="red"></StatusBar>

     <Text>
           hii
     <Text>

</View>

answered May 14 '22 at 18:26

ND verma

171
1
9

React native statusbar not working with react-navigation in android

6 Answers6