[HOLD for payment 2024-04-25] [Tracking] [Performance] Enable the new Fabric architecture

[mvtglobally]

GitHub Project: RN: New Architecture

Main New Arch PR: #13767

Context

New render engine: https://reactnative.dev/architecture/fabric-renderer
Summary of findings

1. There are 4 main components of RN: React, JavaScript, a series of elements collectively known as the “bridge”, and the native elements/modules. Each of these components are getting complimentary upgrades.
2. The notable React upgrades discussed are concurrent rendering, synchronous event callbacks, and priority rendering queues. Together those improvements basically allow for the UI thread to perform heavy rendering work in the background without compromising quick response times to user events such as scrolling and navigation gestures.
3. In the existing RN architecture, the JS and native sides are essentially unaware of each other. All communications are serialized JSON messages sent asynchronously over the bridge.
4. When JavaScript communicates with a web browser, the browser objects hold direct references to native input elements which are controlled internally by the browser. So an HTML checkbox in a browser actually internally holds a reference to a native macOS or Windows checkbox that’s managed by the browser. Similarly, JSI (JavaScript Interface) is a new piece of RN that enables direct communication between JS and the native side, because JSI internally manages direct references to C++ host objects (similar to the HTMLInput element on a browser). This means that messages sent between JS and native modules no longer need to be JSON-serialized or sent over the single bottleneck communication channel. It also means messages can be sent either synchronously or asynchronously.
5. At a high level, the traditional RN bridge manages two tasks: computing layout via a component tree called the “shadow tree” (that shadows the React tree), and managing native modules such as the camera. In the new architecture, these are broken into two distinct pieces which facebook is calling Fabric and TurboModules, respectively.
6. Fabric, the new UI manager, leverages JSI to create the shadow tree in C++ directly, cutting out the middle man and dramatically improving performance. It also exposes UI operations on both sides, so the native side and JS side can both directly manipulate the shadow tree without having to send serialized messages back and forth across the bridge.
7. In the existing native module system, all the native modules need to be loaded when the app launches so that they’re ready and waiting for commands to be sent over the bridge. Turbo Modules have direct references to native modules via JSI, which gives two main benefits. First, native modules can be lazy-loaded (only when really needed), which should dramatically improve app startup time, especially on apps that use lots of different native modules. Second, once loaded the modules will be more performant because communications no longer need to be JSON-serialized and sent across the bridge.
8. Lastly, there is a tool I don’t fully understand called CodeGen. It leverages TypeScript to generate the interface files needed by Fabric and TurboModules. This compile-time type safety means that the code counterparts from both the native and JS worlds can trust eachother without any runtime checks, which means smaller bundle sizes and faster execution.

Requirements

Migrate off setNativeProps

• Migrate setNativeProps to state in Form #11049
• Migrate setNativeProps to setAttribute in TextInput, SignInPageForm #11050
• Migrate setNativeProps to state in RoomNameInput #11052
• Migrate setNativeProps to state in OptionsSelector #11053
• Migrate setNativeProps and pass style prop in InvertedFlatList #11054
• Remove setNativeProps in ComposerEdit #11055
• Migrate setNativeProps to state in Composer #11056

Migrate off findNodeHandle

• Migrate off of findNodeHandle #11635

Bidirectional scrolling

• testing and making sure the bidirectional pagination features we’ve built work with Fabric Add fabric support for maintainVisibleContentPosition react-native#32

Dependency upgrades

• Upgrade to Reanimated 3 perf: reanimated 3 upgrade #11567
• react-native-svg Upgrade react-native-svg to 13.4.0 #12140
• Upgrade react-native Upgrade RN fork to latest #12177
• React Native Picker
  • Has PR: feat: add Fabric support react-native-picker/picker#456
• progress-bar-android
  • Has PR: Add Fabric support react-native-progress-view/progress-bar-android#90
• React Native PDF
  • Has PR: feat: add Fabric support wonday/react-native-pdf#700
• UrbanAirship
• FastImage no longer in use
  • Has PR: feat: add Fabric support DylanVann/react-native-fast-image#951

Known bugs

• Bold fonts don't work with Fabric enabled
• [Fabric] IOS - New Chat/New Group - The avatar jumps and flashes when opening a chat with a new user. #14365
• [Fabric] Android - Deeplink - The app doesn't open to the login screen. mWeb/Chrome is opened #14366
• [Fabric] Android -Chat- First letter is shaking in composed box #14367
• [Fabric] Log in - Missing focus in Password field when log in with account #14368
• IOS - Chat - Missing 'Expand' icon in the text input field #14369
• [Fabric] Android - Log in - The page blinks when tap "Go back" button" #14370
• [Fabric] Sign out - The blank page after tap sign out #14371
• [Fabric Rollout] iOS - Second keyboard opens when you click on the cursor in Request money #14372
• [Fabric]- iOS - "Global action" - "Back" and "Close" button does not work #16795
• [Fabric] - iOS - Profile - The Profile section is not clickable #16796
• [Fabric] IOS - Log in - App flickers when open it  #16799
• [Fabric] - IOS - Sign in - No skeleton appears when log in with account #16806
• [Fabric] IOS - Unable to create a Workspace- button is not functional #16807
• [Fabric] IOS - Settings- Can not select language and priority mode under Preference page #16808
• [Fabric] - IOS - Chat - Unable to download a .docx file #16809
• [Fabric] - IOS - Chat - Buttons Cancel, Save changes and emoji are not clickable when edit the message #16810
• [Fabric] - IOS - Sign in - Unable to log in to sms account via the sms link #16811
• [Fabric] - IOS - Chat - Focus is lost when editing is selected #16814
• [Fabric] - iOS -Markdown does not work for bold * / _ tags. header tag # resizes font not make text bold #16815
• [Fabric] - iOS - Chat - Emoji are cut off at the top when used in text #16824

Expensify/Expensify Issue URL:
Issue reported by: @roryabraham
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1648743262264529

[melvin-bot]

Triggered auto assignment to @stitesExpensify (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[roryabraham]

This can definitely be external. I went ahead and flagged it as a potential issue for the Margelo team to work on: https://expensify.slack.com/archives/C035J5C9FAP/p1649217447621559

[mrousavy]

Awesome, Margelo would love to work on this! We noticed that you use a lot of third party React Native libraries, so it'll be a bit difficult to get those migrated as well. Especially problematic is Reanimated, but the SWM team is working on bringing that to Fabric.

Let's coordinate internally which issue we want to prioritize :)

[stitesExpensify]

Making this a weekly while we prioritize

[stitesExpensify]

Moving to monthly