Apple has just released its newest Macbook series using Apple's M1 chip. It offers better speed, both in performance and battery life.

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.

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

React Native is a JavaScript framework that allows native iOS and Android applications to be rendered. It makes creating two applications on different platforms more straightforward 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 failure building react native applications through this 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)

Solution to Run and Build React Native on M1 Macbook Pro

The solution to 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 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.

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.

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 )

1. 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 the 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: ```bash

npx pod-install

7. Next, run npx react-native run-ios from your terminal.
```bash


npx react-native run-ios

The above method should be smooth and run well on iOS Emulator. Good Luck!
original article: handi.dev

read also: React Native Scaler: Perfecting App Aesthetics Across Multiple Devices