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

• [x] Upgrade to React Native version 0.71.0
• [x] 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

• [x] Upgrade to React Native version 0.71.0
• [x] 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
• [x] Address react-native-safe-area-context
• [x] Address react-native-screens
• [x] Address react-native-svg
• [x] Address react-native-webview
• [ ] Address @react-native-masked-view/masked-view
• [ ] Address @react-native-clipboard/clipboard
• [x] Address react-native-reanimated
• [x] Address react-native-gesture-handler
• [ ] Address react-native-linear-gradient
• [x] 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 https://github.com/WordPress/gutenberg/pull/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