Setting up an M1 MacBook Pro for React Native (iOS and Android)

February 24, 2021

Setting up the environment

Setup for iOS needs:

Node (with NVM)
Watchman brew install watchman
Xcode (install from the App Store)
Xcode Command Line Tools xcode-select --install
Accept the Software License for Xcode sudo xcodebuild -license. It'll prompt you anyway when you run Xcode for the first time.
CocoaPods sudo gem install cocoapods

code

# node will be installed with NVM
brew install watchman

# install CocoaPods
#sudo gem install cocoapods
brew install cocoapods

code

clone the project
`npm ci`

Ruby

Install Ruby 3.x. The one that comes pre-installed with macOS is outdated

code

brew install ruby

Cocoapods

code

# sudo gem uninstall cocoapods

# if you get error: You don't have write permissions for the /usr/bin directory.
# sudo gem install cocoapods -n /usr/local/bin

arch -arm64 brew install cocoapods

# if you get error: rbenv: pod: command not found
brew link --overwrite cocoapods

Homebrew

Install Homebrew if you don't have it installed already

code

mkdir homebrew && curl -L https://github.com/Homebrew/brew/tarball/master | tar xz --strip 1 -C homebrew

Node LTS with NVM

code

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash

export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

nvm install --lts

iOS

Open Terminal / iTerm with Rosetta (Get Info > Open using Rosetta)
Prefix the CocoaPods related commands with arch -x86_64

code

sudo gem update --system

arch -x86_64 sudo gem install cocoapods
arch -x86_64 sudo gem install ffi

code

cd ios/
arch -x86_64 pod install

Android

Install JDK 8 brew install --cask adoptopenjdk/openjdk/adoptopenjdk8
Install Android Studio
Install Android Emulator for M1

The Android Emulator doesn't work out of the box yet. Luckily, there is a Preview build by Google that supports Apple Silicon M1 chip based MacBooks. You'll have to download and install it separately. Most things work.

OpenJDK 16

code

# download tarball from OpenJDK archive (v16.0.1)
curl -sL https://download.java.net/java/GA/jdk16.0.1/7147401fd7354114ac51ef3e1328291f/9/GPL/openjdk-16.0.1_osx-x64_bin.tar.gz

# move and extract in /Library/Java/JavaVirtualMachines/
sudo mv openjdk-16.0.1_osx-x64_bin.tar.gz /Library/Java/JavaVirtualMachines/
cd /Library/Java/JavaVirtualMachines/
sudo tar -xzf openjdk-16.0.1_osx-x64_bin.tar.gz
sudo rm openjdk-16.0.1_osx-x64_bin.tar.gz

# set JAVA_HOME
echo -n "\nexport JAVA_HOME=`/usr/libexec/java_home -v16`" >> ~/.zprofile

# make the changes take effect
source ~/.zprofile

# confirm install
java -version

Troubleshooting

command not found for brew or nvm. Make sure you have a ~/.zshrc file. On a fresh new M1 MacBook, there is no ~/.zshrc or ~/.zprofile created and the $PATH doesn't get updated because of it. Create a ~/.zshrc file and run the commands to install Homebrew and NVM again.

code

touch ~/.zshrc

code

### Error

