CODEWITHSUNDEEP
javascriptnavigation-drawerreact-navigationexpo
kimitch
kimitch

Reputation: 13

Open Navigation Drawer On Header Button Click

when i swipe right my drawer open but i want to open it using a button in the header i did a code but i have this error undefined is not a object (evaluating 'navigation.openDrawer') thats my app.js code :

import {createStackNavigator} from 'react-navigation-stack';
import { createAppContainer } from 'react-navigation';
import Home from './components/login'
import Inscription from './components/inscription'
import signup from './components/signup'
import mp from './components/motdepasse'
import ch from './components/choice'
import mn from './components/menu1'
import drawer from './components/drawerapp'
import React, { Component } from 'react';
import { Image, StyleSheet, Text, TouchableOpacity,  } from 'react-native';
import Icon from 'react-native-vector-icons/Entypo'


const Navigator = createStackNavigator({
  Home:{screen: Home},
  Profil:{screen: Inscription},
  signup:{screen: signup, navigationOptions: { header: null }},
  mp:{screen: mp},
  ch:{screen: ch},
  mn:{screen: mn},
  drawer:{screen: drawer,navigationOptions: { title:"votre travail",
  headerStyle:{backgroundColor:'#8B0000'},
  headerTitleStyle: {
     fontWeight: 'bold',
     color:'white',         
   },
   headerLeft: ({ navigation }) => (
     <TouchableOpacity onPress={() => navigation.openDrawer()} >
      <Icon name={'menu'} size={28} color={'white'} style={{marginRight:10}}/>
      </TouchableOpacity> 
   ),}},

}
);


const App = createAppContainer(Navigator);
export default App;

and that's my appdrawer code:

function CustomDrawerContent(props) {
  return (
    <DrawerContentScrollView {...props}>
      <DrawerItemList {...props} />
      <DrawerItem label="Help" onPress={() => alert('Link to help')} />
      <DrawerItem
        label="Close drawer"
        onPress={() => props.navigation.closeDrawer()}
      />
    </DrawerContentScrollView>
  );
}

const Drawer = createDrawerNavigator();

function MyDrawer() {
  return (
    <Drawer.Navigator drawerContent={props => CustomDrawerContent(props)}>
      <Drawer.Screen name="Feed" component={mn} />
      <Drawer.Screen name="Article" component={Article} />
    </Drawer.Navigator>
  );
}

export default class drawerapp extends React.Component {

  render(){
    const {navigate} = this.props.navigation;

  return (

    <NavigationContainer>
      <MyDrawer />
    </NavigationContainer>
  );
}}

my work perfectly fine until i click on the left header button and the error appear

Upvotes: 1

Views: 4085

Answers (1)

Ashwith Saldanha
Ashwith Saldanha

Reputation: 1728

u are getting the navigation prop in wrong place, headerLeft does not give navigation prop, so u have to get it from navigationOptions...

change the navigator code as below..


const Navigator = createStackNavigator({
  Home:{screen: Home},
  Profil:{screen: Inscription},
  signup:{screen: signup, navigationOptions: { header: null }},
  mp:{screen: mp},
  ch:{screen: ch},
  mn:{screen: mn},
  drawer:{screen: drawer,
  navigationOptions: ({navigation}) => ({ 
    title:"votre travail",
    headerStyle:{backgroundColor:'#8B0000'},
    headerTitleStyle: {
      fontWeight: 'bold',
      color:'white',         
    },
    headerLeft: () => (
      <TouchableOpacity onPress={() => navigation.openDrawer()} >
        <Icon name={'menu'} size={28} color={'white'} style={{marginRight:10}}/>
      </TouchableOpacity> 
     ),
    }),
  },
});

Upvotes: 1

Related Questions