React Native Framework, As per their official framework we make quick easy guidelines for installation of react native mobile application framework on window 10 operating system.
React Native CLI
Window 10
Microsoft window 10, newly available operating system with Linux based core architecture. Its comes with flavor like Home, Professional, Work-station. On any flavor react native works.
PowerShell As Administrator
In window 10, default PowerShell Application available, open powershell with Administration rights.
Below screenshot guides how to open it.
Chocolatey
Chocolatey, a popular package manager for Windows. Enable make good features, so first setup it.
Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))
Node and Python2, JDK8
React Native Officials recommend installing Node and Python2, JDK8, let’s with Chocolatey enable new command choco, which allow to install many software easily with command lines.
choco install -y nodejs.install python2 jdk8
React Native
Install react native via npm command line
npm install -g react-native-cli
React Native, Create New Project CLI
npx react-native init AwesomeProject
Install the Android Studio, AVD, SDK
- AVD – Android Virtual Device, Emulator / virtual android device helps to test mobile application
- SDK – Software Development Kit, Android SDK – kit for different android versions for back-port comparability and development.
Windows Requirement for Android Studio
Microsoft® Windows® 7/8/10 (64-bit)
4 GB RAM minimum, 8 GB RAM recommended
2 GB of available disk space minimum,
4 GB Recommended (500 MB for IDE + 1.5 GB for Android SDK and emulator system image)
1280 x 800 minimum screen resolution
https://developer.android.com/studio/index.html, from here download latest or your operating system based android studio and SDK
Download: android-studio-ide-193.6514223-windows.exe, as per latest you can download and install.
Once you finish installation than start android studio, as I had version 4.0
Android Studio – AVD
Manager to setup Virtual Device / Mobile Emulator.
SnippetBucket Technologies Note: AVD best work with x86 as official says or Intel based processor, for AMD Machines enable Virtualization from BIOS setup, this instruction specially for AVD.
Configuration -> AVD Manager
AVD Manager, configuration your preferred device or add “New Hardware Profile” based on your required configuration.
SDK Manager
Configuration -> SDK Manager
SDK versions select, like android 10.0, android 9.0, android 8.0, you can pick only latest 10.0 as now a days. Your application / APK going to support different android versions than install according, I had installed all most required for back-port compatibility
Once AVD and SDK both setup done, mean all most android platform related setup done. Android studio only helps for setup AVD, SDK and Environment paths. Android studio not going to help for React Native Programming.
“adb” command
adb command help check and connect your mobile device via usb and emulators. In case adb command not available than follow below command to install it.
ADB, let know more https://reactnative.dev/docs/running-on-device
HOW TO RUN ?
Running the Application
The react-native-cli tool comes with some default snippets of code. To see it in action, you will have to run the application using a terminal. I am going to use an iOS simulator and an Android emulator for this purpose. Windows developers can ignore the iOS part.
Do note that, we have not made any changes in the source code of the application. To run the app, we need to trigger the below command first.
npm start
This will start the metro bundler to watch for any file changes in a .js file in your project. Make sure this command is running in a separate terminal window or a tab when you are building your project for iOS or Android.
Running on Android
To run the app with whatever current content it has on an Android simulator, you can run the following command below in the second terminal window.
react-native run-android
This command builds your app and starts it on Android simulator. This process consumes some good amount of time when building the necessary Android files for the first time for any React Native app. It will also open up a simulator device for you like below when the process is done.
Now if many abd devices their and you want to connect particular
npx react-native run-android --deviceId 266603ed
Below command with debug level
npx react-native run-android --deviceId 266603ed --verbose
Now command to find connected devices or emulator
abd devices
Additional References
Error Deprecated Gradle features were used in this build, making it incompatible with Gradle
https://www.npmjs.com/package/react-native-update-gradle
React-native plugin to update gradle version. Checks your project-level gradle files to update as necessary. Fires on link.
Usage
yarn add react-native-update-gradle
react-native link
Notes
I created this to enable better support for Kotlin-based RN modules, which require a gradle version a touch newer than the RN hello world template.
gradlew
gradlew is android command, its not react-native programming part. In react native project, their android folder, that’s for android related files. As well sometime we had issues with any dependence, we can open this android folder inside Android Studio to resolve any dependencies. Inside android folder, gradlew is command,
- For linux
- android/gradlew
- For Mac
- android/gradlew
- For Window
- android/gradlew.bat
Tips:
Issue: Deprecated gradle features were used in this build, making it incompatible with gradle x.0?
To resolve, fire below command
cd android && gradlew clean && gradlew :app:bundleRelease