CODEWITHSUNDEEP
javascriptreact-nativeerror-handlingreact-navigationcomputer-science
Sarimm Chaudhry
Sarimm Chaudhry

Reputation: 199

ReferenceError: Property 'NavigationContainer' doesn't exist

I am making an App with react native and in it i have a welcome screen that can take you to the login or sign up pages now to do this i am using the @react-navigation library but i seem to encounter an error upon running the application as i have the Stack Navigation code setup in my App.js which establishes all of the screens.

This is the Error:

ReferenceError: Property 'NavigationContainer' doesn't exist

This However didnt really make sense to me as i had already downlaoded all of the neccsary packages and the IDE itself showed no compilation error comfirming the libraryies presence

This is the App.js code from which the error if from:

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import WelcomeScreen from './WelcomeScreen';
import Login from './Login';
import SignUp from './SignUp';

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Welcome"
          component={WelcomeScreen}
          options={{title: 'Welcome'}}
        />
        <Stack.Screen name="Login" component={Login} />
        <Stack.Screen name="SignUp" component={SignUp} />
      </Stack.Navigator>
    </NavigationContainer>
       );
    };

This is the actual error screen:

Error

I'm pretty stuck on this part so if there is anything that can help please do share it

Thanks!

Upvotes: 0

Views: 1863

Answers (2)

Spike Vinalyan
Spike Vinalyan

Reputation: 77

Looks like you are calling the NavigationContainer in your WelcomeScreen component. Remove that call because you only need to use them in your app's root.

Upvotes: 0

Eragon
Eragon

Reputation: 21

Maybe there is an error in your package.json file. Make sure to have at least these dependencies listed in this file:

"dependencies": {
    "@react-navigation/native": "^6.1.6",
    "react-native": "0.71.8",
    "react-native-safe-area-context": "4.5.0",
    "react-native-screens": "~3.20.0",
  },

If one of the dependencies is missing, install them with the associated npm command!

Upvotes: 0

Related Questions