#100DaysOfCode Day 38: Dipping Toes to React Native

Hello, World!

Today, I will be taking an intermission from my usual React front-end development to introduce a new friend, React Native!

React Native is a JavaScript framework for writing natively rendering mobile applications for iOS and Android. It is based on Facebook’s famous JavaScript library, React. However, instead of targeting browsers, React Native is meant for mobile application development. The fact that React Native can be used to write both iOS and Android apps means that you can share one code for two different platforms, thus streamlining the whole development process!

Setting up the development environment

In short, there are two ways to set up your React Native development environment: Expo CLI or React Native CLI. If you are new to mobile development and are starting off with several beginner tutorials, then the best way to set up your React Native environment is with Expo CLI. On the other hand, if you are fairly familiar with mobile development and want to use Android Studio or XCode alongside your React Native environment, then you will have to install through the React Native CLI.

In this article, I will be going through the React Native CLI. If you want to use Expo CLI, then you can view the documentation (which I will link at the bottom of this page).

The instructions will differ from different development operating systems and the targetted operating system. In my case, the development operating system will be Windows, while the target operating system is Android.

Install Required Dependencies

The requirements for starting your React Native development environment is Python2, a JDK, Node.js, and Android Studio. To install Python2, JDK, and Node.js, it is recommended that you install them using Chocolatey, a popular package manager for Windows. To do this, simply open a Command Prompt as an Admin and run the following command:

choco install -y nodejs.install python2 jdk8

Make sure that the version of Node is above 8.3 and your JDK is either version 8 or newer.

Android Development Environment

Setting up your Android Development Environment might not be an easy task, so pay careful attention to the following steps.

1. Install Android Studio

You can download and install Android Studio from this link. When installing, choose a “Custom” setup when promoted. Make sure that the boxes for the following are checked:

• Android SDK
• Android SDK Platform
• Android Virtual Device
• Performance (Intel HAXM)

Once setup has finished and you are presented with the Welcome screen as shown below, continue to the next step.

Welcome Screen of Android Studio

2. Install the Android SDK

By default, Android Studio will install the latest Android SDK by default. As of now, this Android SDK is Android 10 (R). However, to build React Native applications with native code, you will have to install Android 10 (Q) SDK. To install this SDK, you can access the SDK manager by clicking the Configure button on the bottom right corner, and then select SDK Manager.

Next, select the SDK Platforms tab from within SDK Manager, then check the box next to Show Package Details in the bottom right corner. Look for and expand the Android 10 (Q) entry, then make sure the following items are checked:

• Android SDK Platform 29
• Intel x86 Atom_64 System Image

Next, select the SDK Tools tab and check the box next to Show Package Details here as well. Look for and expand the Android SDK Build-Tools entry and make sure that 29.0.2 is selected.

Finally, click Apply to download and install the Android SDK and related build tools.

3. Configure the ANDROID_HOME environment variable

The React Native tools require some environment variables to be set up in order to build apps with native code. To change your environment variable:

1. Open the Windows Control Panel.
2. Click on User Accounts, then click User Accounts again
3. Click on Change my environment variables
4. Click on New… to create a new ANDROID_HOME user variable that points to the path to your Android SDK.

Now, by default your SDK should be installed in C:\Android\tools\bin. However, this isn’t always the case. In fact, my SDK was installed in C:\Users\%USERNAME%\AppData\Local\Android\Sdk, so make sure you get your path right! To find the actual location of the SDK in Android Studio, go to the “Preferences” dialog under Appearances & Behavior -> System Settings -> Android SDK.

Now, open a new Command Prompt window to ensure the new environment variable is loaded before proceeding to the next step:

1. Open Powershell
2. Write down Get-ChildItem -Path Env:\ into Powershell
3. Verify ANDROID_HOME has been added

4. Add platform-tools to Path

The last step is to add platform-tools to your Path variable inside your environment variables by inputting the following path:

C:\Android\tools\bin\platform-tools

Now, you can test your React Native CLI by running

npx react-native init Project_Name

React Native has a built-in command-line interface, which you can use to generate a new project. You can access it without installing anything globally using npx, which ships with Node.js. Now, let’s see a few examples of what we can make with React Native!

Some React Native applications

Here are some React Native applications you can get your hand dirty on.

Hello World

The quintessential app in any developer’s arsenal! To make this app, simply edit your App.js file to the following:

import React from 'react';
import { Text, View } from 'react-native';
const HelloWorldApp = () => {
 return (
  <View style={{
    flex: 1, justifyContent: 'center', alignItems: 'center'
  }}>
  <Text>Hello, World</Text>
  </View>
  )
}
export default HelloWorldApp;

You will then see the following result:

Hello, World Application from React Native

Props Application

This app will make use of React’s props functionality. The code is as follows:

import React from 'react';
import { Text, View, StyleSheet } from 'react-native';
const styles = StyleSheet.create({
  center: {
    alignItems: 'center'
  }
})
const Greeting = (props) => {
  return(
    <View style={styles.center}>
      <Text>Hello {props.name}</Text>
    </View>
  );
}
const LotsOfGreetings = () => {
  return (
    <View style={[styles.center, {top: 50}]}>
      <Greeting name='Rexxar' />
      <Greeting name='Jaina' />
      <Greeting name='Valeera' />
    </View>
  );
}
export default LotsOfGreetings;

your result is as follows

Props Application from React Native

Conclusion

It was really interesting to finally work with React Native. Don’t get me wrong, though: React Native isn’t easy. In fact, I have not really got the basics of React figured out. Overall, this means that I need to get the fundamentals of JavaScript down to its heart.