CODEWITHSUNDEEP
react-nativemobileexpo
0xD1x0n
0xD1x0n

Reputation: 653

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

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 :

enter image description here

Upvotes: 0

Views: 628

Answers (1)

Guruparan Giritharan
Guruparan Giritharan

Reputation: 16334

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>
  );
}

Upvotes: 3

Related Questions