chore(deposit): revert fixes android region select bug (#17284)

app/components/UI/Ramp/Deposit/Views/Modals/RegionSelectorModal/RegionSelectorModal.styles.ts

@@ -8,8 +8,7 @@ const styleSheet = (params: {
   theme: Theme;
   vars: RegionSelectorModalStyleSheetVars;
 }) => {
-  const { vars, theme } = params;
-  const { colors } = theme;
+  const { vars } = params;
   const { screenHeight } = vars;
 
   return StyleSheet.create({
@@ -37,14 +36,7 @@ const styleSheet = (params: {
     },
     listItem: {
       paddingHorizontal: 16,
-      paddingVertical: 12, // Increased from 8 to 12 for better touch targets
-      backgroundColor: colors.background.default,
-    },
-    selectedItem: {
-      backgroundColor: colors.primary.muted,
-    },
-    disabledItem: {
-      opacity: 0.5,
+      paddingVertical: 8,
     },
   });
 };

app/components/UI/Ramp/Deposit/Views/Modals/RegionSelectorModal/RegionSelectorModal.tsx

@@ -1,9 +1,6 @@
 import React, { useCallback, useMemo, useRef, useState } from 'react';
 import { View, useWindowDimensions } from 'react-native';
-import {
-  FlatList,
-  TouchableWithoutFeedback,
-} from 'react-native-gesture-handler';
+import { FlatList } from 'react-native-gesture-handler';
 import Fuse from 'fuse.js';
 
 import Text, {
@@ -14,6 +11,7 @@ import BottomSheet, {
   BottomSheetRef,
 } from '../../../../../../../component-library/components/BottomSheets/BottomSheet';
 import BottomSheetHeader from '../../../../../../../component-library/components/BottomSheets/BottomSheetHeader';
+import ListItemSelect from '../../../../../../../component-library/components/List/ListItemSelect';
 import ListItemColumn, {
   WidthType,
 } from '../../../../../../../component-library/components/List/ListItemColumn';
@@ -114,68 +112,45 @@ function RegionSelectorModal() {
   );
 
   const renderRegionItem = useCallback(
-    ({ item: region }: { item: DepositRegion }) => {
-      const isSelected = selectedRegion?.isoCode === region.isoCode;
-
-      return (
-        <TouchableWithoutFeedback
-          onPress={() => {
-            if (region.supported) {
-              handleOnRegionPressCallback(region);
-            }
-          }}
-          disabled={!region.supported}
-          accessibilityRole="button"
-          accessible
-        >
-          <View
-            style={[
-              styles.listItem,
-              isSelected && styles.selectedItem,
-              !region.supported && styles.disabledItem,
-            ]}
-          >
-            <ListItemColumn widthType={WidthType.Fill}>
-              <View style={styles.region}>
-                <View style={styles.emoji}>
-                  <Text
-                    variant={TextVariant.BodyLGMedium}
-                    color={
-                      region.supported
-                        ? TextColor.Default
-                        : TextColor.Alternative
-                    }
-                  >
-                    {region.flag}
-                  </Text>
-                </View>
-                <View>
-                  <Text
-                    variant={TextVariant.BodyLGMedium}
-                    color={
-                      region.supported
-                        ? TextColor.Default
-                        : TextColor.Alternative
-                    }
-                  >
-                    {region.name}
-                  </Text>
-                </View>
-              </View>
-            </ListItemColumn>
+    ({ item: region }: { item: DepositRegion }) => (
+      <ListItemSelect
+        isSelected={selectedRegion?.isoCode === region.isoCode}
+        onPress={() => {
+          if (region.supported) {
+            handleOnRegionPressCallback(region);
+          }
+        }}
+        accessibilityRole="button"
+        accessible
+        disabled={!region.supported}
+      >
+        <ListItemColumn widthType={WidthType.Fill}>
+          <View style={styles.region}>
+            <View style={styles.emoji}>
+              <Text
+                variant={TextVariant.BodyLGMedium}
+                color={
+                  region.supported ? TextColor.Default : TextColor.Alternative
+                }
+              >
+                {region.flag}
+              </Text>
+            </View>
+            <View>
+              <Text
+                variant={TextVariant.BodyLGMedium}
+                color={
+                  region.supported ? TextColor.Default : TextColor.Alternative
+                }
+              >
+                {region.name}
+              </Text>
+            </View>
           </View>
-        </TouchableWithoutFeedback>
-      );
-    },
-    [
-      handleOnRegionPressCallback,
-      selectedRegion?.isoCode,
-      styles.disabledItem,
-      styles.emoji,
-      styles.listItem,
-      styles.region,
-      styles.selectedItem,
-    ],
+        </ListItemColumn>
+      </ListItemSelect>
+    ),
+    [handleOnRegionPressCallback, selectedRegion, styles.region, styles.emoji],
   );
 
   const renderEmptyList = useCallback(
@@ -231,9 +206,6 @@ function RegionSelectorModal() {
         ListEmptyComponent={renderEmptyList}
         keyboardDismissMode="none"
         keyboardShouldPersistTaps="always"
-        removeClippedSubviews={false}
-        scrollEnabled
-        nestedScrollEnabled
       />
     </BottomSheet>
   );