Jakubkalinski0/fix console errors related to forward ref batch8 #72072

jakubkalinski0 · 2025-10-08T08:45:23Z

Explanation of Change

The whole issue comes from forwardRef being deprecated in the near future of react thus we will no longer be able to access the passed ref by element.ref as forwardRef is needed for passing ref as a separate attribute. Now in order to pass there reference it has to be passed as one of the props so we can access it directly or like that -> element.props.ref.

In order to adjust the codebase to new react recommendations in every file that was using forwardRef the ref had to be moved to the props instead of being a separate attribute and forwardRef had to be completely removed.

Some files had to be changed due to the changes made in other components. In response to the number of files that needed adjusting the changes are made in batches with this one being the eighth one.

This batch is pretty scattered all over the place just as the previous one due to there being no more clear flows that can provide us with meaningful number of files that require the change.

Modified files are grouped below by the components they are related to. In order to make testing easier there are also screenshots of places in app where you can find those components.

Composer

GrowlNotification

src/components/GrowlNotification/index.tsx

!!! I couldn't find a single place where this component can be naturally seen by a user - it's only present in Expensify.tsx but it doesn't seem to me like it's triggered anywhere. I suggest to remove it in a followup !!!

LHNOptionsList

src/components/LHNOptionsList/OptionRowRendererComponent/index.native.tsx

Lottie

src/components/Lottie/index.tsx

Onfido

PopoverWithoutOverlay

Reactions/EmojiReactionBubble

src/components/Reactions/EmojiReactionBubble.tsx

RoomNameInput

SelectionListWithModal

src/components/SelectionListWithModal/index.tsx

SubStepForms/SingleFieldStep

src/components/SubStepForms/SingleFieldStep.tsx

TextPicker

TimePicker

src/components/TimePicker/TimePicker.tsx

ValidateCodeActionForm

ValidateCodeForm

ValuePicker

withNavigationFallback

src/components/withNavigationFallback.tsx

It's display name differs hence, thats why you see screenshot of WithNavigationFocusWithFallback

AvatarCapture

ContactMethodDetailsPage

src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.tsx

AccountValidatePage

src/pages/settings/Security/MergeAccounts/AccountValidatePage.tsx

NO QA FOR THE CHANGES MADE IN THE FILES BELOW

tests/ui

__mocks__

mocks/react-native-safe-area-context.tsx

Performance

src/libs/Performance.tsx

Fixed Issues

$ #67033
PROPOSAL: N/A

Tests

