how to use createStackNavigator correctly in react native - react-native

Question

I'm learning react native navigation from https://reactnavigation.org/docs/hello-react-navigation
This is my package.json:
{
"name": "ReactNativeNavigation",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"#react-native-community/masked-view": "^0.1.10",
"#react-navigation/native": "^5.5.1",
"#react-navigation/stack": "^5.4.2",
"react": "16.11.0",
"react-native": "0.62.2",
"react-native-gesture-handler": "^1.6.1",
"react-native-reanimated": "^1.9.0",
"react-native-safe-area-context": "^3.0.2",
"react-native-screens": "^2.8.0"
},
"devDependencies": {
"#babel/core": "^7.10.2",
"#babel/runtime": "^7.10.2",
"#react-native-community/eslint-config": "^1.1.0",
"babel-jest": "^26.0.1",
"eslint": "^7.2.0",
"jest": "^26.0.1",
"metro-react-native-babel-preset": "^0.59.0",
"react-test-renderer": "16.11.0"
},
"jest": {
"preset": "react-native"
}
}
This is App.js:
Just copied the code
import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
function HomeScreen() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
</View>
);
}
const Stack = createStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
When I run "react-native run-android",it doesn't work properly.
The screenshots is:
enter image description here
And error info in command prompt is:
Deprecated Gradle features were used in this build, making it incompatible with Gradle 7.0.
Use '--warning-mode all' to show the individual deprecation warnings.
See https://docs.gradle.org/6.0.1/userguide/command_line_interface.html#sec:command_line_warnings
FAILURE: Build failed with an exception.
* What went wrong:
A problem occurred configuring project ':react-native-screens'.
> Could not resolve all artifacts for configuration ':react-native-screens:classpath'.
> Could not resolve com.android.tools.build:gradle:3.3.1.
Required by:
project :react-native-screens
> Could not resolve com.android.tools.build:gradle:3.3.1.
> Could not get resource 'https://dl.google.com/dl/android/maven2/com/android/tools/build/gradle/3.3.1/gradle-3.3.1.pom'.
> Could not GET 'https://dl.google.com/dl/android/maven2/com/android/tools/build/gradle/3.3.1/gradle-3.3.1.pom'. Received status code 400 from server: Bad Request
> Could not resolve com.android.tools.build:gradle:3.3.1.
> Could not get resource 'https://jcenter.bintray.com/com/android/tools/build/gradle/3.3.1/gradle-3.3.1.pom'.
> Could not GET 'https://jcenter.bintray.com/com/android/tools/build/gradle/3.3.1/gradle-3.3.1.pom'. Received status code 400 from server: Bad Request
* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.
* Get more help at https://help.gradle.org
BUILD FAILED in 26s
error Failed to install the app. Make sure you have the Android development environment set up: https://reactnative.dev/docs/environment-setup. Run CLI with --verbose flag for more details.
Error: Command failed: gradlew.bat app:installDebug -PreactNativeDevServerPort=8081
FAILURE: Build failed with an exception.
* What went wrong:
A problem occurred configuring project ':react-native-screens'.
> Could not resolve all artifacts for configuration ':react-native-screens:classpath'.
> Could not resolve com.android.tools.build:gradle:3.3.1.
Required by:
project :react-native-screens
> Could not resolve com.android.tools.build:gradle:3.3.1.
> Could not get resource 'https://dl.google.com/dl/android/maven2/com/android/tools/build/gradle/3.3.1/gradle-3.3.1.pom'.
> Could not GET 'https://dl.google.com/dl/android/maven2/com/android/tools/build/gradle/3.3.1/gradle-3.3.1.pom'. Received status code 400 from server: Bad Request
> Could not resolve com.android.tools.build:gradle:3.3.1.
> Could not get resource 'https://jcenter.bintray.com/com/android/tools/build/gradle/3.3.1/gradle-3.3.1.pom'.
> Could not GET 'https://jcenter.bintray.com/com/android/tools/build/gradle/3.3.1/gradle-3.3.1.pom'. Received status code 400 from server: Bad Request
* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.
* Get more help at https://help.gradle.org
BUILD FAILED in 26s
at makeError (E:\learn\ReactNative\ReactNativeNavigation\node_modules\execa\index.js:174:9)
at E:\learn\ReactNative\ReactNativeNavigation\node_modules\execa\index.js:278:16
at processTicksAndRejections (internal/process/task_queues.js:97:5)
at async runOnAllDevices (E:\learn\ReactNative\ReactNativeNavigation\node_modules\#react-native-community\cli-platform-android\build\commands\runAndroid\runOnAllDevices.js:94:5)
at async Command.handleAction (E:\learn\ReactNative\ReactNativeNavigation\node_modules\react-native\node_modules\#react-native-community\cli\build\index.js:186:9)
(I paste the code into "Code Snippet" in order to keep the code display normal,I used the stackovflow the first time)
What should I do to solve these problems?
In fact,the demo below is still not working:
import 'react-native-gesture-handler';
import * as React from 'react';
import { NavigationContainer } from '#react-navigation/native';
export default function App() {
return (
<NavigationContainer>{/* Rest of your app code */}</NavigationContainer>
);
}
When I comment out this line of code "import 'react-native-gesture-handler';"
It works!
I sincerely look forward to your help!

Answer 1

I run the project in android studio,but it display the error info
"Gradle project sync failed. Please fix your project and try again"
so I do the following:
1.click File->Invalidate Caches/Restart in android studio
2.edit C:\Users\your user name.gradle\gradle.properties
## For more details on how to configure your build environment visit
# http://www.gradle.org/docs/current/userguide/build_environment.html
#
# Specifies the JVM arguments used for the daemon process.
# The setting is particularly useful for tweaking memory settings.
# Default value: -Xmx1024m -XX:MaxPermSize=256m
# org.gradle.jvmargs=-Xmx2048m -XX:MaxPermSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8
#
# When configured, Gradle will run in incubating parallel mode.
# This option should only be used with decoupled projects. More details, visit
# http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
# org.gradle.parallel=true
#Mon Jun 08 10:57:14 GMT+08:00 2020
# systemProp.http.proxyHost=127.0.0.1
# systemProp.http.proxyPort=1080
# systemProp.https.proxyHost=127.0.0.1
# systemProp.https.proxyPort=1080
I Comment out the the last four lines codes;
3.wait the Gradle installed
4.close android studio
5.run:react-native run-andriod
the result is:
E:\learn\ReactNative\ReactNativeNavigation>react-native run-build
error Unrecognized command "run-build".
info Run "react-native --help" to see a list of all available commands.
E:\learn\ReactNative\ReactNativeNavigation>react-native run-android
info Running jetifier to migrate libraries to AndroidX. You can disable it using "--no-jetifier" flag.
Jetifier found 1103 file(s) to forward-jetify. Using 8 workers...
info Starting JS server...
info Launching emulator...
info Successfully launched emulator.
info Installing the app...
> Task :app:processDebugResources FAILED
Deprecated Gradle features were used in this build, making it incompatible with Gradle 7.0.
Use '--warning-mode all' to show the individual deprecation warnings.
See https://docs.gradle.org/6.0.1/userguide/command_line_interface.html#sec:command_line_warnings
60 actionable tasks: 3 executed, 57 up-to-date
FAILURE: Build failed with an exception.
* What went wrong:
Execution failed for task ':app:processDebugResources'.
> A failure occurred while executing com.android.build.gradle.internal.tasks.Workers$ActionFacade
> Unable to delete directory 'E:\learn\ReactNative\ReactNativeNavigation\android\app\build\generated\not_namespaced_r_class_sources\debug\r\androidx\appcompat' after 10 attempts
* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.
* Get more help at https://help.gradle.org
BUILD FAILED in 23s
error Failed to install the app. Make sure you have the Android development environment set up: https://reactnative.dev/docs/environment-setup. Run CLI with --verbose flag for more details.
Error: Command failed: gradlew.bat app:installDebug -PreactNativeDevServerPort=8081
FAILURE: Build failed with an exception.
* What went wrong:
Execution failed for task ':app:processDebugResources'.
> A failure occurred while executing com.android.build.gradle.internal.tasks.Workers$ActionFacade
> Unable to delete directory 'E:\learn\ReactNative\ReactNativeNavigation\android\app\build\generated\not_namespaced_r_class_sources\debug\r\androidx\appcompat' after 10 attempts
* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.
* Get more help at https://help.gradle.org
BUILD FAILED in 23s
at makeError (E:\learn\ReactNative\ReactNativeNavigation\node_modules\execa\index.js:174:9)
at E:\learn\ReactNative\ReactNativeNavigation\node_modules\execa\index.js:278:16
at processTicksAndRejections (internal/process/task_queues.js:97:5)
at async runOnAllDevices (E:\learn\ReactNative\ReactNativeNavigation\node_modules\#react-native-community\cli-platform-android\build\commands\runAndroid\runOnAllDevices.js:94:5)
at async Command.handleAction (E:\learn\ReactNative\ReactNativeNavigation\node_modules\react-native\node_modules\#react-native-community\cli\build\index.js:186:9)
E:\learn\ReactNative\ReactNativeNavigation>
Finally,I open a command prompt and input:
react-native start
It works！
I encountered a lot of other mistakes in the process of solving the problem like
"Couldn't delete E:\learn\ReactNative\ReactNativeNavigation\android\app\build\outputs\apk\debug\output.json"
So I delete the file ,but I think this operation is useless.
another error is
"Android Studio AVD - Emulator: Process finished with exit code 1"
and so on.
At last, I want to know what it did when "react-native start" run.
When should I run react-native start?
I was still confused after reading it.
Thanks for Ravi reply.
I hope my answer helps.