Post
Ask Question

Getting Started with a React Native Application Tutorial

Introduction 

React Native is an open-source JavaScript library created by Facebook. It helps us to build an attractive Android, IOS, and Windows application with a native look and feel. It also uses a mobile application framework that makes the hierarchy of UI components to build JavaScript code.
 
Prerequisites
  • Ubuntu 19.04
  • Android studio
  • Android Mobile
These are the things that we need to do:
  1. Install NodeJs & NPM
  2. Install react-native CLI
  3. Install JDK
  4. Setup Android Device (Android SDK and Android Virtual Device)
  5. Choose best code editor
  6. Create Project
  7. Run the App

Install NodeJs & NPM

 
Update device
  • $ sudo apt update && sudo apt upgrade
Add NodeJs repository
  • $ curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
Install NodeJs
  • $ apt-get install -y nodejs
  • $ sudo apt-get update && sudo apt-get install yarn
install NPM
  • $ sudo apt-get install npm
Check version
  • $ node –-version
  • $ npm -V

Install React-native CLI globally

  • $ sudo npm install -g react-native-cli
Check version
  • $ React-natice –-version

Install Wtachamn

 
Watchman is an open-source tool used to watch for changes to our source across multiple files.
  • $ sudo apt-get update
  • $ sudo apt-get install -y autoconf automake build-essential python-dev libtool pkg-config libssl-dev
  • $ git clone https://github.com/facebook/watchman.git
  • $ cd watchman
  • $ git checkout v4.9.0  # The latest stable release
  • $ ./autogen.sh
  • $ ./configure --without-python  --without-pcre --enable-lenient
  • $ sudo make
  • $ sudo make install

SetUp android development

 
Here, I will provide some important info for Android development.
 
Install JDK
  • $ sudo apt-get install default-jre
  • $ sudo apt-get install default-jdk
  • $ javac -version 
Install android studio
  • $ sudo snap install android-studio --classic
  • $ android-studio
Configure the ANDROID_HOME environment variable
 
Let’s export some paths in the profile file for making an android environment.
Open the terminal and run below comments.
  • $ gedit ~/.profile
In the profile file copy the below code >> add >> save
  • export ANDROID_HOME=$HOME/Android/Sdk
  • export PATH=$PATH:$ANDROID_HOME/emulator
  • export PATH=$PATH:$ANDROID_HOME/tools
  • export PATH=$PATH:$ANDROID_HOME/tools/bin
  • export PATH=$PATH:$ANDROID_HOME/platform-tools
Configure SDK
 
Make sure your configured Android SDK is configured.
 
React Native Application 
 

Choose best code editor

 
In my case, I am familiar with VS code Editor, so I will show you how we configure on that for running react-native effectively.
 
Here, we need two important plugins that help us build and debug the React-Native app on Android.
  • Go to the extensions >> search React-Native and install React-Native tools
                                          >> search Android and install an Android debug extension, as shown in the below screenshot.
 
React Native Application

Creating a sample application

 
Now, the time to create a new react-native app by doing the below instructions.
Open terminal >> Navigate your project folder >> run below command.
  • $react-native init sampleProject 
After, running the above command, you will get React-Native project files. As shown below:
 
React Native Application
 

Run the App

 
There are two ways for running our React-native application, such as Physical device or Android virtual device (AVD).
 
Here, we can choose the physical device that has separate Ram, which provides better performance rather than AVD.
 
Note
 
Before running your app on the physical device, you need to make sure your device under the Developer mode (enable USB debugging).
 
Open the terminal with your convenient IDE and keep the follow the instructions. Given below
 
Recommended: If you are a beginner, use the below command to avoid some typical issues.
  • $ sudo apt install android-tools-adb
  • Open sample project: File >> Open folder >> YourProject >> select folder
  • Open terminal: View >> Terminal
  • Check adb: In terminal type “adb devices” and hit enter.
  • Next, we need to split two terminals.
  • Run packager: In the first terminal type “react-native start” and run
  • Run-on android: In a second terminal type “react-native run-android” and hit enter.
React Native Application

After successfully executing/installing our app on Android, you will see the Default react-native welcome screen. Shown below:

React Native Application

Let’s edit the app.js file and add/change some code. Given below

After adding some codes in app.js, click on File >> save all

React Native Application

After saving the file, the packager will be automatically updated and refreshing the app on Android.

React Native Application

Conclusion

 
In this article, we learned how we set up react-native, android studio environments, and a react-native simple demo app, that works well on our Android device. I hope you understood. If you have any issues with your demo, feel free to comment below and stay tuned for more articles.


Similar Articles