Environment setup for React-native in macOS.

As a mobile app developer, we know there are multiple platforms like iOS and Android. When we are developing any application you need two developers who can separately develop apps for Android and iOS but what if a single developer can develop apps for both platforms which will give an advantage like cost-cutting. So single code base that targets multiple platforms is everyone looking for. So, react-native is one of technology which provides us multi-platform development. Whenever I tried to understand or learn react-native I always had a question in my mind like why we need to do environment setup and for that why need of all these dependencies or all other tools. And in search of that, I figure out the basic idea of it which we will understand in this blog.

Environment Setup

For Environmental setup following are the tools required and we will be understanding them one by one.

1. Install Homebrew
2. Install node.js and NPM
3. Install Watchman
4. Install React-Native CLI
5. Platform Specific setup
   iOS app Setup —
   1. Install Xcode
   2. Install Cocoapods
   Android Setup —
   1. Install JDK(Java Development Kit)
   2. Install Android Studio
   3. Configure environment variables.

1. Install Homebrew :

It is a free and open-source software package management system which simplifies the installation process of the required software on macOS.

Run following command in terminal which will install Homebrew in mac

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

2.Install node.js and NPM

React Native requires Node.js and npm (Node Package Manager) to be installed.

node.js

Node.js is an open-source server environment.

Node.js allows you to run JavaScript on the server.

Start learning Node.js now »

NPM

NPM The default package manager for Node.js. NPM is used to download JavaScript packages from the Node Package Manager. Node package manager is nothing but collection of software tools that automates the process of installation, upgrading, etc.

You can install them using Homebrew:

brew install node

3. Install Watchman

Watchman is facebook tool which automatically detect the changes in code and push to device without manually refreshing it.

brew install watchman

4. Install React Native CLI

React Native CLI is a command-line tool which is used for creating and managing React Native projects.

npm install -g react-native-cli

5. Platform specific setup

iOS Specific Setup

1. Install Xcode — Xcode is nothing but the IDE for iOS developer which is used to develop iPhone/iPad/iWatch app.

From here you can download the required Xcode version

2. Install Cocoapods — It is dependency manager for swift and objective c from where you can download required third party library.

$ sudo gem install cocoapods

Android Specific Setup

1. Install JDK(Java development Kit) —
   You need to have Java installed on your system to develop Android applications. As name give it is kit where you can find all components required to develop appliocation.

• You can download and install it from the Oracle website (https://www.oracle.com/java/technologies/javase-jdk11-downloads.html).
• Alternatively, you can use Homebrew to install AdoptOpenJDK:

brew tap adoptopenjdk/openjdk
brew install adoptopenjdk8

2. Install Android Studio —
Android Studio is the official IDE for Android development.

Download and install Android Studio from the official website: https://developer.android.com/studio

• Follow the installation instructions and make sure to install the Android SDK and Android Virtual Device (AVD) during the setup process.

3. Configure environment variables —
Configuration of environment variable is used store app secrets and configuration data, which are retrieved by your running app when needed.
So for android studio you need to set Environment variable which many tools read to determine the Android SDK installation directory. To run tools from the command line without including the full path to the executable.

Add the following lines to your ~/.zprofile or ~/.zshrc (if you are using bash, then ~/.bash_profile or ~/.bashrc) config file:

Before adding it to your profile you need to open the profile by running following command in terminal.

cd ~
touch ~/.bash_profile; open ~/.bash_profile

The above command will open the bash profile where you have to write the following line which will setup the environment variable.

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

After adding this line save the changes and run the following command in the terminal.

source ~/.bash_profile

In this way, we are done with the react-native environment setup for macOS.

After completing this you can run following command in terminal which will create new react-native project.

npx react-native init MyProjectName

Run your React Native app:

Navigate to your react-native project

cd MyProjectName

Start Metro Bundler —
Metro is the JavaScript build tool for React Native. To start the Metro development server.

npx react-native start

Following the command to run the app on ios

npx react-native run-ios

Following is the command to run the app on Android

npx react-native run-android

Congratulations, your first react-native app is run successfully.
Thankyou!!!!!!