console.error: The action 'Navigation/OPEN_DRAWER' was not handled by any navigator.
This is a development-only warning and won't be shown in production.
My code is shown below.
MainTabScreen.js
import * as React from 'react';import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';import { createStackNavigator } from '@react-navigation/stack';import Icon from 'react-native-vector-icons/Ionicons';import DashboardScreen from './DashboardScreen';import OpportunitiesScreen from './OpportunitiesScreen';import ProfileScreen from './EditProfileScreen';import { DrawerActions } from 'react-navigation-drawer';const DashboardStack = createStackNavigator();const OpportunitiesStack = createStackNavigator();const ProfileStack = createStackNavigator();const Tab = createMaterialBottomTabNavigator();const DashboardStackScreen = (props) => (<DashboardStack.Navigator screenOptions={{ headerStyle: { backgroundColor: '#7b68ee', }, headerTintColor: '#fff', headerTitleStyle: { fontWeight: 'bold' } }}><DashboardStack.Screen name="Dashboard" component={DashboardScreen} options={{ title:'Dashboard', headerLeft: () => (<Icon.Button name="ios-menu" size={25} backgroundColor="#7b68ee" onPress={() => props.navigation.dispatch(DrawerActions.openDrawer())}></Icon.Button> ) }} /></DashboardStack.Navigator> ); const OpportunitiesStackScreen = (props) => (<OpportunitiesStack.Navigator screenOptions={{ headerStyle: { backgroundColor: '#7b68ee', }, headerTintColor: '#fff', headerTitleStyle: { fontWeight: 'bold' } }}><OpportunitiesStack.Screen name="Opportunities" component={OpportunitiesScreen} options={{ headerLeft: () => (<Icon.Button name="ios-menu" size={25} backgroundColor="#7b68ee" onPress={() => props.navigation.dispatch(DrawerActions.openDrawer())}></Icon.Button> ) }} /></OpportunitiesStack.Navigator> ); const ProfileStackScreen = (props) => (<ProfileStack.Navigator screenOptions={{ headerStyle: { backgroundColor: '#7b68ee', }, headerTintColor: '#fff', headerTitleStyle: { fontWeight: 'bold' } }}><ProfileStack.Screen name="Profile" component={ProfileScreen} options={{ headerLeft: () => (<Icon.Button name="ios-menu" size={25} backgroundColor="#7b68ee" onPress={() => props.navigation.dispatch(DrawerActions.openDrawer())}></Icon.Button> ) }} /></ProfileStack.Navigator> );const MainTabScreen = () => (<Tab.Navigator initialRouteName="Dashboard" activeColor="#fff"><Tab.Screen name="Dashboard" component={DashboardStackScreen} options={{ tabBarLabel: 'Dashboard', tabBarColor: '#009387', tabBarIcon: ({ color }) => (<Icon name="ios-home" color={color} size={26} /> ), }} /><Tab.Screen name="Opportunities" component={OpportunitiesStackScreen} options={{ tabBarLabel: 'Opportunities', tabBarColor: '#1f65ff', tabBarIcon: ({ color }) => (<Icon name="ios-aperture" color={color} size={26} /> ), }} /><Tab.Screen name="Profile" component={ProfileStackScreen} options={{ tabBarLabel: 'Profile', tabBarColor: '#694fad', tabBarIcon: ({ color }) => (<Icon name="ios-person" color={color} size={26} /> ), }} /></Tab.Navigator>);export default MainTabScreen;App.js
import React, { useEffect } from 'react';import { View, ActivityIndicator } from 'react-native';import { NavigationContainer, DefaultTheme as NavigationDefaultTheme, DarkTheme as NavigationDarkTheme} from '@react-navigation/native';import { createDrawerNavigator } from '@react-navigation/drawer';import { Provider as PaperProvider, DefaultTheme as PaperDefaultTheme, DarkTheme as PaperDarkTheme } from 'react-native-paper';import { DrawerContent } from './screens/DrawerContent';import MainTabScreen from './screens/MainTabScreen';import SupportScreen from './screens/SupportScreen';import SettingsScreen from './screens/SettingsScreen';import BookmarkScreen from './screens/BookmarkScreen';import { AuthContext } from './components/context';import RootStackScreen from './screens/RootStackScreen';import AsyncStorage from '@react-native-community/async-storage';const Drawer = createDrawerNavigator();const App = () => { // const [isLoading, setIsLoading] = React.useState(true); // const [userToken, setUserToken] = React.useState(null); const [isDarkTheme, setIsDarkTheme] = React.useState(false); const initialLoginState = { isLoading: true, userName: null, userToken: null, }; const CustomDefaultTheme = { ...NavigationDefaultTheme, ...PaperDefaultTheme, colors: { ...NavigationDefaultTheme.colors, ...PaperDefaultTheme.colors, background: '#ffffff', text: '#333333' } } const CustomDarkTheme = { ...NavigationDarkTheme, ...PaperDarkTheme, colors: { ...NavigationDarkTheme.colors, ...PaperDarkTheme.colors, background: '#333333', text: '#ffffff' } } const theme = isDarkTheme ? CustomDarkTheme : CustomDefaultTheme; const loginReducer = (prevState, action) => { switch( action.type ) { case 'RETRIEVE_TOKEN': return { ...prevState, userToken: action.token, isLoading: false, }; case 'LOGIN': return { ...prevState, userName: action.id, userToken: action.token, isLoading: false, }; case 'LOGOUT': return { ...prevState, userName: null, userToken: null, isLoading: false, }; case 'REGISTER': return { ...prevState, userName: action.id, userToken: action.token, isLoading: false, }; } }; const [loginState, dispatch] = React.useReducer(loginReducer, initialLoginState); const authContext = React.useMemo(() => ({ signIn: async(foundUser) => { // setUserToken('fgkj'); // setIsLoading(false); const userToken = String(foundUser[0].userToken); const userName = foundUser[0].username; try { await AsyncStorage.setItem('userToken', userToken); } catch(e) { console.log(e); } // console.log('user token: ', userToken); dispatch({ type: 'LOGIN', id: userName, token: userToken }); }, signOut: async() => { // setUserToken(null); // setIsLoading(false); try { await AsyncStorage.removeItem('userToken'); } catch(e) { console.log(e); } dispatch({ type: 'LOGOUT' }); }, signUp: () => { // setUserToken('fgkj'); // setIsLoading(false); }, toggleTheme: () => { setIsDarkTheme( isDarkTheme => !isDarkTheme ); } }), []); useEffect(() => { setTimeout(async() => { // setIsLoading(false); let userToken; userToken = null; try { userToken = await AsyncStorage.getItem('userToken'); } catch(e) { console.log(e); } // console.log('user token: ', userToken); dispatch({ type: 'RETRIEVE_TOKEN', token: userToken }); }, 1000); }, []); if( loginState.isLoading ) { return(<View style={{flex:1,justifyContent:'center',alignItems:'center'}}><ActivityIndicator size="large"/></View> ); } return (<PaperProvider theme={theme}><AuthContext.Provider value={authContext}><NavigationContainer theme={theme}> { loginState.userToken !== null ? (<Drawer.Navigator drawerContent={props => <DrawerContent {...props} />}><Drawer.Screen name="HomeDrawer" component={MainTabScreen} /><Drawer.Screen name="SupportScreen" component={SupportScreen} /></Drawer.Navigator> ) :<RootStackScreen/> }</NavigationContainer></AuthContext.Provider></PaperProvider> );}export default App;
How can I fix this error so that my drawer opens?
I am using React Native with Expo.
..........................................................................