If you’re an aspiring app developer, you’ll know that Android uses Java as its primary programming language and iOS uses Objective-C; they’re two different languages and if you want to develop an app that runs on both operating systems, you need to be familiar with them both. This significantly increases your development time, thereby increasing the overall cost – and that’s where React Native steps in, bringing tremendously easy app development methods.
Setting up this wonder-software is pretty easy. The instructions for installation vary depending on the operating system and the platform you’d like to start off with. Going with the most popular choice, let’s take a look at how to properly install and set up React Native on Windows.
Take a closer look at React Native tutorial:
Step 1: Installing the required applications
In order to install React Native on Windows, you first need to install the following applications:
- Java Development Kit (JDK)
- React Native: Once Node.js is installed in the system, you can then install React Native through the command prompt by executing the following command:
npm install -g react-native-cli
- Android Development Environment (Android Studio):
Android Development Environment is essential to run React Native applications through the Android Virtual Device (AVD), which is an Android emulator. The procedure to install Android Studio is as follows:
- Download and install Android Studio
- Select ‘Custom Installation’ and check all the boxes that are listed – Android SDK, Android SDK Platform, Performance (Intel ® HAXM), and Android Virtual Device.
- Go through with the rest of the installation instructions
Step 2: Android SDK installation
The Android SDK can be installed through the SDK Manager; there are two ways to get to it –
- You can launch the SDK manager from the ‘Welcome to Android Studio’ Screen (which opens when you Android Studio for the first time) by clicking on ‘Configure’ → ‘SDK Manager’
- Or, you can access it from within the Android Studio by navigating to File → Settings → Appearance and Behavior → System Settings → Android SDK.
React Native requires the Android 6.0 (Marshmallow) SDK. In order to install it, click on the ‘SDK Platforms’ tab within the SDK Manager, and then click on the ‘Show Package Details’ checkbox at the bottom. Navigate to Android 6.0 (Marshmallow) and select the following items:
- Google APIs
- Android SDK Platform 23
- Intel x86 Atom_64 System Image
- Google APIs Intel x86 Atom_64 System Image
Once that is done, click on the ‘SDK Tools’ tab and then click on the ‘Show Package Details’ checkbox again. Navigate to ‘Android SDK Build Tools’ and select ‘Android SDK Build-Tools 23.0.1’. And that’s it!
You can now click on the ‘Apply’ button at the bottom to download and install the selected components.
Step 3: Setting up the ANDROID_HOME environment variable
Setting up the ANDROID_HOME environment variable is crucial to be able to run React Native example apps in the Android emulator. The procedure to set it up is as follows:
- Navigate to the Windows Control Panel
- Click the ‘System’ settings icon
- Click the ‘Advanced system settings’ link
- Click the ‘Environment Variables’ button on the window that just popped up
- Click ‘New’ and specify the path to your Android SDK and click ‘OK’
Step 4: Android Virtual Device
Now that you’re done configuring and tweaking the settings, you need an Android device to run and test applications. There are two choices; you can either use an Android Smartphone connected to the computer or you can create an Android Virtual Device in Android Studio. It’s highly recommended that you use a virtual device, as it is much easier and quicker to deploy and test applications with only minor changes to the source code. Here’s how you can create an Android Virtual Device –
- In Android Studio, navigate to Tools → Android → AVD Manager
- Click the Create Virtual Device button
- In the Virtual Device Configuration window, set the category to ‘Phone’
- Choose a device from the list and click ‘Next’
- Select the Marshmallow system image (with API level 23 and x86_64 ABI)
- Set a name for the device and click ‘Finish’ to create a virtual device
Once the device is created, click on the name of the device in the ‘Your Virtual Devices’ list, and press the ‘run’ button to start the virtual device.
Step 5: Installation Test
The final step is to test the React Native installation to ensure that everything is set up correctly. To do that, you need to create a new React Native Project. This can be accomplished by executing the following lines of code in the Command Prompt:
react-native init NewProject (you can substitute ‘NewProject’ with the name you want to give your project)
To run your app on the Android emulator –
- Open a new command prompt and navigate to the ‘NewProject’ folder
- Execute the following line of code:
If you’ve done everything correctly, you should see the app running in the emulator.