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.

(Watch Full Video On Youtube: https://youtu.be/rTwE7fR7ewI)
(Subscribe to my youtube channel for JavaScript Videos: https://www.youtube.com/channel/UC9MmyicGIveu0AId8OFAOmQ)

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 below command
brew install watchman.

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

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 , 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.

Conclusion:

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

Read This: Run React Native Android App On Mac M1
https://dev.to/ravics09/run-react-native-android-app-on-mac-m1-2goh

Comments

[Kingsley Yong]

CompileC /Users/kingsleyyong/Library/Developer/Xcode/DerivedData/lavaxProject-dascthkblhhdgeapnlketstfxkeq/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/RCT-Folly.build/Objects-normal/x86_64/SysUio.o /Users/kingsleyyong/React\ Learn\ Project/lavaxProject/ios/Pods/RCT-Folly/folly/portability/SysUio.cpp normal x86_64 c++ com.apple.compilers.llvm.clang.1_0.compiler
CompileC /Users/kingsleyyong/Library/Developer/Xcode/DerivedData/lavaxProject-dascthkblhhdgeapnlketstfxkeq/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/RCT-Folly.build/Objects-normal/x86_64/NetOps.o /Users/kingsleyyong/React\ Learn\ Project/lavaxProject/ios/Pods/RCT-Folly/folly/net/NetOps.cpp normal x86_64 c++ com.apple.compilers.llvm.clang.1_0.compiler
CompileC /Users/kingsleyyong/Library/Developer/Xcode/DerivedData/lavaxProject-dascthkblhhdgeapnlketstfxkeq/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/RCT-Folly.build/Objects-normal/x86_64/FileUtil.o /Users/kingsleyyong/React\ Learn\ Project/lavaxProject/ios/Pods/RCT-Folly/folly/FileUtil.cpp normal x86_64 c++ com.apple.compilers.llvm.clang.1_0.compiler

(3 failures)

[Kingsley Yong]

keep getting this kind of failure message when running npx react-native run-ios in my m1 mac...
how can i solve it?

[Ravi Sharma]

In performance, m1 is best compare with previous mac system and till now I didn't face any heating issue on my m1 laptop.

[Paul Hendrix]

Mind that this installs all tooling fully under Rosetta.

[J-Ciego]

What about Android?

[Ravi Sharma]

dev.to/ravics09/run-react-native-a...

[Pavel Ermakov]

How about the m1 performance? My 2017 13" macbook pro heats up and takes off like a shuttle when I build react-native projects.

[Raquel Smith]

Is rosetta still necessary for this, or will it work without now that most things are compatible with the M1?