[$250] Android - expense-On opening 1st expense with 1:1 user, receipt placeholder flickers

[IuliiaHerets]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 9.0.38-0 Reproducible in staging?: Y Reproducible in production?: Y Issue reported by: Applause Internal Team

Action Performed:

1. Launch app
2. Login to a new gmail account
3. Open 1: DM with a user
4. Create a expense
5. Open the expense
6. Note the receipt placeholder

Expected Result:

Receipt placeholder must not flicker.

Actual Result:

Only in gmail Android app,on opening 1st expense with 1:1 user, receipt placeholder flickers.

Workaround:

Unknown

Platforms:

• [x] Android: Native
• [ ] Android: mWeb Chrome
• [ ] iOS: Native
• [ ] iOS: mWeb Safari
• [ ] MacOS: Chrome / Safari
• [ ] MacOS: Desktop

Screenshots/Videos

https://github.com/user-attachments/assets/13be6298-cdd0-4928-b05c-e8e5db6ed36d

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021837170951789576068
• Upwork Job ID: 1837170951789576068
• Last Price Increase: 2024-09-20
• Automatic offers:
• rayane-djouah | Reviewer | 104094404
• nkdengineer | Contributor | 104094406

Issue Owner

Current Issue Owner: @rayane-djouah

[melvin-bot[bot]]

Triggered auto assignment to @isabelastisser (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[IuliiaHerets]

@isabelastisser FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[melvin-bot[bot]]

Job added to Upwork: https://www.upwork.com/jobs/~021837170951789576068

[melvin-bot[bot]]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @rayane-djouah (External)

[rayane-djouah]

Waiting on proposals

[nkdengineer]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Only in gmail Android app,on opening 1st expense with 1:1 user, receipt placeholder flickers.

What is the root cause of that problem?

Here is the log when adding a useEffect in MoneyRequestView

useEffect(() => {
    console.log("LOGMOUNT");
    return () => {
        console.log("LOGUNMOUNT");
    }
}, [])

This component is mounted and unmounted several times.

This happens because the deprecated withOnyx HOC in ReportActionsView that cause the weird lifecycle of the component https://github.com/Expensify/App/blob/bbc0919a780de49d4f9007976dfbefa275eef879/src/pages/home/report/ReportActionsView.tsx#L552

What changes do you think we should make in order to solve the problem?

Remove withOnyx in ReportActionsView and use useOnyx hook instead.

OPTIONAL: We can also do this for ReportActionsItem

https://github.com/Expensify/App/blob/bbc0919a780de49d4f9007976dfbefa275eef879/src/pages/home/report/ReportActionsView.tsx#L552

The test branch here.

What alternative solutions did you explore? (Optional)

[rayane-djouah]

@nkdengineer's proposal looks good to me

:ribbon::eyes::ribbon: C+ reviewed

Before	After

[melvin-bot[bot]]

Triggered auto assignment to @thienlnam, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[melvin-bot[bot]]

📣 @rayane-djouah 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link Upwork job

[melvin-bot[bot]]

📣 @nkdengineer 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link Upwork job Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻 Keep in mind: Code of Conduct | Contributing 📖