title: Header component not change React native
body: <p>I'm facing an issue in which <a href="https://react-native-training.github.io/react-native-elements/API/header/" rel="nofollow noreferrer">header component</a> does not change. It's same on all the screen even if I have defined separately in <a href="https://reactnavigation.org/docs/navigators/stack" rel="nofollow noreferrer">Stacknavigator</a> navigationOptions.</p>
  
  <pre><code>&lt;Header
    leftComponent={{ icon: 'menu', color: '#fff' }}
    centerComponent={{ text: 'MY TITLE', style: { color: '#fff' } }}
    rightComponent={{ icon: 'home', color: '#fff' }}
  /&gt;
  </code></pre>
  
  <p>Even if I have added in each screen separately but it's showing home (first header component) as attached.</p>
  
  <p><a href="https://i.stack.imgur.com/xtWCfl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xtWCfl.png" alt="Home screen"></a><a href="https://i.stack.imgur.com/jWAdAl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jWAdAl.png" alt="Home screen with menu"></a><a href="https://i.stack.imgur.com/9BiHAl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9BiHAl.png" alt="Another view of some sort"></a></p>
  
  <p>I have also override navigation options on each screen as well but same header issue.</p>
  
  <pre><code>static navigationOptions = ({ navigation, screenProps }) =&gt; ({
     title: 'User List',
     headerTitle:'User List',
     headerTintColor :'#ffffff',
   });
  </code></pre>
  
  <p>Below is my complete code</p>
  
  <pre><code>const AppNavigator = StackNavigator({
                Login: {
                  screen: LoginScreen,
                  navigationOptions: {
                    header: null,
                    headerMode: 'none'
                  }
                },
  
                Home: {
                  screen: AppDrawerNavigation,
                  navigationOptions: ({
                    navigation
                  }) =&gt; ({
                    header: &lt; Header
                    outerContainerStyles={{ backgroundColor: '#1999CE' }}
                    leftComponent = {                                
                     &lt;Icon name='menu'  color='#ffffff' onPress={() =&gt; navigation.navigate('DrawerToggle')}/&gt;
                   }
                    centerComponent = {
                                    {
                                        text: 'Home',
                                        style: {
                                            color: '#fff'
                                        }
                                    }
                                }
                  rightComponent = {
                    {
                      icon: 'home',
                      color: '#fff'
                    }
                  }
                  /&gt;,
  
                }),
        },
  
  
        WebViews: {
          screen: AppDrawerNavigation,
          navigationOptions: {
            header: null,
            headerMode: 'none'
          }
        },
  
  
        Profile: {
          screen: ProfileScreen,
          navigationOptions: {
            headerStyle: {
              backgroundColor: '#1999CE',
            }, 
          }
        },
        UserList :{
          screen:AppDrawerNavigation,
  
          navigationOptions: ({
            navigation
          }) =&gt; ({
  
            title: 'List User',
            headerTitle:'List User',
            header: &lt; Header
            outerContainerStyles={{ backgroundColor: '#1999CE' }}
            leftComponent = {                                
             &lt;Icon name='menu'  color='#ffffff' onPress={() =&gt; navigation.navigate('DrawerToggle')}/&gt;
  
           }
           centerComponent = {
            {
              text: 'List User',
              style: {
                color: '#fff'
              }
            }
          }
          rightComponent = {
            {
              icon: 'home',
              color: '#fff'
            }
          }
          /&gt;,
  
        }),
        }
      },
      {         navigationOptions: {
                headerMode: 'screen'
              },
  
      }
      );
  
  const AppDrawerNavigation = DrawerNavigator({
  
                Home: {
                  screen: HomeScreen,
  
  
                },
  
                WebViews: {
                  screen: WebViewScreen,
                },
                UserList: {
                  screen: UserListScreen,
  
                },
              },
              {
               navigationOptions: {
                headerMode: 'none'
              },
              drawerPosition: 'left',
              drawerWidth: 200,
              contentOptions: {
                activeTintColor: '#000000',
                activeTintColor :'#ffffff',
                activeBackgroundColor :'#1999CE',
                inactiveTintColor :'#1999CE',
                inactiveBackgroundColor :'#ffffff',
              }
            }
  
            );
  </code></pre>
  
  <p>Can you suggest a possible fix that would address this issue?</p>