I started looking at some articles on React native app development to make it the subject for my new learning and I found a series by Hitesh Choudhary on youtube with the same content on what I am looking for and I started checking it out.
Check out : (https://youtu.be/kGtEax1WQFg)
As part of trying new, this time I thought of giving a try on writing articles about concepts I learn in my journey. And in the same series, I found the sponsor of the series "Hashnode" which helps with writing articles.
Reference : (https://hashnode.com/)
So jumping into the actual topic for this article, setting up the development environment for 'React native application'.
Step 1: Installing Chocolatey
Before installing, we have to make sure about the Execution policy.
A) Open Powershell in Administrator mode and check for execution policy with the below command.
>Get-ExecutionPolicy
B) In case we see anything other than "AllSigned" we have to set it to it.
>Set-ExecutionPolicy AllSigned
C) Now we should see that policy changed. For confirmation check the same again.
>Get-ExecutionPolicy
D) We should see AllSigned.
E) Goto https://chocolatey.org/install where we find a command to install Chocolatey. Copy it and paste the same in Powershell and hit enter.
F) In a few seconds, we are ready to use Chocolatey.
Step 2: Installing Android Studio
2A) Open cmd and hit the below command.
>choco install -y nodejs-lts microsoft-openjdk
2B) Install Android Studio software. We don't need to run Android Studio, but we need to use Platform tools which will be installed with its installation. Manual installation of the same might not work perfectly, so better install Android Studio.
2C) Remember the path of Android SDK when it's getting installed.
2D) In my case, my system user account is having spaces and so Android Studio did ask me for a separate location where the path of it will not have special characters. I have created a new folder name "AndroidSDK" in the c drive.
2E) After the above step, there should be a System Environment variable ANDROID_HOME which points to the**/Android** (my case its /AndroidSDK) folder formed while installing Android SDK.
2F) The platform tool we will be using would be Android debug bridge (adb)
Step 3: Now open cmd, go to the desired location and create a React Native initial app.
>npx react-native@latest init myFirstReactNativeApp
3A) This will ask us to allow installing the required modules, just continue by accepting.
Step 4: Connect any Android mobile to the system with USB and click on "Allow file transfer/ Media file transfer" and enable Developer Options by clicking build number 5-8 times from About Phone.
4A) Scroll down in the developer options and enable USB Debugging.
4B) Device should be identified with the below command to continue further.
>adb devices
Now, let's see app running the in mobile :
A) Make sure there exists local.properties file in the root folder for the app. If not, create it and place the Android SDK path to a variable as below (in my case)
sdk.dir = c\:\AndroidSDK
B) cd to myFirstReactNativeApp folder, and execute the below command
>npx react-native run-android
C) Above command opens a terminal asking the device, type in 'a' (android) and hit enter, wait for some magic to happen.
D) In a little time, we should see all modules building and React Native Starter App opened in the mobile.
That's what I wanted to cover in this article. All next and new learnings will come up in the upcoming articles. If you are still here, cheers for your interest! and thanks for reading the article till the end.
(It's my drawing 😀, you can find here https://www.instagram.com/p/B4XwITlHV7o/ )
See you!