Newbe Dev Stack

Answer : I've solved my problem, it was caused by StackNavigator. To solve it , just add some extra options const HomeStack = StackNavigator( { Home: { screen: HomeScreen, }, Item: { screen: ItemScreen, navigationOptions: ({ navigation }) => ({ title: `${navigation.state.params.title}`, }), }, }, ** { headerMode: 'screen', cardStyle: { backgroundColor: '#FFFFFF' }, }, ** ); For React Navigation 5 and above <Stack.Navigator initialRouteName='dashboard' screenOptions={{ headerStyle: { elevation: 0 }, cardStyle: { backgroundColor: '#fff' } }} > <Stack.Screen name="Home" component={HomeStack} /> </Stack.Navigator> For React Navigation 4 and earlier const HomeStack = StackNavigator( { Home: { screen: HomeScreen, }, }, { headerMode: 'screen', cardStyle: { backgroundColor: '#fff...

Answer : 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 . 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({...