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

Share

react-native-installation-apple-silicon-processor

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

Share

Thanks and I hope this blog helped you in some way!

Let's stay in touch. :)