perf(accessibility): fix iOS accessibility in Bridge token selector components

- BridgeTokenSelector, TokenButton, TokenSelectorItem: Pressable → TouchableOpacity

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: javiergarciavera

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

@@ -566,6 +566,15 @@ export const BridgeTokenSelector: React.FC = () => {
         ListFooterComponent={renderFooter}
         ListEmptyComponent={renderEmptyState}
         onLayout={handleFlatListLayout}
+        initialNumToRender={8}
+        maxToRenderPerBatch={5}
+        windowSize={5}
+        removeClippedSubviews
+        getItemLayout={(_data, index) => ({
+          length: ESTIMATED_ITEM_HEIGHT,
+          offset: ESTIMATED_ITEM_HEIGHT * index,
+          index,
+        })}
       />
     </SafeAreaView>
   );

app/components/UI/Bridge/components/TokenButton.tsx

@@ -9,8 +9,6 @@ import Text, {
 } from '../../../../component-library/components/Texts/Text';
 import { useStyles } from '../../../../component-library/hooks';
 import { Theme } from '../../../../util/theme/models';
-import { Box } from '../../Box/Box';
-import { FlexDirection, AlignItems, JustifyContent } from '../../Box/box.types';
 import BadgeWrapper, {
   BadgePosition,
 } from '../../../../component-library/components/Badges/BadgeWrapper';
