Setting up a React Native environment on a MacBook for both Android and iOS development can seem tricky, but with this guide you'll get up and running with confidence.

📦 Step 1: Install Homebrew

Homebrew makes installing software on macOS simple. Open your Terminal and run:

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

🛠️ Step 2: Fix PATH Errors (If Encountered)

If you see a message that /opt/homebrew/bin is not in your PATH, add Homebrew to your profile:

echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> ~/.zprofile
eval "$(/opt/homebrew/bin/brew shellenv)"

If you're using a different user, adjust the path accordingly:

(echo; echo 'eval "$(/opt/homebrew/bin/brew shellenv)"') >> ~/.zprofile
eval "$(/opt/homebrew/bin/brew shellenv)"

🚀 Step 3: Install Required Dependencies

Install Node.js, Watchman, and OpenJDK (Zulu 17):

brew install node
brew install watchman
brew tap homebrew/cask-versions
brew install --cask zulu17

Watchman helps with file watching and hot reloads in React Native; Zulu 17 is a compatible OpenJDK distribution for Android builds.

☕ Step 4: Configure Java Environment

Check your Java version:

java -version

Find Java Home:

/usr/libexec/java_home

Copy the output path.

Add JAVA_HOME to your shell config:

touch ~/.zshenv
open ~/.zshenv

Add this line at the end (replace the path with the output from the previous command):

export JAVA_HOME=/Library/Java/JavaVirtualMachines/zulu-17.jdk/Contents/Home

Validate:

cat ~/.zshenv  # Ensure JAVA_HOME is set
echo $JAVA_HOME  # Output should match your intended path

🤖 Step 5: Android Development Environment

- Download and install Android Studio** from the official website.
- Launch Android Studio and let it install the **Android SDK**, **Emulator**, and required tools.
- Add these lines to your `.zprofile`:

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools

You can find and open your .zprofile file like this:

open ~/.zprofile

- Save and close the file. **Restart your terminal** or run:

source ~/.zprofile

🍏 iOS Development Setup

For iOS, install Xcode from the Mac App Store.

- Launch Xcode once to accept the license and complete initial setup.
- Install the command line tools if prompted:

xcode-select --install

🔄 Final Steps

- Your MacBook is now ready for React Native development for both Android and iOS.
- Restart the Terminal to ensure all changes take effect.
- Create a new React Native project to check your setup:

npx react-native@latest init AwesomeProject

⚠️ Troubleshooting Common Errors

- **zsh: command not found: npx**
  Install Node.js correctly via Homebrew. Ensure Node and npm are in your PATH:

node -v
npm -v

- **npm or npx not found after install**
  Try closing and reopening your terminal, or check if `/opt/homebrew/bin` is in your PATH.

- **sudo apt-get install npm**
  On macOS, you do not use `apt-get`. Use Homebrew to install Node.js, which includes npm and npx.

✅ Pro Tips

• Always install Node.js via Homebrew for easy upgrades.
• Use the official React Native CLI (npx react-native@latest) for new projects.
• Keep your Android Studio and Xcode versions up to date.
• Consider yarn as a fast alternative to npm, install it with brew install yarn.

By following these steps, your MacBook will be equipped for seamless React Native development, with support for both Android and iOS platforms. Happy coding!