Setting up React Native on M2 mac

2023-08-17

One day I decided to play around with React Native on my M2 mac.

Disclaimer: I have no experience with React, let alone with React Native, but here are the resulting notes of an iterative process of going from no setup to running a "Hello World" React App on M2 mac.

1. Prerequisites:

Ensure you have Homebrew, Node.js, and npm installed.

2. Install necessary dependencies:

a. Xcode:

b. Watchman (Optional, but recommended for improving file-watching performance):

brew install watchman

3. Handle Ruby & Gems Permissions:

On M1/M2 Macs, you may encounter permission issues with the system's Ruby setup. To overcome this:

a. Install chruby and ruby-install:

brew install chruby ruby-install

b. Install a version of Ruby for your user:

ruby-install ruby

c. Switch to the version of Ruby you installed:

chruby ruby-<version>

Replace <version> with the version number you installed.

4. Install CocoaPods:

CocoaPods is a dependency manager for Swift and Objective-C Cocoa projects.

gem install cocoapods

5. Initialize a New React Native Project:

npx react-native init YourProjectName

Avoid running the above command with sudo as it can create additional permission issues.

6. Resolving Permission Issues:

If you come across any permission issues related to npm caches or directories, use the following command to reset the permissions:

sudo chown -R $(whoami) /path/to/directory

Replace /path/to/directory with the problematic path shown in the error message.

7. Running the App:

a. Start the Metro server:

npx react-native start

b. Compile and run the app:

npx react-native run-ios

You should now have a React Native app running on the iOS Simulator. For additional platforms, configurations, or advanced setup, always refer to the official React Native documentation or specific platform documentation.

Notes: