CODEWITHSUNDEEP
react-nativereact-navigation
Maifee Ul Asad
Maifee Ul Asad

Reputation: 4607

react-native error in NavigationContainer

As I'm new to react-native, I'm just trying to build a simple app in react-native that can navigate.

index.js

import React from 'react';
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
import 'react-native-gesture-handler';
import {NavigationContainer} from '@react-navigation/native';
import Login from './Login';
import createStackNavigator from '@react-navigation/stack/src/navigators/createStackNavigator';

const Stack = createStackNavigator();

function MyStack() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Home"
          component={App}
          options={{title: 'Welcome'}}
        />
        <Stack.Screen name="Profile" component={Login} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

AppRegistry.registerComponent(appName, MyStack);

Now it is giving me error :

enter image description here

If I wrap that MyStack it gives me another error :

enter image description here

My package.json:


  "dependencies": {
    "@freakycoder/react-native-helpers": "^0.1.2",
    "@react-native-community/masked-view": "^0.1.6",
    "@react-navigation/native": "^5.0.6",
    "@react-navigation/stack": "^5.0.6",
    "react": "16.9.0",
    "react-native": "0.61.5",
    "react-native-dynamic-vector-icons": "^0.2.1",
    "react-native-gesture-handler": "^1.6.0",
    "react-native-improved-text-input": "^0.0.1",
    "react-native-login-screen": "^0.3.6",
    "react-native-safe-area-context": "^0.7.3",
    "react-native-screens": "^2.0.0-beta.8",
    "react-native-spinkit": "^1.5.0",
    "react-native-splash-screen": "^3.2.0",
    "react-native-vector-icons": "^6.6.0"
  },
  "devDependencies": {
    "@babel/core": "^7.8.4",
    "@babel/runtime": "^7.8.4",
    "@react-native-community/eslint-config": "^0.0.7",
    "babel-jest": "^25.1.0",
    "eslint": "^6.8.0",
    "jest": "^25.1.0",
    "metro-react-native-babel-preset": "^0.58.0",
    "react-test-renderer": "16.9.0"
  },

In my app/build.gradle I have added these two :

implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'

Re-started and invalidated cache too.

Upvotes: 1

Views: 3215

Answers (1)

satya164
satya164

Reputation: 10145

The error is because AppRegistry.registerComponent takes a function returning a component, but you're passing a component.

Change

AppRegistry.registerComponent(appName, MyStack);

to

AppRegistry.registerComponent(appName, () => MyStack);

You are also importing createStackNavigator from wrong place. You need to import it like this:

import { createStackNavigator } from '@react-navigation/stack';

Upvotes: 3

Related Questions