Creating your first mobile app with react native

In this tutorial we will see how you can create react native mobile app with simple steps.

Pre-requisites before you dive into react-native (all of these pre-requisites are one time setup and even if it takes time, I recommend to invest the time since it will be only a one-time activity and will form a base of all your app developments here onwards):

• Install Node JS on your system (I prefer NVM for windows)
• Install JDK on your system if its not already there (make sure to add it to your system path)
• Install Android Studio on your system
• Make sure ANDROID_HOME is added to system PATH variable
  

  

• Add platform tools to your SYSTEM PATH variable
  

  

• Create an AVD in Android Studio which will be used to launch the app

Now open command prompt and navigate to directory in which you want the code base to reside. Run below command to create an app code base

npx react-native init app

Here “app” is the name of the folder which will be created. You can change it as per your requirement. But since this is a getting started tutorial, let’s keep things simple 😉

Once the command executes you will see a message in command prompt as shown above.

In the same command prompt navigate inside the “app” directory (or whatever name you have renamed it to) using command:

cd app

Once inside, run following command:

npx react-native run-android

At the time of writing this article 2 more command prompts windows opened, android emulator is launched at the pre-saved status.

But, we need to monitor the first command prompt itself and waiting for it to show following message:

Once you can see the above message in the very first command prompt where you fired the command, check the window with NodeJS icon in taskbar, it is another command line tool and should display following message:

If both these windows are similar to above screenshots, your app should most likely be launched and you should be able to see it in emulator:

Voila! We did it, our first react native application has been created successfully. We don’t stop here, but I will end this tutorial here. React native has too many things to explore and I will release more articles focusing on specific challenges that I faced during development. Watch out for the same.

Note: I understand the above steps may or may not work for everyone, depending on the steps involved in pre-requisites being executed correctly. If it has not worked for you, I don’t want you to be disheartened as it is just a technology and we will make it work. I want you to search for the errors encountered, and especially check stackoverflow answers as they are really helpful. Revisit all the steps in the pre-requisites to ensure everything is in place. If it is still not working, please comment your issue below and I will try to help you out 🙂