Cannot convert undefined value to object - React native with expo

Issue

I want to use navigator for my app and im using expo to work on my project: this is my App.js:

import { View } from "react-native";
import LoginPage from "./components/LoginPage";
import MainComponent from "./components/MainComponent";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "react-navigation-stack";

const App = () => {
  const Stack = createStackNavigator();

  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Login" component={LoginPage} />
      </Stack.Navigator>
    </NavigationContainer>

    // <LoginPage></LoginPage>
  );
};

export default App; 

the error comes from -> const Stack = createStackNavigator(); it says cannot convert undefined value to object, i tried to follow up with documentation but not going anywhere. Any little hint would be helpful, thanks in advance!

Solution

1. The way that you import createNativeStackNavigator is wrong.
2. You need to call createNativeStackNavigator outside of your component tree.

Try the code below:

import { View } from "react-native";
import LoginPage from "./components/LoginPage";
import MainComponent from "./components/MainComponent";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

const App = () => {

  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Login" component={LoginPage} />
      </Stack.Navigator>
    </NavigationContainer>

    // <LoginPage></LoginPage>
  );
};

export default App; 

Answered By - Caner Kuru