React Navigation Error (undefined is not an object (evaluating 'Component.router.getStateForAction'))

Question

I am Trying to create a simple navigation in React Native. but I keep getting this error that I think is linked to the react Native navigation library.

Here is my App.js code :

 import { createAppContainer } from "react-navigation";
    import { createStackNavigator } from "react-navigation-stack";
    import HomeScreen from "./src/screens/HomeScreen";
    import { createMaterialBottomTabNavigator } from "@react-navigation/material-bottom-tabs";

    const Tab = createMaterialBottomTabNavigator();

    function MyTabs() {
      return (
        <Tab.Navigator>
          <Tab.Screen name="Home" component={HomeScreen} />
        </Tab.Navigator>
      );
    }

    export default createAppContainer(MyTabs);

This is the error its generating :

Can i know your navigation library version ?

Guruparan Giritharan
– Guruparan Giritharan

2020-05-25 04:46:46 +00:00
Commented May 25, 2020 at 4:46 — Guruparan Giritharan
– Guruparan Giritharan, Commented May 25, 2020 at 4:46

Guruparan Giritharan · Accepted Answer · 2020-05-25 04:51:54Z

3

You are mixing two versions of Navigators here, the createAppContainer is used with Navigation version and the createMaterialBottomTabNavigator is used with navigation version 5. If you want to use createMaterialBottomTabNavigator the code should look like below.

import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';

function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home!</Text>
    </View>
  );
}

const Tab = createMaterialBottomTabNavigator();

export default function MyTabs() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

answered May 25, 2020 at 4:51

Guruparan Giritharan

16.4k4 gold badges30 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

0xD1x0n Over a year ago

Thank you for the clarification ! Its working now that I fixed that

Collectives™ on Stack Overflow

React Navigation Error (undefined is not an object (evaluating 'Component.router.getStateForAction'))

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related