Menu
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
573
StatusBar is a component exported by the react-native library that helps to modify and style the native status bar in Android and iOS devices.
currentHeight : import {StatusBar} from 'react-native'; console. log('statusBarHeight: ', StatusBar. currentHeight);
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With