“”
React Native 101: An Introduction for beginners

react Native 101

  View more techs   

React Native 101

 

Fabián Alvariza

Fabián Alvariza

June 8, 2020

 

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:


brew install node


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


nvm install node

 

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.


brew install watchman

 

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).


sudo gem install cocoapods

 


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:

React Native 101

 

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:


brew cask install adoptopenjdk/openjdk/adoptopenjdk8

 


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:

React Native 101


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:

React Native 101

 


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:


export ANDROID_HOME=$HOME/Library/Android/sdk export PATH=$PATH:$ANDROID_HOME/emulator export PATH=$PATH:$ANDROID_HOME/tools export PATH=$PATH:$ANDROID_HOME/tools/bin export PATH=$PATH:$ANDROID_HOME/platform-tools

 

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:


npx react-native init PureReactNative


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:


yarn start


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:


yarn ios


You'll see the following:

React Native 101


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:

React Native 101


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:


yarn android


And you'll see it running, like this:

React Native 101


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:

React Native 101

 

The End

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

Fabián Alvariza

Fabián Alvariza

Fabián is a senior full-stack developer with more than five years of experience working on projects for the US market. He is currently working with the latest technologies, such as React, React Native, Node, and Ruby on Rails. Fabián is passionate about understanding the products he helps bring to life and providing his insight to ensure their success. He enjoys teamwork and keeping up to date with the latest tech trends.

Contact us

Ready to get started? Use the form below or give us a call to meet our team and discuss your project and business goals.
We can’t wait to meet you!


Follow Us
See our client reviews