I need to add an Icon for Drawertoggling in React Native

Question

I got the following error while trying to do so.I am using React Navigation 5 It is showing Object is not a function

Here is my code

const HeaderLeft = ({ navigation }) => {   
    return (
      <View style={{flexDirection: 'row'}}>
        <Icon name="menu" size={24} 
              color= 'white'
              onPress={ () => navigation.toggleDrawer() } />
      </View>
    );}

This is how I added it in screen

<MenuNavigator.Navigator

            initialRouteName='Menu'
            screenOptions={{
                headerStyle: {
                    backgroundColor: "#512DA8"
                },
                headerTintColor: "#fff",
                headerLeft: ({ navigation }) => (<HeaderLeft navigation={navigation} />),
                headerTitleStyle: {
                    color: "#fff"            
                },


            }}
        >

Please Help me on the above Bug

score 0 · Answer 1 · answered Aug 04 '20 at 03:51

You are getting the navigation from the wrong place. It should be

 screenOptions = {
      (navigation) => ({
          headerStyle: {
            backgroundColor: "#512DA8"
          },
          headerTintColor: "#fff",
          headerLeft: () => ( < HeaderLeft navigation = {
                navigation
              }
              />),
              headerTitleStyle: {
                color: "#fff"
              }})}

The navigation you are passing in would probably would be null

I need to add an Icon for Drawertoggling in React Native

1 Answers1