chore(runway): cherry-pick fix(ramp): use ScrollView from react-native-gesture-handler in PaymentMethodSelectorModal

[runway-github]

• fix(ramp): use ScrollView from react-native-gesture-handler in PaymentMethodSelectorModal (fix(ramp): use ScrollView from react-native-gesture-handler in PaymentMethodSelectorModal #24188)

Description

The ScrollView in PaymentMethodSelectorModal was imported from
react-native instead of react-native-gesture-handler, causing the
scroll functionality to not work when used inside a BottomSheet
component.

This fix changes the import source to use ScrollView from
react-native-gesture-handler, which is required for proper gesture
handling and scrolling within bottom sheets that use gesture handlers.

Changelog

CHANGELOG entry: Fixed payment method selector modal scroll not working

Related issues

Fixes:

Manual testing steps

Feature: Payment Method Selector Modal Scrolling

  Scenario: user scrolls through payment methods in the modal
    Given the user is on the Buy/Sell flow with multiple payment methods available
    
    When user opens the payment method selector modal
    And user scrolls down through the list of payment methods
    Then the list should scroll smoothly
    And all payment methods should be accessible via scrolling

Screenshots/Recordings

Before

pm_before.mov

After

pm_after.mov

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

---

Note

Switches ScrollView to react-native-gesture-handler in PaymentMethodSelectorModal to enable proper scrolling within the bottom sheet.

• UI (Ramp Aggregator):
  • Replace react-native ScrollView with react-native-gesture-handler ScrollView in app/components/UI/Ramp/Aggregator/components/PaymentMethodSelectorModal/PaymentMethodSelectorModal.tsx for correct gesture-based scrolling inside BottomSheet.
• Tests:
  • Update snapshots in PaymentMethodSelectorModal.test.tsx.snap reflecting RCTScrollView gesture handler props.

^{Written by Cursor Bugbot for commit 370a2c9. This will update automatically on new commits. Configure here.}

5d8e931

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

[github-actions]

🔍 Smart E2E Test Selection

• Selected E2E tags: SmokeRamps
• Risk Level: low
• AI Confidence: 85%

click to see 🤖 AI reasoning details

Analysis Summary

Changes Made

The PR contains 2 files with changes to the Payment Method Selector Modal in the Ramp Aggregator component:

1. PaymentMethodSelectorModal.tsx: Changed the ScrollView import from react-native to react-native-gesture-handler

   • Old: import { View, ScrollView, useWindowDimensions } from 'react-native';
   • New: import { View, useWindowDimensions } from 'react-native'; + import { ScrollView } from 'react-native-gesture-handler';

2. PaymentMethodSelectorModal.test.tsx.snap: Snapshot file updated to reflect:

   • New gesture handler properties on RCTScrollView (collapsable, handlerTag, handlerType, event handlers)
   • Style changes to payment method items (backgroundColor instead of borderColor/borderWidth)

Impact Assessment

Direct Impact:

• The change affects the PaymentMethodSelectorModal component used in the Ramp Aggregator flow (on/off ramp)
• This modal is used when selecting payment methods during buy/sell crypto flows
• The component is imported by 9 files, primarily within the Ramp feature area

Technical Significance:

• This is a relatively low-risk change - switching from React Native's basic ScrollView to the gesture handler version
• The react-native-gesture-handler library is widely used throughout the codebase (found in 10+ other components)
• This type of change is typically done to improve scrolling performance and gesture handling within bottom sheets
• The snapshot changes show expected differences when using gesture-handler's ScrollView

Functional Impact:

• The behavior of the modal should remain the same from a user perspective
• Better gesture handling within the bottom sheet is the intended improvement
• E2E test coverage exists for payment method selection (e2e/specs/ramps/onramp-parameters.spec.ts)

Risk Assessment: LOW

• This is a dependency swap for a UI component that doesn't change the core logic
• The change is isolated to one modal component within the Ramps feature
• No changes to business logic, data flow, or critical functionality
• The gesture handler library is already widely used in the codebase

Test Tag Selection: SmokeRamps

Why SmokeRamps:

• The changes are specifically in the Ramp Aggregator's Payment Method Selector Modal
• E2E tests exist that exercise payment method selection (onramp-parameters.spec.ts tests selecting payment methods)
• The SmokeRamps tag covers "On/off ramp features, buy/sell" which directly applies to this component

Why not other tags:

• SmokeCore: While this involves UI rendering, the change is isolated to a specific Ramps feature component
• SmokeWalletUX: The change is specific to Ramps, not general wallet UX
• Other tags: No relevance to accounts, confirmations, swaps, assets, etc.

Confidence: 85%

• High confidence because the change is clearly scoped to Ramps functionality
• The 15% uncertainty accounts for potential edge cases with gesture handling in bottom sheets that might not be fully covered by existing E2E tests
• The change is straightforward but involves scrolling behavior which can have subtle cross-platform differences

View GitHub Actions results

[metamaskbot]

No release label on PR. Adding release label release-7.61.3 on PR, as PR was cherry-picked in branch 7.61.3.