How To Run React Native App On Mac

How To Install and Setup React Native on Mac

by Rajesh Bhagia
12th Jul, 2021
Last updated on 05th Aug, 2021
15 mins read

How To Install and Setup React Native on Mac

React Native Development Environment Installation:

With the rapid growth of online websites, businesses, and the general ecosystem, it is crucial that website UIs load quickly on smartphones to encourage smartphone-based internet consumption. Facebook developed React Native from a need to generate UI elements efficiently, which formed the basis for creating the open-source web framework. Its native cross-platform capabilities allow usage for a wide range of platforms for application development, including Android, Web, Windows, UWP, tvOS, macOS, iOS, and AndroidTV. Microsoft also released a preview release in May 2020 that expanded the range of the React Native world, allowing desktop app development. React Native runs in the background of the destination device, and then communicates with the native platform via a batched asynchronous bridge. Its three main advantages are:

It allows faster development due to its native nature
Though it has a syntax styling similar to CSS or HTML, it is much quicker and efficient
It is flexible as it allows developers to write native code in various languages, including Java, Kotlin, and Swift.

This article is about how to install and configure React Native CLI environment.
First, we will learn how to install the framework, then check whether it works well and finally develop an app.

Prerequisites

Basic computer proficiency
An account with Administrative privileges on your computer
Access to the outlined documents and software
A working internet connection to download the installation files

Audience

This article guides first-time React Native users, junior developers, and developers with no experience with React Native. If curiosity nudged you to learn the framework due to the hype around React, then this is the guide you need.

System requirements

Software

Xcode version 11.3.1 or newer is required.
Nodejs version 12 LTS or newer is required.

Hardware

MacOS requires a Mac device to operate
Ram - 4GB
Storage - 10GB

These requirements ensure your tools run quickly and have enough storage for installation and development.

System Requirements

React Native requires macOS High Sierra (10.13) or higher to run efficiently.

Installation through HomeBrew:

HomeBrew is a package manager that helps you install and manage packages on Mac, and thus it will be essential to our installation process. You will install HomeBrew so that you can use it to install all the other tools necessary for React Native environment, including Nodejs, git, Watchman, and JDK.

First download HomeBrew using the above link, then execute the command below in the Command Line Interface:

brew—version

The command verifies whether HomeBrew has been successfully installed and outputs the specific version installed as the following result shows:

homebrew 2.1.7 homebrew/homebrew-core (git revision f487; last commit 2020-05-26)

When the version is unavailable, you can install HomeBrew via this code:

/usr/bin/ruby -e "$(curl –fsSL  https://raw.githubusercontent.com/HomeBrew/install/master/install)"

After installation, check whether HomeBrew has installed properly using the following command:

brew--version

If the software is well installed, the result will show the version and date as shown:

homebrew 2.1.7 homebrew/homebrew-core(git revision f487; last commit 2020-05-26)

Nodejs

React Native is a JavaScript platform; hence it needs Nodejs to provide a JavaScript runtime. Nodejs also provides essential tools such as a local webserver with live reloading, network tools, command-line tools, and web APIs.

Use the HomeBrew command below to install Nodejs:

brew install node

Check whether the installation is successful through the following command:

node—version

If the installation has occurred successfully, the Nodejs version will show up:

V12.6.0

Installation of Nodejs also includes installation of npm, the Node Package Manager. It would help if you had npm to help you install packages, libraries, and vital tools for your React development environment. To verify if npm is successfully installed, execute the following command:

npm—version

If the installation is successful, you will see the version as shown below:

6.9.0

How To Install and Setup React Native on Mac

Watchman

Watchman monitors the files and folders utilized by the framework and triggers specific actions if the files are modified. It would be best if you had Watchman for React Native to monitor source codes and rebuild them once they are changed.

To install Watchman, execute the command below:

brew install watchman

Verify installation through:

watchman --version

if properly installed, the result will show the version as shown below:

4.9.0

React Native CLI

You need React Native CLI to develop the app by react-native. React Native CLI is installed by executing the npm command below:

npm install --g react-native-cli

Check if the installation is successful using the following command:

react-native --version

Sometimes, users may get an error when using the npm install --g react -native-cli command. To avoid this, try entering sudo before this command, then enter your system password.

If the installation is successful, you will see the version as shown:

react-native-cli:2.0.1 react-native:n/a - not inside a React Native Project

Xcode

You need Xcode for iOS app development, and you can download it via the above link. After installation, configure the Command Line Tools. Execute Xcode and go to

Xcode > Preferences > Locations

You should see the Command Line Tools settings showing the version of Xcode as:

Xcode 10.2.1 (10E1001)

How To Install and Setup React Native on Mac

If the settings do not look like that, select the last version of the Command Line Tool from the dropdown menu.
Go to components and select an iOS emulator, then download it (this is for those without iOS devices to run and test their apps on. It is also easier than using an actual device.)
Move account tabs, select apple id, and input your apple id.
Open Xcode and create a new project, name it anything, then close it. After project creation, click the root file and select "sign in and capabilities," then select your user id. Select your emulator and keep it ready for development.

