in a fresh created react native project, bootstrapped using @react-native-community/cli, i installed @react-navigation/native-stack guided by youtube video.
I ended up with code:
import {NavigationContainer} from "@react-navigation/native"
import {createNativeStackNavigator} from "@react-navigation/native-stack";
import WelcomeReactNative from "./screens/WelcomeReactNative.tsx";
const Stack = createNativeStackNavigator()
function App(): React.JSX.Element {
return (
// <WelcomeReactNative/>
<NavigationContainer>
<Stack.Navigator initialRouteName='WelcomeReactNative'>
<Stack.Screen name='WelcomeReactNative' component={WelcomeReactNative}/>
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
It didn’t work. Error pop up in emulator from with i cant copy text
.
and i dont fined it DevTools console
without it, prj runs fine
return (
<WelcomeReactNative/>
// <NavigationContainer>
// <Stack.Navigator initialRouteName='WelcomeReactNative'>
// <Stack.Screen name='WelcomeReactNative' component={WelcomeReactNative}/>
// </Stack.Navigator>
// </NavigationContainer>
);
I want to add navigation functionality, but i am not sure how to move forward.
After error message showing, i have to press”a – run on Android” in Metro console, in order to be able to run app again.
my package.json
{
"name": "TestApp",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"lint": "eslint .",
"start": "react-native start",
"test": "jest"
},
"dependencies": {
"@react-navigation/native-stack": "^7.2.0",
"react": "18.3.1",
"react-native": "0.76.5"
},
"devDependencies": {
"@babel/core": "^7.25.2",
"@babel/preset-env": "^7.25.3",
"@babel/runtime": "^7.25.0",
"@react-native-community/cli": "15.0.1",
"@react-native-community/cli-platform-android": "15.0.1",
"@react-native-community/cli-platform-ios": "15.0.1",
"@react-native/babel-preset": "0.76.5",
"@react-native/eslint-config": "0.76.5",
"@react-native/metro-config": "0.76.5",
"@react-native/typescript-config": "0.76.5",
"@types/react": "^18.2.6",
"@types/react-test-renderer": "^18.0.0",
"babel-jest": "^29.6.3",
"eslint": "^8.19.0",
"jest": "^29.6.3",
"prettier": "2.8.8",
"react-test-renderer": "18.3.1",
"typescript": "5.0.4"
},
"engines": {
"node": ">=18"
}
}