React Native Environment Setup for Mac (Apple Silicon) | Code with Beto

Learn how to set up a React Native CLI development environment on a brand new MacBook Pro with Apple M3 Pro chip. You'll learn installing all the necessary tools from scratch, including Homebrew, Node.js, Watchman, Android Studio, and Xcode.

If you want a smooth React Native experience on macOS, especially with Apple Silicon, this setup guide will help you get started with the latest versions and recommended tools. It’s for developers ready to work with the React Native CLI (not Expo).

What's inside

Introduction to the new Apple Silicon MacBook Pro setup
Installing Homebrew and using it to manage packages
Installing iTerm2 terminal for a better command line experience
Installing Node.js and Watchman via Homebrew
Downloading and setting up Android Studio for Android emulation
Installing and configuring Xcode and command line tools for iOS
Setting up CocoaPods for iOS dependency management
Tips on verifying installations and environment readiness

Introduction to the new Apple Silicon MacBook Pro setup

I start by introducing my new MacBook Pro with the Apple M3 Pro chip, 18GB RAM, and 1TB SSD. I emphasize the importance of a powerful machine for React Native development because running iOS and Android simulators alongside background processes can be resource-intensive.

I recommend investing in a good Mac for a smoother development experience, especially when working with React Native CLI projects that require native builds and simulators.

Installing Homebrew and using it to manage packages

Homebrew is the essential package manager for macOS that simplifies installing and managing development tools. I copies the official Homebrew installation command from the React Native docs and runs it in the terminal.

I explain that Homebrew allows you to install programs easily with simple commands like . After installation, Homebrew prompts to add its path to your shell profile, which I demonstrate copying and pasting into the terminal.

Installing iTerm2 terminal for a better command line experience

I prefer iTerm2 over the default macOS Terminal app. Using Homebrew, I install iTerm2 with and shows how to launch it.

I customize iTerm2 for better usability and explains that it will be my primary terminal for running React Native commands and managing the environment.

Installing Node.js and Watchman via Homebrew

Node.js is required to run React Native’s JavaScript code, and Watchman is a Facebook tool that watches file changes to enable fast reloads.

I install Node.js and Watchman using Homebrew commands copied from the React Native setup guide. I verifies the Node.js installation by running and confirms the version is recent enough (version 21 in my case).

I explain Watchman’s role in improving development speed by monitoring code changes and triggering updates in the simulator almost instantly.

Downloading and setting up Android Studio for Android emulation

Android Studio is needed to run Android emulators and build Android apps. I downloads the latest version from the official Android Studio website, making sure to select the Mac version for Apple Silicon.

After downloading, I drags Android Studio into the Applications folder and opens it. I note that Android setup on Mac requires a bit more work than iOS but is essential for cross-platform React Native development.

Installing and configuring Xcode and command line tools for iOS

Xcode is Apple's IDE for iOS development and includes the iOS simulator. I install Xcode from the Mac App Store before filming because it’s a large download (~10GB).

I open Xcode and accesses Preferences (Command + ,) to verify the Command Line Tools are set to the latest version. This step ensures the necessary build tools are available for React Native CLI to compile iOS apps.

I also mentions that installing Xcode usually prompts to install simulators, which you should accept to have the latest iOS versions available.

Setting up CocoaPods for iOS dependency management

CocoaPods is a Ruby-based dependency manager for iOS projects. I checks the Ruby version pre-installed on macOS (2.6 in my case) and uses the Ruby gem system to install CocoaPods.

I refer to the official CocoaPods get started guide and copies the installation command to the terminal. CocoaPods is required to manage native iOS dependencies in React Native projects.

Tips on verifying installations and environment readiness

Throughout the setup, I run commands like , , and checks for installed apps like iTerm2 and Android Studio to confirm everything is installed correctly.

I highlight the importance of following the React Native CLI official environment setup guide and making sure all tools are up to date, especially on new Apple Silicon Macs where compatibility can be tricky.

Resources

CourseReact Native course

Fundamentals through shipping: the concepts behind the prompts, with lifetime access.

Let's connect!