Facing a problem while implementing stack navigation in React Native Expo

Question

So I am just starting with working on react native Expo and facing some trouble in implementing stack navigation in my expo react native application. App works fine without navigation, but as soon as I try to implement stack navigator I get an error saying Invariant Violation: "main" has not been registered.........

I've attached the error, code and package.json screenshots below.

enter image description here

enter image description here enter image description here

{
  "name": "signature-silver-service-app",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@react-native-picker/picker": "^2.4.4",
    "@react-navigation/native": "^6.0.13",
    "@react-navigation/native-stack": "^6.9.0",
    "@react-navigation/stack": "^6.3.1",
    "expo": "~46.0.9",
    "expo-image-picker": "^13.3.1",
    "expo-splash-screen": "^0.16.2",
    "expo-status-bar": "~1.4.0",
    "galio-framework": "^0.8.0",
    "react": "18.0.0",
    "react-native": "0.69.5",
    "react-native-modal": "^13.0.1",
    "react-native-modal-dropdown": "^1.0.2",
    "react-navigation-stack": "^2.10.4"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9"
  },
  "private": true
}

// import { createStackNavigator } from 'react-navigation-stack';
import React, { useState } from 'react';
import { StyleSheet, View, StatusBar } from 'react-native';
import Topbar from './Components/Topbar';
import MainScreen from './Components/MainScreen';
import styles from './Css/styles';
import AddNewItem from './Components/NewItemForm';
import SearchScreen from './Components/SearchScreen';

// const Stack = createStackNavigator();

export default function App() {



  return (
    // <View style={styles.container}>
    //   <StatusBar
    //     hidden={true}
    //   />
    //   <Topbar title="Solrose" style={styles.topBar} ></Topbar>

      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen
          name="Home"
          component={MainScreen}
          options={{ title: 'Main Screen' }}
        />
        <Stack.Screen name="AddNewItem" component={AddNewItem} options={{ title: 'Add New Item' }} />
        <Stack.Screen name="SearchScreen" component={SearchScreen} options={{ title: 'Search Orders' }} />

      </Stack.Navigator>
    </NavigationContainer>
    // </View>
  );
}

Answer 1

You need to use createStackNavigator and import it from @react-navigation-stack to make it work like this:

import { createStackNavigator } from '@react-navigation-stack';
import {NavigationContainer} from '@react-navigation/native';
import React, { useState } from 'react';
import { StyleSheet, View, StatusBar } from 'react-native';
import Topbar from './Components/Topbar';
import MainScreen from './Components/MainScreen';
import styles from './Css/styles';
import AddNewItem from './Components/NewItemForm';
import SearchScreen from './Components/SearchScreen';

const Stack = createStackNavigator();

export default function App() {
  return (
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen
          name="Home"
          component={MainScreen}
          options={{ title: 'Main Screen' }}
        />
        <Stack.Screen name="AddNewItem" component={AddNewItem} options={{ title: 'Add New Item' }} />
        <Stack.Screen name="SearchScreen" component={SearchScreen} options={{ title: 'Search Orders' }} />

      </Stack.Navigator>
    </NavigationContainer>
  );
}

You can check the working demo from here.