Starting Out with React Native - ByteScout
  • Home
  • /
  • Blog
  • /
  • Starting Out with React Native

Starting Out with React Native

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.

React Native developer tools help you develop apps for both the Android and iOS platforms without the need to know either Java or Objective-C. As a ‘Learn Once, Write Anywhere’ tool, it uses JavaScript to build native mobile applications for platforms, meaning JavaScript is the only language you need to use. The introduction of React Native tips also increases the efficiency of app development by allowing you to reuse vast swathes of code. Check 3 reasons why you need React Native.

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:

  1. js
  2. Python
  3. Java Development Kit (JDK)
  4. 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

  1. 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:

  1. Download and install Android Studio
  2. Select ‘Custom Installation’ and check all the boxes that are listed – Android SDK, Android SDK Platform, Performance (Intel ® HAXM), and Android Virtual Device.
  3. 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 –

  1. 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’
  2. 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:

  1. Navigate to the Windows Control Panel
  2. Click the ‘System’ settings icon
  3. Click the ‘Advanced system settings’ link
  4. Click the ‘Environment Variables’ button on the window that just popped up
  5. 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 –

  1. In Android Studio, navigate to Tools → Android → AVD Manager
  2. Click the Create Virtual Device button
  3. In the Virtual Device Configuration window, set the category to ‘Phone’
  4. Choose a device from the list and click ‘Next’
  5. Select the Marshmallow system image (with API level 23 and x86_64 ABI)
  6. 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)

cd NewProject

react-native start

To run your app on the Android emulator –

  1. Open a new command prompt and navigate to the ‘NewProject’ folder
  2. Execute the following line of code:

react-native run-android

If you’ve done everything correctly, you should see the app running in the emulator.

And that’s how you install and setup React Native! You can now create simple and complex mobile applications that run seamlessly on both the major mobile platforms using just JavaScript, thereby significantly cutting down your time and cost to get to a great app.



About the Author

ByteScout Team ByteScout Team of Writers ByteScout has a team of professional writers proficient in different technical topics. We select the best writers to cover interesting and trending topics for our readers. We love developers and we hope our articles help you learn about programming and programmers.