Why is REACT Native Essential?
- You can create UI for each iOS and Android platforms with React Native Framework.
- As React Native parts have counterpart rights, each Android and iOS apps might be reused for these parts.
- You’ll be able to both combine REACT Native parts into the current utility’s code or you need to use the Cordova-based code utilizing the plugin. Nonetheless, Cordova and Ionic code should be constructed to your present app.
- React Native growth is comparatively straightforward, quick, and environment friendly.
We are going to learn to set up and setup React Native on Ubuntu on this article. For profitable set up, all of the steps under should be adopted one after the opposite.
To obtain and efficiently set up React-Native to your laptop, it is advisable take into account the minimal specs required to help the app and run it easily.
Software program necessities:
Software program necessities: -h3
To effectively set up and arrange React-Native in your Ubuntu machine, you will want to put in the next:
- Android Studio
- Android SDK
- Set up JDK
- Node Js
- React native cli
Set up Process
Step 1: Set up Node.js and npm
1. First replace the apt package deal supervisor:
$ sudo apt-get set up -y build-important
2. Now, run the next command:
$ curl -sL https://deb.nodesource.com/setup_4.x | sudo -E bash $ sudo apt-get set up -y nodejs
Following Node.js set up, proceed with NPM or Node Bundle Supervisor set up.
three. These instructions will assist you understand if it has been already put in or not:
$ which npm
Four. If NPM is already put in, it’s going to return:
5. To NPM, run the command in time periodinal:
$ curl http://npmjs.org/set up.sh | sh
Step 2: Set up JDK
Java is used to construct native Android apps. Which means that Java Improvement Equipment (JDK) is required for working with tasks in React Native.
Set up the JDK with the next instructions:
$ sudo add-apt-repository ppa:openjdk-r/ppa $ sudo apt-get replace $ sudo apt-get set up openjdk-Eight-jdk
Step three: Set up Android Studio
To work with React Native growth, Android studio should be put in. From the web site listed under we will simply obtain it.
For Extra particulars on the set up strategy of Android SDK please click here.
Step Four: Set up Android SDK
The latest Android SDK comes by default with Android Studio. However it is the Android 6.zero (Marshmallow) SDK that’s required to construct a React Native app with native code. You’ll be able to set up further Android SDKs in Android Studio by way of the SDK Supervisor.
You’ll be able to entry the SDK Supervisor from the Android Studio Welcome display. Click on on Configure and select SDK Supervisor.
SDK supervisor -> SDK platforms
Then test the field within the backside proper nook of the “Present Bundle Particulars” field. Discover and expand the Android 6.zero(Marshmallow) entry, after which be sure to test the next objects:
- Google APIs
- Android SDK Platform 23
- Intel x86 Atom_64 System Picture
- Google APIs Intel x86 Atom_64 System Picture
1. Run the command:
$ sudo nano $HOME/.bash_profile
To be able to construct apps with native code, the React Native instruments want some environmental variables.
2. Copy the strains under and paste them into the terminal:
export ANDROID_HOME=$HOME/Android/Sdk export PATH=$PATH:$ANDROID_HOME/instruments export PATH=$PATH:$ANDROID_HOME/platform-tools
Save and exit the file utilizing under instructions:
Press Ctrl + O (Write out)
Then press Enter
And press Ctrl + x (exit)
Step 5: Set up Autotools-dev
You first want to put in Autotools-dev which is a package deal with a number of different instruments, i.e. aclocal automaker, earlier than going forward and putting in Watchman. Copy and paste within the terminal to put in it:
$ sudo apt-get set up aclocal
$ sudo apt-get set up automake
To be able to proceed the set up, you may be requested to decide on a Y/N choice. Please enter Y, then press Enter.
Step 6: Set up Watchman
As soon as the Autotools-dev is put in, proceed and set up Watchman, a Fb software for file system surveying. If you would like the very best outcomes, you should set up the software.
Run these instructions to put in Watchman:
$ git clone https://github.com/fb/watchman.git $ cd watchman $ git checkout v4.9.zero # the newest steady launch $ ./autogen.sh $ ./configure $ make $ sudo make set up
Step 7: Set up Circulation
Use the next command to put in move:
$ wget https://github.com/fb/move/releases/obtain/v0.62.zero/flow-linux64-v0.62.zero.zip $ unzip flow-linux64-v0.62.zero.zip
$ cd move $ sudo mv move /usr/native/bin/move
Step Eight: Set up React Native
1. The subsequent step is to instal React Native. It must be famous that it is advisable use sudo to have React Native put in as root, since we might be putting in it globally. That is the code you should use:
$ sudo npm set up -g react-native-cli
2. Customers who put in NPM with one other technique can set up React Native as a traditional consumer utilizing this code:
$ npm set up -g react-native-cli
You’ll be able to go forward and begin creating your individual app(s) when you are carried out by putting in all the required packages!
Create a New Venture
1. Begin with the next command to create an app undertaking:
$ react-native init DemoApp
2. Setting Up an Android Gadget
Solely apps downloaded by the Google Play might be arrange and run by default on most Android units. To put in your app throughout growth, it is advisable allow USB Debugging in your machine.
You will first must activate the Builders choices menu by going to Settings — About telephone —Software program Data — after which faucet the Construct quantity row on the backside seven instances to activate your machine’s USB debugging system.
You’ll be able to then return to Developer Settings to allow “USB debugging.”
Let’s begin on an Android machine now to run our React Native tasks. Go ahead to your growth machine and plug in your machine utilizing USB.
Verify the producer code with lsusb:
Output might be like:
Bus 002 Gadget 001: ID 1d6b:zero003 Linux Basis three.zero root hub Bus 001 Gadget 004: ID 174f:241a Syntek Bus 001 Gadget 003: ID 0cfthree:e300 Atheros Communications, Inc. Bus 001 Gadget 002: ID 06cb:0081 Synaptics, Inc. Bus 001 Device 010: ID 2717:ff48 Bus 001 Gadget 001: ID 1d6b:zero002 Linux Basis 2.zero root hub
A number of units have been linked to the USB machine. Our Android machine is:
Bus 001 Gadget 010: ID 2717:ff48
These Four digits, which kind a part of the machine ID, might be required from this line of code:
Gadget ID: 2717:ff48 first Four-digit ID: 2717
Subsequent, the next code within the terminal must be copied and pasted:
$ adb units
Begin the DemoApp undertaking by executing the under code:
The code on a terminal is as follows:
$ cd DemoApp $ react-native run-android
A failed code reveals that different companies within the system use the default React Native port. The next code can then be examined:
$ adb reverse tcp:8081 tcp:8081
Uninstall React Native on Ubuntu:
1. Uninstall React Native:
$ npm uninstall -g react-native-cli
2. Uninstall NPM modules
Removing of npm modules / third-party libraries is almost similar to npm modules set up. The next command permits you to uninstall the third-party libraries in React Native. Substitute the package deal title with <title>.
npm uninstall <title> –save
This command removes the package deal from each node modules folder and package deal.json. You should utilize the next command if you wish to delete the dependency within the international scale:
npm -g uninstall <title> –save
three. Uninstalling international packages
Use the uninstall command with -g flag to uninstall international package deal within the command line.
$ npm uninstall -g <package_name>
npm uninstall -g jshint
Be taught the core ideas of React Native Elements, API, and Navigation with React Native Coaching
Though the REACT Native Framework has some loopholes, it remains to be the quantity one alternative for builders in the React Native growth business. We’ve efficiently put in React Native on Ubuntu 18.04 server and created our first React App.