React Native - Environment Setup - Create a new project

In this article, we will discuss how to establish your development environment on our local system utilizing React Native framework and Android Studio to build Android Apps. Recently, I decided to explore and use React Native for developing Android Apps. However, as I was establishing my development environment in my system, I ran into a plethora of challenges. Establishing React Native on my system is challenging and requires attention to an abundance of moving pieces, even if you opt to get a sample app up and running on an emulator.


Step 1:Install Node.js 


To check if node.js is installed on your system, type node -v in the terminal. This will help you see the version of node.js currently installed on your system.

knfdev@ladmin-knf:~$ node -v
v12.18.4

If it does not print anything, install node.js on your system. To install node.js, go to the homepage, https://nodejs.org/en/download/ of node.js, and install the package based on your OS.

Based on your OS, install the required package. Once node.js is installed, npm will also get installed along with it. To check if npm is installed or not, type npm –v in the terminal as given below. It will display the version of the npm.

knfdev@ladmin-knf:~$ npm -v
6.14.8

Step 2:Install create-react-native-app

After installing NodeJS and NPM successfully in your system you can proceed with the installation of create-react-native-app (globally as shown below).

npm install -g create-react-native-app

Step 3:Create Project

Browse through the required folder and create a new react-native app using the following command

create-react-native-app KnowledgeFactoryDemo


Select 'Default new app'



After executing the above command, a folder with a specified name is created with the following contents.


Open the android folder in your project folder SampleReactNative/android (in this case). Create a file with named local.properties and add the following path to it.

  • in Windows sdk.dir = C:\\Users\\USERNAME\\AppData\\Local\\Android\\sdk
  •  
  • in macOS sdk.dir = /Users/USERNAME/Library/Android/sdk 
  • in Linux sdk.dir = /home/USERNAME/Android/Sdk

Step 4:Install JDK

To check if JDK is installed on your system, type the 'java -version' in the terminal. This will help you see the version of Java currently installed on your system.

sibinmuhammed@ladmin-H310M-S2:~/knf-reactnative$ java -version
java version "1.8.0_261"
Java(TM) SE Runtime Environment (build 1.8.0_261-b12)
Java HotSpot(TM) 64-Bit Server VM (build 25.261-b12, mixed mode)

If it does not print anything, install java on your system. To install java, go to the homepage, https://www.oracle.com/in/java/technologies/javase-downloads.html of the oracle, and install the package based on your OS.

Step 5:Installing Android Studio

Visit the web page https://developer.android.com/studio and download android studio.


Step 6:Start your android emulator

Select Tools > AVD Manager. 
Click the AVD Manager AVD Manager icon in the toolbar.



Step 7:Running Android App

knfdev@ladmin-H310M-S2:~$ react-native start

knfdev@ladmin-H310M-S2:~/knf-reactnative/KnowledgeFactoryDemo$ react-native run-android



Congratulations! You have done your first Mobile App.

More...

Popular posts from this blog

Spring boot video streaming example-HTML5

Learn Java 8 streams with an example - print odd/even numbers from Array and List

Spring Boot + Mockito simple application with 100% code coverage

Spring Boot + OpenCSV Export Data to CSV Example

Custom Exception Handling in Quarkus REST API

DataTable-Pagination example with Spring boot, jQuery and ajax

Registration and Login with Spring Boot + Spring Security + Thymeleaf

Node JS mini projects with source code - free download

Spring boot web project free download:User Registration System

Java - Blowfish Encryption and decryption Example