Updating React Native projects for M1 Mac development

In this post I'll walk through how to get the default React Native project to build in Xcode 12.4 on Apple silicon. The steps are the same as the ones I followed to update my app, but I'll use the default project to keep things relevant. You can follow along to update your own project, but keep in mind that different modules you've added and their pods (i.e. Firebase) might not have yet added support for Apple silicon.

First, let's get a basic project to work with.

npx react-native init rntest

Some common errors you might run into without any further changes are

/Users/mngyuan/git/personal/rntest/ios/rntest.xcodeproj The linked library 'libPods-rntest.a' is missing one or more architectures required by this target: arm64.

Undefined symbol: protocol descriptor for Swift.ExpressibleByFloatLiteral
...

ld: in /Users/mngyuan/git/personal/rntest/ios/Pods/FirebaseAnalytics/Frameworks/FIRAnalyticsConnector.framework/FIRAnalyticsConnector(FIRAnalyticsConnector_e321ed8e3db06efc9803f6c008e67a34.o), building for iOS Simulator, but linking in object file built for iOS, file '/Users/mngyuan/git/personal/rntest/ios/Pods/FirebaseAnalytics/Frameworks/FIRAnalyticsConnector.framework/FIRAnalyticsConnector' for architecture arm64
clang: error: linker command failed with exit code 1 (use -v to see invocation)

The problem is that we're building for the x86_64 iOS simulator, but building and linking with arm64 libraries and code. We have some settings to change. First, open Xcode

cd rntest
open ios/rntest.xcworkspace
# or xed -b ios

We're going to exclude the arm64 architecture from our build. Under Targets, select your project -> Build Settings -> Excluded Architectures, and add Any IOS Simulator SDK : arm64 for both Debug and Release. Do the same for your Pods project.

If your project for some reason has VALID_ARCHS set, you'll want to remove that key from your project as well (and the Pods project) at this stage.

We're very close to done, but the version of Flipper installed in your pods is likely not new enough to include the fixes for M1 macs. Open ios/Podfile and apply the following

- use_flipper!
+ use_flipper!({ 'Flipper' => '0.75.0' })

And update your Pods

cd ios/
# optionally reinstall all your Pods if you're still having issues
# pod deintegrate
pod update

If you performed a build which failed, you might want to clear DerivedData like so

rm -rf ~/Library/Developer/Xcode/DerivedData/

Now, perform a clean build by clearing your build folder (Cmd+Shift+K) and building (Cmd+R).

Everything should work now! If you're still having problems they may be related to a specific Pod which doesn't play nice with the M1 yet.

Comments

[Pablo]

Did not work for me, I got

<unknown>:0: error: module map file '/Library/Developer/Xcode/DerivedData/rn64ts-ehhwyfdrgnnoyjahfcxzjgzvomte/Build/Products/Debug-iphonesimulator/YogaKit/YogaKit.modulemap' not found
1 error generated.
<unknown>:0: error: failed to emit precompiled header '/Library/Developer/Xcode/DerivedData/rn64ts-ehhwyfdrgnnoyjahfcxzjgzvomte/Build/Intermediates.noindex/PrecompiledHeaders/rn64ts-Bridging-Header-swift_15M2S8H9GH635-clang_2B5AIGA2MP817.pch' for bridging header '/sandbox/taboola-react-native-example/rn64ts/ios/rn64ts-Bridging-Header.h'
3 errors generated.

[WZY]

pod install in ios folder solves your first error (YogaKit.modulemap' not found) for me

[Kevin Lee]

thanks @WZY. did you try that Pablo? Deleting your derived data folder sounds like it could help as well as these errors are occurring within that folder.

[Frankely Diaz]

Thank you, this is awesome!

[Zia]

Thanks a lot Kevin, I have been trying for hours to get react native working on my Mac. Finally I did it, thanks to you :)

[Gustavo M. Severo]

I'm having this problem with Firebse lib.
And even cleaning "rm -rf ~/Library/Developer/Xcode/DerivedData/" the problem persists.

[WZY]

Many hours of research and you finally bring me the solution, thank you very much!