[$250][HIGH] Android - Try it out button is not functional in scan tab

[jponikarchuk]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: v9.1.31-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Yes, reproducible on both
If this was caught during regression testing, add the test name, ID and link from TestRail: #60307
Email or phone of affected tester (no customers): N/A
Issue reported by: Applause Internal Team
Device used: Tecno Spark 20/ Android 13
App Component: Money Requests

Action Performed:

1. Sign in to the hybrid app with a new account
2. Navigate to FAB > Create expense
3. As the create expense RHP opens, navigate to scan tab
4. Click on "Try it out" button in tool tip

Expected Result:

User is navigated to create expense with a test receipt

Actual Result:

Try it out button is not functional and user is not navigated to create expense with a test receipt.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021917343972744005666
• Upwork Job ID: 1917343972744005666
• Last Price Increase: 2025-05-06
• Automatic offers:
• suneox | Reviewer | 107327297
• linhvovan29546 | Contributor | 107327299

Issue Owner

Current Issue Owner: @aldo-expensify

[melvin-bot]

Triggered auto assignment to @adelekennedy (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]

@adelekennedy Eep! 4 days overdue now. Issues have feelings too...

[melvin-bot]

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

[melvin-bot]

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

[Raven13111]

Proposal

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

In the Scan tab tooltip, the "Try it out" button is not functional. When users click it, nothing happens — the test receipt is not loaded, and they are not navigated to the Create Expense page as expected.

---

What is the root cause of that problem?

After reviewing the code, the issue likely lies in the setTestReceiptAndNavigate function in src/pages/iou/request/step/IOURequestStepScan/index.native.tsx. While this function is triggered when the button is clicked, it seems to fail silently on Android.

Specifically:

• It uses ReactNativeBlobUtil to fetch and cache the test receipt from app assets.
• This method appears unreliable on certain Android versions (notably Android 13+), likely due to changes in file access policies or URI handling.
• There is currently no error handling to catch or log failures, making the issue harder to diagnose.

---

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

To address this issue, I propose updating setTestReceiptAndNavigate with the following improvements:

• Add error handling and logging to detect where the failure occurs and provide better diagnostics.
• Use a more reliable method to access the image asset. For example:
  • Prefer require() if feasible for bundling.
  • Use Image.resolveAssetSource() as a fallback.
• Add a fallback logic in case the current ReactNativeBlobUtil method fails.
• Optionally, use a remote test receipt image (hosted on a reliable CDN) if accessing local assets continues to be problematic.

These changes ensure a more stable experience across all supported Android versions, especially Android 13 and above.

---

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

While this is largely platform-specific, we can add the following tests:

• Confirm that the tooltip with the "Try it out" button renders correctly.
• Validate that clicking the button successfully loads a test receipt and navigates to the Create Expense page.
• Include manual or automated tests across Android versions, especially Android 13+, to verify consistent behavior.

[mallenexpensify]

@suneox , @adelekennedy , are you able to reproduce? I started this as HIGH status, it seems like ALL new users might encounter this, so we should likely prioritize trying to get it fixed. I'll stay subscribed and update if/when needed.

@suneox please review the proposal above.

[suneox]

I can reproduce this issue on Android 11.

This method appears unreliable on certain Android versions (notably Android 13+), likely due to changes in file access policies or URI handling.

@Raven13111 The root cause you provided is not sufficiently evidenced and convincing. We need a clear identification of the root cause first before proceeding to a solution.

There is currently no error handling to catch or log failures, making the issue harder to diagnose.

Currently, we can access the logs by navigating to Settings > Troubleshoot and enabling Client-side Logging.

[Raven13111]

Currently, we can access the logs by navigating to Settings > Troubleshoot and enabling Client-side Logging.

{
"time": "2025-05-01T03:22:32.542Z",
"level": "DEBUG",
"message": "[warn] Error downloading test receipt: - {"message":{}}",
"extraData": ""
},
While logging is present, the error message is empty, which suggests the failure is being caught without a meaningful message. This makes it very hard to figure out the root cause.
The asset-fetching method (Which is likely reactnativeblobutil) fails under specific conditions (example, URI issues, android file access.) which would align with this log.

[suneox]

{ "time": "2025-05-01T03:22:32.542Z", "level": "DEBUG", "message": "[warn] Error downloading test receipt: - {"message":{}}", "extraData": "" }, While logging is present, the error message is empty, which suggests the failure is being caught without a meaningful message. This makes it very hard to figure out the root cause. The asset-fetching method (Which is likely reactnativeblobutil) fails under specific conditions (example, URI issues, android file access.) which would align with this log.

@Raven13111 It makes sense now that we have a log. I’ll verify your solution as soon as the build is complete. Could you please provide the test branch?

[Raven13111]

@Raven13111 It makes sense now that we have a log. I’ll verify your solution as soon as the build is complete. Could you please provide the test branch?

https://github.com/Raven13111/App/tree/test-receipt-loading
This is for added logging, I'll investigate the root cause and push a fix once I've confirmed the problem shortly.
Would you like me to add the proposal to upwork?

