Notes

Setup dev environment for React Native CLI (macOS / Ubuntu)

setting up a React Native CLI dev environment on macOS and Ubuntu with nvm, Watchman, CocoaPods, Xcode, the JDK and ANDROID_HOME, plus Expo pros and cons

Edit on GitHub

React Native & Expo
3 minutes
React Native macOS Ubuntu Android setup

Requirements

Pre-requisite dependencies

 1# Homebrew - to make our lives easier
 2/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
 3brew --version
 4
 5# Node (with NVM) - to run JavaScript from terminal
 6curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
 7
 8echo 'export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
 9[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm' >> ~/.zprofile
10
11nvm install --lts
12nvm alias default node
13node --version
14
15# Watchman - for watching for changes to files in the project
16brew install watchman
17watchman --version

macOS

1# CocoaPods - to bring in 3rd party packages written in Objective-C or Swift
2brew install cocoapods
3echo "export LANG=en_US.UTF-8" >> ~/.zprofile
4pod --version
5
6# JDK - to compile Android apps
7brew install openjdk # installs openjdk@18

Xcode

Xcode is Apple’s IDE (integrated development environment) for building Mac, iOS, watchOS, and tvOS apps. It supports the Objective-C and Swift languages. We need it for React Native in order to use its build tools, which allows us to compile the native code necessary to build React Native apps.

1# Install Command Line Tools
2xcode-select --install
  • (Xcode Menu Items) Xcode ▶ Preferences ▶ Location ▶ Command Line Tools ▶ Select appropriate command line tool
  • (Xcode Menu Items) Xcode ▶ Preferences ▶ Components ▶ Install your preferred iOS Simulator

Linux / Ubuntu

JDK

1sudo apt install -y openjdk-18-jdk

If you previously had a JDK installed or have multiple versions, you’ll have to set the appropriate version and also update the PATH to reflect the correct version

1# get versions installed and their paths
2update-java-alternatives --list
3
4# set java version
5sudo update-java-alternatives --set /usr/lib/jvm/java-1.18.0-openjdk-amd64

Update the $JAVA_HOME env var

1echo "
2export JAVA_HOME='/usr/lib/jvm/java-1.18.0-openjdk-amd64'
3" >> ~/.zprofile

ANDROID_HOME

When you run npx react-native run-android, React Native needs to know where all of the Android dependencies live. This environment variable (ANDROID_HOME) is where it’ll look.

1echo "export ANDROID_HOME=\$HOME/Library/Android/sdk
2export PATH=\$PATH:\$ANDROID_HOME/emulator
3export PATH=\$PATH:\$ANDROID_HOME/tools
4export PATH=\$PATH:\$ANDROID_HOME/tools/bin
5export PATH=\$PATH:\$ANDROID_HOME/platform-tools" >> ~/.zshrc

Getting started with a new project

1npx react-native init myAwesomeProject
2cd myAwesomeProject
3
4# for iOS:
5npx react-native run-ios
6# for Android:
7npx react-native run-android

Expo

Expo has some major advantages over “vanilla” (unmodified) React Native:

  • No need for Xcode or Android Studio to get started
  • Develop iOS and Android apps on a Windows or Linux machine, if you don’t have a Mac
  • Just JavaScript (or TypeScript) – no Java or Objective-C
  • Experimental support for publishing to web as well

It also has some limitations:

  • Not all iOS and Android APIs are available yet
  • The SDK doesn’t support all types of background code execution
  • If you need to keep your app size extremely lean, the managed workflow may not be the best choice
  • Native libraries to integrate with proprietary services are usually not included in the SDK
  • The only supported push notification service is the Expo notification service
  • The minimum supported OS versions are Android 5+ and iOS 10+

If you run into one of the limitations and need to go beyond Expo, they do provide a way to eject from the managed service and continue on with ExpoKit.

1npm install -g expo-cli
2expo init MyApp

Related

Browse all topics