How to install React Native on MacOS

To begin with, configuring the React Native app development environment and running the application is not a joke. It can be one of the toughest parts as many configurations and tools may be required depending upon the system platform. One must carefully set up and configure the development eco-system in order to carry out a smooth development and debugging process.

In this tutorial, we will give you step by step guidance on how to configure the React Native development environment to run the React Native application starting from zero. In the macOS environment, we can produce the React Native application for both Android and iOS platforms.

So, let’s get started!

Pre-requirements

Here, we have the list of development tools that we need to install before we begin the configuration:

• Xcode

• VScode (Visual Studio Code)

• GitSCM

iOS Platform

We are going to configure the environment for the development of a React Native application for the iOS platform.

Installing Node

Here, we recommend installing Node and Watchman using Homebrew. We need to run the following commands in a Terminal after installing Homebrew:

brew install node
brew install watchman

Xcode & CocoaPods

Now, we need to install XCode from App Store and navigate to Preference -> Location, and then assign Command Line Tools as directed in the screenshot below:

Cocoapods

CocoaPods is a dependency manager for Swift and Objective-C Cocoa projects built on Ruby for MacOS. Ruby is installed in the macOS system by default. Hence, we just need to install CocoadPods by running the following command:

sudo gem install cocoapods

Here, our setup is completed for the development of the React Native app for the iOS platform.

Android Platform

Now, we start the configuration for the Android platform in order to enable us to develop React Native apps for Android.

Here, we have three main steps to set up Android on macOS:

1. First, we need to install JDK 8 with Brew by running the following command:

brew install --cask adoptopenjdk/openjdk/adoptopenjdk8

Next, we need Android Studio for SDK and build tools that support Android app development.

2. Installing Android Studio

We need to download the Android Studio setup file from the official site and run it. Then, we need to follow the installation wizard.

Note that React Native requires the Android 10 (Q) SDK in particular. Make sure to select it before starting the installation.

Additional Android SDKs can be installed through the SDK Manager in Android Studio.

For additional configurations, we need to navigate to Appearance & Behavior → System Settings → Android SDK. Then, we need to put a checkmark on Android SDK Platform 29 and Intel x86 Atom_64 System Image as directed in the screenshot below:

Next, we click on Apply and it will automatically download the selected tools.

3. Config Android Home

Then, we need to figure out how to configure the environment variables. This will enable us to run the React Native app in for Android platform in emulators. For that, we need to go to the home directory and create a .bashrc file. Inside the file, we need to paste the command codes from the following snippet:

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

Now, we need to save the file and reopen it through the terminal, which will run the commands inside the file.

Starting our First Application

Now, we are ready to run our first React Native application in macOS.

First, we need to launch VSCode then open an integrated terminal in it. Next, we need to run the following command in the terminal in order to download and set up the started React Native project:

npx react-native init RNEdpresso

Now, we can open this project with VScode.

In order to run the application in the iOS emulator, we need to run the following command in the terminal:

  react-native run-ios

This will trigger the series of configuration and setups to run the application as shown in the screenshot below:

We need to be patient in this first run as it may take a while to build the app.

After the successful build, we will get the React Native starter template executed in the iPhone simulator as shown in the emulator screenshot below:

Run-on Android

MacOS doesn’t fully support Android emulator , which means the emulator may run pretty slow. We may need to run the application on an actual smartphone. For now, in order to run the app in Android emulator, we can simply run the following command in the terminal:

react-native run-android 

Hence, the React Native started template will run on Android emulator as shown in the emulator screenshot below:

We have successfully configured the required tools and environments to run the React Native app for both Android and iOS platforms in the macOS system.

Conclusion

Configuring the environment and tools to develop and run React Native applications can be a daunting process. But this article will surely make it simpler and easier. You will be able to configure the environment and tools in a matter of minutes with the exception of download time. Here, we got the stepwise guidance on configuring, installing, and running the React native application on both Android and iOS platforms in a macOS system. Remember, we can always use the real mobile device in case the Android emulator is slow.

Since you have your starter template for React Native app, you can now dive deeper into React Native app development. If you want to learn to learn more about React Native ecosystem and build your very first React Native app, check out this React Native tutorialhttps://instamobile.io/react-native-tutorials/build-react-native-app/ and try to implement it.

Peace out folks!!