[suneox]

Would you like me to add the proposal to upwork?

No, we just need to follow the contributor guidelines

App/contributingGuides/CONTRIBUTING.md

Line 154 in 6155e9a

8. If your proposal is accepted by the Expensify engineer assigned to the issue, Expensify will hire you on Upwork and assign the GitHub issue to you.

[mallenexpensify]

Welcome @Raven13111. Per the Upwork job .

Your Proposal:

• You must post a proposal for how you will fix this issue in the GitHub issue linked above.
• Your proposal should include a technical explanation of the changes you will make. You are not required to submit the final solution or code along with your proposal.
• Your proposal will be reviewed.
• If your proposal is accepted, you should post the proposal in Upwork and you will be hired for the job.
• AFTER your proposal is accepted in Upwork and you have accepted the offer, you may submit the code to implement your solution. To submit the code, go to the Expensify/App GitHub repo where you'll create a fork of our codebase. You'll create a branch on that fork, and when your code is ready for review, you'll create a pull request in our repository to merge your code into our codebase. Include screenshots and confirmation that you have tested the pull request on all platforms. Our engineers will review the code, and approve and merge when the code meets our requirements.

Please review our Contributor Guidelines before submitting a proposal - github.com/Expensify/App/blob/main/contributingGuides/CONTRIBUTING.md

[melvin-bot]

@suneox Whoops! This issue is 2 days overdue. Let's get this updated quick!

[suneox]

We're still looking proposal for this one, i've posted to slack to get more eyes?

[melvin-bot]

@suneox @adelekennedy 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]

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

[melvin-bot]

@suneox Whoops! This issue is 2 days overdue. Let's get this updated quick!

[linhvovan29546]

🚨 Edited by proposal-police: This proposal was edited at 2025-05-11 03:22:12 UTC.

Proposal

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

Android - Try it out button is not functional in scan tab

What is the root cause of that problem?

The root cause is the same as in #59953 #59470 the onPress event is flaky on Android devices, which causes the button inside the tooltip to not trigger reliably when tapped.

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

Since this is a high-priority issue, I suggest we don’t wait for the Issue above. Instead, we can apply a temporary workaround similar to how we previously fixed the issue with the 'X' button.

App/src/components/ProductTrainingContext/index.tsx

Lines 330 to 335 in 81b1b49

	<Button
	success
	text={translate('productTrainingTooltip.scanTestTooltip.tryItOut')}
	style={[styles.flex1]}
	onPress={config.onConfirm}
	/>

  <Button
                            success
                            text={translate('productTrainingTooltip.scanTestTooltip.tryItOut')}
                            style={[styles.flex1]}
                            onPressIn={
                                getPlatform() === CONST.PLATFORM.ANDROID
                                    ? () => {
                                          config.onConfirm?.();
                                      }
                                    : undefined
                            }
                            // For other platforms, we stick with `onPress`.
                            onPress={
                                getPlatform() !== CONST.PLATFORM.ANDROID
                                    ? () => {
                                          config.onConfirm?.();
                                      }
                                    : undefined
                            }
                        />
// Apply same fix for onDismiss button

For a cleaner solution, we can extract this platform-specific logic into an index.android.ts and index.ts file to avoid cluttering the component code with conditional checks.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N/A

What alternative solutions did you explore? (Optional)

Instead of using onPressIn, we can use onTouchEnd, which closely mimics the behavior of onPress. This approach aligns better with the expected user interaction and helps avoid inconsistencies, especially on Android.

We can follow a similar pattern to what we implemented in the ToggleDistanceUnitButton component

Note

I prefer this alternative solution—it's more consistent with how similar interactions are handled elsewhere

[suneox]

@linhvovan29546 Thank you for your proposal, but it looks like the original PR was also closed to continue the investigation

[linhvovan29546]

@suneox The original issue was fixed here #59577 You can also refer to the QA's comment. #59557 (comment)

[suneox]

The workaround proposal from @linhvovan29546 LGTM, we can proceed with it for this high-priority issue, similar to the fix for #59470

🎀 👀 🎀 C+ reviewed

[melvin-bot]

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

[aldo-expensify]

cc @grgia since this seems to affect the testing receipt functionality

[linhvovan29546]

cc @grgia ^ #60634 (comment)

[aldo-expensify]

It looks like the proposed fix for the 'x' button never got merged: #59557, why is that?
I'm hesitant of accepting the proposed workaround if the solution it is based on was not needed in the end.

Is this issue consistently reproducible?

[linhvovan29546]

@aldo-expensify #60634 (comment) Please check this, we have two PR

[aldo-expensify]

ahh, I missed that, thanks for point it out

[melvin-bot]

📣 @suneox 🎉 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]

📣 @linhvovan29546 🎉 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 📖

[linhvovan29546]

Note: I’m currently unable to build the iOS app after merging main. I’ll create the PR once I’ve resolved the issue

[linhvovan29546]

PR is ready for review! ^ cc @suneox