Create your first React Native App

Published in

How To React

5 min readSep 20, 2020

This is my first tutorial on React Native. In this tutorial, I’ll explain how to create your first app using React Native. I will start by installing tools required by React Native to create an app but first, let me explain to you what is React Native and why you should use React Native to create your first app.

React Native

React Native is a framework that enables web developers to create a mobile application using their existing knowledge in Javascript. It offers to create a mobile application for both Android and iOS without sacrificing the end user’s experience or application quality.

Why React Native?

Yes, there are alternatives to React Native like ionic and flutter but ionic is used to create a hybrid application that doesn’t give us native-like experience. It’s just a sugar-coated HTML wrapped in javascript and flutter experience is better than react native because it doesn’t need a bridge to communicate with the native components but flutter uses Dart which is again a new programming language you need to learn for creating apps in a flutter. But then the question arises why should we use React Native? Check the below-mentioned points.

Very Big Community.👨‍👨‍👧‍👧
Fastest growing framework for creating native apps.🏃
Easy to write code📝
Single code two platforms (Android, iOS)📱
Save time in developing app = Save Cost 🤑
As it’s just a wrapper for native component nothing is stopping you to use native code (Java, Swift)⛔️
It uses Javascript 😄

Getting Started

Environment Setup

OS — Windows
Target — Android

Install Chocolatey package manager from here to download node, python, and java.
After installing chocolatey run the below command to install node, python, and java.

choco install -y nodejs.install python2 openjdk8

3. Now download Android Studio and configure your SDK and environment variable. Check the React Native official document on how to set up that.

Setup React Native Project

4. Open the terminal in the directory where you want to set up your react native project and run below command

npx react-native init firstRNProject

5. This will setup the default boilerplate for our android and iOS development. If you go inside the folder you will notice that there are two directories one is android and another is iOS.

6. Open the android folder in the android studio. After that, it will start to update our Gradle to the latest version and start indexing our files.

7. Now open the terminal inside the project and start Metro

npx react-native run-android

It will start bundling our project and will create a bundle file to be run in our emulator or device. If the device is connected to the machine the build will be open in the device else it will open in our emulator.

8. Now open the project in your code editor and remove all code from the app.js file and create a simple functional component with some custom dummy text.

9. Now add some styling to it. Here we are importing StyleSheet from the react-native library, After that creating some objects of styles and then assigning container object style to view and dummyText object style to Text.

10. Now as we have created a simple app it’s time to create our build .apk file for android. Navigate to build menu in Android Studio and click on Generate signed bundle / APK .

11. Now select APK and click on the Next button

12. Now under Key store path click Create new

13. Pick a path to store our key file and fill the required details like Nam, Password, City, etc and click OK.

14. Now click on Next select release and check both the V1 and the V2 signature and click Finish.

15. After some time an app-release.apk file will be generated in your project android directory \android\app\release . Copy that file to your Android device and install it. If you get the below dialog box just click on install anyway as you are not a recognized developer. (Note: install from an unknown source should be checked in your device)