React Native 101

Introduction

I'm sure many of you have heard before about React Native, this fancy library that allows us to create mobile native apps for both Android and iOS, by just knowing JavaScript and React. "Learn once, write anywhere", that's their slogan. It has the potential to integrate with native components, even with full native applications. When you are getting started using it, the entire community would recommend that you make use of Expo's services. It's a set of tools and libraries that come together to facilitate the development cycle of a React Native app. Among the features it provides, you can easily create a working project within minutes, as well as creating production builds for each platform, which is really straightforward. However, as a framework, Expo limits the capabilities of React Native, by not allowing you to integrate with several libraries that don't fully rely on the JavaScript environment. This can become a big limitation when it comes to payment methods, push notifications, and plenty of other platform-specific features. In case your project doesn't fit with the limitations of Expo, in this article I'll walk you through the steps you need to take to have a working plain React Native project for both iOS and Android.

Prerequisites

I'll make a small disclaimer, that this tutorial is macOS oriented. In fact, the only way you have to create an iOS build is from a Mac computer.

Node.js

The first thing you need to install is Node.js. Use the method you feel more comfortable with. One option is to directly install it with homebrew:

Alternatively, you can use Node Version Manager (nvm https://github.com/nvm-sh/nvm) if you want to handle different Node versions.

Watchman

This is a service Facebook provides which is basically a file watching service. It will constantly watch for changes in your project files and refresh the work-in-progress application.

iOS

The following are the steps you'll need to follow to configure your iOS environment.

Cocoapods

It's a dependency manager that handles iOS dependencies. It's built with Ruby, so you'll need to make sure Ruby is working on your computer (it comes installed with your OSx).

Xcode

Go to the App Store, and download the latest version of Xcode. When done, open it and go to "Preferences..." from the Xcode menu. Go to the Locations panel and install the Command Line Tools:

Android

Setting up the Android environment is a little trickier. Please follow the instructions to make sure everything is working properly.

Java Development Kit

There can be several ways to install it,o but homebrew is one of the easiest:

Android Studio

Just download it from its source (https://developer.android.com/studio/index.html). Make sure these options are selected during the installation: - Android SDK - Android SDK Platform - Performance (Intel ® HAXM) - Android Virtual Device

Android SDK

When the installation is done, open Android Studio, and go to the SDK Manager like this:

Once you are there, click the checkbox on the bottom right corner that says "Show Package Details". You need to install at least Android 9.0 SDK, but you can also install higher versions. Check the following and click Apply to download and install them:

ANDROID_HOME Environment variable:

Depending on the shell you're using, add the following lines to your $HOME/.zshrc, $HOME/.bash_profile or $HOME/.bashrc:
‍

react-native-cli

Finally, we've successfully configured both iOS and Android development environments and we're ready to start creating our first pure React Native app. We'll make use of its built-in command-line interface. We can get access to it without even installing it by using npx that comes with our Node.js installation. Just run the following command, choosing the project name you want:

This will automatically create a new project based on their boilerplate. You can now open the created folder with the code editor of your preference.

Running the app

To start running the app we just created, the first step is to start the code watcher. The boilerplate comes with several script commands set up in the package.json file. You can run it with npm run, but the boilerplate comes configured by default to use yarn. Run this command on a Terminal:

Let's see how to run it on both platforms.

iOS simulator

For iOS, it's pretty straightforward. We'll make use of the Xcode simulators. Please open a new Terminal instance. The simulator will automatically pop up by running:

You'll see the following:

Android emulator

For Android, you need to set up and open previously an Android emulator. To create one, open the subfolder /android inside your project directory with Android Studio. Open the AVD Manager, like this:

And then Click on "Create Virtual Device..." and follow the steps to set up a device. It's important to select at least the API Level 28. When done, you'll see your new device and you can click on the play button to start it.

After the emulator pops up, run this on a new Terminal instance:

And you'll see it running, like this:

Live reload

This is a really useful tool that comes with React Native. Thanks to the watcher we started, you'll be able to see any implemented changes instantly on the devices. Take a look at the example below:

The End

This is the basic starting point to begin with your React Native development experience. Thanks for reading, and start rocking with it!

‍