'How to use drawer for custom toolbar

Here is my drawerNavigator

import React from 'react';
import {createDrawerNavigator} from '@react-navigation/drawer';
import {
  SafeAreaView,
  Text,
  View,
  Button,
  Image,
  TouchableOpacity,
} from 'react-native';
import {DrawerActions} from '@react-navigation/native';

const Dashboard = React.lazy(() => import('../screens/Dashboard.js'));
const POSCatalog = React.lazy(() => import('../screens/POSCatalog'));
const Drawer = createDrawerNavigator();

const DrawerNavigator = () => {
  return (
    <Drawer.Navigator
      screenOptions={{
        drawerPosition: 'right',
        // drawerType:"permanent",
        headerTintColor: '#000000',
        headerTitleStyle: {
          fontWeight: 'bold', //Set Header text style
        },
      }}>
      <Drawer.Screen
        name="Home"
        component={Dashboard}
        options={{
          headerStyle: {
            backgroundColor: 'white',
          },
          headerShown: false,
          headerTintColor: 'black',
          headerLeft: false,
        }}
      />
      <Drawer.Screen name="POSCatalog" component={POSCatalog} />
    </Drawer.Navigator>
  );
};

export default DrawerNavigator;

Here is my App.js file

import 'react-native-gesture-handler';
import React, {Suspense} from 'react';
import {
  SafeAreaView,
  Text,
  View,
  Button,
  Image,
  TouchableOpacity,
} from 'react-native';
import {
  NavigationContainer,
  getFocusedRouteNameFromRoute,
} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {createDrawerNavigator} from '@react-navigation/drawer';
import DrawerNavigator from './navigation/DrawerNavigator';

const Dashboard = React.lazy(() => import('./screens/Dashboard.js'));
const CustomerDashboard = React.lazy(() =>import('./screens/CustomerDashboard'),);
const Splash = React.lazy(() => import('./screens/Splash'));

const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();

const Loading = () => {
  return <SafeAreaView>{/* <Text>Loading</Text> */}</SafeAreaView>;
};

const Routes = ({navigation}) => {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Splash">
        <Stack.Screen
          name="Splash"
          component={Splash}
          options={{headerShown: false, gestureEnabled: false}}
        />

        <Stack.Screen
          name="Dashboard"
          component={DrawerNavigator}
          options={{headerShown: false, gestureEnabled: false}}
        />
        <Stack.Screen
          name="CustomerDashboard"
          component={CustomerDashboard}
          options={{headerShown: false}}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

class App extends React.PureComponent {
  render() {
    return (
      <Suspense fallback={<Loading />}>
        <Routes />
      </Suspense>
    );
  }
}

export default App;

Here is my Dashboard code where I am passing navigation to Banking file

import React, {useState, useEffect} from 'react';
import {
  StyleSheet,
  SafeAreaView,
  View,
  TouchableOpacity,
} from 'react-native';

import Banking from '../screens/Banking';

const Dashboard = ({navigation}) => {
  return (
    <SafeAreaView style={{flex: 1}}>
      <View style={styles.container}>
        <Banking navigation={navigation} />       
      </View>
    </SafeAreaView>
  );
};
export default Dashboard;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
  },
});

I am implementing navigation drawer inside my react native application and I want to access drawer wherever in my application. Let's say drawer is available in dashboard page. Inside the dashboard I have another component called banking. Inside banking I have a button to open another component called customerDashboard. In customerDashboard I have a drawer icon in toolbar. If I click drawer icon in customerDashboard I want to open the drawer.

Notes:

  • Drawer is available in component A
  • In Component A calling another component called B
  • Inside Component B navigating to Component C
  • Inside Component C need to open drawer when icon is clicked in toolbar.


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source