@@ -42,6 +40,10 @@ const createStyles = (params: StylesParams) => {
       borderRadius: 16,
     },
     pillContainer: {
+      flexDirection: 'row' as const,
+      alignItems: 'flex-end' as const,
+      justifyContent: 'flex-end' as const,
+      gap: 8,
       backgroundColor: theme.colors.background.muted,
       borderRadius: 100,
       paddingLeft: 8,
@@ -67,31 +69,27 @@ export const TokenButton: React.FC<TokenProps> = ({
 }) => {
   const { styles } = useStyles(createStyles, {});
   return (
-    <TouchableOpacity onPress={onPress} testID={testID}>
-      <Box
-        style={styles.pillContainer}
-        flexDirection={FlexDirection.Row}
-        alignItems={AlignItems.flexEnd}
-        justifyContent={JustifyContent.flexEnd}
-        gap={8}
+    <TouchableOpacity
+      onPress={onPress}
+      testID={testID}
+      style={styles.pillContainer}
+    >
+      <BadgeWrapper
+        badgePosition={BadgePosition.BottomRight}
+        badgeElement={
+          <Badge
+            variant={BadgeVariant.Network}
+            imageSource={networkImageSource}
+            name={networkName}
+          />
+        }
       >
-        <BadgeWrapper
-          badgePosition={BadgePosition.BottomRight}
-          badgeElement={
-            <Badge
-              variant={BadgeVariant.Network}
-              imageSource={networkImageSource}
-              name={networkName}
-            />
-          }
-        >
-          <TokenIcon symbol={symbol} icon={iconUrl} style={styles.icon} />
-        </BadgeWrapper>
+        <TokenIcon symbol={symbol} icon={iconUrl} style={styles.icon} />
+      </BadgeWrapper>
 
-        <Text style={styles.tokenSymbol} variant={TextVariant.HeadingLG}>
-          {symbol}
-        </Text>
-      </Box>
+      <Text style={styles.tokenSymbol} variant={TextVariant.HeadingLG}>
+        {symbol}
+      </Text>
     </TouchableOpacity>
   );
 };

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

@@ -74,14 +74,13 @@ const createStyles = ({
       flex: 1,
       flexShrink: 1,
       minWidth: 0,
-      marginLeft: 12,
+      marginLeft: 8,
     },
     container: {
       backgroundColor: vars.isSelected
         ? theme.colors.primary.muted
         : theme.colors.background.default,
       paddingVertical: 4,
-      minHeight: 72,
       paddingLeft: 16,
       paddingRight: 10,
     },
@@ -97,7 +96,7 @@ const createStyles = ({
     itemWrapper: {
       flex: 1,
       flexDirection: 'row',
-      paddingVertical: 12,
+      paddingVertical: 10,
       alignItems: 'flex-start',
     },
     tokenMainInfo: {
@@ -263,7 +262,28 @@ const TokenBalanceView = ({
   );
 };
 
-export const TokenSelectorItem: React.FC<TokenSelectorItemProps> = ({
+const formatTokenBalance = (balance: string): string => {
+  const numericBalance = Number(balance);
+  if (numericBalance === 0) {
+    return '0';
+  }
+  if (numericBalance < 0.00001) {
+    return '< 0.00001';
+  }
+  return parseAmount(balance, 5) || balance;
+};
+
+const TOP_ROW_BALANCE_TEXT_STYLE = {
+  textVariant: TextVariant.BodyMDMedium,
+  textColor: TextColor.Default,
+} as const;
+
+const BOTTOM_ROW_BALANCE_TEXT_STYLE = {
+  textVariant: TextVariant.BodyMD,
+  textColor: TextColor.Alternative,
+} as const;
+
+const TokenSelectorItemInner: React.FC<TokenSelectorItemProps> = ({
   token,
   onPress,
   networkName,
@@ -286,17 +306,6 @@ export const TokenSelectorItem: React.FC<TokenSelectorItemProps> = ({
 
   const fiatValue = token.balanceFiat;
 
-  const formatTokenBalance = (balance: string): string => {
-    const numericBalance = Number(balance);
-    if (numericBalance === 0) {
-      return '0';
-    }
-    if (numericBalance < 0.00001) {
-      return '< 0.00001';
-    }
-    return parseAmount(balance, 5) || balance;
-  };
-
   const selectedVariant =
     variant ??
     TOKEN_SELECTOR_BALANCE_LAYOUT_VARIANTS[
@@ -313,19 +322,10 @@ export const TokenSelectorItem: React.FC<TokenSelectorItemProps> = ({
 
   const isNative = token.address === ethers.constants.AddressZero;
 
-  // to check if the token is a stock by checking if the name includes 'ondo' or 'stock'
   const { isStockToken } = useRWAToken();
 
   const fiatBalance = shouldShowBalance ? fiatValue : undefined;
   const tokenBalance = shouldShowBalance ? cryptoBalance : undefined;
-  const topRowBalanceTextStyle = {
-    textVariant: TextVariant.BodyMDMedium,
-    textColor: TextColor.Default,
-  };
-  const bottomRowBalanceTextStyle = {
-    textVariant: TextVariant.BodySM,
-    textColor: TextColor.Alternative,
-  };
 
   const label = token.accountType
     ? ACCOUNT_TYPE_LABELS[token.accountType]
@@ -335,6 +335,7 @@ export const TokenSelectorItem: React.FC<TokenSelectorItemProps> = ({
 
   return (
     <Box
+      accessible={false}
       flexDirection={FlexDirection.Row}
       alignItems={AlignItems.center}
       style={styles.container}
@@ -351,11 +352,11 @@ export const TokenSelectorItem: React.FC<TokenSelectorItemProps> = ({
         )}
       >
         <Box
+          accessible={false}
           flexDirection={FlexDirection.Row}
           alignItems={AlignItems.center}
           gap={4}
         >
-          {/* Token Icon */}
           <BadgeWrapper
             style={styles.badgeWrapper}
             badgePosition={BadgePosition.BottomRight}
@@ -370,7 +371,7 @@ export const TokenSelectorItem: React.FC<TokenSelectorItemProps> = ({
             <AvatarToken
               name={token.symbol}
               imageSource={getTokenImageSource(token.symbol, token.image)}
-              size={AvatarSize.Lg}
+              size={AvatarSize.Md}
               testID={
                 isNative
                   ? `network-logo-${token.symbol}`
@@ -379,19 +380,20 @@ export const TokenSelectorItem: React.FC<TokenSelectorItemProps> = ({
             />
           </BadgeWrapper>
 
-          {/* Token symbol/name on the left, balances on the right (extension layout pattern) */}
           <Box
+            accessible={false}
             style={styles.tokenInfo}
             flexDirection={FlexDirection.Column}
             gap={4}
           >
             <Box
+              accessible={false}
               flexDirection={FlexDirection.Row}
               alignItems={AlignItems.center}
               justifyContent={JustifyContent.spaceBetween}
             >
-              <Box style={styles.tokenMainInfo} gap={4}>
-                <Box style={styles.tokenSymbolRow}>
+              <Box accessible={false} style={styles.tokenMainInfo} gap={4}>
+                <Box accessible={false} style={styles.tokenSymbolRow}>
                   <Text
                     variant={TextVariant.BodyMDMedium}
                     numberOfLines={1}
@@ -445,19 +447,20 @@ export const TokenSelectorItem: React.FC<TokenSelectorItemProps> = ({
                   balance={tokenBalance}
                   isSelected={isSelected}
                   textStyle={styles.rightValue}
-                  {...topRowBalanceTextStyle}
+                  {...TOP_ROW_BALANCE_TEXT_STYLE}
                 />
               ) : (
                 <FiatBalanceView
                   balance={fiatBalance}
                   isSelected={isSelected}
                   textStyle={styles.rightValue}
-                  {...topRowBalanceTextStyle}
+                  {...TOP_ROW_BALANCE_TEXT_STYLE}
                 />
               )}
             </Box>
 
             <Box
+              accessible={false}
               flexDirection={FlexDirection.Row}
               alignItems={AlignItems.center}
               justifyContent={JustifyContent.spaceBetween}
@@ -477,14 +480,14 @@ export const TokenSelectorItem: React.FC<TokenSelectorItemProps> = ({
                   balance={fiatBalance}
                   isSelected={isSelected}
                   textStyle={styles.rightValue}
-                  {...bottomRowBalanceTextStyle}
+                  {...BOTTOM_ROW_BALANCE_TEXT_STYLE}
                 />
               ) : (
                 <TokenBalanceView
                   balance={tokenBalance}
                   isSelected={isSelected}
                   textStyle={styles.rightValue}
-                  {...bottomRowBalanceTextStyle}
+                  {...BOTTOM_ROW_BALANCE_TEXT_STYLE}
                 />
               )}
             </Box>
@@ -497,3 +500,17 @@ export const TokenSelectorItem: React.FC<TokenSelectorItemProps> = ({
     </Box>
   );
 };
+
+export const TokenSelectorItem = React.memo(
+  TokenSelectorItemInner,
+  (prev, next) =>
+    prev.onPress === next.onPress &&
+    prev.token.address === next.token.address &&
+    prev.token.chainId === next.token.chainId &&
+    prev.token.balance === next.token.balance &&
+    prev.token.balanceFiat === next.token.balanceFiat &&
+    prev.isSelected === next.isSelected &&
+    prev.isNoFeeAsset === next.isNoFeeAsset &&
+    prev.shouldShowBalance === next.shouldShowBalance &&
+    prev.networkName === next.networkName,
+);