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!
- 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.
# 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
# Install Git and print version brew install gitgit --version
Environment variablesUpdate 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 NativeInstall React Native CLI :
npm install -g react-native-cli
IgniteOur React Native starter of choice is Ignite.
npm install -g ignite-cli ignite new MyNewAppNameAnd 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!