drawer navigation is giving error in react native

Question

I added stack and bottom navigator in my app, and it is running correctly. But if I add drawer navigation then I am getting error

Below I have added my files

App.tsx:

import {NavigationContainer} from '@react-navigation/native';
import MainNavigator from '../src/navigator/MainNavigator';
import 'react-native-gesture-handler';

const App = () => {
  return (
    <NavigationContainer>
      <MainNavigator />
    </NavigationContainer>
  );
};

MainNavigator.tsx:

import {createNativeStackNavigator} from '@react-navigation/native-stack';
import MyTabs from './TabNavigator';
const MainStack = createNativeStackNavigator();
const MainNavigator = () => {
  return (
    <MainStack.Navigator initialRouteName='StartupScreen'>
      <MainStack.Screen
        name='StartupScreen'
        component={StartupScreen}
      />
      <MainStack.Screen
        name={'Main'}
        component={MyTabs}
      />
    </MainStack.Navigator>
  );
};

TabNavigator.tsx: I have added drawer in this file

import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {createDrawerNavigator} from '@react-navigation/drawer';

const Drawer = createDrawerNavigator();
function DrawerNavigator() {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name="ReferScreen" component={ReferScreen} />
      <Drawer.Screen name="OtherScreen" component={OtherScreen} />
    </Drawer.Navigator>
  );
}
const iconSize = 24;
const Tab = createBottomTabNavigator();
function MyTabs() {
  return (
    <Tab.Navigator initialRouteName="HomeScreen">
      <Tab.Screen
        name="HomeScreen"
        component={HomeScreen}
        options={{
          headerTitle: '',
          headerShown: false,
          tabBarIcon: props =>
            props.focused ? (
              <ImageConfig.HomeIconOn height={iconSize} width={iconSize} />
            ) : (
              <ImageConfig.HomeIconOff height={iconSize} width={iconSize} />
            ),
        }}
      />
      <Tab.Screen
        name="ProfileScreen"
        component={ProfileScreen}
        options={{
          tabBarIcon: props =>
            props.focused ? (
              <ImageConfig.SettingIconOn height={iconSize} width={iconSize} />
            ) : (
              <ImageConfig.SettingIconOff height={iconSize} width={iconSize} />
            ),
        }}
      />
      <Tab.Screen name="drawer" component={DrawerNavigator} />
    </Tab.Navigator>
  );
}

and following are my dependencies in package.json:

"dependencies": {
  "@react-navigation/bottom-tabs": "^6.5.5",
  "@react-navigation/drawer": "^6.6.0",
  "@react-navigation/native": "^6.1.3",
  "@react-navigation/native-stack": "^6.9.9",
  "react": "17.0.2",
  "react-native": "0.68.5",
  "react-native-gesture-handler": "^2.9.0",
  "react-native-reanimated": "^2.14.4",
  "react-native-safe-area-context": "^4.5.0",
  "react-native-screens": "^3.19.0",
},

I am getting this error:

Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error 
is that the application entry file path is incorrect.
      This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.

did you reset Metro, delete all the caches, and rebuild? – Abe Feb 15 '23 at 22:12 — Abe, Feb 15 '23 at 22:12
@Abe yes, did all of those – pratteek shaurya Feb 16 '23 at 04:41 — pratteek shaurya, Feb 16 '23 at 04:41

score 0 · Answer 1 · answered Feb 22 '23 at 11:22

try this

1.....  Try rebuilding the JS bundle by running the react-native bundle command.
2.....  Make sure that your application entry file path is correct and that the file is present in the correct location.
3.....  If you're still having trouble, try restarting your development server and resetting the cache by running the npm start -- --reset-cache command.

drawer navigation is giving error in react native

1 Answers1