Search code examples
reactjsbackgroundheadernativenavigator

In React Native When DrawerNavigator using with StackNavigator it cannot change the Background color of Header


export default DrawerNavigator({
  MainScreen: {
    screen: MainScreen,
}, 
CreateItem:{
  screen: CreateItem,
},
  MyitemScreen: {
           screen: MyitemScreen,
    },
        Settings: {
            screen: Settings,
        },
        Buying: {
          screen: Buying,
      },
      Messages: {
        screen: Messages,
    },
    Notifications: {
      screen: Notifications,

  }, Profile: {
      screen: Profile,

      }, Logout: {
        screen: Logout,
      },
    },
        {
          drawerPosition:'left',
          initialRouteName:'MainScreen',
          drawerBackgroundColor:'white',
          drawerWidth:250,

       });

then

export default class MainScreen  extends Component {
  static navigationOptions =
  {

     title:'Home',
     headerMode:"float",
        headerStyle: {
            backgroundColor: 'green',
            elevation: null
        },

        headerTitleStyle: {
            fontWeight: '300',
            color: '#ffffff',
            fontSize: 20,
            flex:1,
            textAlign:"center"
        },
  };

background header of mainscreen changed to green but still white color is appearing in the header


Solution

  • I assuming you are using 'React-Navigation'

    try this prop for your static navigationOptions

    static navigationsOptions = ({navigation}) = {
       return{
         title : 'My title',
         headerStyle = {background : 'green'
       }
    }
    

    I could be misunderstanding your questions btw. Posting an image might make it more clear.