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

[mvtglobally]

GitHub Project: https://github.com/orgs/Expensify/projects/35

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

[stitesExpensify]

@mrousavy just for clarity on this issue, where is it currently prioritized?

[mrousavy]

I believe currently we are not working on this issue, maybe let's discuss this in the Slack channel? We are currently working a lot with Coinbase and have very limited availability, but we expect to have some in two weeks!

[kidroca]

I've stumbled on this ticket thanks to experimenting with Fabric and the new RN Architecture.
It turns out migrating would resolve one top paying issue here: #8349 (comment)

I think we can

• update react native using the migration tool here: https://react-native-community.github.io/upgrade-helper/
• audit which 3rd party dependencies have released new versions supporting Fabric and which haven't
• Then gradually upgrade towards fabric support

I'm posting a comment to keep in touch
I'll be happy to work or take part in landing the new architecture in App

[stitesExpensify]

Thanks for volunteering @kidroca! There is still a lot of internal conversation happening around this, so I'll post an update when I have one 😄

[roryabraham]

Relevant discussion: https://expensify.slack.com/archives/C035J5C9FAP/p1655407547697249

[stitesExpensify]

No updateyet

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.4.62-17 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Enable Fabric and TurboModules on iOS & Android #13767

If no regressions arise, payment will be issued on 2024-04-25. 🎊

For reference, here are some details about the assignees on this issue:

• @j-piasecki does not require payment (Contractor)
• @WoLewicki does not require payment (Contractor)
• @ishpaul777 requires payment (Needs manual offer from BZ)

[melvin-bot]

BugZero Checklist: The PR adding this new feature has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@ishpaul777] Please propose regression test steps to ensure the new feature will work correctly on production in further releases.
• [] Link the GH issue for creating/updating the regression test once above steps have been agreed upon.

[mallenexpensify]

@ishpaul777 , can you let me know when I should issue payment here? Lotta PRs keep auto-posting and pushing back the payment date. Thx

[ishpaul777]

@roryabraham Can you please clarify payment date here, i think we blocked deploy for android yesterday until #40048 is fixed, does that effect the payment date

[roryabraham]

I don't think it should, because it's an inconsistently reproducible bug in the RN Fabric renderer C++ code. I think we should pay this out on 2024-04-25, one week after the main Fabric PR went to prod (yesterday).

[mallenexpensify]

Groovy, I'll pay on 4/25, thx

[melvin-bot]

Issue is ready for payment but no BZ is assigned. @joekaufmanexpensify you are the lucky winner! Please verify the payment summary looks correct and complete the checklist. Thanks!

[melvin-bot]

Payment Summary

Upwork Job

• Contributor: @j-piasecki is from an agency-contributor and not due payment
• Contributor: @WoLewicki is from an agency-contributor and not due payment
• ROLE: @ishpaul777 paid $(AMOUNT) via Upwork (LINK)

BugZero Checklist (@joekaufmanexpensify)

• I have verified the correct assignees and roles are listed above and updated the neccesary manual offers
• I have verified that there are no duplicate or incorrect contracts on Upwork for this job (https://www.upwork.com/ab/applicants//hired)
• I have paid out the Upwork contracts or cancelled the ones that are incorrect
• I have verified the payment summary above is correct

[joekaufmanexpensify]

@mallenexpensify I see based on above comments you have been tracking payments/BZ for this one, so assigned to you. LMK if there is anything I can help with though!

[mallenexpensify]

@ishpaul777 can you please accept the job and reply here once you have?
https://www.upwork.com/jobs/~0112754e710d14595c

[ishpaul777]

Offer accepted😄 Thanks

[mallenexpensify]

Contributor+: @ishpaul777 paid $2000 via Upwork.

Thanks! Are there any new regression tests we want for this? cc @roryabraham

[roryabraham]

No additional regression tests needed for this. Thanks for the great work everyone. This was a big one. Closing this out!