How to use drawer for custom toolbar - react-native

Question

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.