Migrate to React Native's New Architecture

[dcalhoun]

This issues tracks various tasks to upgrade third-party dependencies for the native mobile editor. The following tasks could likely be addressed individually as miniature projects.

What problem does this address?

React Native’s New Architecture could provide performance benefits (e.g. JSI) and may eventually be required for future React Native upgrades or compatibility with third-party dependencies.

What is your proposed solution?

Some prerequisite items may already have been completed (but have not been verified as complete), while some items may require a significant amount of work. If you can verify that an item is complete or would like to tackle an item, feel free to assign yourself and mark it off the list.

Prerequisites for Supporting the New Architecture in JavaScript

• Define Specs in JavaScript
• Ensure autolinking is enabled
• Configure Codegen
• Migrate from UIManager JavaScript APIs

Enabling in an Android Library

• Extend or implement the code-generated Native Interfaces

Enabling in an iOS Library

• Update Podspec for the New Architecture
• Extend or implement the code-generated Native Interfaces

Prerequisites for WPiOS

• Upgrade to React Native version 0.71.0
• Use Hermes as an xcframework
• Build the project
• Use Objective-C++ (.mm extension)
• Make AppDelegate conform to RCTAppDelegate (or custom bridged equivalent)
• Run pod install and apply changes

Prerequisites for WPAndroid

• Upgrade to React Native version 0.71.0
• Use Hermes

Third-Party Dependencies

Each third-party dependency will need to be upgraded to a version with New Architecture support or replaced entirely in this project.

• Address react-native-get-random-values
• Address react-native-safe-area-context
• Address react-native-screens
• Address react-native-svg
• Address react-native-webview
• Address @react-native-masked-view/masked-view
• Address @react-native-clipboard/clipboard
• Address react-native-reanimated
• Address react-native-gesture-handler
• Address react-native-linear-gradient
• Address react-native-prompt-android
• Address react-native-video
• Address @react-native-community/slider
• Address react-native-safe-area
• Address react-native-fast-image

The following table represents the status of each third-party dependency's support for the new React Native architecture.

Dependency	Support Status	Notes
react-native-get-random-values	🔴 Not Started	Issue, PR
react-native-safe-area-context	🟢 Completed	v4.1.2
react-native-screens	🟢 Completed	3.12.0
react-native-svg	🟢 Completed	v13.0.0
react-native-webview	🟢 Completed	v12.0.0
@react-native-masked-view/masked-view	🟡 In Progress	Issue
@react-native-clipboard/clipboard	🟢 Completed	v1.13.0
react-native-reanimated	🟢 Completed	3.0.0
react-native-gesture-handler	🟢 Completed	2.3.0
react-native-linear-gradient	🟢 Completed	Forked
react-native-prompt-android	Removed
react-native-video	🔴 Not Started	No lead, blocked by v6
@react-native-community/slider	🟢 Completed	v4.3.0
react-native-safe-area	🔴 Not Started	Inactive
react-native-fast-image	🟡 In Progress	Issue, PR
react-native-blur	🟢 Complete	v4.3.0

[dcalhoun]

Noting that react-native-prompt-android was removed in #54096.

[fluiddot]

Regarding the dependencies not supporting yet the new architecture, starting in RN 0.72 we could use the feature New Renderer Interop Layer as a workaround.

TL;DR: With React Native 0.72, we are releasing an interop layer for both Android and iOS to use non-migrated libraries on New Architecture apps.

[JerakRus]

react-native-safe-area I would recommend replacing it with
https://github.com/th3rdwave/react-native-safe-area-context

[WoLewicki]

Hey! We at Software Mansion have been working on improving support for the New Architecture for quite a while now. With React Native 0.76 having the New Architecture enabled by default just around the corner, it seems like a high time to migrate! Would you be interested in collaboration on that topic?

[dcalhoun]

Hey @WoLewicki! 👋🏻 Thanks for reaching out.

The mobile variant of the Gutenberg block editor is open source and under a GPL license. We welcome contributions to the code base, as well as contributions to other parts of the WordPress project/community.

In regards to collaboration with current contributors, we agree that migrating to the New Architecture is important. However, we are currently focused on some R&D regarding the mobile editing experience at this time. We do not plan to prioritize addressing this specific issue at this time.

Please feel free to continue sharing thoughts on this issue or join the #mobile WordPress Slack channel. Community members are happy to discuss ideas, plans, and contributions. Thanks!