Setup Mac M1/M2 for React Native development

Hey! In this post, I will provide you with a quick guide on how to set up the React Native environment on an M1 or M2.

I will assume that you don't have any of the tools or dependencies typically used in the React Native environment.

This represents the complete installation process tailored for Apple's arm-based processors.

XCODE

First, you need to download the latest version of Xcode from the App Store. Once you have it downloaded and installed, open Xcode, accept the licenses, and then navigate to 'Preferences > Locations' to check if 'Command Line Tools' is already selected. If it's not, simply enable it to match your Xcode version, like this:

Homebrew, NVM, node

Homebrew

In this step, visit the Homebrew homepage and proceed with the installation using your terminal.

Once you've executed the installation script in your terminal, you'll receive a prompt to run additional commands—make sure not to overlook these!

After running these supplementary commands, Homebrew will prompt you to add some code to either your .zshrc or .bashrc file.

NVM

After completing all of these steps, you'll be ready to install NVM and Node.

Installing NVM is quite straightforward. You just need to execute the following command in your terminal: brew install nvm. Once the installation is finished, you'll need to append some code to your .zshrc or .bashrc file to ensure NVM functions correctly.

Node

This step is straightforward; all you need to do is execute the following command in your terminal: nvm install <node-version>.

Once you've completed all these installations, you can verify the Node and npm versions by running node -v and npm -v in your terminal.

Next, you'll need to link Node to Xcode to ensure it's recognized and can be used for compiling the emulator. You can achieve this by running the following command: sudo ln -s "$(which node)" /usr/local/bin.

JDK for Android and Android studio

Let's proceed with configuring the JDK and Android Studio.

Step 1: First, you'll need to install the ARM version of the JDK, and for this, we recommend using Zulu JDK.

• To install the ARM version of the JDK, visit Zulu JDK downloads, select JDK version 11, choose your operating system (macOS), and the architecture (arm_64). Download the .dmg file and install it. During the installation process, do not make any changes; leave all settings as default.

Step 2: After the installation is complete, follow these additional steps:

1. Add Java Home to your .zshrc or .bashrc file:

   • To do this, you'll need to determine the location of your SDK folder. Run the following command in your terminal: /usr/libexec/java_home This command will return a path similar to: /Library/Java/JavaVirtualMachines/<Your JDK Version>/Contents/Home Copy and keep this path safe; you'll need it shortly.

2. Set this path in your .zshrc or .bashrc file:

   • Open your .zshrc or .bashrc file and add the following lines:

In JAVA_HOME you paste the path that you copy in the last step.

Example:
export JAVA_HOME=/Library/Java/JavaVirtualMachines/zulu-11.jdk/Contents/Home

Now you're able to install Android Studio!

Step 3: Install Android Studio
To install Android Studio, follow these steps:

1. Visit Android Studio Download and select the version compatible with macOS on Apple's chips.

2. During the Android Studio installation, make sure to verify that your JAVA_HOME is correctly set as the JDK Path.

Optional: In case you forget to set it up during the installation or if the new version of Android Studio doesn't prompt you for this configuration, you can manually configure it here:

• Launch your project using Android Studio.
• Access the menu and navigate to File > Project Structure > SDK Location. You will be directed to the following page: Select the "Gradle Settings" option. Now, you will be directed to the following page: Under the "Gradle JDK" option, choose either "JAVA_HOME" or an alternative SDK.

1. Set this path in your .zshrc or .bashrc file:
   • Open your .zshrc or .bashrc file and add the following lines: export ANDROID_HOME=/Users/**YOUR_USER_HERE**/Library/Android/sdk export PATH=$PATH:$ANDROID_HOME/emulator export PATH=$PATH:$ANDROID_HOME/tools export PATH=$PATH:$ANDROID_HOME/tools/bin export PATH=$PATH:$ANDROID_HOME/platform-tools

Additional Steps in the iOS Environment

To run React Native on iOS, there are additional steps you need to follow.

Step 1: Install CocoaPods and FFI

You must install CocoaPods and FFI as they are essential for React Native development on iOS. Here's how to do it:

• Install CocoaPods by running the following command in your terminal:

sudo gem install cocoapods

• Install FFI by running the following command in your terminal (REQUIRED IN m1 and m2 model:

sudo gem install ffi

Step 2: Xcode with Rosetta (Optional)

This particular step is optional and relies on whether you are utilizing a library that is incompatible with the ARM architecture in your React Native app. If that's the case:

(ONLY Xcode 15+)
Install rosetta running this command on the Terminal: "softwareupdate --install-rosetta".
Xcode: Product ¬ Destination ¬ Destination Architectures ¬ Show Both.
Select Iphone 14 (Rosetta) as run destination.
Clean build folder.
Run.

Common erros

Build fails for Xcode 15
error: no template named 'unary_function' in namespace 'std'; did you mean '__unary_function'?
workaround: https://github.com/facebook/react-native/issues/37748

The Final

Your configuration is finished like this:

node running natively
JDK running natively
VS Code running natively
Android Studio running natively
CocoaPods running Natively
Xcode running Natively // If you run it with Rosetta, this will be Emulated

Contributors

This post has the contribution of Allan Johnson

Questions and Feedback

• Do you have any questions or feedback?
• Feel free to provide suggestions for improving my English language skills. It's my second language, and I'm in the process of learning. Your assistance is always valued and appreciated.

Comments

[Mike Carter]

On MacOS Ventura running the command: % sudo gem install cocoapods
ends in disapointment with:

ERROR: Error installing cocoapods:
The last version of activesupport (>= 5.0, < 8) to support your Ruby & RubyGems was 6.1.7.4. Try installing it with gem install activesupport -v 6.1.7.4 and then running the current command again
activesupport requires Ruby version >= 2.7.0. The current ruby version is 2.6.10.210.

Is this normal/expeected and should just follow along with the suggested -v switch?

[Leonardo Oliveira]

The error you're facing is due to the incompatibility between the version of activesupport required by CocoaPods and the Ruby version currently installed on your system.

I recommend adhering to the Ruby version specified in the React Native version you are working with. Furthermore, consider installing RBENV for the convenience of switching between different Ruby versions when necessary.