drawer navigation is giving error in react native - 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.