Change status bar color with react-navigation
Like Aperçu said no conflict between react-navigation and the StatusBar. Each screen should be able to set properties on the device's status bar, and the container defined in createNavigationContainer should get the options on state change, and apply them natively. try this for StatusBar for entire App.
const AppContent = StackNavigator({
Home: { screen: HomeScreen },
Secondary: { screen: SecondaryScreen },
});
const App = () =>
<View style={{flex: 1}}>
<StatusBar backgroundColor="blue" barStyle="light-content"/>
// style the bar. barStyle is text and icon color od status bar.
<AppContent />
</View>;
I don't think there is any conflict between react-navigation
and the StatusBar
, but I think you should use the <StatusBar>
component rather than the imperative API. There's a high chance this is due to a re-render of your app and it just switch back to the default, with a component declare, you ensure it won't happen.
<StatusBar backgroundColor='blue' barStyle='light-content' />
You can even have multiple ones per route, to change it depending on the path. If you want to change it depending on the user and using redux
, declare it in a connected component and pass the backgroundColor
.