Hi there, now that React JS has been around for a quite long time with its marvelous performance and one this is one of the reasons that today it is been used on a wide basis to develop Single Page Applications. It became more exciting with the coming of React Native to develop your mobile apps. As you know, React Native lets you build your app in JavaScript. And yes, this is a complete mobile app, not some hybrid app or mobile web app.

The reason I am writing this article is that, as a tech enthusiast with a curious mind, I started to learn React Native by building a small app. It is a new technology, it was a bit difficult at the beginning to set up the entire environment and get my app running. So for the new bees who are trying their hands on, in this new technology, I would like to share some steps to help you set up your dev environment and successfully run your first React Native app. This entire article will be a very basic to the point with reference to the Android app.

The setting up of your environment for react native is very nicely explained in their documentation. You can follow the steps for Android and get the system ready to actually start a react native app. Once you are done with the entire setup, let’s proceed.

Instead of an emulator, I prefer running and testing the app on an actual Android device. So I shall jot down steps for the same.

Step 1:

In the setup process, you will globally install the react-native-cli. So go to your destination directory in the terminal and run the following command

react-native my-app

where my-app is the desired name for your application.

Step 2:

In order to run the app on your Android device, you will have to enable the USB debugging in your device by connecting your device to your computer.

Step 3:

Navigate to your app directory and to the following folder

cd my-app/android

Inside this folder run the following command

gradlew assemble

On successful execution of the above command, an apk will be created for your app in the directory my-app\android\app\build\outputs\apk, named as app-debug.apk.

Step 4:

Now the apk file that was created in the last step, transfer that file to your android device and install the app.  Then run the app, you will happen to see a red screen with an error. Don’t bother about that. Shake your device to see the developer options and enable the option called as ‘Enable Live Reload’.

Step 5:

Again shake your phone and click on the option called ‘Dev Settings’. Now on this screen, you should see an option called ‘Debug server & port for device’. Here you need to enter your computer’s IP address followed by the default port /8081. Most importantly, you need to make sure that the device and your computer are connected to the same network.

Step 6:

No go to the root directory of your app and run the following command to start your app

react-native start

Now when your app is running, you should see in the terminal that your package runner is initialised. Post this, on your device shake the device and click on ‘Reload’. This will run the app on your device and you should see the following welcome screen

Congratulations, on running your first react-native app on your Android device. Now in order to check the ‘live reload’, in your root directory, go to the file index.andriod.js and make some text changes. The app will reload automatically and you will see your changes.

This was a very basic tutorial that will help you to begin with react-native. I am super excited to share a small app with you guys. So in my upcoming articles, I will proceed with adding something new to the app and in this course of time, we shall build a micro android app. Will share the code too on GitHub. Major giants like Facebook, Instagram, Airbnb are all using React-Native.

Let’s build something cool and learn this awesome technology. See you all soon with the next part. Till then, Happy Coding!