React Native - How To Manage Headers Per Page With Stacknavigator And Drawernavigator

This is my actual Code: App.js import React from 'react'; import {StackNavigator} from 'react-navigation'; import DrawerStack from './src/stacks/drawerStack'; const Navigator =

Solution 1:

Change header style using navigationOptions as below. You can change as your requirement. For more navigationOptions see Configuring the header bar of React Navigation.

 import {DrawerNavigator} from 'react-navigation'
 import Home from '../components/home';
 import Login from '../components/login';
 import Contacts from '../components/contacts';
 import News from '../components/news';

 const DrawerScreen = DrawerNavigator({
               Home: {screen: Home},
               Login: {screen: Login},
               Contacts: {screen: Contacts},
               News: {
                       screen: News,
                       navigationOptions: {
                         title: "News",
                         headerTitleStyle: {
                              color: "white"
                             },
                         headerStyle: {
                              backgroundColor: "red"
                              },
                         headerBackTitle: null,
                         headerTintColor: "white"
                         }
                     }
             },{
               headerMode: 'screen',
               initialRouteName: 'Home'
            })

 export default DrawerScreen;