Apple has just released its newest Macbook series using Apple’s M1 chip. This new series offers better speed, both in performance and battery life.
How to Set up an M1 MacBook Pro for React Native

How to Set up, Build and Run a React Native App on Macbook Pro M1 Chip

In this case, developers are interested in flocking to replace their old MacBook with the M1 chip. However, in addition to the advantages of the MacBook Pro M1, there are shortcomings in terms of application development. Some applications are not yet compatible with this Apple M1 chip.

React Native is a JavaScript framework that allows native iOS and Android applications to be rendered. This makes it easier to create two applications on different platforms with one source code. One of the difficulties faced in developing React Native applications through MacBook Pro / Macbook Air with this M1 chip is when we want to build/run the application.

Many developers have experienced failures in building react native applications through MacBook M1. However, don’t worry because I will share tips for you to deal with errors when making an iOS application on a MacBook Pro or MacBook Air M1 Apple Silicon chip.

React Native Build Failed on Macbook Pro M1

maybe you are unable to run react-native run-ios on M1 Macbook. The error output that you will get when you build react native iOS is as below:

The following build commands failed:
CompileC /Users/[username]/Library/Developer/Xcode/DerivedData/reactNativeBoilerplate-atkaxzsfrfdlfocjvyvemwywinew/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/Flipper-Folly.build/Object. Users/[username]/[folder-path]/ios/Pods/Flipper-Folly/folly/synchronization/DistributedMutex.cpp normal x86_64 c++ com.apple.compilers.llvm.clang.1_0.compiler
(1 failure)

react native build failed on m1 mac

The solution to Run and Build React Native on M1 Macbook Pro

The key to solving React Native build failure on M1 Macbook is to use Rosetta. What is rosetta?

Rosetta is a dynamic binary translator developed by Apple Inc. for macOS, an application compatibility layer between different instruction set architectures. It gives developers and consumers a transition period in which to update their application software to run on newer hardware, by “translating” it to run on the different architecture.

If you’re using a MacBook Pro/Air with an M1/Apple silicon chip, you might be asked to install Rosetta to open an app.
roseta 2 help run react native on MacBook Pro M1

  1. Set Terminal App to use Rosetta:. Select the app in Finder. Applications/Utilities/Terminal (App terminals). From the File menu in the menu bar, choose Get Info. Make a checklist on: ( Open Using Rosetta ). See the image below.

terminal with rosetta  react native on MacBook Pro M1

  1. Set Xcode to use Rosetta:. Select the Xcode app in Finder. Applications/Xcode (Xcode App). From the File menu in the menu bar, choose Get Info. make a checklist on ( Open Using Rosetta )

run xcode roseta 2 help build react native on MacBook Pro M1

  1. Next, delete the necessary folders so the build process can be successful and smooth.
    • delete the Pods/ folder in your-project-dir/ios/Pods
    • delete podfile.lock in -> your-project-dir/ios/Podfile.lock
  2. If you use the old code of react Native, or if you experience an error like what I said the first time, you can follow the next steps below. However, if you’ve just built react Native init on your MacBook M1, that shouldn’t be a problem, and you should be able to build react-native ios on your MacBook smoothly.
  3. The next step is to modify the Podfile in the iOS folder. your-project-dir/ios/Podfile. navigate to your react native project, and open it in the editor.

Find code below: ( your-project-dir/ios/Podfile )

use_flipper!()

And, replace with:

use_flipper!({ 'Flipper-Folly' => '2.5.3', 'Flipper' => '0.75.1', 'Flipper-RSocket' => '1.3.1' })
  1. The next step, install React native project as usual. Navigate to the root project directory, and run:
npx pod-install
  1. Next, run npx react-native run-ios from your terminal.
npx react-native run-ios

build success react native using macbook pro m1

The above method should be smooth and run well on iOS Emulator. Good Luck!

Do you need React-Native TypeScript BoilerPlate? check this out: https://github.com/handi-dev/react-native-typescript-boilerplate