feat: add horizontal slide animation to region selector

[georgewrmarshall]

Description

Implements a smooth horizontal slide animation for the region selector bottom sheet when drilling down from countries to states and navigating back. This improves the user experience by providing visual feedback that clearly communicates the hierarchical navigation relationship.

What is the reason for the change?
The region selector lacked animation when transitioning between country and state views, making the navigation feel abrupt and unclear to users.

What is the improvement/solution?

• Replaced conditional rendering with a side-by-side horizontal container pattern where both country and state lists are always mounted
• Implemented carousel-style horizontal slide animation using a single translateX value
• Animation slides left (-screenWidth) when drilling down to states, and returns to origin when navigating back
• 300ms animation duration with Easing.out provides smooth, polished transitions
• Avoids previous absolute positioning issues that broke FlatList rendering

Changelog

CHANGELOG entry: Added smooth slide animation when selecting regions with states in buy/sell flows

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/MDP-300

Manual testing steps

```gherkin
Feature: Region selector slide animation

Scenario: user drills down from country to state
Given the app is on the Buy or Sell screen
And the region selector bottom sheet is opened

When user taps "United States of America" (or any country with states)
Then the view smoothly slides left to reveal the state list
And the animation takes 300ms with smooth easing
And the state list is fully visible and scrollable

Scenario: user navigates back from state to country view
Given the region selector is showing the state list

When user taps the back button
Then the view smoothly slides right back to the country list
And the animation takes 300ms with smooth easing

Scenario: user searches in both views
Given the region selector is open

When user searches for a region in country view
Then search results filter correctly

When user taps a country with states
And searches in the state view
Then state search results filter correctly

Scenario: animation performs smoothly
Given the region selector is open

When user rapidly switches between country and state views
Then animations are smooth without lag or visual glitches
And both lists render completely during animation
And no blank frames or overlap issues occur

```

Screenshots/Recordings

Before

No animation - region list would instantly switch between country and state views without visual transition.

region.animation.before720.mov

After

Smooth 300ms horizontal slide animation provides clear visual feedback for drill-down navigation.

region.animation.after72-.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

Introduces a side-by-side list layout with animated horizontal transitions for clearer navigation between country and state selection.

• Uses react-native-reanimated with translateX and withTiming to slide between views; adds listContainerOuter/Inner, listPanel, and updated list styles
• Mounts both FlatList panels simultaneously (countryListRef, stateListRef) and animates the container instead of conditionally rendering views
• Splits search logic into countryFuseData/stateFuseData with respective countrySearchResults/stateSearchResults; maintains recommended-first sorting when no query
• Refactors state handling (stateData, activeView, regionInTransit), updates back/close behavior, and keeps scroll-to-top on search changes
• Replaces snapshot tests with behavioral tests covering rendering, search/clear, empty states, back navigation, state-level search, and recommended sorting

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

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

[georgewrmarshall]

Removing snapshot as I don't think it adds any value here

[georgewrmarshall]

The tests for this component weren't asserting for what the tests were describing but instead just checking snapshots matched!?

[georgeweiler]

FWIW I think the snapshots are a valid way to test the UI here. Your assertions are fine too but the snapshots should cover it.

[github-actions]

🔍 Smart E2E Test Selection

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

click to see 🤖 AI reasoning details

The changes are localized to the RegionSelectorModal component in the Ramp/Aggregator feature. The modifications include:

1. Animation improvements: Added horizontal slide animation using react-native-reanimated for transitioning between country and state views
2. Separate FlatLists: Changed from a single reused FlatList to two separate FlatLists (one for countries, one for states) with separate Fuse search instances
3. Style updates: Added new container styles to support the animated two-panel layout
4. Unit test updates: Replaced snapshot tests with explicit assertions and added new tests for state search and sorting

These are UI/UX improvements that don't change the core functionality of region selection. The changes are well-contained within the RegionSelectorModal component and its styles.

The SmokeRamps tag is appropriate because:

• The region selector modal is used in the buy/sell crypto (ramps) flow
• The offramp-token-amount.spec.ts test (tagged with SmokeRamps) exercises the ramps flow
• Running this tag will verify that the ramps functionality still works correctly after the animation changes

The risk is low because:

• Changes are purely UI/UX (animation and layout)
• No changes to business logic or data handling
• Unit tests have been updated and cover the new functionality
• The component is self-contained within the Ramp feature

View GitHub Actions results

[cursor]

Cursor Bugbot has reviewed your changes and found 2 potential issues.

[sonarqubecloud]

Quality Gate passed

Issues
1 New issue
0 Accepted issues

Measures
0 Security Hotspots
94.9% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud