when I'm using DrawerItemList the app crashes

Question

I'm trying to create a drawer menu using react navigation. I want to use a custom DrawerContent, and when I'm using the the app crashes with this error: "undefined is not an object (evaluating 'state.routes')". If I comment this specific line the app just run.

This is my DrawerContent:

import {
  DrawerContentScrollView,
  DrawerItem,
  DrawerItemList,
} from "@react-navigation/drawer";
import React from "react";
import { Text, View, StyleSheet } from "react-native";

export default function DrawerContent(props) {
  return (
    <View style={{ flex: 1 }}>
      <DrawerContentScrollView
        {...props}
        contentContainerStyle={{ backgroundColor: "#000" }}
      >
      <DrawerItemList {...props} />
      </DrawerContentScrollView>
    </View>
  );
}

This is my App.js(where the navigation is):

import React from "react";
import Home from "./src/screens/Home.js";
import { NavigationContainer } from "@react-navigation/native";
import { createDrawerNavigator } from "@react-navigation/drawer";
import DrawerContent from "./src/components/DrawerContent.js";

const Drawer = createDrawerNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator
        drawerContent={() => <DrawerContent />}
        initialRouteName="Home"
      >
        <Drawer.Screen
          options={{ headerShown: false }}
          name="Home"
          component={Home}
        ></Drawer.Screen>
      </Drawer.Navigator>
    </NavigationContainer>
  );

Can you also share top-level component? I cannot see `state.routes` here. — Matin Zadeh Dolatabad, Feb 09 '22 at 21:14
the top-level component would be where I use the navigation container for example? — Gaabreu, Feb 10 '22 at 17:00
Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking. — Community, Feb 20 '22 at 13:46

user56reinstatemonica8 · Accepted Answer · 2022-06-15T15:02:40.220

You're expecting DrawerItemList to receive a full set of props from Drawer.Navigator, but you're passing it to Drawer.Navigator wrapped in a function that discards all the props it receives:

<Drawer.Navigator
  drawerContent={() => <DrawerContent />} // <-- no props passed to DrawerContent
  initialRouteName="Home"
>

You need to pass through all props:

<Drawer.Navigator
  drawerContent={(props) => <DrawerContent {...props} />} // <-- pass in the props
  initialRouteName="Home"
>

Note that you might think you can just pass in the function component to the prop, like this, which looks functionally identical to the above:

<Drawer.Navigator
  drawerContent={DrawerContent} // <-- will fail with "rules of hooks" errors
  initialRouteName="Home"
>

...but this will fail with "Invalid hook call" errors if it's a functional component that contains hooks, because drawerContent prop treats the passed-in function as a render function, not a function component.

score 1 · Answer 2 · answered Aug 03 '22 at 04:01

1

I tried every possible way to solve this error but at last just after restarting my computer i solved the error. Hope it works for you also

answered Aug 03 '22 at 04:01

Harsh Vishwakarma

11
1

when I'm using DrawerItemList the app crashes

2 Answers2