I have two navigation types, stack and drawer navigation. I have implemented both navigation types in different files and have gone through the react-navigation v5 docs to make it work without success.
This is the drawer navigator
import 'react-native-gesture-handler';import React from 'react';import {NavigationContainer} from '@react-navigation/native';import {createDrawerNavigator} from '@react-navigation/drawer';import About from '../screens/about';import More from '../screens/more';import Gallery from '../screens/gallery';import Excos from '../screens/excos';import AbuladWebsite from '../screens/abuladwebsite';import LifeInAbu from '../screens/lifeinabu';const Drawer = createDrawerNavigator();function sideStack() { return (<NavigationContainer><Drawer.Navigator initialRouteName="Home"><Drawer.Screen name="Gallery" component={Gallery} /><Drawer.Screen name="Life in ABU" component={LifeInAbu} /><Drawer.Screen name="Buy and Sell" component={AbuladWebsite} /><Drawer.Screen name="About" component={About} /><Drawer.Screen name="Excos" component={Excos} /><Drawer.Screen name="More" component={More} /></Drawer.Navigator></NavigationContainer> );}export default sideStack;This is the stack navigator
import 'react-native-gesture-handler';import React from 'react';import {NavigationContainer} from '@react-navigation/native';import {createStackNavigator} from '@react-navigation/stack';import Login from '../login/login';import Register from '../register/register';import Welcome from '../welcome/welcome';import ResetPWD from '../register/resetpwd';import RegisterLogin from '../register/registerlogin';import {Icon} from 'react-native-elements';import SideStack from '../routes/sideStack';const Stack = createStackNavigator();function homeStack({navigation}) { return (<NavigationContainer><Stack.Navigator><Stack.Screen name="Login" component={Login} options={{headerShown: false}} /><Stack.Screen name="Register" component={Register} options={{headerShown: false}} /><Stack.Screen name="ResetPWD" component={ResetPWD} options={{headerShown: false}} /><Stack.Screen name="RegisterLogin" component={RegisterLogin} options={{headerShown: false}} /><Stack.Screen name="Welcome" component={Welcome} options={{ title: 'Abulad', headerLeft: () => (<Icon name="comment" onPress={() => navigation.openDrawer()} title="Info" color="#000" /> ), }} /></Stack.Navigator></NavigationContainer> );}export default homeStack;App.js
import React, {Component} from 'react';import SplashScreen from 'react-native-splash-screen';import HomeStack from './src/components/routes/homeStack';import SideStack from './src/components/routes/sideStack';class App extends Component { componentDidMount() { SplashScreen.hide(); } render() { return <HomeStack />; }}export default App;On executing the onPress method attached to the icon supposed to slide the drawer out, I get this error: 