Setting up ReactNative on Mac OSX + Apple Silicon

Recently I tried setting up react native on my mac and the process was not a smooth one. I ended up spending more time than I originally planned to make everything work. Here are a few points that I would like to share with you.

Here is the official documentation on the environment setup. While it mostly covers everything, there are certain steps that it misses out on. Obviously, no documentation can cover all the scenarios and potential issues.

All the steps below are tested and validated on a MacBook Pro M1 MAX running MacOS Monterey 12.5 with Xcode 13.4.1, Android studio Chipmunk, and Visual Studio code 1.70.0.

There are a few packages that need to be installed on your mac.

Install Brew in case you don't have it. Follow the prompts and instructions carefully including the step to update the .zprofile.

Once Brew is installed use it to install other packages:

brew install node
brew install watchman

Install Xcode from Appstore along with Command line tools.

Install Android Studio.

Install Cocoapods by executing the below command in the terminal.

sudo gem install cocoapods

Cocoapods need ruby runtime which comes by default in mac.

Once it is installed, make sure to install the below package. This step is needed because we run in Apple silicon.

sudo arch -x86_64 gem install ffi

The next step is to run the command that creates a react native project.

npx react-native init AwesomeProject

Normally this will end up in an error screen like the below:

This is again an M1-specific issue that can be fixed by executing the below command.

cd ./AwesomeProject/ios && arch -x86_64 pod install

Please note, that this is a one-time step. You don't need to do it again.

Just to verify everything is working as it should, let's create one more project — this time using the ‘typescript’ template.

npx react-native init AwesomeTSProject --template react-native-template-typescript

You should see the below screen:

As per onscreen instruction, let's try running the application on the iOS simulator.

cd "AwesomeTSProject" && npx react-native run-ios

At this point, I got an error like this:

If you see this, you can click on the OK button on the message above and continue loading the app. This can be resolved by unchecking the ‘Simulator lifetime’ option in Simulator preferences.

As the command is executing in the terminal, it will spin up one more terminal instance window to run the ‘metro’ server.

Finally, you should see the app running on the iOS simulator:

Note: In my experience, ‘iPod Touch 7th generation’ was consistently throwing build errors. Any other simulator should work.

Now let's try running the same app in Android Emulator.

Assuming that you have already installed Android Studio, open Device Manager and start an emulator. My suggestion is to download Pixel 4 with API version 33.

Now, run the below command:

cd "AwesomeTSProject" && npx react-native run-android

For me, this resulted in an error as below:

What happens here is certain tasks need Java11, while on the mac I had only Jave version 1.8 which comes by default. This means you need to download the Java 11 runtime from Oracle. Please note that you need an account and sign in to Oracle to download Java.

I downloaded ‘jdk-11.0.15.1_osx-x64_bin.dmg’ and installed it.

While trying to run the app again, I got another error:

In order to fix that go to the Gradle settings and change the SDK option.

Navigate to Android Studio -> Preferences-> Build,Execution, Deployment-> Build Tools -> Gradle.
From the Gradle SDK dropdown option, select ’Android Studio Default JDK version 11.0.12' as below.

Now try again the run command:

cd "AwesomeTSProject" && npx react-native run-android

If all is good, you should see the Android emulator running the app.

Miscellaneous issues:

✖ Downloading template
error Error: Command failed: yarn add react-native@latest
error Couldn't find package "react-native" on the "npm" registry.
yarn add v1.22.19
info No lockfile found.
[1/4] Resolving packages...
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.

Solution: Check the .npmrc configuration. Try directly connecting to npm registry than via an artifactory repo manager.

dlopen(/Library/Ruby/Gems/2.6.0/gems/ffi-1.15.5/lib/ffi_c.bundle, 0x0009): tried: '/Library/Ruby/Gems/2.6.0/gems/ffi-1.15.5/lib/ffi_c.bundle' (mach-o file, but is an incompatible architecture (have (arm64), need (x86_64))) - /Library/Ruby/Gems/2.6.0/gems/ffi-1.15.5/lib/ffi_c.bundle (LoadError)

Solution: Install M1 specific ffi package as we have discussed.

Error:
> Task :react-native-gradle-plugin:compileKotlin FAILED
'compileJava' task (current target is 1.8) and 'compileKotlin' task (current target is 11) jvm target compatibility should be set to the same Java version.
1 actionable task: 1 executed
Error:
error Failed to install the app. Make sure you have the Android development environment set up: https://reactnative.dev/docs/environment-setup.
 Error: Command failed: ./gradlew app:installDebug -PreactNativeDevServerPort=8081

Solution: Install JDK11 and set the correct version in Android Studio as we have discussed before.

error Failed to build iOS project. We ran "xcodebuild" command but it exited with error code 65. To debug build logs further, consider building your app with Xcode.app, by opening...

Solution: If you have selected iPod Touch simulator, change it to something else.

Note: The security application such as Zscalar will block the communication between the metro server and the app. You may need to disable it temporarily during development. Microsoft OneDrive on mac can adversely affect if the app running from a folder that is set for cloud sync. I have seen in some forums where many folks mentioned that ‘McAfee’ causing issues.

Hope this helps!

My other posts about react-native:

How to integrate react native code with an existing iOS app?

How to integrate react native code with an existing Android app?