Setup React Native with Apple Mac M1

Setup React Native together with Xcode on the Apple Mac M1

The process of setting up React Native together with Xcode on the Apple Mac M1 should not be a problem as long as you are using a Rosetta terminal while installing CocoaPods while following the official documentation on how to set up the development environment for React Native CLI. 

This section will therefore only describe how to setup a Rosetta terminal, as well as how to install CocoaPods using the Rosetta terminal.

Prerequisites

The following is needed to be able to follow this guide:

• Homebrew (a package manager for macOS)
• Xcode (including an iOS simulator)
• Node
• watchman

If your are struggling with installing the prerequisites I strongly recommend following the official React Native documentation up until before installing CocoaPods before comming back to this tutorial to finish up the installation. 

Setup

It is now presumed that you have followed the official React Native documentation up until before installing CocoaPods.

To install CocoaPods we first need to setup a Rosetta Terminal. To create a Rosetta terminal, right click the terminal icon, press "Options" and then "show in finder". Right click the terminal application and duplicate it. Name the new terminal something memorable. Since we are creating a Rosetta terminal why not call it "RosettaTerminal". Right click this terminal and press "getInfo" which will open a separate window. Inside this window check the box called "Open using Rosetta", you may then close this window. For easy access drag the new Rosetta terminal to your task bar. We will from now on only use this Rosetta terminal in this tutorial. 

Let us now install Cocoapods using the new Rosetta terminal. Open the Rosetta terminal and run:

sudo gem install cocoapods

and then 

sudo gem install ffi

Let us now create our React Native project according to the official React Native documentation. 

Thereafter, move the terminal inside the "ios" folder inside the React Native project we just generated, and run:

pod install

Move the terminal back to the root React Native project folder and start the Metro by typing: 

npx react-native start

Open up a new terminal window and run:

npx react-native run-ios

Your React Native application should now be running on your Xcode iOS emulator!

Setup React Native together with Android Studio on the Apple Mac M1

Now here is where it gets a bit trickier! This section describes the process of setting up a React Native project and connecting it to an Android Studio emulator on an Apple Mac M1. This tutorial will guide you through creating a Non-Expo application React Native project. If you are setting up an Expo application you will still be able to use this guide to be able to use the Android emulator with Expo. 

Prerequisites

The following is needed to be able to follow this guide:

• Rosetta terminal (see the previous section for setting up a Rosetta terminal)
• Android Studio
• Node
• watchman
• Homebrew

Setup

Start by installing JDK8 using Homebrew. Open a terminal and type:

brew install --cask adoptopenjdk/openjdk/adoptopenjdk8

This tutorial assumes you already have Android Studio installed, if not make sure you have done everything mentioned in the prerequisites section first. Open up Android Studio and then the SDK manager.

Inside your SDK manager under "SDK Platforms" make sure you have checked and installed the following:

• The currently latest SDK
• Android 10.0 (Q)

Check the box called "Show Package Details" and mark and install the following below the Android 10.0 (Q) section:

• Android SDK Platform 29
• Google APIs Intel x86 Atom System Image

Move to the "SDK Tools" tab and make sure you have the following marked and installed:

• Android SDK Command-line Tools (latest)

Make sure you apply any changes before closing the SDK manager. 

Let us now configure the Android home environment variable by typing the following in a terminal assuming you are using a zsh terminal:

sudo nano ~/.zshrc

Add the following lines to the file:

Save your changes and quit the file editor. To check that you have successfully configured the variable type the following in the terminal:

echo $ANDROID_HOME

You should get a file path as a response.

Let us now create our Android emulator. Open the AVD manager and press "create Virtual Device". Choose whatever device you want to create and press "next". Go to the tab called "other images" and choose the API level S with the system image "arm64-v8a". Press "next" and then "finish".

Let us now create our React Native project according to the official React Native documentation. 

Unless you already have metro up and running, open up a terminal and move it to the root React Native project folder and start the Metro by typing: 

npx react-native start

Open the android folder located within your React Native project with Android studio. Inside Android studio choose your emulator that we previously created and run the project. You should now see an error message inside your Android emulator. Minimize the error but keep the emulator open. The path to the emulator should now be known to our React Native project and you will therefore not need to repeat this step again.

Open a terminal and move to the root project folder of your React native project and run:

npx react-native run-android

The Android emulator should now be working!