Navigate back to the homepage

React Native Environment setup on Mac OS

Infinitbility
Environment Setup
January 5th, 2021 · 3 min read
React Native Environment setup on Mac OS

This Article Part of React Native Tutorial Series want to start from scrach follow below link

https://infinitbility.com/react-native/table-of-contents

Today, we setup react native environment in macos for run react native app.


Tools

  1. Homebrew
  2. Node.js and npm
  3. watchman
  4. Java JRE and JDK
  5. React Native CLI
  6. Xcode
  7. Android Studio

Install Homebrew

Homebrew is a free and open-source software package management system that simplifies the installation of software on Apple’s macOS operating system and Linux. The name is intended to suggest the idea of building software on the Mac depending on the user’s taste.

Install Homebrew using bellow command in Terminal.

1ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/uninstall)"

Install Node.js and npm

React need only webpack to bundle, compile, transpile the code. Then why do we need Node.js? 🤔 React Native comes with multiple built-in components and APIs to interact with both native IOS and Android platform. In some cases, we need to use native functionality that doesn’t provide by React Native. Most of the Native modules are distributed as npm packages. Therefore, we need to require npm and to initialize the npm we need to have Node.js as recommended. ⚠️ Remember, Node.js is not compulsory since you can download the packages and add to your library.

Install Node.js using bellow command in Terminal.

1brew install node

Install watchman

React Native uses watchman to detect real time code changes and it automatically build and push the update to your device without manually refreshing.

1brew install watchman

Install Java JRE and JDK

If you don’t have a complete installation of Java, the build scripts for react-native tend to complain and fail . Downloading Android Studio is not enough solution since it comes bundled with its own JRE.

1brew tap AdoptOpenJDK/openjdk
1brew cask install adoptopenjdk8

Install React Native

React Native allows the application to be written in Javascript and then the React Native Compiler will convert your Javascript code into native code for iOS and Android environments. React Native command line interface can be install using npm as bellow.

1npm install -g react-native-cli

Set up Xcode

Download Xcode via Mac App Store

https://apps.apple.com/us/app/xcode/id497799835?mt=12

  1. Open Xcode, Xcode > Preferences
  2. Goto the Locations tab
  3. Selecting the most recent version from the Command Line Tools dropdown
  4. Install cocoapods to MAC OS
1sudo gem install cocoapods

Or

1sudo gem update — system
1sudo gem install -n /usr/local/bin cocoapods

CocoaPods manages library dependencies for your Xcode projects.


Set up Android Studio

Download Android Studio from below link https://developer.android.com/studio/index.html

  1. Open Android Studio
  2. Goto the Configure > SDK Manager
  3. Go to Appearance & Behavior → System Settings → Android SDK and check ✅ the box of latest version from Hide Obsolete Packages.
  4. Also check ✅ the boxes of below in Show package details,
    • Android SDK Platform 28
    • Intel x86 Atom_64 System Image or Google APIs Intel x86 Atom System Image
  5. Click “Apply” to download and install the Android SDK and related build tools.
  6. Set up environment variables to getting start with native code, Open terminal
1cd ~/
1touch ~/.bash_profile;
1open -e .bash_profile

and paste below lines there.

1export ANDROID_HOME=$HOME/Library/Android/sdk
2export ANDROID_HOME=$HOME/Library/Android/sdk
3export PATH=$PATH:$ANDROID_HOME/emulator
4export PATH=$PATH:$ANDROID_HOME/tools
5export PATH=$PATH:$ANDROID_HOME/tools/bin
6export PATH=$PATH:$ANDROID_HOME/platform-tools

Then you can create new Android Virtual Device (AVD) to run the application.

  1. Open Android Studio
  2. Goto the Configure > AVD Manager
  3. Create Virtual Device > pick any Phone from the list and click “Next”,

Click “Next” then “Finish” to create your AVD. At this point you should be able to click on the green triangle button next to your AVD to launch it , then proceed to the next step.


Create First App

The very first step is to initialize the app from the place where we need to create app

1cd Documents
1react-native init first-app

If you want to start a new project with a specific React Native version,

1react-native init first-app --version X.XX.X

If you want use typescript with React Native,

1react-native init first-app --template typescript

Running your React Native Application in IOS

1cd first-app
1react-native run-ios

Running your React Native Application in AVD

1react-native run-android

The first time when you run this code you might get a build failed errors as,

🛑 Asking to add local.properties file

1cd android

Create local.properties file inside android folder and add below code there.

1sdk.dir = /Users/pabasara/Library/Android/sdk

🛑 Asking to add keystroke

Go to directory

1cd android/app

paste below code in terminal

1keytool -genkey -v -keystore debug.keystore -storepass android -alias androiddebugkey -keypass android -keyalg RSA -keysize 2048 -validity 10000

Press enter until it gets ,

Is CN=y, OU=n, O=yes, L=no, ST=x, C=Y correct?

and type Y as response to terminate the command.

Here we go…. 👌 If everything working properly you can see app is running on both IOS emulator and AVD without errors. 😃 😃 😃

More From React Native Tutorial

Basics

  1. Introduction To React Native
  2. React Native Environment Setup using expo
  3. React Native Environment Setup for windows
  4. React Native Environment setup on Mac OS
  5. React Native Environment setup on linux
  6. React Native Project Structure
  7. React Native State
  8. React Native Props
  9. React Native Styling
  10. React Native Flexbox
  11. React Native Text
  12. React Native Textinput
  13. React Native Commands
  14. React Native ScrollView

Advances

  1. React Native Dark Mode
  2. React Native Fonts
  3. React Native SQLite
  4. React Native DatepickerAndroid
  5. React native ScrollView scroll to position
  6. How to align icon with text in react native
  7. React Native Image
  8. React Native Firebase Crashlytics
  9. React Native Async Storage
  10. React Native Share

Error & Issue Solution

  1. Task :app:transformDexArchiveWithDexMergerForDebug FAILED In React Native
  2. Expiring Daemon because JVM heap space is exhausted In React Native
  3. Task :app:transformNativeLibsWithMergeJniLibsForDebug FAILED In React Native
  4. Unable to determine the current character, it is not a string, number, array, or object in react native
  5. App crashed immediately after install react native video or track player
  6. how to delete SQLite database in android react native
  7. React native material dropdown twice click issue
  8. How to get the current route in react-navigation?
  9. how to disable drawer on the drawer navigation screen?
  10. Image not showing in ios 14 react native

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

More articles from Infinitbility

React Native Environment Setup for windows

React Native Environment Setup for windows

React Native Tutorial - Environment Setup windows

January 4th, 2021 · 2 min read
React Native Environment Setup using expo

React Native Environment Setup using expo

React Native Tutorial - Environment Setup Expo

January 3rd, 2021 · 2 min read
© 2021 Infinitbility
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]