Change Status Bar Color With React-navigation

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({   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>; 

import React, {Component} from 'react'; import {Text, TouchableOpacity, View, StatusBar} from 'react-native'; import {StackNavigator} from 'react-navigation'; import Icon from 'react-native-vector-icons/MaterialIcons'; import styles from "../styles/Style";  class ProfileScreen extends Component {      static navigationOptions = ({navigation}) => {         return {             headerLeft: (                 <TouchableOpacity onPress={() => {                     navigation.navigate('DrawerOpen');                 }}>                     <Icon name="menu" size={30} color="#fff" style={styles.burgerIcon}/>                 </TouchableOpacity>             ),             title: 'My Profile',             headerRight: (                 <Icon name={'edit'} size={30} color={'#fff'} style={styles.headerRightIcon}/>             ),             headerTintColor: "#fff",             headerStyle: {                 backgroundColor: '#8BC83D',                 height: 56,                 elevation: null             }         };     };      render() {         return (             <View style={styles.screenContainer}>                  <StatusBar                     backgroundColor="#7CB236"                     barStyle="light-content"                 />                 <Text style={styles.welcome}>                     I amsecond reder                 </Text>             </View>         );     } } const ProfileScreenList = StackNavigator(     {     ProfileScreenIndex: {screen: ProfileScreen}, } ); export default ProfileScreenList