CODEWITHSUNDEEP
react-native
Boidurja Talukdar
Boidurja Talukdar

Reputation: 696

How to open a drawer by clicking hamburger icon in header in react native?

This is my code: 

import React from 'react';
import { Text, Block } from 'galio-framework';
import { StyleSheet } from 'react-native';
import { Ionicons } from '@expo/vector-icons';

export default function Header(props) {

return (
    <Block style={ styles.header }>
        <Block>
            <Ionicons name="md-menu" size={32} color="grey" onPress={() => navigation.openDrawer()} />
            <Text style={ styles.title } p>{ props.title }</Text>
        </Block>
        <Block>
            <Ionicons name="md-search" size={32} color="grey" />
        </Block>
    </Block>
)
}

When clicking on the hamburger icon I get this error:

RefererenceError: Can't find variable: Navigation

If I change my code to:

onPress={() => this.props.navigation.openDrawer()}

I get this error:

TypeError: undefined is not an object (evaluating '_this.props)

This is one of my files where I am importing Header:

import React, { Component } from 'react';
import { Text, Block, Input, Button, Card } from 'galio-framework';
import { StyleSheet, ScrollView, View } from 'react-native';
import Header from '../../common/Header';

class Accountant extends Component {

    render() {
        return (
            <Block style={ styles.blockStyle }>
                <Header title="Accounts" />
                  <Button onlyIcon icon="right" onPress={() => this.props.navigation.navigate('Projects')}>

                  </Button>
            </Block>
        );
    }
}

I am using nested navigation. Here is my App.js file:

const Stack = createStackNavigator();

const DrawerAccountant = createDrawerNavigator();

function AccountantDrawer() {
  return (
    <DrawerAccountant.Navigator initialRouteName="Accountant">
      <DrawerAccountant.Screen name="Accountant" component={AccountantScreen} />
      <DrawerAccountant.Screen name="My Account" component={MyAccountScreen} />
    </DrawerAccountant.Navigator>
  );
}

function App() {
  return (
    <NavigationContainer>
        <Stack.Screen name="Accountant" component={AccountantDrawer} />
        <Stack.Screen name="Projects" component={ProjectsScreen} />
        <Stack.Screen name="Tasks" component={TasksScreen} />
        <Stack.Screen name="My Account" component={MyAccountScreen} />
    </Stack.Navigator>
    </NavigationContainer>
  )
}

export default App;

The navigation drawer is working in the screens: "Accountant" and "My Account". The drawer opens when I click the menu icon in header. But it's not working in the screens: "Projects" and "Tasks".

Upvotes: 1

Views: 3013

Answers (1)

SDushan
SDushan

Reputation: 4641

Pass your navigation props to child component

<Header title="Accounts" navigation={this.props.navigation}/>

then you can access your navigation from Header as below

<Ionicons name="md-menu" size={32} color="grey" onPress={() => props.navigation.openDrawer()} />

or you can use withNavigation

Hope this helps you. Feel free for doubts.

Upvotes: 2

Related Questions