[Due for payment 2026-08-19] [$250] [Exploratory] Hybrid - Account - Enable Personal Karma opens not here page

[applause-bot]

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: v9.3.83-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack: https://test-management.browserstack.com/projects/2219752/test-runs/TR-33374/folder/13176687/41237963/1439062580?sort=%2Bidentifier
Email or phone of affected tester (no customers): applausetester+vq@applause.expensifail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: Pixel 7 Pro/Android 16
App Component: User Settings

Action Performed:

Preconditions: Use the Expensifail account

1. Open the Hybrid app
2. Tap on Account
3. Scroll down, tap on Save the World
4. Tap on Enable Personal Karma

Expected Result:

Add payment page opens like the Web app

Actual Result:

Not here page opens

Workaround:

Unknown

Platforms:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome Safari

Screenshots/Videos

Bug7163909_1779843662359.karma.mp4

View all open jobs on GitHub

Applause Internal Information
Exported by: Mita Rachim
Bug ID: 7163909

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022078167467277053113
• Upwork Job ID: 2078167467277053113
• Last Price Increase: 2026-07-24

Issue Owner

Current Issue Owner: @mallenexpensify

[applause-bot]

While Applause doesn't embed attachments for this bug, here are the links for quick view:
https://platform.applause.com/services/links/v1/external/100ee70dca2f5a5548f3c573d44cd777050a536db1609d5992c498e4ae69ce35

[MelvinBot]

🚨 Edited by proposal-police: This proposal was edited at 2026-07-17.

Updated 2026-07-17: Corrected based on the index.native.tsx override identified by wildan-m. My original race-condition analysis was wrong — see the corrected root cause below.

Proposal

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

On the Hybrid (native) app, tapping Enable Personal Karma under Account → Save the World opens the Not here page instead of the Add payment card page. On web the same action opens the Add payment card page.

What is the root cause of that problem?

On native, the AddPaymentCard screen resolves to a .native.tsx override that unconditionally renders the "Not here" blocking view — no route check, no payment form behind it:

function AddPaymentCard() {
    return (
        <ScreenWrapper testID="AddPaymentCard" ...>
            <FullPageNotFoundView shouldShow />
        </ScreenWrapper>
    );
}

PaymentCard/index.native.tsx:6-18

This single component is registered for two routes — Save the World's add-payment-card route and the Subscription billing add-payment-card route — both pointing at Subscription/PaymentCard:
ModalStackNavigators/index.tsx:392 · ModalStackNavigators/index.tsx:967

The native override was intended to block only the Subscription billing page on mobile (billing is managed on web), but because the Save the World "Enable Personal Karma" flow reuses the same component, the blanket block swallows it too — so it reproduces 100% on native. Web uses the route-aware index.tsx, which only blocks when a billing card already exists (index.tsx:69-70), so web works.

Correction to my earlier analysis

My first comment attributed this to a race between openSaveTheWorldPage() and navigation, based on shouldShowBlockingView in index.tsx. That file is web-only — native never renders it, so the race hypothesis was incorrect. The actual native code path (index.native.tsx) blocks unconditionally, which correctly explains the 100% native reproducibility and the "Reproducible in production: Yes" note.

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

Make the native override route-aware so it blocks only the Subscription billing route and renders the real payment card form for the Save the World / Personal Karma route (matching web). wildan-m's proposal above already lays this out correctly — extract a shared base component, have web re-export it, and in index.native.tsx show the blocking view only for SCREENS.SETTINGS.SUBSCRIPTION.ADD_PAYMENT_CARD, otherwise render the base payment card page. The PaymentCardForm is already used natively (Wallet "Add debit card", workspace owner-change), so it's native-safe.

What alternative solutions did you explore?

A runtime platform check inside the single shared index.tsx (block the subscription route only on native). Less consistent with the codebase's established .native file-split pattern for this page.

---

Next Steps for Contributor+ team:
To accept: @MelvinBot implement [this](https://github.com/Expensify/App/issues/91837) to create a draft PR.
To refine: @MelvinBot <your feedback>
To reject: Explain why you are rejecting Melvin's proposal.

[melvin-bot]

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