Getting a brand new machine ready for React Native is much more than just executing the shell commands on the official website. This article covers the installation of all the dependencies and settings to make your machine ready for React Native. While this article is for MAC, most of the steps hold true for Windows as well.
By the end of this tutorial, you will have your App running on both the Android and iOS simulators.
Prefer video over reading? Checkout
We’re setting up a native app environment (not the EXPO one).
If you just want the EXPO setup, follow steps 1, 2, 3, 6, 7 and run the npm commands to install expo-cli and expo-init as given on the official site. Refer to this troubleshooting page if you run into errors. Feel free to share more errors and solutions.
Check if Homebrew is already installed?
If you see a
command not found error execute the following:
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
Check if Node is already installed
If you see a
command not found error then you’ve 2 options to install Node:
Option1: Install the latest Node directly
Following command installs both Yarn package manager and Node.
brew install yarn
Option2: Install Node using NVM (recommended)
NVM allows you to install and easily switch between different versions of Node. This ensures that you can continue on legacy and newer projects with other Node versions. We’ll follow this approach (You can still follow option-1 and skip this one). Install the following command.
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
nvm install stable
If you see
nvm not found error, then run the following command (it is also displayed after nvm installation ends).
export NVM_DIR="$HOME/.nvm" [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
Tip: You might again see NVM not found error on the new terminal. To fix it for once and all, add the following to your ~/.zshrc file
npm install -g yarn
OpenJDK is needed by ReactNative to compile projects. Let’s use the tab and cask commands of brew to install it. Despite new JDK versions available, version 8 is still the most compatible with React Native. If you install a newer JDK version, you may need to do a lot of troubleshooting to make it work. You can also install Oracle’s jdk8 instead of Openjdk8
brew tap AdoptOpenJDK/openjdk
brew install --cask adoptopenjdk8
Cool! We’re now getting into React-Native-related stuff…
Watchman is used by Facebook to sync applications with file changes. Install it using the following command
brew install watchman
5. React Native CLI
Let’s begin with React Native related steps by installing its CLI.
npm install -g react-native-cli
6. XCode (for iOS)
For making our application iOS simulator ready, we need to install XCode. If you don’t intend to use iOS (skip this).
It needs to be installed from App Store. You can search for it or https://apps.apple.com/us/app/xcode/id497799835?mt=12 will take you there. Press the GET button to download and install it. It’s a whopping 11GB+ so might take very long in case of a slow internet connection.
We’d also need cocoapods. Install that using the following command:
sudo gem install cocoapods
7. Android Studio (for Android)
We need Android Studio for running our application on a real Android device or emulator. It has a little more steps than straightforward XCode.
7.1 Download & install studio from https://developer.android.com/studio/index.html
7.2 Run Android Studio and install emulator through AVD Manager
7.3 Add paths to your ~/.zshrc (or ~/.bashrc)
export ANDROID_SDK_ROOT=$HOME/Library/Android/sdk export ANDROID_HOME=/Users/<your userid>/Library/Android/sdk export PATH=$ANDROID_HOME/platform-tools:$PATH export PATH=$ANDROID_HOME/tools:$PATH export PATH=$ANDROID_HOME/tools/bin:$PATH
We’re finally ready to create and launch our first application
8. Create and launch an Application
This is where the React-Native official documentation starts from 😁😜. In your terminal, run the following commands to create an application.
npx react-native init AwesomeProject
If you want to use TypeScript add this suffix: –template react-native-template-typescript
You can now run the application in iOS or Android using the following commands respectively
npx react-native run-ios
npx react-native run-android