无法从“App.js”解析“react-navigation-stack”

Question

 ***package.json*** { "main": "node_modules/expo/AppEntry.js", "scripts": { "start": "expo start", "android": "expo start --android", "ios": "expo start --ios", "web": "expo start --web", "eject": "expo eject" }, "dependencies": { "@react-native-community/masked-view": "^0.1.10", "@react-navigation/native": "^5.5.1", "expo": "~37.0.3", "react": "~16.9.0", "react-dom": "~16.9.0", "react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz", "react-native-gesture-handler": "^1.3.0", "react-native-paper": "^3.10.1", "react-native-safe-area-context": "^3.0.5", "react-native-web": "~0.11.7", "react-navigation": "^4.3.9", "react-navigation-material-bottom-tabs": "^2.2.12", "react-navigation-stack": "^2.7.0" }, "devDependencies": { "babel-preset-expo": "~8.1.0", "@babel/core": "^7.8.6" }, "private": true }

Hello I am facing a issue with react navigation

I installed the react navigation dependency but error remained

 ***App.js*** import React from 'react' import{StyleSheet,Text,View}from 'react-native' import { createStackNavigator } from "react-navigation-stack"; import { createAppContainer } from "react-navigation"; import SignUp from './App/SignUp' import SignIn from './App/SignIn' import ForgotPassword from './App/ForgotPassword' class App extends React.Component{ render(){ return( <View style={styles.container}> </View> ) } } const navigator=createStackNavigator( { Registration:SignUp, Login:SignIn, Password:ForgotPassword }, { initialRouteName:'SignUp', defaultNavigationOptions:{ title:'App' } } ) const styles=StyleSheet.create({ container:{ flex:1, justifyContent:'center', backgroundColor:'#fff', paddingLeft:60, paddingRight:60, }, }) export default createAppContainer(navigator)

 ***SignUp*** import React from 'react' import{StyleSheet,Text,View,TextInput,TouchableOpacity, ImagePropTypes}from 'react-native' export default class SignUp extends React.Component{ render(){ return( <View style={styles.signup}> <Text style={styles.Text}/> <Text style={styles.string}>Hi There.</Text> <Text style={styles.string}>Welcome To APPTAK</Text> <Text style={styles.Text}>FULL NAME</Text> <TextInput style={styles.textinput} placeholder="Please Enter Your Name" underlineColorAndroid={'transparent'} /> <Text style={styles.Text}>EMAIL</Text> <TextInput style={styles.textinput} placeholder="Please Enter Your Email" underlineColorAndroid={'transparent'} keyboardType='email-address' /> <Text style={styles.Text}>PASSWORD</Text> <TextInput style={styles.textinput} placeholder="Please Enter Your Password" secureTextEntry={true} underlineColorAndroid={'transparent'} /> <Text style={styles.Text}>MOBILE NUMBER</Text> <TextInput style={styles.textinput} placeholder="Please Enter Your Mobile Number" underlineColorAndroid={'transparent'} keyboardType='numeric'/> <Text style={styles.Text}>CNIC</Text> <TextInput style={styles.textinput} placeholder="Please Enter Your CNIC" underlineColorAndroid={'transparent'} keyboardType='numeric'/> <TouchableOpacity style={styles.button}> <Text style={styles.btntext}>Sign Up</Text> </TouchableOpacity> </View> ) } } const styles=StyleSheet:create({ signup:{ alignSelf,'stretch', }: header:{ fontSize,24: color,'#6069f2': paddingBottom,10: marginBottom,40: borderBottomColor,'#199187': borderBottomWidth,1, }: textinput:{ alignSelf,'stretch': height,40: marginBottom,30: color,'#1D1105': borderBottomColor,'#f8f8f8': borderBottomWidth,1, }: button:{ alignSelf,'stretch': alignItems,'center': padding,20: backgroundColor,'#6069f2': marginTop,30, }: btntext:{ color,'#fff': fontWeight,'bold' }: string:{ alignContent,'center': justifyContent,'center': textAlign, 'center', } })

Tried all the solutions that are already present on stack overflow none of them works for me at least

Answer 1

React navigation now import from a different path

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

install these packages as well

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

Documentation https://reactnavigation.org/docs/getting-started