Hello Developers👨🏻‍💻.

Let's go through the process of creating an app which can run on both android and iOS platform using react-native.

First of all, what is react-native? -> React-native is a framework which is a descendent of react library from javascript. It can be used to develop mobile apps of both android and iOS without writing any different or extra code for both platforms.

Prerequisites to get started with react-native:-

1. JavaScript (Intermediate level)
2. React

Now if you are good with the prerequisites let's get started with a react native project creation.

Now there are two methods to create a react-native project :-

1. Using Expo
2. Using react-native CLI

So, what is the difference between these two?

Actually, the main difference for a beginner is that a react-native project which is created with the help of expo, comes with many useful features along with it. Expo is a third party tool which help to setup the react-native development environment easily. It can be helpful for beginners to get started without worrying too much. On the other hand react-native CLI helps us to create a bare bone react-native project with almost no inbuilt features. But in this case the developer will have total control over the project. In most cases react-native CLI is used when a developer wants to create a very OS/hardware specific feature oriented app and it can be helpful in scalability of the app.

If you are new to react-native I would recommend you to go ahead with expo to create your project.

To create an expo project first you need to install expo into your machine, you can do it by bellow commands :

npm install --global expo-cli

If you are getting some error at this point, you might have not installed nodeJS into your machine. You can easily install nodeJS by clicking here

If you have installed expo now you are good to go to create your first react-native app. To create a react-native app using expo just type the following commands :

npx create-expo-app your-app-name

or just type

expo init your-app-name

It will prompt you to choose the type of app template you want to go ahead with. You can choose any of the given options but I recommend you to go ahead with the blank template as you can always make changes as you want after you have created the project.

Once the project creation is completed, you can run it by going to the project location,

cd your-app-name

Run the metro-bundler in your terminal by command:

npm start

or

yarn start

You will see a link to metro bundler of expo server as well as a QR code. Now to see the app running, you need either a physical phone ( android / iOS ) device or android emulator or iOS simulator to run the app.

If you have a physical phone you can install expo-go app from play-store or app store and scan the QR code from the running metro bundler. In case you have an iOS device you can one the camera app and directly scan the QR code and it will redirect you to the expo-go app.

If you want to run your app in the android emulator or iOS simulator then you need to setup your machine.

To run an android emulator you need android studio in your machine. And create an emulator device of your choice (Keep in mind that play store support should be available in the device you choose, just look for play store logo while creating the emulator ).

To run an iOS simulator you need a mac machine and XCode.

If you have setup above environments already, you can just press a to run on android or i to run on iOS.

You have successfully cerated a platform agnostic application.

Now you can go ahead and open the project in a code editor of your choice and edit the code. Well to edit the code and make a good app you need to know more about react-native. So stay tuned for more updates.

Let's do it together. ✊🏻