Open Expensify without being logged in
Verify that the animation on signInPage works correctly - testing Lottie
Now log in with a new login in order to create a new account
Follow the Onboarding flow until you get to the People you may know are already here! Verify your email to join them. screen. (I believe there have to be workspaces created within your organization i.e. in my case it's a workspace created by someone with @swmansion.com domain, but I suppose that shouldn't be a problem) - testing ValidateCodeForm
Fill the validation code and verify if those existing workspaces are properly shown to you.
(Now log into an account where you have already existing workspaces etc. it will be easier than creating everything from scratch.)
When you are logged in click the Floating Action Button in the bottom left corner -> then press Start chat and choose # Room
Now input the room name and verify it works correctly - testing RoomNameInput
Choose the workspace that the room should be associated with and verify it works correctly - testing ValuePicker
Now within any chat writhe a message and verify that the input bar at the bottom works correctly - testing Composer
Hover over the message and open the emoji picker menu; verify that the menu works properly and if you can choose any emoji - testing PopoverWithoutOverlay
When you choose an emoji verify that it is properly displayed in a bubble under the message - testing EmojiReactionBubble
Now to to inbox and verify if you can properly navigate through the items in you inbox (i.e. chats, messages etc.) - testing LHNOptionsList
Now go to any workspace with more than 1 member (owner)
Go to Members section and verify that you can navigate through the list of members properly - testing SelectionListWithModal
While still in workspace go to Features and turn on Taxes and then go to Taxes
Now click Add rate in the top right corner then verify if naming this rate works properly - testing TextPicker
Now go to Account -> Profile
Now go to Status, input any message and press the Clear after row -> choose custom. Then change the time and verify that it works properly (you can verify if the status is automatically dropped after the set time, although that isn't influenced by the changes of this PR) - testing TimePicker
Change the avatar and verify that it works properly - testing AvatarCapture
Press the Contact methods row and press on any of your contact methods to verify if the details about this contact show up properly - testing ContactMethodDetailsPage
Now go to Security and press Merge accounts row, input any account and press Next. Verify that the next screen asking for the magic code sent to another account opens up properly - testing AccountValidatePage
Fill out the magic code and merge the accounts, verify that it works properly - testing ValidateCodeActionForm
Now go to Wallet
Press Enable wallet
Fill out the forms using this info -> https://swmansion.slack.com/archives/C01GTK53T8Q/p1711049879962529 (this data is required as it has to be real in order for the validation to let you through to the targeted forms)
When filling out the phone number verify that it works correctly and that the phone number is properly saved on the confirmation page - testing SingleFieldStep
When you finish filling out the bank info, verify that the Onfido verification properly shows up and responds correctly to your actions (there is no possibility for me to actually pass the Onfido verification - it's very good at it's job) - testing Onfido

Verify that no errors appear in the JS console

Offline tests

Same as Tests

QA Steps

Same as Tests

Verify that no errors appear in the JS console

PR Author Checklist

Screenshots/Videos

Android: Native

Android: mWeb Chrome

iOS: Native

iOS: mWeb Safari

MacOS: Chrome / Safari

Steps from 1 to 5:

1to5.mp4

Steps from 6 to 9:

6to9.mp4

Steps from 10 to 12:

10to12.mp4

Steps from 13 to 17:

13to17.mp4

Steps from 18 to 23:

18to23.mp4

Steps from 24 to 28:

24to28.mp4

MacOS: Desktop

codecov · 2025-10-08T08:56:30Z

Codecov Report

❌ Looks like you've decreased code coverage for some files. Please write tests to increase, or at least maintain, the existing level of code coverage. See our documentation here for how to interpret this table.

Files with missing lines	Coverage Δ
...omponents/Composer/implementation/index.native.tsx	`58.33% <100.00%> (ø)`
src/components/Composer/index.e2e.tsx	`0.00% <ø> (ø)`
src/components/GrowlNotification/index.tsx	`100.00% <ø> (ø)`
...nsList/OptionRowRendererComponent/index.native.tsx	`100.00% <100.00%> (ø)`
src/components/Lottie/index.tsx	`93.75% <100.00%> (ø)`
src/components/Onfido/BaseOnfidoWeb.tsx	`0.00% <ø> (ø)`
src/components/SelectionListWithModal/index.tsx	`87.50% <100.00%> (ø)`
src/components/SubStepForms/SingleFieldStep.tsx	`0.00% <ø> (ø)`
src/components/TimePicker/TimePicker.tsx	`30.30% <100.00%> (-0.16%)`	⬇️
src/components/ValidateCodeActionForm/index.tsx	`100.00% <ø> (ø)`
... and 16 more
... and 6 files with indirect coverage changes

…-forwardRef-batch8

melvin-bot · 2025-11-21T09:38:54Z

@aimane-chnaif Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button]

trjExpensify · 2025-11-21T19:38:12Z

PR doesn’t need product input as a refactor PR. Unassigning and unsubscribing myself.

aimane-chnaif · 2025-11-22T21:51:58Z

Reviewer Checklist

I have verified the author checklist is complete (all boxes are checked off).
I verified the correct issue is linked in the ### Fixed Issues section above
I verified testing steps are clear and they cover the changes made in this PR
- I verified the steps for local testing are in the Tests section
- I verified the steps for Staging and/or Production testing are in the QA steps section
- I verified the steps cover any possible 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 checked that screenshots or videos are included for tests on all platforms
I included screenshots or videos for tests on all platforms
I verified that the composer does not automatically focus or open the keyboard on mobile unless explicitly intended. This includes checking that returning the app from the background does not unexpectedly open the keyboard.
I verified tests pass on all platforms & I tested again on:
- Android: HybridApp
- Android: mWeb Chrome
- iOS: HybridApp
- iOS: mWeb Safari
- MacOS: Chrome / Safari
- MacOS: Desktop
If there are any errors in the console that are unrelated to this PR, I either fixed them (preferred) or linked to where I reported them in Slack
I verified there are no new alerts related to the canBeMissing param for useOnyx
I verified proper code patterns were followed (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 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
- 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 verified that this PR follows the guidelines as stated in the Review Guidelines
I verified other components that can be impacted by these changes have been tested, and I retested again (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar have been tested & I retested again)
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.ts or at the top of the file that uses the constant) are defined as such
If a new component is created I verified that:
- A similar component doesn't exist in the codebase
- All props are defined accurately and each prop has a /** comment above it */
- The file is named correctly
- The component has a clear name that is non-ambiguous and the purpose of the component can be inferred from the name alone
- The only data being stored in the state is data necessary for rendering and nothing else
- For Class Components, any internal methods passed to components event handlers are bound to this properly so there are no scoping issues (i.e. for onClick={this.submit} the method this.submit should be bound to this in the constructor)
- Any internal methods bound to this are necessary to be bound (i.e. avoid this.submit = this.submit.bind(this); if this.submit is never passed to a component event handler like onClick)
- All JSX used for rendering exists in the render method
- The component has the minimum amount of code necessary for its purpose, and it is broken down into smaller components in order to separate concerns and functions
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.
For any bug fix or new feature in this PR, I verified that sufficient unit tests are included to prevent regressions in this flow.
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.
I have checked off every checkbox in the PR reviewer checklist, including those that don't apply to this PR.

