Investigate the RN new architecture

[marandaneto]

https://reactnative.dev/docs/next/new-architecture-intro#table-of-contents

The goal is to identify breaking changes with the current Sentry RN SDK. Consider upgrading to the latest stable version as well https://react-native-community.github.io/upgrade-helper/?from=0.66.2&to=0.68.1 https://reactnative.dev/blog/2022/06/16/resources-migrating-your-react-native-library-to-the-new-architecture

Docs for migrating Discussions new architecture Examples with steps Already migrated libs to take as an example

[github-actions[bot]]

This issue has gone three weeks without activity. In another week, I will close it.

But! If you comment or otherwise update it, I will reset the clock, and if you label it Status: Backlog or Status: In Progress, I will leave it alone ... forever!

---

"A weed is but an unloved flower." ― Ella Wheeler Wilcox 🥀

[marandaneto]

Why the new architecture? It uses JSI instead of the Bridge and other improvements.

TurboModules: Ensure your App Provides an RCTCxxBridgeDelegate Fabric is the new RN's rendering system. Min Gradle and AGP version are 7.x. Hermes is enabled by default also here. iOS uses C++ 17 language features. iOS use Objective C++ and requires .mm extension. React 18 enabled by default. Min RN version is 0.68. CodeGen requires min RN version 0.70.

SentryNativeBridgeModule is likely going to be auto generated and has to be adapted.

• [x] Drop RN versions older than ~0.60.x~ 0.70.x, Check "react-native": ">=$version" on package.json
• [ ] ~Import NativeModules on index.ts~
• [ ] Import RCTBridgeModule on RNSentry.h
• [x] Use RCT_REMAP_METHOD on RNSentry.m
• [x] Patch build script on Android on build.gradle
• [x] Add Turbo module on JS on ~RNSentry.ts~ NativeRNSentry.ts (naming convention given by the codegen scripts)
• [x] Add Turbo codegen on iOS on package.json
• [x] Add Turbo codegen on Android on build.gradle
• [x] Patch podspec on iOS on RNSentry.podspec
• [x] Patch RCT_NEW_ARCH_ENABLED on iOS on ~RNSentry.m~ RNSentry.mm
• [x] Make RNSentryPackage backward compatible on Android on RNSentryPackage.java
• [x] Patch build script with IS_NEW_ARCHITECTURE_ENABLED on Android on build.gradle
• [x] Patch package with IS_NEW_ARCHITECTURE_ENABLED on Android on RNSentryPackage.java
• [x] ~Create~ Codegen a NativeSentrySpec on Android
• [x] Create an impl of ReactContextBaseJavaModule on Android
• [x] Refactor the ModuleImpl to use the implementation created above on Android
• [x] Unify the JS interface on index.ts
• [x] Test Android and iOS with new architecture
• [x] Test Android and iOS with the old architecture
• [ ] Fix sentry-wizard with new iOS command
• [ ] Bump Sentry-CLI

Ps:

Autolinking doesn’t work with the new architecture out of the box. Therefore you need to ask the user of your library to do the following steps

https://github.com/react-native-community/RNNewArchitectureLibraries/tree/feat/back-turbomodule#android-autolinking=

We could patch https://github.com/getsentry/sentry-wizard to do that but we don't know if the new architecture is enabled or not within the final app.

Chrome debugging doesn't work on New Architecture

[cipolleschi]

Consider upgrading to the latest stable version as well https://react-native-community.github.io/upgrade-helper/?from=0.66.2&to=0.68.1

The new stable version is 0.69.3

CodeGen requires min RN version 0.70.

Not really. Codegen works starting from the 0.67, however we worked on improving it and trying to simplify the setup. The page you linked is a draft of how to use Codegen that will be released together with 0.70, where we changed the syntax of the package.json and we unified how it should work for both ios and android.

Autolinking doesn’t work with the new architecture out of the box. Therefore you need to ask the user of your library to do the following steps

Autolinking for iOS works since 0.68. Autolinking for Android is coming with 0.70.

