Create Your First React Native App and run it in your phone under 5 minutes

In this blog we will learn how to create a React Native Application from a beginner’s perspective.

React Native is an open-source mobile application framework created by Facebook with its initial release way back in 2015.The working principles of React Native are virtually identical to React except that React Native does not manipulate the DOM via the Virtual DOM.

For the Prerequisite part one must have the Basic Understanding of React and JSX components

Let’s get started

To start you need to have node already installed on your device, if you haven’t installed it. You can do it from the link given below.

https://nodejs.org/en/download/

Next run the commands in the following sequence:

> npm i -g create-react-native-app
> create-react-native-app my-project

Here the name of the project used is “my-project”.

To run your app in your phone we will expo,

Expo is a framework and a platform for universal React applications. It is a set of tools and services built around React Native and native platforms that help you develop, build, deploy, and quickly iterate on iOS, Android, and web apps from the same JavaScript/TypeScript codebase. ~Expo Docs

So let’s install it:

npm install — global expo-cli

Before we npm start we need to 2 changes:

1.) Replace your code in App.js with the below code snippet:

2.) Change the following section of code in your package.json file:

Now we run the command -

npm start

After you run the command the below screen would get open in your browser

Next we have to install an application from the Play Store(Android Users) or App Store(iOS Users) called Expo which looks like-

Once the app is downloaded you need to scan the QR code displayed on the bottom left of the browser screen from the app and just wait till it installs the all the JavaScript bundles required to run the application.

Once all the modules are been loaded, the screen should look like this

Any changes made in the code will be directly reflected in the mobile via fast refresh. In case if it doesn’t work just shake your phone, a pop-up screen would appear with reload and other features. Do play around with the code and explore the features.

So that’s it in this blog. Hope you would’ve learnt something new. Keep Learning, Keep Exploring!!!