
React Native Installation on Apple Silicon (M1 / M2 / M3)
Share

Installing React Native on Apple Silicon processor is quite a mess due to the ARM processor. Follow this blog to install it easily with sequential steps. Follow the below steps, to get it installed on your Macbook with ease.
Install Apple Rosetta 2
/usr/sbin/softwareupdate --install-rosetta
Install homebrew
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
Node & watchman
brew install node
brew install watchman
Java Development Kit - OpenJDK distribution called Azul Zulu using Homebrew
brew tap homebrew/cask-versions
brew install --cask zulu11
Configure the ANDROID_HOME environment variable
Open zshrc to add env
nano ~/.zshrc
Paste the env variables, save and close.
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools
Add source to zshrc (or zsh terminal run it by default).
source ~/.zshrc
echo android to see, if path is added.
echo $ANDROID_HOME
RUBY installation -> ruby -v should be 2.7.6
Uninstall the local cocoapods gem, before installing via brew.
sudo gem uninstall cocoapods
Reinstall cocoapods via Homebrew
brew install cocoapods
brew install rbenv ruby-build
rbenv install 2.7.6
Set 2.7.6 as global version for ruby.
rbenv global 2.7.6
echo 'eval "$(rbenv init -)"' >> ~/.zshrc
source ~/.zshrc
Verify ruby version -> should be 2.7.6
ruby -v
Creating a new application
If you previously installed a global react-native-cli package, please remove it as it may cause unexpected issues:
npm uninstall -g react-native-cli @react-native-community/cli
Initialize new project
npx react-native@latest init AwesomeProject
Init with typescript template
npx react-native init AwesomeProject --template react-native-template-typescript
Run project
npm run start