How I got my entire React Native Environment set up in less than an hour on the new Apple M1 laptop, including troubleshooting.

Xcode 🖥

I recommend downloading and installing Xcode at the start — it’ll take the longest. Once you’re done setting up, run the application once and download the required components. Also, for command line tools:

$ xcode-select --install

If you end up running the above command before Xcode installs you might have to run this command to switch to Xcode’s CLI:

$ sudo xcode-select --switch /Applications/Xcode.app

Other Applications 📲

I use MacApps.link (a flavor of Ninite — a Windows package management software) which handles the downloading of all other apps required on my work laptop.

$ curl -s 'https://api.macapps.link/en/chrome-dropbox-alfred-github-sublime-iterm-unarchiver-cyberduck-spotify-vlc-slack-whatsapp-discord' | sh

Choose whichever apps work for you.

IntelliJ IDEA 🧑🏽‍💻

I’ve been sucked into the IntelliJ ecosystem, and doubt I’ll ever be break away. It’s definitely worth the yearly Start by downloading the Jetbrains Toolbox, and through that get access to the latest version of IntelliJ IDEA Ultimate for Apple Silicon. It’s optimized for ARM chips.

For React Native dev of course I need to set up both native mobile dev environments. iOS was (unsurprisingly) straight-forward, but Android posed some problems. While the Studio initially installed without problems, when installing emulators I hit the real issues: the emulators that come with Android Studio don’t run on ARM Macs at all.

There is a ray of hope with some preview versions of Android emulator for Apple M1 coming from Google. But don’t get your hopes up too high as there’s already a list of known issues (no webviews and no sound being probably the biggest dealbreakers for me) and no activity in the repo in the past month and a half. I did manage to use it to run the app I’m currently working on, though.

Personally, I’m sticking with running my Android apps on a real device. Less hassle and faster, more reliable testing. It’s also been my workflow before switching to ARM, so that’s not much of a problem for me.

Chrome Extensions 🧭

• Ghostery | Google Analytics Opt-out Add-on | uBlock Origin | React Developer Tools

Brew ☕️

Homebrew, the essential package manager you need, finally officially supported Apple Silicon on the 5th of February, 2021. Preferably follow the instructions on their website, but for posterity, I’ve added the commands below.

$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

..

$ echo 'eval $(/opt/homebrew/bin/brew shellenv)' >> /Users/{YOUR_NAME_HERE}/.zprofile
$ eval $(/opt/homebrew/bin/brew shellenv)

$ brew upgrade && brew update && brew install node && brew install yarn && brew git && brew install python@3.9

Rosetta 🌹

By now, if you’ve already installed a handful of apps, you might have already come across Rosetta. For now, you’ll have to make do with this translation layer until everyone switches over.

$ /usr/sbin/softwareupdate --install-rosetta --agree-to-license

cd into your ios/ folder and run these commands

$ arch -x86_64 sudo gem install cocoapods
$ arch -x86_64 pod install --repo-update

I also recommend duplicating iTerm and appending with _rosetta and running that application with the option ‘Open using Rosetta’

Mac AppStore 💻

When you first open it, there are a bunch of agreements you’ll have to accept. The only applications I care for are Helium, ColorSlurp, and Amphetamine.

I also downloaded

• Linear — issue tracking tool,

• Figma — collaborative UI design tool, and

• VEEER — window manager for MacOS

from their respective websites.

Troubleshooting ⚠️

If you recently got the computer and ended up inadvertently downloaded the software update for MacOS, I recommend restarting your computer at-least once. This solved some of the issues.

1. CocoaPods LoadError:

$ sudo arch -x86_64 gem install ffi
$ arch -x86_64 pod install

Or

$ brew install libffi
$ ln -s $(brew --cellar libffi)/*/include/ffi.h /usr/local/include/ffi.h

2. Missing architecture:

Inside BOTH Pods and your workspace, navigate to Build Settings -> Excluded Architectures -> Debug and add arm64. Remember to make this change in both places otherwise it won’t take effect.

Another reference from StackOverflow.

3. Class AMSupportURLConnectionDelegate is implemented in both ?? (0x1eb0e27a0) and ?? (0x1296d02b8). One of the two will be used. Which one is undefined.

Still figuring this one out. Fortunately it doesn’t affect development. Here’s another reference.

4. CompileC Error in ios/Pods/Flipper/xplat/Flipper.

In Podfile, update this line

use_flipper!

With this:

use_flipper!({ 'Flipper-Folly' => '2.3.0' })

Make sure to remove Podfile.lock and then run pod install after making this change.

Miscellaneous ⚒

Switching off last login time in terminals

$ touch .hushlogin

Generating SSH keys for signing commits/ pulling repositories

$ ssh-keygen -t ed25519 -C "viren@company.com"

Cleanse 🗑

Clean your build in Xcode. ⌘ + Shift + K

Purging the system might help.

$ gem uninstall ffi
$ gem list --local --no-version | grep cocoapods | xargs gem uninstall
$ rm -rf ~/.cocoapods
$ gem list

Restart terminal after checking the option ‘Open Using Rosetta’

$ sudo xcode-select --switch /Applications/Xcode.app

Then try

$ sudo gem install cocoapods
$ sudo gem install ffi
$ pod install

Whenever I run into an issue, I

$ rm -rf node_modules && cd ios && rm -rf Pods && rm -rf Podfile.lock

If nothing works, purge the entire repository and start over.

$ git clone git@github.com:{YOUR_REPO_HERE}
$ cd {YOUR_REPO_HERE}
$ yarn
$ cd ios
$ pod install
$ cd .. && yarn run ios-native

More troubleshooting hotfixes — CompileC AppDelegate.m Error.