New Architecture migration reports

[brentvatne]

Note

tl;dr: The New Architecture is being rolled out in 2024, and now is a great time to test your apps with it enabled. Use this discussion topic to share reports of your experiences enabling the New Architecture in your apps, so we can learn what we have done well, what we need to improve, and help you to work through any issues.

With the New Architecture rolling out in 2024, the Interop Layer and Bridgeless enabled by default in React Native 0.74, and the recent and ongoing push to achieve widespread New Architecture support in third-party libraries, now is the time to try enabling it in your app!

You can try the New Architecture in your app even if some of the libraries you use aren't supported. Create a new branch in your repository and remove any of the libraries that aren't compatible, until your app is running. This will give you a good idea of what libraries still need work before you can fully migrate to the New Architecture. We recommend creating issues or pull requests on those libraries' repositories to help them become compatible with the New Architecture.

When you've tried it out, report your findings here! Share the exact React Native version used (0.74.0 or the most recent available at the time of reading is strongly advised), which libraries you used that did not work, and any other problems you observed.

Resources to get started:

• Enable New Architecture for Apps
• Expo docs on the New Architecture

[brentvatne]

@kadikraman and I tried it on the upcoming React Conf app and it worked well without any changes on both Android and iOS :) here is our package.json: https://gist.github.com/brentvatne/6c966e0c5dc2dc857afc893c92904579

• one quirk we notices was that the headerBlurEffect prop (expo-router → react-navigation → react-native-screens) did not work with the New Architecture enabled, I'll follow up by creating a minimal repro and creating an issue for it.
• we have nested touchables to implement bookmarks, so you have a card where the entire card is pressable and then there is another button inside of it, but that second button is not pressable. using gesture-handler
• event bubbling error when using native search bar in screens (NOBRIDGE) ERROR Invariant Violation: Event cannot be both direct and bubbling: topFocus

[MariuzM]

Right here is video, as soon as i make change to BottomSheet then it crashes.

Screen.Recording.2024-05-08.at.16.24.46.mov

Repo to test: https://github.com/MariuzM/expo-starter/blob/main/src/components/BottomSheet.tsx

But if i don't use BottomSheetScrollView then it works

[brentvatne]

thanks for the repro! we'll look into it

[brentvatne]

hi there, this is not related to the new architecture. please take such questions to https://chat.expo.dev/

[brentvatne]

hi there! please take such questions to https://chat.expo.dev/

[shamilovtim]

Hello,

I've enabled newArch in our incubation project web5 wallet

iOS newArch: works
Android newArch: does not work

iOS bridgeless: does not work (and therefore disabled it)
Android bridgeless: does not work (and therefore disabled it)

Currently Android newArch is blocked by a run time error:

/root/react-native/packages/react-native/ReactCommon/jsi/jsi/jsi-inl.h:187: std::shared_ptr<T> facebook::jsi::Object::getHostObject(Runtime &) const [T = facebook::react::RuntimeSchedulerBinding]: assertion "isHostObject<T>(runtime)" failed

This is difficult to debug because I cannot invoke the debugger since the error is so early in the callstack the debugger doesn't have a chance to run and catch it. I've tried to isolate the error by commenting out all code and imports in App.tsx and index.ts but neither of these stop the error. It seems to come probably from a require, but the debugging experience is painful.

[cortinico]

Do we also need to disable bridgeless when using newArch?

Nope you should not disable bridgeless.

Also @shamilovtim I don't understand what you mean with:

iOS newArch: ✅
iOS bridgeless: ⛔️ (disabled)

Is the first ✅ referring to you enabling the New Architecture, but disabling bridgeless. If so, you're not supposed to disable bridgeless.

If you could provide me with a bit more detail and what is the error, we could look into it and attempt to fix it. A reproducer would also be gold here.

[shamilovtim]

Hey @cortinico I provided a link to the repo: https://github.com/TBD54566975/web5-wallet.

If so, you're not supposed to disable bridgeless.

Why? I thought bridgeless was the 2nd step and required more work from maintainers than only newArch alone. iOS works with newArch only, but not newArch + bridgeless. Android works neither with newArch nor with bridgeless.

Bridgeless seems pretty recent while newarch has been around for a while. I thought bridgeless was an optional final step.

[shamilovtim]

Is the first ✅ referring to you enabling the New Architecture

I'm saying iOS newArch works, but iOS bridgeless does not.
On Android, neither newArch nor bridgeless work.

[cortinico]

Bridgeless seems pretty recent while newarch has been around for a while. I thought bridgeless was an optional final step.

That's correct but we consider the New Architecture as Fabric + TurboModules + Bridgeless. Ideally you should be testing your libs against Bridgeless only as this helps to reduce the configuration options (which makes things easier for folks to reason about).

[shamilovtim]

@cortinico ok if we're not treating bridgeless as an separate optional config then newArch doesn't work in the repro for neither iOS nor Android

[aretrace]

Error recovery for fast refresh

After enabling new-arch on a development build in a on device iOS Expo project, it appears that the fast refresh feature stops working after an error (e.g., <Vieww> instead of <View>) is corrected. Consequently, you must press r to fully reload the app in order to continue development. This contrasts with the current architecture, where fixing an error allows the app to continue functioning properly with fast refresh still working. The behavior of new-arch can be very frustrating, especially if you are using an editor with auto-save enabled.

[brentvatne]

hi there, this topic is for new architecture discussions. please bring other topics to https://chat.expo.dev/

[aretrace]

When the keyboard opens to enter text in a text input, the KeyboardAvoidingView animation lags slightly behind the animation of the keyboard appearing.

[szfdiwang]

When I use the new architecture, the onchange event of TextInput will trigger twice. Don't you even take care of this basic component? My version "react native": "0.74.3", "expo": "~51.0.21",

[kadikraman]

Good find! I can reproduce it on Android and I've created an issue for looking into it.
You can track it here 😊 facebook/react-native#45513