Enable Fabric and TurboModules on iOS & Android

[WoLewicki]

PR turning on the new architecture in the Expensify App as well as changing the libraries with native components to the commits containing implementation of Fabric integration in them.

Upstream PRs for the added patches

• fix(Android): don't remount components during navigation on the new architecture react-navigation/react-navigation#11806
• Update react-native-pdf.podspec wonday/react-native-pdf#803
• feat: add new arch plaid/react-native-plaid-link-sdk#557
• fix(Android): avoid race condition related to state on the new arch software-mansion/react-native-screens#2024
• Support for New Architecture - iOS & Android (Fabric) Shopify/flash-list#931
• Implement getNativeScrollRef Shopify/flash-list#1041

Fixed Issues

$ #8503

List of all the reported issues from Applause

• Sign out - The blank page after tap sign out (#14371, #18726)
• iOS - Payment -Background of the GIF about the successful addition of payment method is lighter (#18732)
• Android - Chat - Сhat history isn't displayed if you send messages with multiple line breaks(5 and more) (#18731)
• Android - Chat - User unable to select any emojis (#18721)
• Android - App is flashing when selecting Fub menu and than tapping outside of the field (#18722)
• Android - Chat - User unable to select any options in Fub menu and conversation (#18724)
• Android - Chat - Content menu does not work (#18730)
• Android - Log in - The page blinks when tap "Go back" button" (#14370)
• Android - Chat - First letter is shaking in composed box (#14367)
• Android - Bank Account - "Something went wrong" page instead of Onfido during KYC flow (#18740)
• Android - Deeplink - The app doesn't open to the login screen. mWeb/Chrome is opened (#14366, #18723, #18750)
• Android - IOU preview shows default avatars instead of current ones (#18733)
• iOS - Second keyboard opens when you click on the cursor in Request money (#14372)
• iOS - Log in - App flickers when open it (#16799)
• iOS - Profile - Avatar image rotates after saving (#18734)
• iOS - Chat - Missing 'Expand' icon in the text input field (#14369)
• iOS - "Global action" - "Back" and "Close" button does not work (#16795)
• iOS - Profile - The Profile section is not clickable (#16796)
• iOS - Settings- Can not select language and priority mode under Preference page (#16808)
• iOS - Chat - Buttons Cancel, Save changes and emoji are not clickable when edit the message (#16810)
• iOS - Chat - Emoji are cut off at the top when used in text (#16824)
• iOS - Chat - Focus is lost when editing is selected (#16814)
• iOS - Markdown does not work for bold * / _ tags. header tag # resizes font not make text bold (#16815)
• iOS - Chat - Unable to download a .docx file (#16809)
• iOS - Sign in - No skeleton appears when log in with account (#16806)
• iOS - User can not copy and paste the magic code, also unable to open the keyboard (#18719)

List of all the reported issues reported by ishpaul777

• Android, iOS - Popover Modals seems to be broken, Clicking on "Photo" icon has no popover menuitems, when add receipt to a edit request - [New architecture] Popover modals are not visible when opened #36662

• Android - LHN has different background, below the FAB, LHN has a dark green strip below the FAB, Some empty space below the bottom nav - [New architecture] The app doesn't resize properly when the status bar is translucent #36661

• Android - Three dot menu popover background flashes when a option is selected - [HOLD PR #13767][$500] [New architecture] Screen flashes when dismissing a popover modal #36663

• Android - Pronouns list is not taking the empty space when keyboard closes, Coming back to Money request from currency selection leave a big empty space, Assign task: when click next on new Task page there is empty space when keyboard is dismissed - [New architecture] The keyboard leaves empty space when dismissed #36664

• Android - "Camera view fabric not compatible yet" message shown for Scan reciept.

• Android - Composer is popped up with the keyboard when focussed, when chat is opened first time. - [New architecture] Keyboard is displaying over the composer and the report #36665

• Android - Emoji popover header keys not functional. - [New architecture] Emoji picker header keys are non-functional #36666

• Android - Report header not navigating user to report details page. - [New architecture] Report header not navigating user to report details page #36667

• Android - Composer Action buttons not functional after selecting a option from ➕ options. [New architecture] Composer action buttons non-functional after selecting a option from ➕ options #36668

• Android - Footer button not pops up with the keyboard on merchant/description in money request flow. [New architecture] Keyboard is displaying over the Save button #36669

• Android - Background image is overlapping with expense preview in expense report. [New architecture] Report background covers the report content #36670

• Android - Edit money request options are non-functional (do not navigate the edit pages). [New architecture] IOU edit options are non-functional #36671

• Android - Keyboard flicker on Moneyrequest participant selector when coming back from referal info page - [New architecture] Keyboard flicker on money request participant selector when coming back from referral info page #36682

• Android - Long press action on the chat list is not working. - [New architecture] Long press action on the chat list is not working #36692

• Android - Bank account flow is broken completely - [New architecture] Bank flow is broken #36693

• Android - Sometimes the first click is ignored completely, on certain menu items i am not able to reproduce consistently this one but i have faced this with chatlist items also a few times. - [New architecture] Sometimes the first click is being ignored #36694

• iOS - Money request flow is broken - [New architecture] Money request flow is broken #36727

• iOS - Money request placeholder amount is misplaced sometimes - [New architecture] Money request placeholder amount is misplaced sometimes #36728

• iOS - Calendar picker is invisible - [New architecture] Calendar picker is invisible #36729

• iOS - Not able to delete a draft emoji in composer - [New architecture] Not able to delete a draft emoji in composer #36730

• iOS - Status Emoji cut off from top - [New architecture] Status Emoji cut off from top #36731

• iOS - About page has animation for the page opened before it for second - [New architecture] About page has animation for the page opened before it for second #36732

• iOS - Compose shaking when typing after blockquoute - [New architecture] Compose shaking when typing after blockquoute #36733

• iOS - App crashed after adding personal bank account, while selecting a bank account - [New architecture] App crashed after adding personal bank account, while selecting a bank account #36734

• iOS - There was a missing chat in chats with empty space, not sure how to reproduce it was random and gone after reopening the app - [New architecture] There was a missing chat in chats with empty space, not sure how to reproduce it was random and gone after reopening the app #36735

• iOS - An animation when auto suggestion address is opened - [New architecture] An animation when auto suggestion address is opened #36736

• iOS - App crashed when uploading a photo. - [New architecture] App crashed when uploading a photo. #36737

• iOS - Text shaking when typing in description input - [New architecture] Text shaking when typing in description input #36738

• iOS - Emoji misaligned in context menu and message reaction. - [New architecture] Emoji misaligned in context menu and message reaction. #36739

• iOS - In a workspace settings Cards/Reimbursement/Bills/Invoices all pages keeps loading infinitely - [New architecture] In a workspace settings Cards/Reimbursement/Bills/Invoices all pages keeps loading infinitely #36740

• iOS - User Avatar is missing in share code page - [New architecture] User Avatar is missing in share code page #36741

• iOS - Composer sometimes not expanding at all even when the content is too long. - [New architecture] Composer sometimes not expanding at all even when the content is too long. #36742

• iOS - Edit message compose is not focused is in edit mode but it has green focus outline - [New architecture] Edit message compose is not focused is in edit mode but it has green focus outline #36743

• iOS - Light mode flashes when app is focussed from background not able to reproduce this consistently on all page - [New architecture] Light mode flashes when app is focussed from background not able to reproduce this consistently on all page #36744

• iOS - Emojis not visible after sending (for a very noticable moment they are visible again after reopening app) - [New architecture] Emojis not visible after sending (for a very noticable moment they are visible again after reopening app) #36745

• iOS - Location pins in the map is not visible in Request money - [New architecture] Location pins in the map is not visible in Request money #36746

Tests

• Verify that no errors appear in the JS console

Offline tests

QA Steps

• Verify that no errors appear in the JS console

PR Author Checklist

• I linked the correct issue in the ### Fixed Issues section above
• I wrote clear testing steps that cover the changes made in this PR
  • I added steps for local testing in the Tests section
  • I added steps for the expected offline behavior in the Offline steps section
  • I added steps for Staging and/or Production testing in the QA steps section
  • I added steps to cover failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
  • I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
  • I tested this PR with a High Traffic account against the staging or production API to ensure there are no regressions (e.g. long loading states that impact usability).
• I included screenshots or videos for tests on all platforms
• I ran the tests on all platforms & verified they passed on:
  • Android: Native
  • Android: mWeb Chrome
  • iOS: Native
  • iOS: mWeb Safari
  • MacOS: Chrome / Safari
  • MacOS: Desktop
• I verified there are no console errors (if there's a console error not related to the PR, report it or open an issue for it to be fixed)
• I followed proper code patterns (see Reviewing the code)
  • I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick)
  • I verified that the left part of a conditional rendering a React component is a boolean and NOT a string, e.g. myBool && <MyComponent />.
  • I verified that comments were added to code that is not self explanatory
  • I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
  • I verified any copy / text shown in the product is localized by adding it to src/languages/* files and using the translation method
    • If any non-english text was added/modified, I verified the translation was requested/reviewed in #expensify-open-source and it was approved by an internal Expensify engineer. Link to Slack message:
  • I verified all numbers, amounts, dates and phone numbers shown in the product are using the localization methods
  • I verified any copy / text that was added to the app is grammatically correct in English. It adheres to proper capitalization guidelines (note: only the first word of header/labels should be capitalized), and is either coming verbatim from figma or has been approved by marketing (in order to get marketing approval, ask the Bug Zero team member to add the Waiting for copy label to the issue)
  • I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
  • I verified the JSDocs style guidelines (in STYLE.md) were followed
• If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
• I followed the guidelines as stated in the Review Guidelines
• I tested other components that can be impacted by my changes (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar are working as expected)
• I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
• I verified any variables that can be defined as constants (ie. in CONST.js or at the top of the file that uses the constant) are defined as such
• I verified that if a function's arguments changed that all usages have also been updated correctly
• If any new file was added I verified that:
  • The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory
• If a new CSS style is added I verified that:
  • A similar style doesn't already exist
  • The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))
• If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
• If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
• If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
• If the PR modifies a component or page that can be accessed by a direct deeplink, I verified that the code functions as expected when the deeplink is used - from a logged in and logged out account.
• If the PR modifies the UI (e.g. new buttons, new UI components, changing the padding/spacing/sizing, moving components, etc) or modifies the form input styles:
  • I verified that all the inputs inside a form are aligned with each other.
  • I added Design label and/or tagged @Expensify/design so the design team can review the changes.
• If a new page is added, I verified it's using the ScrollView component to make it scrollable when more elements are added to the page.
• If the main branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the Test steps.

Screenshots/Videos

Web

Mobile Web - Chrome

Mobile Web - Safari

Desktop

iOS

Android

[github-actions]

CLA Assistant Lite bot All contributors have signed the CLA ✍️ ✅

[WoLewicki]

I have read the CLA Document and I hereby sign the CLA

[AndrewGable]

6d97b2b is failing for web and desktop builds, however, here is iOS and Android testing links:

1. https://ad-hoc-expensify-cash.s3.amazonaws.com/android/13767/index.html
2. https://ad-hoc-expensify-cash.s3.amazonaws.com/ios/13767/index.html

[j-piasecki]

I have read the CLA Document and I hereby sign the CLA