Hey Guys, So I’m kicking off my official blog with my first guide! Since my Tech Stack is mainly React/React Native I thought I’ll publish a guide on setting up React Native on a Mac (I use a MacBook pro). This tutorial will be very simple with a lot of copy and paste commands so you can get up and running in no time!  

Pre-Requisites

• Get a Mac
• Install XCode
• Register an Apple ID
  • You can create one here: https://appleid.apple.com/account

Why Mac? Because … I would like to cover both mobile platforms – iOS and Android - and to build native mobile application for iOS, you need OS X.

Setup

Install Homebrew

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

# Make sure Brew has permissions
brew doctor

# Update Brew
brew update

# Install Brew Cask, for terminal app installs
brew tap caskroom/cask

Java Development Kit (Android only)

React Native requires a recent version of the Java SE Development Kit (JDK). Download and install JDK 8 or newer or install using Homebrew:

brew cask install java

Install Android Studio

brew cask install android-studio

Install Android SDKs (Android only)

brew install ant
brew install maven
brew install gradle

brew cask install android-sdk
brew cask install android-ndk
sdkmanager –update

brew cask install intel-haxm

Node.js & npm – https://nodejs.org

# Install Node.js and print the version
brew install node
node --version

# Update npm and print the version
npm update npm -g
npm –version

 

Yarn – https://yarnpkg.com

# Install Yarn and print version
brew install yarn
yarn --version

Watchman – https://facebook.github.io/watchman

# Install Watchman
brew install watchman

Git

# Install Git and print version
brew install gitgit --version

Environment variables

Update your environment variables (add to your ~/.bash_profile, alternatively ~/.zsh_profile etc. - based on you current shell): Note: Remove any other lines containing something about ANDROID (Android Studio may create some lines, which are not relevant in our case).

export ANT_HOME="/usr/local/opt/ant"
export MAVEN_HOME="/usr/local/opt/maven"
export GRADLE_HOME="/usr/local/opt/rzadle" 
export ANDROID_HOME="/usr/local/share/android-sdk"
export ANDROID_SDK_ROOT="/usr/local/share/android-sdk"
export ANDROID_NDK_HOME="/usr/local/share/android-ndk"

Update your paths (bonus points to a better solution to the hardcoded build tools version):

export PATH="$ANT_HOME/bin:$PATH"
export PATH="$MAVEN_HOME/bin:$PATH"
export PATH="$GRADLE_HOME/bin:$PATH" 
export PATH="$ANDROID_HOME/tools:$PATH"
export PATH="$ANDROID_HOME/platform-tools:$PATH"

IMPORTANT: Be sure to restart your Terminal to changes take effect!  

Genymotion - Functional Android Emulator (optional)

You might want to install different Android Emulator, in case of problems with the standard one from Google. It’s named Genymotion. You can install it by using Homebrew:

brew cask install genymotion

 

Basic App Setup

React Native

Install React Native CLI :

npm install -g react-native-cli

 

Ignite

Our React Native starter of choice is Ignite.

npm install -g ignite-cli
ignite new MyNewAppName

  And that’s it.. you should be good to go! Look out for my next post where I’ll be reviewing Ignite and why I always use ignite as my React Native Starter for every app I make! If this post helped you, it may help someone else so please like, share and comment!