CODEWITHSUNDEEP
react-nativereact-navigationreact-navigation-v5react-navigation-v6
Keerthiseelan Jayaraman
Keerthiseelan Jayaraman

Reputation: 107

How to fix this error: Check the render method of `DrawerNavigator`

When I navigate from signup screen to home screen I have got following error which is mentioned below. Where I have used the nested navigation in react native. This is my app.js

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import  {createDrawerNavigator}  from '@react-navigation/drawer';
import Profile from './src/components/Profile';
import SignUp from './src/components/SignUp';
import LoginScreen from './src/screens/LoginScreen'
import ViewAllBooks from './src/screens/ViewAllBooks'
import Home from './src/screens/Home'




const Stack = createStackNavigator();
//  for drawer navigation
const Drawer = createDrawerNavigator();
function Root() {
  return (

      <Drawer.Navigator>
        <Drawer.Screen name="Home" component={Home} />
        
      </Drawer.Navigator>

  );
}
function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="signUp">
      <Stack.Screen name="Home" component={Root}  options={{ headerShown: false }}/>
        <Stack.Screen name="signUp" component={SignUp} options={{ headerShown: false }} />
        <Stack.Screen name="profile" component={Profile} options={{ headerShown: false }} />
        <Stack.Screen name="loginScreen" component={LoginScreen} options={{ headerShown: false }} />
        <Stack.Screen name="viewAllBooks" component={ViewAllBooks} options={{ headerShown: false }} />
        </Stack.Navigator>
    </NavigationContainer>
    // <Navigator/>
  );
}

export default App;

The error is 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`.        
    This error is located at:
        in DrawerNavigator (at App.js:20)
        in Root (at SceneView.tsx:122)
        in StaticContainer
        in StaticContainer (at SceneView.tsx:115)
        in EnsureSingleNavigator (at SceneView.tsx:114)
        in SceneView (at useDescriptors.tsx:153)
        in RCTView (at View.js:34)
        in View (at CardContainer.tsx:245)

Upvotes: 2

Views: 4357

Answers (1)

Rajendran Nadar
Rajendran Nadar

Reputation: 5438

Answer added in the comments.

It is advised to use the same version of navigators (Stack, drawer, tabs, etc) as that of the @react-navigation/native (Major release versions).

The version mismatch will cause many unexpected issues.

The OP solved the issue by downgrading the drawer packages to v5. But my suggestion is to upgrade to the latest version that is v6 (Now it is stable). The upgrade details or change log is added below to migrate from v5 to v6.

Docs to upgrade to react-navigation v6 from v5 - https://reactnavigation.org/docs/upgrading-from-5.x

Upvotes: 11

Related Questions