Building React native fail on iOS - using Apple M1 chip

1
votes

I've got a new mac and I followed the instructions for the installation.

when I run the Command:

npx react-native init ProjectName

I got the following Error

** BUILD FAILED **

The following build commands failed: CompileC /Users/aghiadmonier/Library/Developer/Xcode/DerivedData/test- bbpkvpircnzzukgpgaaohkixdojw/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/Flipper.build/Objects-normal/x86_64/ConnectionContextStore.o /Users/aghiadmonier/Desktop/React/test/ios/Pods/Flipper/xplat/Flipper/ConnectionContextStore.cpp normal x86_64 c++ com.apple.compilers.llvm.clang.1_0.compiler (1 failure)

I am using Xcode 12.5

3
iosreact-nativeapple-m1

3 Answers

1
votes

xCode 12.5 is the problem here. It seems to break react-native builds. Solutions are mentioned here - https://github.com/facebook/react-native/issues/31179#issuecomment-830184757

looks like you're on react-native 0.64

  1. update podfile to use
use_flipper!('Flipper' => '0.75.1', 'Flipper-Folly' => '2.5.3')
  1. update package.json to use
"react-native": "facebook/react-native#cf8a364767df830d7255339741350bb53ab1a68a"
  1. run npm install (or yarn)
  2. run pod install in the ios folder, clean and rebuild app
0
votes

just for the information I am using Mac M1 ship,

when I execute the Flipper command I got this error:

[!] Invalid `Podfile` file: unknown keywords: "Flipper", "Flipper-Folly".

 #  from /Users/aghiadmonier/Public/Projects/Awsom/ios/Podfile:24
 #  -------------------------------------------

you should disable the next line.

use_flipper!('Flipper' => '0.75.1', 'Flipper-Folly' => '2.5.3')
-1
votes

When you try to create a project using the below command in M1(Apple Silicon Chip):

npx react-native init ProjectName

Try to build using below steps:

  1. Open Terminal and install rosetta
  2. Type "softwareupdate — install-rosetta" command in your terminal.
  3. After installation completes, go to the Application.
  4. Find Terminal App
  5. Right click and make a Duplicate Terminal Rosetta checkbox in terminal
  6. Now right click on a duplicate terminal and click on "Get Info"
  7. You will see checkbox with option "Open with Rosetta". Enable it.
  8. That's it. Rename your rosetta terminal so that you can identify it easily.
  9. Open your Rosetta Terminal and run the command npx react-native init ProjectName
  10. After project initialisation done type npx react-native start to start metro.
  11. Now type command npx react-native run-android for run into Android
  12. Type command npx react-native run-ios for run into iOS.
  13. After project initialisation is done you can run start and run command in VS Code also.