Screenshots/Videos

Android: HybridApp

Android: mWeb Chrome

iOS: HybridApp

iOS: mWeb Safari

MacOS: Chrome / Safari

MacOS: Desktop

aimane-chnaif · 2025-11-23T02:07:36Z

Screenshots/Videos

Composer

1-Composer.mov

1-Composer-native.mov

LHNOptionsList

Lottie

Onfido

PopoverWithoutOverlay

EmojiReactionBubble

6-EmojiReactionBubble.mov

RoomNameInput

7-RoomNameInput.mov

7-RoomNameInput-native.mov

SelectionListWithModal

8-SelectionListWithModal.mov

SingleFieldStep

9-SingleFieldStep.mov

TextPicker

10-TextPicker.mov

TimePicker

11-TimePicker.mov

ValidateCodeActionForm, ContactMethodDetailsPage

12-ValidateCodeActionForm.ContactMethodDetailsPage.mov

ValuePicker, withNavigationFallback

13-ValuePicker.withNavigationFallback.mov

AvatarCapture

14-AvatarCapture.mov

14-AvatarCapture-native.mov

AccountValidatePage

src/components/LHNOptionsList/OptionRowRendererComponent/index.native.tsx

src/components/Lottie/index.tsx

src/components/PopoverWithoutOverlay/index.tsx

src/components/SubStepForms/SingleFieldStep.tsx

src/components/TimePicker/TimePicker.tsx

src/pages/settings/Security/MergeAccounts/AccountValidatePage.tsx

mountiny · 2025-11-23T22:41:07Z

@jakubkalinski0 can you please confirm and resolve all the comments from @aimane-chnaif please? thanks!

jakubkalinski0 · 2025-11-24T12:55:10Z

I will Respond to the comments in the evening today, as I have some personal matters to attend to.

Although I see that those comments regard only unused refs which we will take care of in the followup alongside the unused refs from the batch 7, so maybe we can move forward with this PR anyway?

mountiny · 2025-11-24T17:47:32Z

Seems like we need to fix eslint though

aimane-chnaif · 2025-11-24T17:49:34Z

~~Maybe better to remove GrowlNotification here? Lint error coming from that component, which is unrelated.~~

Oh, let's do this in separate PR. Looks like it's used in many files.

jakubkalinski0 · 2025-11-24T17:51:40Z

Oh sorry, I completely missed that eslint error 😅 I will handle it in a minute

I will also merge newer main

…-forwardRef-batch8

jakubkalinski0 · 2025-11-24T20:23:24Z

Responded to all comments - I suggest to take care of them in the cleanup PR with unused refs from batch 7

mountiny

Thanks

src/components/ValidateCodeActionModal/ValidateCodeForm/index.android.tsx

src/components/ValidateCodeActionModal/ValidateCodeForm/index.tsx

src/pages/settings/Profile/Avatar/AvatarCapture/types.ts

OSBotify · 2025-11-26T03:52:30Z

🚀 Deployed to staging by https://github.com/mountiny in version: 9.2.64-0 🚀

platform	result
🕸 web 🕸	success ✅
🤖 android 🤖	success ✅
🍎 iOS 🍎	success ✅

OSBotify · 2025-11-27T01:21:11Z

🚀 Deployed to production by https://github.com/marcaaron in version: 9.2.64-5 🚀

platform	result
🕸 web 🕸	success ✅
🤖 android 🤖	success ✅
🍎 iOS 🍎	success ✅

Removed forwardRef from Lottie/index.tsx

8c767db

melvin-bot bot assigned jakubkalinski0 Oct 8, 2025

Removed forwardRef from TextPicker component

6eecb97

jakubkalinski0 added 3 commits October 8, 2025 11:04

Removed forwardRef from RoomNameInput component

8cc1a9e

Removed forwardRef from ValuePicker component

b8a67bd

Removed forwardRef from TimePicker/TimePicker.tsx

be0375a

jakubkalinski0 changed the title ~~Removed forwardRef from Lottie/index.tsx~~ Jakubkalinski0/fix console errors related to forward ref batch8 Oct 8, 2025

jakubkalinski0 added 22 commits October 8, 2025 11:15

Removed forwardRef from EmojiReactionBubble.tsx

ad68ba5

Removed forwardRef from PopoverWithoutOverlay component

