Setup Mac M1 for React Native development

Hey! In this post, I will give you a quick guide to how to set up the React Native environment in M1, M1 Pro, or M1 Ultra.

I will consider that you don't have anything that we use in the React Native environment.

This is the full installation for arm-based processors from Apple.

XCODE

First, you will need to download the lasted version of Xcode in the App Store.
Then you have it downloaded and installed, you will need to open your Xcode, accept the licenses and then go to Preferences > locations and see if Command Line tools are already marked. If not, just check it with your Xcode version. Like this:

Homebrew, NVM, node

Homebrew

In this step, you will need to go to Homebrew homepage and then install it using your terminal.

After running the installation script in your terminal, you will see the request to run the additional codes, DON'T forget to run it!

So after running these additional codes, you will see the request of Homebrew to add some code in .zshrc or .bashrc

NVM

So after all these steps, you're able to install NVM and node.

The process to install NVM is so simple, you only have to run the following command in the terminal: brew install nvm and after the installation has completed, you will have to add some code in .zshrc or .bashrc to make NVM work properly.

Node

This step is so simple, you'll only have to run the following command in your terminal: nvm install <node-version>

After all these installations, you can run node -v and npm -v.

Then, you have to link your node to Xcode to recognize him and can compile the emulator, run this sudo ln -s "$(which node)" /usr/local/bin.

JDK for Android and Android studio

Yeah, let's go to configure the JDK and android studio.

First, you will need to install the arm version of JDK, for this we will use the Zulu JDK.

To install the arm version of JDK, go to Zulu JDK downloads and select the JDK version 8, your operational system (macOS) and the architecture (arm_64), get your .dmg and install it (Don't change anything in the installation process,
leave everything as default).

After installation is finished, you will have to do some things:

Add java home to your .zshrc or .bashrc:
To this, you will need to know where is your SDK folder, to this, just run this line in your terminal: /usr/libexec/java_home - This will return to you something like that: /Library/Java/JavaVirtualMachines/<Your JDK Version>/Contents/Home

Copy and keep that safe, you'll need this path!

Now, we will set this path in your .zshrc or .bashrc, to this, go to your .zshrc or .bashrc and add the lines:

export JAVA_HOME=/Library/Java/JavaVirtualMachines/<Your JDK Version>/Contents/Home
export ANDROID_HOME=~/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

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

Now you're able to install Android Studio!

To install the Android Studio, go to Android Studio Download and select the mac with an apple chip.

In Android Studio installation, you have to check if your JAVA_HOME is selected in JDK Path.

In the lasted step, you already added the Android SDK in your .zshrc or .bashrc, so you don't need to do this again.

Additional Steps in the IOS environment

You will need to install the CocoaPods and FFI, without this you will not able to run the React Native in IOS.

To install it, run:

CocoaPods: sudo gem install cocoapods
Fii: sudo gem install ffi (necessary in m1 models)

This next step, is optional, depends on if you are using a library that is not compatible if the arm in your React Native App, if you are, so:

Click on your Xcode finder > applications > Xcode with the right button and select the option open with Rosetta

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

Additional Software

VS Code Apple Silicon: VS Code Download

Contributors

This post has the contribution of Allan Johnson , he provided an initial guide to building this guide.

Doubts and suggestions

• Do you have any doubts or suggestions?
• English language correction suggestions are welcome, remember this is my second language, and I'm learning it, your help will always be appreciated.