CODEWITHSUNDEEP
androidreact-nativereact-navigationnative-baseandroid-statusbar
Sagar Chavada
Sagar Chavada

Reputation: 5269

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

Upvotes: 8

Views: 19425

Answers (6)

ND verma
ND verma

Reputation: 287

statusbar color in react native app

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

     <Text>
           hii
     <Text>

</View>

Upvotes: 0

Rohan Shetty
Rohan Shetty

Reputation: 1

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.

Upvotes: 0

Faisal Taibi
Faisal Taibi

Reputation: 21

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

    <Header
      iosBarStyle="dark-content"

Upvotes: 1

Ian Guimar&#227;es
Ian Guimar&#227;es

Reputation: 421

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">

Upvotes: 0

tunaSandwich
tunaSandwich

Reputation: 199

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 />

Upvotes: 4

Sagar Chavada
Sagar Chavada

Reputation: 5269

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>

Upvotes: 6

Related Questions