fix: prevent Android ramps modal double press navigation issue

[amitabh94]

Description

This PR fixes an Android-specific issue where selecting a token, payment method, or region in ramps flows (deposit, buy, withdraw) would incorrectly navigate to the home screen instead of returning to the previous screen.

Problem:
On Android devices, when users selected an item in any ramps modal selector (token, payment method, region, state, fiat), the app would navigate to the home screen instead of returning to the BuildQuote screen. This was a critical regression affecting the entire ramps user experience on Android.

Root Cause:
A race condition occurred between:

1. BottomSheet's automatic navigation.goBack() call (via shouldNavigateBack={true})
2. Manual navigation triggered when closing the sheet

Both navigation actions fired simultaneously on Android, causing the navigation stack to become confused and navigate to the wrong screen.

Solution:

• Disabled automatic navigation by setting shouldNavigateBack={false} on all ramps BottomSheet components
• Implemented BottomSheet's callback pattern: onCloseBottomSheet(() => navigation.goBack())
• This ensures navigation happens sequentially: sheet closes → animation completes → navigation occurs

This follows the intended BottomSheet usage pattern and eliminates the race condition.

Files Modified:

• TokenSelectorModal.tsx (Deposit)
• PaymentMethodSelectorModal.tsx (Deposit)
• RegionSelectorModal.tsx (Deposit)
• StateSelectorModal.tsx (Deposit)
• TokenSelectModal.tsx (Aggregator - Buy/Sell)
• RegionSelectorModal.tsx (Aggregator - Buy/Sell)
• PaymentMethodSelectorModal.tsx (Aggregator - Buy/Sell)
• FiatSelectorModal.tsx (Aggregator - Buy/Sell)

Changelog

CHANGELOG entry: Fixed Android issue where ramps modal selection navigated to home screen

Related issues

Fixes: #21350

Manual testing steps

Feature: Ramps Token Selection on Android

  Scenario: user selects a token in deposit flow
    Given user is on Android device
    And user is on the deposit BuildQuote screen

    When user taps on the token selector
    And user selects a different token from the list
    Then the token selector modal closes
    And user returns to the BuildQuote screen with the new token selected
    And user does NOT navigate to the home screen

  Scenario: user selects a payment method in buy flow
    Given user is on Android device
    And user is on the buy BuildQuote screen

    When user taps on the payment method selector
    And user selects a payment method from the list
    Then the payment method modal closes
    And user returns to the BuildQuote screen
    And user does NOT navigate to the home screen

  Scenario: user selects a region in deposit flow
    Given user is on Android device
    And user is on the deposit BuildQuote screen

    When user taps on the region selector
    And user selects a region from the list
    Then the region modal closes
    And user returns to the BuildQuote screen
    And user does NOT navigate to the home screen

Screenshots/Recordings

Before

Issue as reported in #21350 - selecting token navigates to home screen on Android

After

Expected behavior: selecting token closes modal and returns to BuildQuote screen

Pre-merge author checklist

• I've followed MetaMask Contributor Docs and MetaMask Mobile Coding Standards.
• I've completed the PR template to the best of my ability
• I've included tests if applicable (no test changes needed - navigation already mocked)
• I've documented my code using JSDoc format if applicable
• I've applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

Pre-merge reviewer checklist

• I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
• I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

Technical Details

Why This Fix Works

The BottomSheet component has a built-in callback system specifically designed for this use case:

// Before (Broken):
<BottomSheet ref={sheetRef} shouldNavigateBack={true}>
  onPress={() => sheetRef.current?.onCloseBottomSheet()}
</BottomSheet>

// After (Fixed):
<BottomSheet ref={sheetRef} shouldNavigateBack={false}>
  onPress={() => sheetRef.current?.onCloseBottomSheet(() => navigation.goBack())}
</BottomSheet>

The callback ensures:

1. Sheet closing animation starts
2. Animation completes
3. Callback fires → navigation.goBack()
4. Single, clean navigation action at the right time

Testing Impact

• No unit test updates required (navigation is already mocked via renderScreen)
• Manual testing on Android devices is critical
• iOS behavior remains unchanged

[github-actions]

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

[codecov-commenter]

Codecov Report

❌ Patch coverage is 45.00000% with 22 lines in your changes missing coverage. Please review.
✅ Project coverage is 77.11%. Comparing base (944a916) to head (5236557).

Files with missing lines	Patch %	Lines
...components/FiatSelectorModal/FiatSelectorModal.tsx	20.00%	4 Missing ⚠️
...r/components/TokenSelectModal/TokenSelectModal.tsx	20.00%	4 Missing ⚠️
...s/Modals/TokenSelectorModal/TokenSelectorModal.tsx	20.00%	4 Missing ⚠️
...MethodSelectorModal/PaymentMethodSelectorModal.tsx	66.66%	2 Missing ⚠️
...onents/RegionSelectorModal/RegionSelectorModal.tsx	60.00%	2 Missing ⚠️
...MethodSelectorModal/PaymentMethodSelectorModal.tsx	60.00%	2 Missing ⚠️
...Modals/RegionSelectorModal/RegionSelectorModal.tsx	60.00%	2 Missing ⚠️
...s/Modals/StateSelectorModal/StateSelectorModal.tsx	50.00%	2 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #21394      +/-   ##
==========================================
- Coverage   77.12%   77.11%   -0.01%     
==========================================
  Files        3615     3615              
  Lines       89144    89168      +24     
  Branches    16861    16861              
==========================================
+ Hits        68748    68758      +10     
- Misses      15719    15732      +13     
- Partials     4677     4678       +1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[sonarqubecloud]

Quality Gate failed

Failed conditions
45.0% Coverage on New Code (required ≥ 80%)
21.1% Duplication on New Code (required ≤ 10%)

See analysis details on SonarQube Cloud