Set up environment for iOS & Android using React Native Framework

In below youtube video, I have covered this blog already so incase you do not want to read through you can watch it as well:

So let’s begin… in this blog, I will explain how to set up an environment for React Native Framework.

Many different kind of people use React Native: from advance iOS/android developers to React beginners as well.

To work with React Native, you should have good understanding of the Javascript fundamentals.

Set up Environment

There are two ways with which we can set up React Native framework on our local machine.

• React Native CLI
• Expo CLI

In this tutorial, I will show you how to set up React Native with expo-cli. To install expo-cli, you need to have node already installed. Till today, expo-cli support node till version #13. So in case you have node > 13, you may need to downgrade it. There is an NVM utility to manage multiple node version.

So now lets install expo-cli assuming you have node version below 13. Open up Terminal and write command:

$ npm install -g expo-cli

The command will install the expo-cli library on your local machine and then you are ready to build your first React Native project.

Set up 1st React Native Project

Once the installation of expo-cli completes, you can type below command:

$ expo init reactnativetraining

This command will ask you to select any one of the following templates

• blank – a minimal app as clean as an empty canvas
• blank (Typescript) – same as blank but with Typescript configuration
• minimal – bare and minimal, just the essentials to get you started
• minimal (Typescript) – same as minimal but with Typescript configuration

You should select according to you liking, here I am selecting blank with Typescript as it will allow me to use typescript and it will also give me folder structure.

Once the project setup is done, please go to the project folder and use any one command listed below:

$ cd reactnativetraining

$ npm run start // you can open ios, android or web from here... OR
$ npm run ios  // OR
$ npm run android // OR
$ nom run web

If you have run $ npm run web It will compile the project and will fire up the webpage in your local browser on port 19006

Open up the project in your editor and look around to get familiarise. App.tsx is the main file where you can change something in the <Text /> node and see the change reflect in the browser.

This is it… your React Native environment & project setup is done and ready to explore.