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
Navigation screen statusbar
Answer
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>