fix: perf(accessibility): fix iOS accessibility in Bridge token selector c…

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

@@ -68,7 +68,7 @@ export interface BridgeTokenSelectorRouteParams {
 }
 
 const MIN_SEARCH_LENGTH = 3;
-const ESTIMATED_ITEM_HEIGHT = 72;
+const ESTIMATED_ITEM_HEIGHT = 68; // container paddingVertical(4×2) + itemWrapper paddingVertical(10×2) + AvatarSize.Lg(40px)
 const LOAD_MORE_DISTANCE_THRESHOLD = 300; // Distance from bottom to trigger load
 
 export const BridgeTokenSelector: React.FC = () => {
@@ -546,6 +546,10 @@ export const BridgeTokenSelector: React.FC = () => {
         ListFooterComponent={renderFooter}
         ListEmptyComponent={renderEmptyState}
         onLayout={handleFlatListLayout}
+        initialNumToRender={8}
+        maxToRenderPerBatch={5}
+        windowSize={5}
+        removeClippedSubviews
       />
     </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

@@ -258,7 +258,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.BodySM,
+  textColor: TextColor.Alternative,
+} as const;
+
+const TokenSelectorItemInner: React.FC<TokenSelectorItemProps> = ({
   token,
   onPress,
   networkName,
@@ -288,17 +309,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[
@@ -315,27 +325,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 topRowTokenBalanceTextStyle = {
-    ...topRowBalanceTextStyle,
-    ...tokenBalanceTextProps,
-  };
-  const bottomRowTokenBalanceTextStyle = {
-    ...bottomRowBalanceTextStyle,
-    ...tokenBalanceTextProps,
-  };
 
   const label = token.accountType
     ? ACCOUNT_TYPE_LABELS[token.accountType]
@@ -360,6 +353,7 @@ export const TokenSelectorItem: React.FC<TokenSelectorItemProps> = ({
 
   return (
     <Box
+      accessible={false}
       flexDirection={FlexDirection.Row}
       alignItems={AlignItems.center}
       style={styles.container}
@@ -373,6 +367,7 @@ export const TokenSelectorItem: React.FC<TokenSelectorItemProps> = ({
         testID={getAssetTestId(`${token.chainId}-${token.symbol}`)}
       >
         <Box
+          accessible={false}
           flexDirection={FlexDirection.Row}
           alignItems={AlignItems.center}
           gap={4}
@@ -396,19 +391,20 @@ export const TokenSelectorItem: React.FC<TokenSelectorItemProps> = ({
             tokenAvatar
           )}
 
-          {/* 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}
@@ -461,20 +457,32 @@ export const TokenSelectorItem: React.FC<TokenSelectorItemProps> = ({
                 <TokenBalanceView
                   balance={tokenBalance}
                   isSelected={shouldShowSelectedStyle}
-                  textStyle={styles.rightValue}
-                  {...topRowTokenBalanceTextStyle}
+                  textStyle={[
+                    styles.rightValue,
+                    tokenBalanceTextProps?.textStyle,
+                  ]}
+                  textVariant={
+                    tokenBalanceTextProps?.textVariant ??
+                    TOP_ROW_BALANCE_TEXT_STYLE.textVariant
+                  }
+                  textColor={
+                    tokenBalanceTextProps?.textColor ??
+                    TOP_ROW_BALANCE_TEXT_STYLE.textColor
+                  }
                 />
               ) : (
                 <FiatBalanceView
                   balance={fiatBalance}
                   isSelected={shouldShowSelectedStyle}
                   textStyle={styles.rightValue}
-                  {...topRowBalanceTextStyle}
+                  textVariant={TOP_ROW_BALANCE_TEXT_STYLE.textVariant}
+                  textColor={TOP_ROW_BALANCE_TEXT_STYLE.textColor}
                 />
               )}
             </Box>
 
             <Box
+              accessible={false}
               flexDirection={FlexDirection.Row}
               alignItems={AlignItems.center}
               justifyContent={JustifyContent.spaceBetween}
@@ -503,14 +511,25 @@ export const TokenSelectorItem: React.FC<TokenSelectorItemProps> = ({
                   balance={fiatBalance}
                   isSelected={shouldShowSelectedStyle}
                   textStyle={styles.rightValue}
-                  {...bottomRowBalanceTextStyle}
+                  textVariant={BOTTOM_ROW_BALANCE_TEXT_STYLE.textVariant}
+                  textColor={BOTTOM_ROW_BALANCE_TEXT_STYLE.textColor}
                 />
               ) : (
                 <TokenBalanceView
                   balance={tokenBalance}
                   isSelected={shouldShowSelectedStyle}
-                  textStyle={styles.rightValue}
-                  {...bottomRowTokenBalanceTextStyle}
+                  textStyle={[
+                    styles.rightValue,
+                    tokenBalanceTextProps?.textStyle,
+                  ]}
+                  textVariant={
+                    tokenBalanceTextProps?.textVariant ??
+                    BOTTOM_ROW_BALANCE_TEXT_STYLE.textVariant
+                  }
+                  textColor={
+                    tokenBalanceTextProps?.textColor ??
+                    BOTTOM_ROW_BALANCE_TEXT_STYLE.textColor
+                  }
                 />
               )}
             </Box>
@@ -523,3 +542,5 @@ export const TokenSelectorItem: React.FC<TokenSelectorItemProps> = ({
     </Box>
   );
 };
+
+export const TokenSelectorItem = React.memo(TokenSelectorItemInner);