The popularity of React Native
One of the best parts of React Native is that it uses native UI components which give applications native-like feel. That’s the reasons why most of the investors look to create applications using React Native. Importantly, even front end developers love this framework when it comes to develop dynamic interfaces for cross platforms. According to npm trends, React Native is on top with respect to a maximum number of downloads while Ionic holds the second and Flutter is followed by.
Also Check Our Article : React Native vs Ionic
Are You All Set to Develop Your First Application on React Native?
Well, I too am all set to share my experience with React Native Development, and how created my first Android application using the framework. If you are new to this framework, this guide will help you to create the most advanced version of the application based on the React Native framework.
So, Let’s Get Started…
Before I tell you regarding the set, let’s find out what tools you need to set up the ecosystem.
You need the following tools to set up the development environment;
- Windows System (Preferably Latest System)
- NPM (Node Package Manager, V8 or Newer)
- Latest JDK (Java Development Kit)
- React Native CLI (Command Line Interface)
- Android Studio
- Built-in Emulator in Android Studio
- Visual Studio Code
Now, Let’s Learn the Set Up Step-by-Step
Step #1: Install Node.js
The first step you need to do is to install node,js. Download and install Nodejs (latest stable version) from official NodeJS site in your PC and install it. NPM is automatically installed when you install the Node.js in Windows.
Step #2: Install JDK
Now, you need to install JDK (Java Development Kit) so that you can easily run the Android Studio. You can follow the link given here to install the latest stable version of JDK.
Step #3: Install React Native CLI
Once you are done with installing NPM and JDK, you have to install React Native CLI, next to install. To install, you need to run the following command;
npm install -g react-native-cli
Use command line interpreter application which is available in most of Windows, or you can use Integrated Terminal in Visual Studio Code which you can find from option;
Note: Run Administrator Command Prompt or Command line interpreter by selecting “Run as Administrator” to run the command.
When you install CLI, it is saved in the folder created by NPM.
Now create a folder where you want your project to be saved.
Move to your directory path.
Now, you are all set to initialize the project using
react-native init <folder name> && cd <folder name>
This will walk you through creating a new React Native project (as in example) in
Let’s take a look at the image below.
Run Instructions for Android:
cd C:\Users\Saurabh\desktop\React_native_project && react-native run-android
Step #4: Install Android Studio
You need to begin with installing Android Studio. Find the latest version of Android Studio from here.
When install, you need open and select the files from the option. Check the image below;
Well, you also need to ensure that you have installed all required SDK tools that you can find from the “Android SDK” option. Generally, you will get things selected by default when you choose the latest version.
Make sure you need Intel x86 Emulator Accelerator (HAXM installer), which will help you run the emulator on the Windows. You grab more useful information referring the link:. You may also require enabling Intel Virtualization Technology by changing a BIOS setting. However, if you come across any issue, you can refer the following link: to get the solutions.
Run The Project Now
You are ready to run the project, though you need to ensure that the local server is already running. As if the server is not running, it will not let your project run. Let’s check the image below.
Step #5: Install Visual Studio Code
Having downloaded and installed Android Studio, you require downloading the latest version of Visual Studio Code. You can follow the link to download the Visual Studio Code for Windows. It’s free to download.
Note: The tutorial is for Android application. For iOS, it will create a different directory structure. We will learn this in your next tutorial.
Note: If you get an error with the following caps “java.lang.UnsupportedClassVersion Error: com/android/build/gradle/AppPlugIn: Unsupported major.minor version 52.0”, then you need to follow that the embedded JDK path is well configured.
So, finally, you have created your first React native application for Android! You can find some other ways as well and get the things done, though I have shared all my personal experience with you. However, you can enhance the experience even better by helping us know your views. Our React Native Developers are eager to listen your views on your React Native Experience. You can comment by filling up the ‘contact us’ page.