perf(bridge): migrate token selector to FlashList (#33230)

## **Description**

<!-- mms-check: type=text required=true -->

SWAPS-4672 tracks a medium-severity performance audit finding in the
bridge asset picker. Potentially large popular-token and paginated
search-result lists were rendered with the gesture-handler `FlatList`,
even though each token row contains avatars, badges, multiple views, and
per-row hooks. Pagination was also driven by a manual scroll handler
with `scrollEventThrottle={400}`, so the near-bottom check ran only a
few times per second and could trigger late or feel janky.

Network-filter changes compounded that cost by changing the list `key`,
forcing the entire list to remount and discard its recycled cells.
`extraData` only tracked the list length, while FlatList-specific
windowing and clipping props added more manual tuning around a rich,
variable dataset.

This PR:

- Migrates the token selector to FlashList v2 so rich rows are recycled
across long popular-token and search-result lists.
- Increases scroll sampling from 400 ms to 16 ms so the existing
near-bottom pagination check responds promptly.
- Removes the keyed network-change remount, length-only `extraData`, and
FlatList-specific rendering/windowing props.
- Keeps the list mounted across network filters, disables
visible-content position maintenance for replacement datasets, and
resets to row zero through FlashList's recycler-aware `scrollToIndex`
after the new data commits.
- Removes the redundant token-address key inside each recycled row.
- Adds regression coverage for list configuration, retained mounting,
and network-switch scroll resets.

During manual validation, the migration exposed two recycler timing
cases: All → Ethereum → All could show an empty list until scrolling,
and switching networks after scrolling could leave the first asset
blank. The final reset and visible-content-position configuration
address both cases while preserving FlashList recycling.

## **Changelog**

<!-- mms-check: type=changelog required=true blocking=true -->

CHANGELOG entry: Improved bridge asset picker scrolling, pagination, and
token rendering when switching networks

## **Related issues**

<!-- mms-check: type=issue-link required=true -->

Fixes: #31365

Refs:
[SWAPS-4672](https://consensyssoftware.atlassian.net/browse/SWAPS-4672)

## **Manual testing steps**

<!-- mms-check: type=manual-testing required=true -->

```gherkin
Feature: Bridge asset picker list performance and network switching

  Background:
    Given I am logged into MetaMask Mobile
    And I open the bridge source or destination asset picker

  Scenario: scroll and paginate a long token search result list
    Given my search returns enough tokens to exceed the visible list
    When I scroll toward the bottom of the search results
    Then additional results should begin loading promptly
    And the list should scroll without blank or flashing token rows

  Scenario: switch from All to Ethereum and back to All
    Given the asset picker is showing the All network tab
    When I tap the Ethereum network tab
    And I tap the All network tab
    Then the All-network asset list should render immediately without additional scrolling

  Scenario: switch networks after scrolling the asset list
    Given the asset picker is showing the All network tab
    When I scroll down the asset list
    And I tap another network tab
    Then the list should reset to the top
    And the first asset for the selected network should render without additional scrolling
    When I switch to a different network tab
    Then the first asset for that network should render without additional scrolling
```

## **Screenshots/Recordings**

<!-- mms-check: type=screenshot required=true -->

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of this change. -->

### **Before**

N/A

### **After**

N/A

## **Pre-merge author checklist**

<!-- mms-check: type=checklist required=true -->

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I've included tests if applicable
- [x] I've documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I've applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

#### Performance checks (if applicable)

- [x] I've tested on Android
  - Ideally on a mid-range device; emulator is acceptable
- [x] I've tested with a power user scenario
- Use these [power-user
SRPs](https://consensyssoftware.atlassian.net/wiki/spaces/TL1/pages/edit-v2/401401446401?draftShareId=9d77e1e1-4bdc-4be1-9ebb-ccd916988d93)
to import wallets with many accounts and tokens
- [x] I've instrumented key operations with Sentry traces for production
performance metrics
- See [`trace()`](/app/util/trace.ts) for usage and
[`addToken`](/app/components/Views/AddAsset/components/AddCustomToken/AddCustomToken.tsx#L274)
for an example

For performance guidelines and tooling, see the [Performance
Guide](https://consensyssoftware.atlassian.net/wiki/spaces/TL1/pages/400085549067/Performance+Guide+for+Engineers).

## **Pre-merge reviewer checklist**

<!-- mms-check: type=checklist required=true -->

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

<!-- Generated with the help of the pr-description AI skill -->

[SWAPS-4672]:
https://consensyssoftware.atlassian.net/browse/SWAPS-4672?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

Author: bfullam

app/components/UI/Bridge/components/BridgeTokenSelector/BridgeTokenSelector.test.tsx

@@ -476,6 +476,10 @@ jest.mock('./NetworkPills', () => ({
         testID: 'select-polygon-network',
         onPress: () => onChainSelect(MOCK_CHAIN_IDS.polygon),
       }),
+      createElement(TouchableOpacity, {
+        testID: 'select-all-networks',
+        onPress: () => onChainSelect(undefined),
+      }),
       createElement(TouchableOpacity, {
         testID: 'open-network-modal',
         onPress: onMorePress,
@@ -580,6 +584,31 @@ jest.mock('react-native-gesture-handler', () => {
   return { FlatList, ScrollView };
 });
 
+const mockFlashListScrollToIndex = jest.fn().mockResolvedValue(undefined);
+const mockFlashListMount = jest.fn();
+const mockFlashListUnmount = jest.fn();
+
+jest.mock('@shopify/flash-list', () => {
+  const ReactMock = jest.requireActual('react');
+  const { FlatList } = jest.requireActual('react-native');
+
+  const MockFlashList = ReactMock.forwardRef(
+    (props: Record<string, unknown>, ref: React.ForwardedRef<unknown>) => {
+      ReactMock.useImperativeHandle(ref, () => ({
+        scrollToIndex: mockFlashListScrollToIndex,
+      }));
+      ReactMock.useEffect(() => {
+        mockFlashListMount();
+        return () => mockFlashListUnmount();
+      }, []);
+
+      return ReactMock.createElement(FlatList, props);
+    },
+  );
+
+  return { FlashList: MockFlashList };
+});
+
 const resetMocks = () => {
   mockRouteParams = { type: 'source' };
   mockIsBatchSellEnabled = true;
@@ -965,6 +994,41 @@ describe('BridgeTokenSelector', () => {
   });
 
   describe('chain selection', () => {
+    it('resets the mounted list after scrolling and changing networks', async () => {
+      const { getByTestId, UNSAFE_getByType } = renderWithReduxProvider(
+        <BridgeTokenSelector />,
+      );
+      const initialMountCount = mockFlashListMount.mock.calls.length;
+      const { FlatList } = jest.requireActual('react-native');
+
+      await act(async () => {
+        UNSAFE_getByType(FlatList).props.onScroll({
+          nativeEvent: {
+            layoutMeasurement: { height: 500 },
+            contentOffset: { y: 500 },
+            contentSize: { height: 2000 },
+          },
+        });
+      });
+
+      await act(async () => {
+        fireEvent.press(getByTestId('select-eth-network'));
+      });
+      await act(async () => {
+        fireEvent.press(getByTestId('select-all-networks'));
+      });
+
+      await waitFor(() => {
+        expect(mockFlashListScrollToIndex).toHaveBeenCalledTimes(1);
+        expect(mockFlashListScrollToIndex).toHaveBeenCalledWith({
+          index: 0,
+          animated: false,
+        });
+      });
+      expect(mockFlashListMount).toHaveBeenCalledTimes(initialMountCount);
+      expect(mockFlashListUnmount).not.toHaveBeenCalled();
+    });
+
     it('cancels search and resets when chain changes', async () => {
       const { getByTestId } = renderWithReduxProvider(<BridgeTokenSelector />);
       fireEvent.changeText(getByTestId('bridge-token-search-input'), 'ETH');
@@ -1053,6 +1117,26 @@ describe('BridgeTokenSelector', () => {
   });
 
   describe('pagination', () => {
+    it('disables visible-content position maintenance', () => {
+      const { UNSAFE_getByType } = renderWithReduxProvider(
+        <BridgeTokenSelector />,
+      );
+      const { FlatList } = jest.requireActual('react-native');
+
+      expect(
+        UNSAFE_getByType(FlatList).props.maintainVisibleContentPosition,
+      ).toEqual({ disabled: true });
+    });
+
+    it('sets a frame-rate scroll event throttle', () => {
+      const { UNSAFE_getByType } = renderWithReduxProvider(
+        <BridgeTokenSelector />,
+      );
+      const { FlatList } = jest.requireActual('react-native');
+
+      expect(UNSAFE_getByType(FlatList).props.scrollEventThrottle).toBe(16);
+    });
+
     it('triggers load more on scroll near bottom with cursor', async () => {
       mockSearchTokensState = {
         ...mockSearchTokensState,

app/components/UI/Bridge/components/BridgeTokenSelector/BridgeTokenSelector.tsx

@@ -5,11 +5,7 @@ import React, {
   useEffect,
   useRef,
 } from 'react';
-import {
-  NativeSyntheticEvent,
-  NativeScrollEvent,
-  ListRenderItemInfo,
-} from 'react-native';
+import { NativeSyntheticEvent, NativeScrollEvent } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import {
   useNavigation,
@@ -19,7 +15,11 @@ import {
 } from '@react-navigation/native';
 import { useSelector, useDispatch } from 'react-redux';
 import { strings } from '../../../../../../locales/i18n';
-import { FlatList } from 'react-native-gesture-handler';
+import {
+  FlashList,
+  type FlashListRef,
+  type ListRenderItem,
+} from '@shopify/flash-list';
 import { NetworkPills } from './NetworkPills';
 import Routes from '../../../../../constants/navigation/Routes';
 import { CaipChainId } from '@metamask/utils';
@@ -144,7 +144,7 @@ export const BridgeTokenSelector: React.FC = () => {
     useRoute<RouteProp<{ params: BridgeTokenSelectorRouteParams }, 'params'>>();
   const { styles } = useStyles(createStyles, {});
   const [searchString, setSearchString] = useState<string>('');
-  const flatListRef = useRef<FlatList>(null);
+  const flatListRef = useRef<FlashListRef<BridgeToken | null>>(null);
   const [flatListHeight, setFlatListHeight] = useState<number>(0);
 
   // Set selecting token state to prevent quote expired modal from showing
@@ -231,7 +231,7 @@ export const BridgeTokenSelector: React.FC = () => {
 
   // Track the last chain ID to detect changes
   const lastChainIdRef = useRef(selectedChainId);
-  const [listKey, setListKey] = useState(0);
+  const shouldResetListPositionRef = useRef(false);
 
   const chainIdsToFetch = useMemo(() => {
     if (!enabledChainRanking || enabledChainRanking.length === 0) {
@@ -284,7 +284,7 @@ export const BridgeTokenSelector: React.FC = () => {
   useEffect(() => {
     if (lastChainIdRef.current !== selectedChainId) {
       lastChainIdRef.current = selectedChainId;
-      setListKey((prev) => prev + 1);
+      shouldResetListPositionRef.current = true;
 
       // Cancel any pending debounced searches
       debouncedSearch.cancel();
@@ -348,6 +348,21 @@ export const BridgeTokenSelector: React.FC = () => {
     searchString,
   ]);
 
+  // Reset only after the replacement dataset has been committed. scrollToIndex
+  // engages and lays out the first recycled row before moving the native view.
+  useEffect(() => {
+    if (!shouldResetListPositionRef.current) {
+      return undefined;
+    }
+
+    const frameId = requestAnimationFrame(() => {
+      void flatListRef.current?.scrollToIndex({ index: 0, animated: false });
+      shouldResetListPositionRef.current = false;
+    });
+
+    return () => cancelAnimationFrame(frameId);
+  }, [displayData, selectedChainId]);
+
   const getIsNoFeeAsset = useCallback(
     (token: BridgeToken) => {
       const routeNoFee =
@@ -474,8 +489,8 @@ export const BridgeTokenSelector: React.FC = () => {
     [navigation, enabledChainRanking],
   );
 
-  const renderToken = useCallback(
-    ({ item }: ListRenderItemInfo<BridgeToken | null>) => {
+  const renderToken = useCallback<ListRenderItem<BridgeToken | null>>(
+    ({ item }) => {
       // This is to support a partial loading state for top tokens
       // We can show tokens with balance immediately, but we need to wait for the top tokens to load
       if (!item) {
@@ -644,28 +659,23 @@ export const BridgeTokenSelector: React.FC = () => {
         />
       </Box>
 
-      <FlatList
+      <FlashList
         ref={flatListRef}
-        key={listKey}
         testID="bridge-token-list"
         style={styles.tokensList}
         contentContainerStyle={styles.tokensListContainer}
         data={displayData}
         renderItem={renderToken}
         keyExtractor={keyExtractor}
-        extraData={displayData.length}
         showsVerticalScrollIndicator
         showsHorizontalScrollIndicator={false}
         onScroll={handleScroll}
-        scrollEventThrottle={400}
+        scrollEventThrottle={16}
         ListFooterComponent={renderFooter}
         ListHeaderComponent={renderListHeader}
         ListEmptyComponent={renderEmptyState}
         onLayout={handleFlatListLayout}
-        initialNumToRender={8}
-        maxToRenderPerBatch={5}
-        windowSize={5}
-        removeClippedSubviews
+        maintainVisibleContentPosition={{ disabled: true }}
       />
     </SafeAreaView>
   );

app/components/UI/Bridge/components/TokenSelectorItem.tsx

@@ -359,7 +359,6 @@ const TokenSelectorItemInner: React.FC<TokenSelectorItemProps> = ({
       {shouldShowSelectedStyle && <View style={styles.selectedIndicator} />}
 
       <TouchableOpacity
-        key={token.address}
         onPress={handlePress}
         style={[
           styles.itemWrapper,