Setup React Native And Run App On Mac M1

In this article, I will give you a quick guide to setup up the react-native environment on your Mac M1, its slightly challenging as not much support and community help is available.

If you find this article helpful for you so don’t forget to clap.

(Watch Full Video On Youtube: https://youtu.be/rTwE7fR7ewI)

After reading this blog you will end up setting up react-native in M1.

Some of the basic software which is required to be installed on your m1 system are:

1. Rosetta 2
2. Homebrew
3. Xcode
4. cocoapods
5. Node
6. Watchman

1.Install Rosetta 2 On Mac M1:

Rosetta 2 is necessary if you want to be able to run older non-native Intel x86 apps on new Apple Silicon Macs, like the M1 MacBook Pro, MacBook Air, or Mac mini. Curiously, Rosetta 2 is not installed by default on these Macs, however, so if you wish to run these apps you’ll need to install Rosetta 2 onto the Apple Silicon Mac yourself.

You can install Rosetta 2 on the Mac M1 by using the familiar softwareupdate command-line tool.

softwareupdate — install-rosetta

After Setting up Rosetta we will create Rosetta Terminal. For this just go to Applications and create a duplicate terminal. go to get the info section and select open using rosetta.

2. Install Homebrew On Mac M1:

To setup, homebrew follow the below command

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

You can check whether homebrew installed correctly or not by running the below command

which brew

Or

command -v brew

3. Install Xcode On Mac M1:

The easiest way to install Xcode is via the Mac App Store. Go To the App Store and download the latest version of Xcode it will take a long time to install Xcode. Installing Xcode will also install the iOS Simulator and all the necessary tools to build your iOS app.

If you have already installed Xcode on your system, make sure it is version 10 or newer.

4.Install Cocopods On Mac M1:

After downloading Xcode We have to set cocoa pods on our Mac M1 system by running the below command

brew install cocoapods
sudo gem install ffi

5.Install Node On Mac M1:

Go to the node website download the latest version of the node and install it. If you have already installed Node on your system, make sure it is Node 12 or newer.

Or you can install node using brew by running the below command

brew install node

6.Install Watchman On Mac M1:

Watchman is a tool by Facebook for watching changes in the filesystem. So you can install it by running the below command

brew install watchman

— — — — — — — — — -— — — — — — — — — — — — — — — — — — — — —

Note: If you are facing any issue with android setup watch these videos:

1. command not found adb https://youtu.be/77Be98W8LVA
2. RN Android Setup On Mac M1 https://youtu.be/yOErAwnu4pc

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

Create React Native App

Don’t need to install react-native-cli package. You can use React Native’s built-in command-line interface to generate a new project.

React Native has a built-in command-line interface. Rather than install and manage a specific version of the CLI globally, we recommend you access the current version at runtime using npx, which ships with Node.js. With npx react-native <command>, the current stable version of the CLI will be downloaded and executed at the time the command is run.

To create a new react-native project run the below command:

npx react-native init RNDemoProject

Run React Native App:

To run our react-native application we need to start Metro the JavaScript bundler that ships with React Native.

To start Metro, run npx react-native start inside your React Native project folder:

npx react-native start

Let Metro Bundler run in its own terminal. Open a new terminal inside your React Native project folder. Run the following:

npx react-native run-ios

You should see your new app running in the iOS Simulator shortly.

(Hope this article helped you to set up react-native on your mac m1 system. Your one clap on this article motivates me to write a more useful article so Don’t forget to clap.)

Conclusion:

We are done with setting up the react-native project and running it on the Mac M1 system.