Cocoapods

Coacoapods manages dependencies in iOS development, and thus it is necessary to develop an app by react-native.

Install Cocoapods through the following command:

sudo gem install cocoapods

Verify installation through:

pod --version

if installation is successful, you can see the version as shown below:

1.7.5

JDK

The Java Development Kit is essential for the development of Android apps with react-native. Install JDK through the command below:

brew tap AdoptOpenJDK/openjdk brew cask install adoptopenjdk8

Verify installation through:

java -version

If you see the Java version as shown below, then Java has been successfully installed:

openjdk version "1.8.0_222" OpenJDK Runtime Environment (AdoptOpenJDK)(BUILD 1.8.0_222-b10) OpenJDK 64-Bit Server VM (AdoptOpenJDK)(build 25.222-b10, mixed mode)

JDK Installation also installs the Java Compiler, which can be verified by executing the following command:

javac -version

If the installation is successful, the following result shows up:

javac 1.8.0_222

Android Studio

Android Studio is also an essential tool for developing an Android app using react-native.

CONFIGURATION

On the install type screen, select the custom option, choose your preferred theme, then select the performance (Intel R HAXM) option and Android Virtual Device option. Click Next, then leave the Emulator settings as they are, and click next again. Allow the standard installation to continue and click Finish to complete the process.

Android Studio

ANDROID STUDIO SDK CONFIGURATION

Click Configure>SDK Manager and proceed to Android SDK Configuration.

Select the Show Package Details option and select the following options:

Android SDK Platform 28
Intel X86 Atom System Image
Google APIs Intel x86 Atom System Image
Google APIs Intel x86 Atom_64 System Image
Click ok to install the options selected.

How To Install and Setup React Native on Mac

In the SDK Tools Window, select show package details >Android SDK Build Tools >Android SDK Build Tools 23.0.1.

ANDROID STUDIO ENVIRONMENT VARIABLE CONFIGURATION

You need to set environment variables to ensure the development environment fits your specifications. Ensure that the ANDROID_HOME environment variable connects to your existing Android SDK to avoid complications.
Open and include the following code to the ~/.bash_profile file or the ~/.zshrc file to add the environment variables:

Android Studio

For .bash_profile users, use the following command:

source ~/.bash_profile

After configuration, restart the terminal, then execute the following command: adb

The correct result if all variables are successfully configured is:

Android Debug Bridge Version 1.0.41 version 29.0.1-5644136 Installed as /Your Android SDK Directory Location/platform-tools/adb

Git

1.You can also use git, which comes with Xcode. However, if its unavailable, run the code below:

brew install git

git is a substitute for the Android Studio development environment.

Gradle Daemon

Sometimes you may need to modify the java code, in which case, your development speed will be affected. Gradle Daemon is a tool that manages these changes to speed up your development.

Other Installation Methods

Expo CLI

Expo CLI is a tool built to install and manage react-native frameworks. However, its unsuitable feature is that it has numerous native features, which makes building an app tedious and also makes the app size more extensive than it needs to be. Additionally, incorporating elements in an app that are not available in Expo CLI is difficult, making the tool unsuitable for developers. Despite that, Expo CLI has many useful native tools, unlike React Native CLI, such as geolocation, camera, the microphone that can come in handy for most application needs. Expo CLI is a much easier route than the react-native CLI route.

The installation process is as follows:

1.Install the Expo CLI command line utility using:

Npm install –g expo-cli

2.Run the command below to create your first project:

expo init my app

3. Browse to the directory with the following command in the terminal:

4. Finally, run the project

Expo start

5. A development environment server will be started by these commands. Running the app requires installing the Expo client app to your device (iOS/Android) then connecting it to your computer. Android requires scanning the QR code on the terminal to authenticate the project, while iOS requires QR code scanning using the camera app. On the Android (emulator/real device), use the following command to initialize the app:

npm run android

6. While on the iOS emulator run:

npm run ios

Expo has docs that you can reference for solutions or even utilize the Expo Forums created for the Expo community to ask questions.
Expo is mostly best suited for beginners as it does not include the use of native code thus cannot be used to develop complex applications with custom components.

Testing

Project structure

React Native project structure consists of a project directory with configuration files such as package.json, app.json, .watchman.json at the root; separate Android and iOS folders; a _tests_ folder with validation tests for the project; a nodes_module for housing smaller app modules; and an index.js file that maps the application and serves as the initialization point of the application. package.json specifies project dependencies and versions, while app.json contains the app name.

The npm (node package manager) manages the node_modules folder, which stores all the project library dependencies. You should avoid modifying the files present in the folder since alterations performed cannot be assured to be stable from updates/installs. Assets in the public folder are to be shared publicly. The src folder contains all development work by the developer, including components and source codes.

Android Studio

Developing an app

1. First, you need to lock the version you build with to ensure the app still works even after updates, using the following command:

npm config set save-exact=true

2. Create a native project through the command:

react-native init AwesomeProject cd AwesomeProject react-native run-ios

Your new app will run successfully in the emulator.

3. In iOS, execute the command below:

cd SampleApp #react-native run ios npm run ios

The react-native app will show up on the emulator.

4. On Android, run the following command:

cd SampleApp #react-native run-android npm run android

Your Android emulator will output:

Welcome to React

Second App Verification

Hello World is a simple program for most development environments. Open index.ios.js for iOS or index.android.js for Android, then proceed to delete everything between the tags <View></View>. Write <Text>Hello World</Text> and execute the emulator.

The result will be Hello World on the screen.

Modifying Your App

After successful testing, you can modify your app through the following steps:
Open index.ios.js or index.android.js and edit some files.
Click CommandX + R in the iOS Emulator and reload to see changes.

Potential issues

You might encounter problems while installing Cocoapods or React Native CLI - the most probable solution is entering a sudo command before the installation command, which will prompt you for your system password. Input the password, and your installation will go through just fine.
You might also get this result [Broken AVD system path. Check your ANDROID_SDK_ROOT value]. Check if you installed android -sdk using homebrew; if you did, then uninstall it through the following command: brew uninstall android-sdk
Another error is No ANDROID_HOME which means the bash files do not point to the ANDROID_HOME path. You can correct this through the following steps:

Open and add the following code to the ~/.bash_profile file or the ~/.zshrc file to add the environment variables:

#export ANDROID_HOME=$HOME/Library/Android/sdk export ANDROID_HOME=android SDK directory location/ 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

For .bash_profile users, use the following command:

source ~/.bash_profile

Then proceed to verify the correction using the following code:

echo $ANDROID_HOME // default: /Users/<USERNAME>/Library/Android/sdk

Android Emulator won't run from Android Virtual Device Manager – Android Studio rarely shows an error that may occur in the Android Device Emulator; thus, you need to utilize the command line and run the commands below to check the name of the Android virtual device:

Avdmanager list avd

Then run

Emulator –avd <NAME>

Wait for the device to boot up, then run your app in the emulator

React-native run-android

Your app should run successfully.

No Connected devices- you should run the following command

React-native run-android

Wrong Android emulator – you need to find the right emulator using the following code:

find - -name emulator –type f /Users/<USERNAME>/Library/Android/sdk/emulator // this /Users/<USERNAME>/Library/Android/sdk/tools/emulator // not this

Restart the terminal and verify the error is gone.
Avdmanager not found- write ~/.bash_profile, then add the following code afterwards:

PATH=$PATH:$ANDROID_HOME/tool s/bin export PATH

then run

source ~/.bash_profile

Quit and restart the terminal, then run the tools.

Uninstallation procedure

Sometimes you might need to uninstall and wipe off the whole react-native environment due to issues such as a broken development environment which can be caused by misusing commands or assigning storage to variables incorrectly.

To do so efficiently, use the uninstall command together with the -g flag, then include the scope if the package is scoped. A good example is as follows;

npm uninstall -g react-native-cli

npm uninstall <package_name>

for scoped package use

npm uninstall <@scope/package_name>

As our installations have a package.json file, you might need to remove a package from the dependencies in that file. Use the following commands to effect these changes:

npm uninstall --save <package_name>

or the following for a scoped package

npm uninstall --save <@scope/package_name>

You will also need to verify if the uninstallation is successful through the following commands on macOS:

ls node_modules

This command ensures the node_modules do not contain a folder for the uninstalled files.

CAVEAT:

You can find more sample codes online to test your proficiency of React Native and get better at the skill.
React Native is based on MIT License that grants Facebook copyright for portions of React Native for macOS extension derived from React Native.
Remember to only download software from the official stated sites to avoid downloading compromised, malware-ridden software that can cripple your computer. If your computer shows any warning while executing any of the above steps, ensure to verify the software, ask an expert or ask on online community platforms.
After completing and understanding all these steps successfully, you are now officially a beginner. You can proceed to the next stages of React Native app development until you become an expert. Some of the most significant areas you need to look at afterwards include animation, command-line instructions, components, shareable APKs, custom fonts, debugging, ESLint, images, layout, HTTP requests, Firebase integration, listview, native modules, and routing.

The guide presented has shown how to install React Native through various methods and why the tools stated are required, then showed examples of apps and finally the uninstallation procedure. Tooling and development in React Native are simple, and the learning curve is short, making it an ideal framework for web developers.

The growth of internet consumers, cross-platform development, and the whole of the internet ecosystem is an excellent catalyst for React Native to grow in popularity among developers. It offers them faster development speed while offering internet consumers speedier loading times and more beautiful website UIs.

As you have seen, React development is simple; hence it should convince you to get started and launch your own apps within a short period. Being a new but highly applicable language, React Native holds a lot of opportunities, career wise and development wise. There are also numerous React Native platforms on the internet that can help you solve challenges you might face in development. Keep coding and have fun!

SPECIAL OFFER Upto 50% off on all courses
Enrol Now

Suggested Blogs

Thank You! We have sent an e-mail with a link to confirm your subscription.