19f2e8c

Removed forwardRef from Onfido component

f1f7a97

Removed forwardRef from SelectionListWithModal/index.tsx

d8c321d

Removed forwardRef from OptionRowRendererComponent/index.native.tsx

4fbaa02

Removed forwardRef from GrowlNotification/index.tsx

fd2685c

Small code cleanup

784bf35

Removed forwardRef from SingleFieldStep.tsx

30d2850

Merge branch 'main' into jakubkalinski0/Fix-console-errors-related-to…

4d4840e

…-forwardRef-batch8

Merge branch 'main' into jakubkalinski0/Fix-console-errors-related-to…

45de359

…-forwardRef-batch8

Prettier run

68c7c89

Removed forwardRef from ValidateCodeActionForm component

f419849

Fixed failing typecheck

49f3f1b

Removed forwardRef from ValidateCodeForm component

7c29599

Removed forwardRef from AvatarCapture page

8865905

Removed forwardRef from Composer component

951bc50

Prettier run

936e921

Merge branch 'main' into jakubkalinski0/Fix-console-errors-related-to…

254c204

…-forwardRef-batch8

Removed forwardRef from withNavigationFallback.tsx

3e99509

Merge branch 'main' into jakubkalinski0/Fix-console-errors-related-to…

2ff1d33

…-forwardRef-batch8

tests/ui/components/ProductTrainingContextProvider.tsx

81e1a40

Removed forwardRef from __mocks__/react-native-safe-area-context.tsx

2ab4583

Merge branch 'main' into jakubkalinski0/Fix-console-errors-related-to…

9abf2e3

…-forwardRef-batch8

jakubkalinski0 marked this pull request as ready for review November 21, 2025 09:38

jakubkalinski0 requested review from a team as code owners November 21, 2025 09:38

melvin-bot bot requested review from aimane-chnaif and trjExpensify and removed request for a team and aimane-chnaif November 21, 2025 09:38

trjExpensify removed their request for review November 21, 2025 19:38

aimane-chnaif approved these changes Nov 23, 2025

View reviewed changes

melvin-bot bot requested a review from mountiny November 23, 2025 02:08

jakubkalinski0 added 2 commits November 24, 2025 18:55

Merge branch 'main' into jakubkalinski0/Fix-console-errors-related-to…

5724907

…-forwardRef-batch8

Fixed eslint error in GrowlNotification/index.tsx

a83619c

mountiny approved these changes Nov 24, 2025

View reviewed changes

src/components/ValidateCodeActionModal/ValidateCodeForm/index.android.tsx Show resolved Hide resolved

src/components/ValidateCodeActionModal/ValidateCodeForm/index.tsx Show resolved Hide resolved

src/pages/settings/Profile/Avatar/AvatarCapture/types.ts Show resolved Hide resolved

mountiny merged commit 1f8a830 into Expensify:main Nov 24, 2025
37 checks passed

OSBotify mentioned this pull request Nov 26, 2025

Deploy Checklist: New Expensify 2025-11-26 #76071

Closed

70 tasks

melvin-bot bot mentioned this pull request Nov 27, 2025

[Due for payment 2026-02-03] [$1000] Fix console errors post React 19 upgrade #67033

Open

Jakubkalinski0/fix console errors related to forward ref batch8 #72072

Jakubkalinski0/fix console errors related to forward ref batch8 #72072

Uh oh!

Conversation

jakubkalinski0 commented Oct 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Explanation of Change

Fixed Issues

Tests

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

Uh oh!

codecov bot commented Oct 8, 2025 • edited by github-actions bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

melvin-bot bot commented Nov 21, 2025

Uh oh!

trjExpensify commented Nov 21, 2025

Uh oh!

aimane-chnaif commented Nov 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Reviewer Checklist

Screenshots/Videos

Uh oh!

aimane-chnaif commented Nov 23, 2025

Screenshots/Videos

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mountiny commented Nov 23, 2025

Uh oh!

jakubkalinski0 commented Nov 24, 2025

Uh oh!

mountiny commented Nov 24, 2025

Uh oh!

aimane-chnaif commented Nov 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jakubkalinski0 commented Nov 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jakubkalinski0 commented Nov 24, 2025

Uh oh!

mountiny left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

OSBotify commented Nov 26, 2025

Uh oh!

OSBotify commented Nov 27, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

jakubkalinski0 commented Oct 8, 2025 •

edited

Loading

codecov bot commented Oct 8, 2025 •

edited by github-actions bot

Loading

aimane-chnaif commented Nov 22, 2025 •

edited

Loading

aimane-chnaif commented Nov 24, 2025 •

edited

Loading

jakubkalinski0 commented Nov 24, 2025 •

edited

Loading