undefined is not an object (evaluating 'object.keys(routeConfigs)') [closed] - react-native

Question

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
This is the error I am receiving. Please tell me what file you need to see. Apologies if the problem is not to the point, I am a noob here.
First image shows the error
Below is the file which calls for stack navigator.
This file calls for stacknavigator
If you need anything else, please tell me, I'll add it in further edits
import React from "react";
import { Easing, Animated, Dimensions } from "react-native";
//import {createAppContainer} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
import { createDrawerNavigator,DrawerItems} from 'react-navigation-drawer';
//import { createBottomTabNavigator } from 'react-navigation-bottom-tabs';
import { Block } from "galio-framework";
// screens
import HomeActivity from '../components/HomeActivity.js';
import ProfileActivity from '../components/ProfileActivity.js';
import Results from '../components/Results.js';
// import HomeActivity from "../screens/Home";
// import Onboarding from "../screens/Onboarding";
import Pro from "../components/Pro";
import Profile from "../components/Profile";
// import Register from "../screens/Register";
// import Elements from "../screens/Elements";
// import Articles from "../screens/Articles";
// drawer
import CustomDrawerContent from "./Menu";
// header for screens
import Icon from "../components/Icon";
import Header from "../components/Header";
import { argonTheme, tabs } from "../constants";
const { width } = Dimensions.get("screen");
const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();
//const Tab = createBottomTabNavigator();
function ElementsStack(props) {
return (
<Stack.Navigator mode="card" headerMode="screen">
<Stack.Screen
name="Elements"
component={Profile}
options={{
header: ({ navigation, scene }) => (
<Header title="Elements" navigation={navigation} scene={scene} />
),
cardStyle: { backgroundColor: "#F8F9FE" }
}}
/>
<Stack.Screen
name="Pro"
component={Pro}
options={{
header: ({ navigation, scene }) => (
<Header
title=""
back
white
transparent
navigation={navigation}
scene={scene}
/>
),
headerTransparent: true
}}
/>
</Stack.Navigator>
);
}
function ArticlesStack(props) {
return (
<Stack.Navigator mode="card" headerMode="screen">
<Stack.Screen
name="Articles"
component={Articles}
options={{
header: ({ navigation, scene }) => (
<Header title="Articles" navigation={navigation} scene={scene} />
),
cardStyle: { backgroundColor: "#F8F9FE" }
}}
/>
<Stack.Screen
name="Pro"
component={Pro}
options={{
header: ({ navigation, scene }) => (
<Header
title=""
back
white
transparent
navigation={navigation}
scene={scene}
/>
),
headerTransparent: true
}}
/>
</Stack.Navigator>
);
}
function ProfileStack(props) {
return (
<Stack.Navigator initialRouteName="Profile" mode="card" headerMode="screen">
<Stack.Screen
name="Profile"
component={ProfileActivity}
options={{
header: ({ navigation, scene }) => (
<Header
transparent
white
title="Profile"
navigation={navigation}
scene={scene}
/>
),
cardStyle: { backgroundColor: "#FFFFFF" },
headerTransparent: true
}}
/>
<Stack.Screen
name="Pro"
component={Pro}
options={{
header: ({ navigation, scene }) => (
<Header
title=""
back
white
transparent
navigation={navigation}
scene={scene}
/>
),
headerTransparent: true
}}
/>
</Stack.Navigator>
);
}
function HomeStack(props) {
return (
<Stack.Navigator mode="card" headerMode="screen">
<Stack.Screen
name="Home"
component={HomeActivity}
options={{
header: ({ navigation, scene }) => (
<Header
title="Home"
search
options
navigation={navigation}
scene={scene}
/>
),
cardStyle: { backgroundColor: "#F8F9FE" }
}}
/>
<Stack.Screen
name="Pro"
component={Pro}
options={{
header: ({ navigation, scene }) => (
<Header
title=""
back
white
transparent
navigation={navigation}
scene={scene}
/>
),
headerTransparent: true
}}
/>
</Stack.Navigator>
);
}
export default function OnboardingStack(props) {
return (
<Stack.Navigator mode="card" headerMode="none">
<Stack.Screen
name="Jobs"
component={Results}
option={{
headerTransparent: true
}}
/>
<Stack.Screen name="App" component={AppStack} />
</Stack.Navigator>
);
}
function AppStack(props) {
return (
<Drawer.Navigator
style={{ flex: 1 }}
drawerContent={props => <CustomDrawerContent {...props} />}
drawerStyle={{
backgroundColor: "white",
width: width * 0.8
}}
drawerContentOptions={{
activeTintcolor: "white",
inactiveTintColor: "#000",
activeBackgroundColor: "transparent",
itemStyle: {
width: width * 0.75,
backgroundColor: "transparent",
paddingVertical: 16,
paddingHorizonal: 12,
justifyContent: "center",
alignContent: "center",
alignItems: "center",
overflow: "hidden"
},
labelStyle: {
fontSize: 18,
marginLeft: 12,
fontWeight: "normal"
}
}}
initialRouteName="Home"
>
<Drawer.Screen name="Home" component={HomeStack} />
<Drawer.Screen name="Profile" component={ProfileStack} />
<Drawer.Screen name="Results" component={OnboardingStack} />
<Drawer.Screen name="Elements" component={ElementsStack} />
{/* <Drawer.Screen name="Articles" component={ArticlesStack} /> */}
</Drawer.Navigator>
);
}

Answer 1

So based on the error i would say that validateRouteConfigMap.js is getting an object(routeConfigs) that you've not yet defined or passed in as undefined or you have not set a default value for. Remember Object.keys(ARRAY_OR_OBJECT_VARIABLE) requires a variable of object type (besides null)