TheLazy.Dev
Portfolio GitHub

Blog

mobile |reactnative |development

Setup Mac M1 Silicon for ReactNative Development

httpjunkie

Eric Bishard

Posted on November 5, 2024

Setup Mac M1 Silicon for ReactNative Development

Set NVM to 18: 

nvm install 18 
nvm use 18
Enter fullscreen mode Exit fullscreen mode

Install Watchman with Brew 

brew install watchman
Enter fullscreen mode Exit fullscreen mode

Ruby Setup

*Install rbenv for Ruby version management *

brew install rbenv
Enter fullscreen mode Exit fullscreen mode

*Set up rbenv in your shell *

rbenv init
Enter fullscreen mode Exit fullscreen mode

*Install Ruby 2.7.6 (recommended for React Native) *

rbenv install 2.7.6 rbenv global 2.7.6
Enter fullscreen mode Exit fullscreen mode

*Verify Ruby version *

ruby -v
Enter fullscreen mode Exit fullscreen mode

Install Xcode

From Apple Store

[✓] macOS 16.1 (built-in)
[✓] iOS 18.1

Manually Install Xcode iOS Simulator:

  1. Open Xcode
  2. Xcode → Preferences → Components
  3. Download a simulator (iOS 16+ recommended)

Install Xcode command line should now be installed? If not: 

xcode-select --install
Enter fullscreen mode Exit fullscreen mode

You can run several commands to verify your Xcode setup:
First, check that Xcode command line tools are installed:

xcode-select --version
Enter fullscreen mode Exit fullscreen mode

Verify Xcode's location:

xcode-select -p
Enter fullscreen mode Exit fullscreen mode

Should typically show /Applications/Xcode.app/Contents/Developer

Check the full Xcode version:

xcodebuild -version
Enter fullscreen mode Exit fullscreen mode

Verify iOS simulator is installed:

xcrun simctl list devices
Enter fullscreen mode Exit fullscreen mode

This should show you a list of available iOS simulators.
If any of these commands fail, you might need to:

Accept Xcode license:

sudo xcodebuild -license accept
Enter fullscreen mode Exit fullscreen mode

Or reinstall command line tools:

xcode-select --install
Enter fullscreen mode Exit fullscreen mode

Install CocoaPods 

sudo gem install cocoapods
Enter fullscreen mode Exit fullscreen mode

If CocoaPods doesn't install because there's a Ruby version conflict. Maybe you're running Ruby 2.6.10, but you need at least Ruby 2.7.0.
Here's how to fix this:

Install a newer version of Ruby using Homebrew:

brew install ruby
Enter fullscreen mode Exit fullscreen mode

Add the new Ruby to your PATH in your .zshrc file:

echo 'export PATH="/opt/homebrew/opt/ruby/bin:$PATH"' >> ~/.zshrc 
source ~/.zshrc
Enter fullscreen mode Exit fullscreen mode

Verify you have the new Ruby version:

ruby -v
Enter fullscreen mode Exit fullscreen mode

(Should show a version >= 2.7.0)

Try installing Cocoapods again:

sudo gem install cocoapods
Enter fullscreen mode Exit fullscreen mode

After installation, verify Cocoapods is installed:

pod --version
Enter fullscreen mode Exit fullscreen mode

A lot can go wrong at this juncture, I suggest if you have any issues, using Claude or ChatGPT to troubleshoot and don't move on until you can see all versions installed from your terminal and all paths are correct in your .zshrc etc...

Install Android Studio: 

brew install --cask android-studio
Enter fullscreen mode Exit fullscreen mode

Android Studio Setup:

  • Open Android Studio
  • Complete initial setup wizard (Choose Custom)
  • Install Android SDK (via Tools → SDK Manager):
    • Android SDK Platform 14 (API 34)
    • Intel x86 Atom_64 System Image or Google APIs Intel x86 Atom System Image
    • Android SDK Build-Tools
    • NDK (Side by side)
    • CMake

Configure Environment Variables:

Add to your ~/.zshrc or ~/.bash_profile:

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
Enter fullscreen mode Exit fullscreen mode

Create Android Virtual Device (AVD):

  • Open Android Studio
  • Tools → AVD Manager
  • Create Virtual Device
  • Select a device definition (e.g., Pixel 4)
  • Select a system image (API 35 recommended)

Install Java Runtime

For M1 Macs, you'll need to install the ARM64 version of the JDK (Java Development Kit). The simplest way to install it is:

brew tap homebrew/cask-versions
brew install --cask zulu17
Enter fullscreen mode Exit fullscreen mode

This will install Azul Zulu JDK 17, which is compatible with Android Studio and React Native development on M1 Macs. To verify the installation:

java -version
javac --version
Enter fullscreen mode Exit fullscreen mode

This will give you OpenJDK 17, which works well with Android development on M1 Macs.

Verification Steps

Install React Native CLI?

The react-native-cli global package is actually deprecated. Instead, you should use @react-native-community/cli which comes bundled with the npx command.

If already installed, you can safely uninstall the global CLI:

npm uninstall -g react-native-cli
Enter fullscreen mode Exit fullscreen mode

And instead, when creating new projects, use:

npx react-native init ProjectName
Enter fullscreen mode Exit fullscreen mode

This approach is preferred because:

  • It ensures you always use the latest version of the CLI
  • Avoids global package installations
  • Prevents version conflicts

Create a test project:

npx react-native init TestProject --template react-native-template-typescript
cd TestProject
Enter fullscreen mode Exit fullscreen mode

Test iOS setup:

cd ios && pod install && cd ..
npx react-native run-ios
Enter fullscreen mode Exit fullscreen mode

Test Android setup:

# Start Android emulator first
npx react-native run-android
Enter fullscreen mode Exit fullscreen mode

Troubleshooting

If you encounter M1-specific issues:

For iOS: Try adding this to your Podfile:

post_install do |installer|
  installer.pods_project.targets.each do |target|
    target.build_configurations.each do |config|
      config.build_settings['EXCLUDED_ARCHS[sdk=iphonesimulator*]'] = "arm64"
    end
  end
end
Enter fullscreen mode Exit fullscreen mode

For Android: Ensure you're using the ARM64 system image when creating AVD

💖 💪 🙅 🚩
httpjunkie
Eric Bishard

Posted on November 5, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Setup Mac M1 Silicon for ReactNative Development
mobile Setup Mac M1 Silicon for ReactNative Development

November 5, 2024