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, 5, 6 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.
1. Homebrew
Check if Homebrew is already installed?
homebrew -version If you see a command not found error execute the following:
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"2. Node
Check if Node is already installed
node --versionIf 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 yarnOption2: 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.39.3/install.sh | bashnvm install stableIf 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
source ~/.nvm/nvm.sh npm install -g yarn3. AzulJDK (for M* Chip, otherwise OpenJDK8)
Azul JAVA JDK is now officially recommended by ReactNative to compile projects. It works natively on the Apple M1 chip and is much faster. However, you can also go with OpenJDK8. Let’s use the tab and cask commands of brew to install it.
brew tap homebrew/cask-versionsbrew install --cask zulu11brew info --cask zulu11However, if you are not using Mac M1 chips, you can go with openjdk
brew tap AdoptOpenJDK/openjdkbrew install --cask adoptopenjdk8
Cool! We’re now getting into React-Native-related stuff…
4. Watchman
Watchman is used by Facebook to sync applications with file changes. Install it using the following command
brew install watchman5. 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.
Cocoapods
We’d also need cocoapods. Install that using the following command:
sudo gem install cocoapods6. 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.
6.1 Download & install studio from https://developer.android.com/studio/index.html
6.2 Run Android Studio and install emulator through AVD Manager
6.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
7. 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
This is not needed as TypeScript is now default since RN 0.7.
cd AwesomeProjectYou can now run the application in iOS or Android using the following commands respectively
npx react-native run-iosnpx react-native run-android