LoadError - dlopen(/Library/Ruby/Gems/2.6.0/gems/ffi-1.14.2/lib/ffi_c.bundle, 0x0009): missing compatible arch in /Library/Ruby/Gems/2.6.0/gems/ffi-1.14.2/lib/ffi_c.bundle - /Library/Ruby/Gems/2.6.0/gems/ffi-1.14.2/lib/ffi_c.bundle
/System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/2.6.0/rubygems/core_ext/kernel_require.rb:54:in `require'
/System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/2.6.0/rubygems/core_ext/kernel_require.rb:54:in `require'
/Library/Ruby/Gems/2.6.0/gems/ffi-1.14.2/lib/ffi.rb:6:in `rescue in <top (required)>'
/Library/Ruby/Gems/2.6.0/gems/ffi-1.14.2/lib/ffi.rb:3:in `<top (required)>'
/System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/2.6.0/rubygems/core_ext/kernel_require.rb:54:in `require'
/System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/2.6.0/rubygems/core_ext/kernel_require.rb:54:in `require'
/Library/Ruby/Gems/2.6.0/gems/ethon-0.12.0/lib/ethon.rb:2:in `<top (required)>'
/System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/2.6.0/rubygems/core_ext/kernel_require.rb:54:in `require'
/System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/2.6.0/rubygems/core_ext/kernel_require.rb:54:in `require'
/Library/Ruby/Gems/2.6.0/gems/typhoeus-1.4.0/lib/typhoeus.rb:2:in `<top (required)>'
/System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/2.6.0/rubygems/core_ext/kernel_require.rb:54:in `require'
/System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/2.6.0/rubygems/core_ext/kernel_require.rb:54:in `require'
/Library/Ruby/Gems/2.6.0/gems/cocoapods-1.10.1/lib/cocoapods/sources_manager.rb:74:in `cdn_url?'
/Library/Ruby/Gems/2.6.0/gems/cocoapods-1.10.1/lib/cocoapods/sources_manager.rb:36:in `create_source_with_url'
/Library/Ruby/Gems/2.6.0/gems/cocoapods-1.10.1/lib/cocoapods/sources_manager.rb:21:in `find_or_create_source_with_url'
/Library/Ruby/Gems/2.6.0/gems/cocoapods-1.10.1/lib/cocoapods/installer/analyzer.rb:178:in `block in sources'
/Library/Ruby/Gems/2.6.0/gems/cocoapods-1.10.1/lib/cocoapods/installer/analyzer.rb:177:in `map'
/Library/Ruby/Gems/2.6.0/gems/cocoapods-1.10.1/lib/cocoapods/installer/analyzer.rb:177:in `sources'
/Library/Ruby/Gems/2.6.0/gems/cocoapods-1.10.1/lib/cocoapods/installer/analyzer.rb:1073:in `block in resolve_dependencies'
/Library/Ruby/Gems/2.6.0/gems/cocoapods-1.10.1/lib/cocoapods/user_interface.rb:64:in `section'
/Library/Ruby/Gems/2.6.0/gems/cocoapods-1.10.1/lib/cocoapods/installer/analyzer.rb:1072:in `resolve_dependencies'
/Library/Ruby/Gems/2.6.0/gems/cocoapods-1.10.1/lib/cocoapods/installer/analyzer.rb:124:in `analyze'
/Library/Ruby/Gems/2.6.0/gems/cocoapods-1.10.1/lib/cocoapods/installer.rb:414:in `analyze'
/Library/Ruby/Gems/2.6.0/gems/cocoapods-1.10.1/lib/cocoapods/installer.rb:239:in `block in resolve_dependencies'
/Library/Ruby/Gems/2.6.0/gems/cocoapods-1.10.1/lib/cocoapods/user_interface.rb:64:in `section'
/Library/Ruby/Gems/2.6.0/gems/cocoapods-1.10.1/lib/cocoapods/installer.rb:238:in `resolve_dependencies'
/Library/Ruby/Gems/2.6.0/gems/cocoapods-1.10.1/lib/cocoapods/installer.rb:160:in `install!'
/Library/Ruby/Gems/2.6.0/gems/cocoapods-1.10.1/lib/cocoapods/command/install.rb:52:in `run'
/Library/Ruby/Gems/2.6.0/gems/claide-1.0.3/lib/claide/command.rb:334:in `run'
/Library/Ruby/Gems/2.6.0/gems/cocoapods-1.10.1/lib/cocoapods/command.rb:52:in `run'
/Library/Ruby/Gems/2.6.0/gems/cocoapods-1.10.1/bin/pod:55:in `<top (required)>'
/usr/local/bin/pod:23:in `load'
/usr/local/bin/pod:23:in `<main>'

――― TEMPLATE END ――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――

[!] Oh no, an error occurred.

code

warning: The iOS Simulator deployment target 'IPHONEOS_DEPLOYMENT_TARGET' is set to 8.0, but the range of supported deployment target versions is 9.0 to 14.4.99. (in target 'boost-for-react-native' from project 'Pods')

Add this to you Podfile

code

post_install do |installer|
  # set the Deployment target for all your Pods references
  installer.pods_project.targets.each do |target|
    target.build_configurations.each do |config|
      # adjusting it only if it's not greater than 8.0
      if Gem::Version.new('9.0') > Gem::Version.new(config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'])
        config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '9.0'
      end
    end
  end
end

code

error listen EADDRINUSE: address already in use :::8081. Run CLI with --verbose flag for more details.

Two options:

Run on a different port react-native start --port=8088
OR find out what program is using 8081 sudo lsof -i :8081 and kill it kill -9 1234

incorrect architecture 'x86_64' errors

code

warning: no rule to process file '/Users/tasiomind/Sites/mobile-app/ios/Pods/Flipper-RSocket/rsocket/README.md' of type 'net.daringfireball.markdown' for architecture 'x86_64' (in target 'Flipper-RSocket' from project 'Pods')

add this to the Podfile

code

post_install do |installer|
  installer.pods_project.build_configurations.each do |config|
    config.build_settings["EXCLUDED_ARCHS[sdk=iphonesimulator*]"] = "arm64"
  end
end

run pod install afterwards

Setting up an M1 MacBook Pro for React Native (iOS and Android)

Setting up the environment

Ruby

Cocoapods

Homebrew

Node LTS with NVM

iOS

Android

OpenJDK 16

Troubleshooting

incorrect architecture 'x86_64' errors

Links