React Native

In this article, we will learn how to create a React Native app with Expo. Before starting, please ensure that the software listed below is installed:

• Node.js (with npm): Download it from https://nodejs.org/en url.

• Expo CLI: Install via npm (refer to the steps in the article) 

• VS Code: Download it from https://code.visualstudio.com/

• Expo Go App (in your mobile device) or Android Studio for running Android Emulator or Xcode for iOS app

As I am using Windows OS, I will demonstrate by creating an Android application. In this article, we will create a React Native app using the Expo CLI. Let’s install the Expo CLI with the command below:

npm install -g expo-cli

After executing the above command, expo-cli will be installed in few minutes.

Now, let’s execute the expo init <Name-Of-Project> command. 

In the next step, it will ask to choose a template for the project. For now, let’s start with a blank template.

After choosing a template, it will download the template and then install the JavaScript dependencies.

Now let’s open the folder (with the name specified in the Expo init command) in Visual Studio Code. In my case, I named the project 'HelloWorld'. You will see the project structure as shown in the image below.

Now let’s run the project by executing the npm start command in the terminal of Visual Studio Code. You will see a QR code, which can be used to scan and run the application directly through the Expo Go app on Android or the Camera app on an iOS device.

You can run the app in the Android emulator. Make sure you have turned on your Android emulator from the Android Virtual Device Manager. If you don’t know how to run it, first open Android Studio, click on 'More Actions', and then click on 'Virtual Device Manager'

Run the emulator image that you already have in the Device Manager. In my case, I already have a Pixel 5 device configured. Start the device by clicking the 'Start' button.

Once the emulator is ready, press the 'a' key to open the app in the Android emulator. Within a few seconds, you will see the React Native application running in the Android emulator.

Let’s change the text in App.js to “Hello World” and save it. 

Once saved, these changes auto-reload in the app (known as Hot-Reloading).