React Native (and Expo) Environment set up on Mac OS with Xcode and Android Studio

fmchanprogrammingLeave a Comment

MAC OS: 10.15.6 (Catalina)

Pre-install

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

// Install Node.js and npm
brew install node
node --version
// my output: v14.9.0

// Install watchman
brew install watchman

// Install Java JRE and JDK
brew tap AdoptOpenJDK/openjdk
brew cask install adoptopenjdk8

// Install React Native
npm install -g react-native-cli

Set up Xcode

Download Xcode via Mac App Store

  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
gem install cocoapods

Set up Android Studio

Download Android Studio from here

  1. Open Android Studio
  2. Goto the Configure > SDK Manager
  3. By default, it’s 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 29 or 30
    • 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
cd ~/
touch ~/.bash_profile;
open -e .bash_profile

and paste below lines there

export ANDROID_HOME=$HOME/Library/Android/sdk 
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

save and do not forget to trigger the change

source ~/.bash_profile

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 React Native App

cd Documents
react-native init firstApp

Running

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

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

cd android
nano local.properties 
sdk.dir = /Users/pabasara/Library/Android/sdk
cd ~/Library/Android/sdk/tools/bin/
./sdkmanager --licenses

Create First React Native App

cd Documents
expo init firstExpo
cd firstExpo
expo start

the latest sdk version is 39

Sources from many websites, major in https://medium.com/@pabasarajayawardhana/react-native-environment-set-up-on-mac-os-with-xcode-and-android-studio-324e64c8552e

Leave a Reply

Your email address will not be published. Required fields are marked *