[$250] Android - Profile - Domains and Help buttons remain highlighted after navigating back

[lanitochka17]

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.59-0 Reproducible in staging?: Y Reproducible in production?: Y If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Y If this was caught during regression testing, add the test name, ID and link from TestRail: N/A Issue reported by: Applause - Internal Team

Action Performed:

1. Open the Expensify app
2. Tap on "Settings" on the bottom of the screen
3. Tap on "Help"
4. Use device back button to navigate back
5. Verify "Help" button is not highlighted anymore
6. Tap on "Domains" button
7. Navigate back with device back button
8. Verify "Domains" button is not highlighted anymore

Expected Result:

"Domains" and "Help" button shouldn´t remain selected after navigating back to app

Actual Result:

After tapping on "Domains" or "Help" buttons and navigating back with device back button, the buttons remain highlighted

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

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

Screenshots/Videos

Add any screenshot/video evidence

https://github.com/user-attachments/assets/ef8be3de-8c67-4703-89e0-00c5154d46fb

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021854637211818328663
• Upwork Job ID: 1854637211818328663
• Last Price Increase: 2024-11-21

Issue Owner

Current Issue Owner: @parasharrajat

[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.

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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

[truph01]

Edited by proposal-police: This proposal was edited at 2024-11-07 22:21:35 UTC.

Proposal

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

After tapping on "Domains" or "Help" buttons and navigating back with device back button, the buttons remain highlighted

What is the root cause of that problem?

• When pressing the "Help" button, the icon fills with green to indicate it’s active. This button navigates the user to an external browser, changing appState.isBackground to true. Upon returning to the app, appState.isForeground is set back to true. However, a logic check here uses a cached image instead of loading a new one:

https://github.com/Expensify/App/blob/aedbbde0317b720151a75dbe0b6a7ddea52a20cd/src/components/ImageSVG/index.android.tsx#L21

This results in the icon button remaining highlighted after navigating back.

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

• We can clear the cache data one the appState.isBackground is true in this:

    const {isBackground} = useAppState();
    useEffect(() => {
        if (isBackground) {
            Image.clearMemoryCache();
        }
    }, [isBackground]);

What alternative solutions did you explore? (Optional)

• We can create a logic using your appState hook to switch the cachePolicy to "none" when the app comes back to the foreground, ensuring it reloads icons and images without caching. Once reloaded, you can set it back to "memory" to use cached images as it is. Here’s a general approach:

    const [cachePolicy, setCachePolicy] = useState('memory');
    const {isForeground} = useAppState();
    const prevIsForeground = usePrevious(isForeground);
    useEffect(() => {
        if (isForeground && !prevIsForeground) {
            // Set cachePolicy to 'none' temporarily when returning to foreground
            setCachePolicy('none');
            // Reset to 'memory' after a slight delay to allow re-render with fresh images
            setTimeout(() => setCachePolicy('memory'), 500);
        }
    }, [isForeground, isForeground]);

• Instead of resetting the cachePolicy to 'memory' by using setTimeout, we can do it in:

https://github.com/Expensify/App/blob/aedbbde0317b720151a75dbe0b6a7ddea52a20cd/src/components/ImageSVG/index.android.tsx#L18

        <Image
            onLoad={() => {
                // Reset to 'memory'
                setCachePolicy('memory');
            }}

[truph01]

Proposal updated

[parasharrajat]

Let see if we get more ideas to solve this issue.

[melvin-bot[bot]]

@parasharrajat, @isabelastisser Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[isabelastisser]

Waiting for more proposals.

[parasharrajat]

Yup. waiting for more proposals.

[melvin-bot[bot]]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[melvin-bot[bot]]

@parasharrajat, @isabelastisser Eep! 4 days overdue now. Issues have feelings too...

[truph01]

@parasharrajat What do you think about my proposal?

[melvin-bot[bot]]

@parasharrajat, @isabelastisser 6 days overdue. This is scarier than being forced to listen to Vogon poetry!

[parasharrajat]

No new proposals. @truph01 I will share feedback on your proposal in sometime.

[melvin-bot[bot]]

@parasharrajat @isabelastisser this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[melvin-bot[bot]]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