Issue
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
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>
Answered By - Sagar Chavada
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.