[marandaneto]

@cipolleschi Thank you.

[cipolleschi]

Here you can find a full migration from 0.67.4 to 0.70.0-rc.0

[cipolleschi]

Hi @marandaneto! How's this investigation/migration going? Can I help with anything?

[marandaneto]

Hi @marandaneto! How's this investigation/migration going? Can I help with anything?

Thanks for checking out, I've done the investigation and have an idea on how to proceed but I still need to discuss with the team about this prioritization. There's also a draft PR for upgrading our sample to RN 0.69.3. I'll keep you posted :)

https://github.com/facebook/react-native/releases/tag/v0.70.0 is released.

[krystofwoldrich]

These two repositories with example of new architecture app and library can be useful during the migration.

• https://github.com/react-native-community/RNNewArchitectureApp/tree/run/from-0.67-to-0.70
• https://github.com/react-native-community/RNNewArchitectureLibraries/tree/feat/back-turbomodule#android-autolinking=

Also Sentry could collet tag fabric, to see if app is running on the new architecture.

[krystofwoldrich]

Nice overview of what changes in an app to include the new arch. https://react-native-community.github.io/upgrade-helper/?from=0.67.4&to=0.68.0

[cipolleschi]

That link is a bit outdated. I suggest that you use v0.70 as reference instead of 0.68. We changed several things and simplified the migration process a bit.. And we are continuously improving it. Migrating to 0.71, as soon as we release that, will be even easier!

[krystofwoldrich]

@cipolleschi Thanks for the info. I'm now following all the docs for 0.70.

[krystofwoldrich]

Upgrade to React 18 can be done after JS SDK is also on 18. Since Rect.Component types are not copatible.

[krystofwoldrich]

• [ ] Drop RN versions older than 0.60.x, Check "react-native": ">=$version" on package.json

@marandaneto So we would change this all the way to 0.70.x for the 5.0.0 release?

[marandaneto]

Upgrade to React 18 can be done after JS SDK is also on 18. Since Rect.Component types are not copatible.

Sounds like a problem, does 0.70.x require React 18? Does it work if people use React 18 but the SDK does not?

[marandaneto]

• [ ] Drop RN versions older than 0.60.x, Check "react-native": ">=$version" on package.json

@marandaneto So we would change this all the way to 0.70.x for the 5.0.0 release?

Yes, people can use the v4 of the SDK for < 0.70.x

[cipolleschi]

I think that a little bit of extra context can be helpful here.

React Native rebundle and ships its own version of React internally (which is the same code you find in the React repo, it's not a customized versiono of React for React Native). React Native 0.70+ is shipping React 18. New apps created with React Native 0.70+ have the React 18 root enabled by default, but the user can disable it

[krystofwoldrich]

@cipolleschi So until we can upgrade to react 18 we can just use 17 (but of course, we will miss some features).

[cipolleschi]

Yeah, technically if the users turn off this setting for iOS and its equivalent for Android, it should behave like React 17.

[krystofwoldrich]

React 18 is working now, it wasn't actually JS SDK (they support v18), but it was an error in our RN sdk.

[krystofwoldrich]

Seems like ReactNavigation and New Arch on Android don't play well yet, I've run into the same issue.

https://github.com/software-mansion/react-native-screens/issues/1608

ios works well, but on Android I'm getting the same error

[marandaneto]

Also hitting the issue https://github.com/facebook/react-native/issues/34923

[krystofwoldrich]

When this will make it to a RN release we will be able to return the modal feedback view to the new arch example. https://github.com/facebook/react-native/commit/9ac437f25b51b9a7fc8134d17c69b64ae90d508d

At the moment the modal view is not implemented/included in Fabric Renderer.

[marandaneto]

Better stack traces when Java crashes apparently depend on the outcome of this issue https://github.com/getsentry/sentry-native/issues/743 and https://github.com/getsentry/sentry-native/pull/752#issue-1382270623 or if the RN engine actually improves something.