CODEWITHSUNDEEP
react-nativeexporeact-navigationreact-navigation-drawer
Seegy
Seegy

Reputation: 392

Why am I getting Component Exception when using React Native Navigation Drawer

I am using the Expo Managed React Native. I am trying to use a drawer navigation and have followed the the React Navigation documentation here.

import React from 'react';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';

import HomeScreen from './src/screens/HomeScreen'

const Drawer = createDrawerNavigator();
export default function App() {
  return (
      <NavigationContainer>
        <Drawer.Navigator initialRouteName="Home">
          <Drawer.Screen name="Home" component={HomeScreen} />
        </Drawer.Navigator>
      </NavigationContainer>
  );
}

I run the expo start command and scan the QR code with my mobile phone. When running, it throws this error and doesn't run at all. I have tried using a stack navigator and it works fine. Only when using the drawer navigator, the error shows up.

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export
 your component from the file it's defined in, or you might have mixed up default and named imports.

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `DrawerNavigator`.

My dependencies are as follows

"dependencies": {
    "@react-native-community/masked-view": "0.1.10",
    "@react-navigation/drawer": "^6.0.0-next.21",
    "@react-navigation/native": "^5.9.4",
    "@react-navigation/stack": "^5.14.5",
    "expo": "~42.0.1",
    "expo-linear-gradient": "~9.2.0",
    "expo-splash-screen": "~0.11.2",
    "expo-status-bar": "~1.0.4",
    "expo-updates": "~0.8.1",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "~0.63.4",
    "react-native-gesture-handler": "~1.10.2",
    "react-native-reanimated": "~2.2.0",
    "react-native-safe-area-context": "3.2.0",
    "react-native-screens": "~3.4.0",
    "react-native-unimodules": "~0.14.5",
    "react-native-web": "~0.13.12",
    "react-native-webview": "11.6.2",
    "react-native-youtube-iframe": "^2.1.0"
  },

Upvotes: 0

Views: 286

Answers (2)

joabe santos
joabe santos

Reputation: 26

i had the same problem, i changed the version > 6... with :

1 (uninstall)-> npm uninstall @react-navigation/drawer

2 -> npm install @react-navigation/drawer@^5.x

that is it!

Upvotes: 1

Hưng Huỳnh
Hưng Huỳnh

Reputation: 1

check your @react-navigation/drawer with @react-navigation/native

Upvotes: 0

Related Questions