DEV Community

loading...
Cover image for Updating React Native projects for M1 Mac development

Updating React Native projects for M1 Mac development

mngyuan profile image Kevin Lee ãƒŧ2 min read

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
Enter fullscreen mode Exit fullscreen mode

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.
Enter fullscreen mode Exit fullscreen mode
Undefined symbol: protocol descriptor for Swift.ExpressibleByFloatLiteral
...
Enter fullscreen mode Exit fullscreen mode
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)
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.

Screen Shot 2021-02-16 at 10.08.25 PM

Screen Shot 2021-02-16 at 10.08.30 PM

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' })
Enter fullscreen mode Exit fullscreen mode

And update your Pods

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

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

rm -rf ~/Library/Developer/Xcode/DerivedData/
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (5)

pic
Editor guide
Collapse
rochapablo profile image
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.
Enter fullscreen mode Exit fullscreen mode
Collapse
__wzy__ profile image
WZY

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

Collapse
mngyuan profile image
Kevin Lee Author

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.

Collapse
moh3ni profile image
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 :)

Collapse
__wzy__ profile image
WZY

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