@reown/appkit-react-native 0.0.0-feat-multichain-20250818141206 → 0.0.0-feat-multichain-20250902153701

package/src/modal/w3m-router/index.tsx

@@ -13,7 +13,6 @@ import { ConnectingSocialView } from '../../views/w3m-connecting-social-view';
 import { ConnectingSiweView } from '../../views/w3m-connecting-siwe-view';
 import { GetWalletView } from '../../views/w3m-get-wallet-view';
 import { NetworksView } from '../../views/w3m-networks-view';
-import { NetworkSwitchView } from '../../views/w3m-network-switch-view';
 import { OnRampLoadingView } from '../../views/w3m-onramp-loading-view';
 import { OnRampView } from '../../views/w3m-onramp-view';
 import { OnRampCheckoutView } from '../../views/w3m-onramp-checkout-view';
@@ -35,9 +34,11 @@ import { UiUtil } from '../../utils/UiUtil';
 import { useRouteTransition } from '../../hooks/useRouteTransition';
 
 import { Animated } from 'react-native';
+import { useCustomDimensions } from '@reown/appkit-ui-react-native';
 
 export function AppKitRouter() {
   const { view } = useSnapshot(RouterController.state);
+  const { maxHeight } = useCustomDimensions();
   const { animateTransition, getAnimatedStyle } = useRouteTransition({
     duration: 300,
     useNativeDriver: true
@@ -83,8 +84,6 @@ export function AppKitRouter() {
         return OnRampSettingsView;
       case 'OnRampLoading':
         return OnRampLoadingView;
-      case 'SwitchNetwork':
-        return NetworkSwitchView;
       case 'OnRampTransaction':
         return OnRampTransactionView;
       case 'Swap':
@@ -117,7 +116,7 @@ export function AppKitRouter() {
   }, [view]);
 
   return (
-    <Animated.View style={[getAnimatedStyle()]}>
+    <Animated.View style={[getAnimatedStyle(), { maxHeight }]}>
       <ViewComponent />
     </Animated.View>
   );

package/src/partials/w3m-all-wallets-list/components/Loading.tsx

@@ -1,44 +1,13 @@
-import { CardSelectLoader, FlexView, useCustomDimensions } from '@reown/appkit-ui-react-native';
 import { memo } from 'react';
-import { type StyleProp, type ViewStyle } from 'react-native';
+import { WalletList } from './WalletList';
 
 interface LoadingProps {
-  itemWidth?: number;
-  containerStyle?: StyleProp<ViewStyle>;
+  loadingItems?: number;
 }
 
-function _Loading({ itemWidth, containerStyle }: LoadingProps) {
-  const { maxWidth, maxHeight } = useCustomDimensions();
-
+function _Loading({ loadingItems = 20 }: LoadingProps) {
   return (
-    <FlexView
-      flexDirection="row"
-      flexWrap="wrap"
-      alignSelf="center"
-      padding={['0', '0', 's', 'xs']}
-      style={{ maxWidth, maxHeight }}
-    >
-      <CardSelectLoader style={[containerStyle, { width: itemWidth }]} />
-      <CardSelectLoader style={[containerStyle, { width: itemWidth }]} />
-      <CardSelectLoader style={[containerStyle, { width: itemWidth }]} />
-      <CardSelectLoader style={[containerStyle, { width: itemWidth }]} />
-      <CardSelectLoader style={[containerStyle, { width: itemWidth }]} />
-      <CardSelectLoader style={[containerStyle, { width: itemWidth }]} />
-      <CardSelectLoader style={[containerStyle, { width: itemWidth }]} />
-      <CardSelectLoader style={[containerStyle, { width: itemWidth }]} />
-      <CardSelectLoader style={[containerStyle, { width: itemWidth }]} />
-      <CardSelectLoader style={[containerStyle, { width: itemWidth }]} />
-      <CardSelectLoader style={[containerStyle, { width: itemWidth }]} />
-      <CardSelectLoader style={[containerStyle, { width: itemWidth }]} />
-      <CardSelectLoader style={[containerStyle, { width: itemWidth }]} />
-      <CardSelectLoader style={[containerStyle, { width: itemWidth }]} />
-      <CardSelectLoader style={[containerStyle, { width: itemWidth }]} />
-      <CardSelectLoader style={[containerStyle, { width: itemWidth }]} />
-      <CardSelectLoader style={[containerStyle, { width: itemWidth }]} />
-      <CardSelectLoader style={[containerStyle, { width: itemWidth }]} />
-      <CardSelectLoader style={[containerStyle, { width: itemWidth }]} />
-      <CardSelectLoader style={[containerStyle, { width: itemWidth }]} />
-    </FlexView>
+    <WalletList data={[]} onItemPress={() => {}} isLoading={true} loadingItems={loadingItems} />
   );
 }
 

package/src/partials/w3m-all-wallets-list/components/WalletItem.tsx

@@ -6,32 +6,25 @@ import type { StyleProp, ViewStyle } from 'react-native';
 import { memo } from 'react';
 
 interface WalletItemProps {
-  containerStyle?: StyleProp<ViewStyle>;
   item: WcWallet;
-  itemWidth?: number;
   imageHeaders?: Record<string, string>;
   onItemPress: (wallet: WcWallet) => void;
+  style?: StyleProp<ViewStyle>;
 }
 
-export function WalletItem({
-  containerStyle,
-  item,
-  itemWidth,
-  imageHeaders,
-  onItemPress
-}: WalletItemProps) {
+export function WalletItem({ item, imageHeaders, onItemPress, style }: WalletItemProps) {
   const { walletImages } = useSnapshot(AssetController.state);
   const isInstalled = ApiController.state.installed.find(wallet => wallet?.id === item?.id);
   const imageSrc = AssetUtil.getWalletImage(item, walletImages);
 
   if (!item?.id) {
-    return <CardSelectLoader style={[containerStyle, { width: itemWidth }]} />;
+    return <CardSelectLoader style={style} />;
   }
 
   return (
     <CardSelect
       imageSrc={imageSrc}
-      style={[containerStyle, { width: itemWidth }]}
+      style={style}
       imageHeaders={imageHeaders}
       name={item?.name ?? 'Unknown'}
       onPress={() => onItemPress(item)}

package/src/partials/w3m-all-wallets-list/components/WalletList.tsx

@@ -0,0 +1,95 @@
+import { FlatList, StyleSheet } from 'react-native';
+import { WalletItem } from './WalletItem';
+import {
+  CardSelectHeight,
+  Spacing,
+  useCustomDimensions,
+  CardSelectLoader,
+  CardSelectWidth
+} from '@reown/appkit-ui-react-native';
+import { ApiController } from '@reown/appkit-core-react-native';
+import type { WcWallet } from '@reown/appkit-common-react-native';
+
+const imageHeaders = ApiController._getApiHeaders();
+
+const ITEM_HEIGHT = CardSelectHeight;
+const ITEM_WIDTH = CardSelectWidth;
+const ITEM_HEIGHT_WITH_GAP = ITEM_HEIGHT + Spacing['3xs'];
+
+interface Props {
+  data: WcWallet[];
+  onItemPress: (wallet: WcWallet) => void;
+  onEndReached?: () => void;
+  onEndReachedThreshold?: number;
+  isLoading?: boolean;
+  loadingItems?: number;
+}
+
+export function WalletList({
+  data,
+  onItemPress,
+  onEndReached,
+  onEndReachedThreshold,
+  isLoading = false,
+  loadingItems = 20
+}: Props) {
+  const { padding, maxHeight } = useCustomDimensions();
+
+  // Create loading data if isLoading is true
+  const displayData = isLoading
+    ? Array.from({ length: loadingItems }, (_, index) => ({ id: `loading-${index}` }) as WcWallet)
+    : data;
+
+  return (
+    <FlatList
+      fadingEdgeLength={20}
+      bounces={false}
+      numColumns={4}
+      data={displayData}
+      style={[styles.list, { height: maxHeight }]}
+      columnWrapperStyle={styles.columnWrapperStyle}
+      renderItem={({ item }) => {
+        if (isLoading) {
+          return <CardSelectLoader style={styles.itemContainer} />;
+        }
+
+        return (
+          <WalletItem
+            item={item}
+            imageHeaders={imageHeaders}
+            onItemPress={onItemPress}
+            style={styles.itemContainer}
+          />
+        );
+      }}
+      contentContainerStyle={[styles.contentContainer, { paddingHorizontal: padding }]}
+      onEndReached={onEndReached}
+      onEndReachedThreshold={onEndReachedThreshold}
+      keyExtractor={(item, index) => item?.id ?? `item-${index}`}
+      getItemLayout={(_, index) => ({
+        length: ITEM_HEIGHT_WITH_GAP,
+        offset: ITEM_HEIGHT_WITH_GAP * index,
+        index
+      })}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  list: {
+    paddingTop: Spacing['3xs']
+  },
+  contentContainer: {
+    paddingBottom: Spacing['4xl'],
+    paddingTop: Spacing['3xs'],
+    gap: Spacing['3xs'],
+    alignItems: 'center'
+  },
+  columnWrapperStyle: {
+    justifyContent: 'space-around'
+  },
+  itemContainer: {
+    width: '23%',
+    minWidth: ITEM_WIDTH
+  }
+});

package/src/partials/w3m-all-wallets-list/index.tsx

@@ -1,6 +1,5 @@
 import { useEffect, useState } from 'react';
 import { useSnapshot } from 'valtio';
-import { FlatList } from 'react-native';
 import {
   ApiController,
   OptionsController,
@@ -8,36 +7,23 @@ import {
   type OptionsControllerState
 } from '@reown/appkit-core-react-native';
 import { type WcWallet } from '@reown/appkit-common-react-native';
-import { CardSelectHeight, Spacing, useCustomDimensions } from '@reown/appkit-ui-react-native';
 import styles from './styles';
 import { Placeholder } from '../w3m-placeholder';
 import { Loading } from './components/Loading';
-import { WalletItem } from './components/WalletItem';
+
+import { WalletList } from './components/WalletList';
 
 interface AllWalletsListProps {
-  columns: number;
   onItemPress: (wallet: WcWallet) => void;
-  itemWidth?: number;
   headerHeight?: number;
 }
 
-const ITEM_HEIGHT = CardSelectHeight + Spacing.xs * 2;
-
-export function AllWalletsList({
-  columns,
-  itemWidth,
-  onItemPress,
-  headerHeight = 0
-}: AllWalletsListProps) {
+export function AllWalletsList({ onItemPress }: AllWalletsListProps) {
   const [loading, setLoading] = useState<boolean>(ApiController.state.wallets.length === 0);
   const [loadingError, setLoadingError] = useState<boolean>(false);
   const [pageLoading, setPageLoading] = useState<boolean>(false);
-  const { maxHeight, padding } = useCustomDimensions();
   const { installed, featured, recommended, wallets } = useSnapshot(ApiController.state);
   const { customWallets } = useSnapshot(OptionsController.state) as OptionsControllerState;
-  const imageHeaders = ApiController._getApiHeaders();
-  const preloadedWallets = installed.length + featured.length + recommended.length;
-  const loadingItems = columns - ((100 + preloadedWallets) % columns);
 
   const combinedWallets = [
     ...(customWallets ?? []),
@@ -52,6 +38,8 @@ export function AllWalletsList({
     new Map(combinedWallets.map(wallet => [wallet?.id, wallet])).values()
   ).filter(wallet => wallet?.id); // Filter out any undefined wallets
 
+  const loadingItems = 4 - ((100 + uniqueWallets.length) % 4);
+
   const walletList = [
     ...uniqueWallets,
     ...(pageLoading ? (Array.from({ length: loadingItems }) as WcWallet[]) : [])
@@ -95,7 +83,7 @@ export function AllWalletsList({
   }, []);
 
   if (loading) {
-    return <Loading itemWidth={itemWidth} containerStyle={styles.itemContainer} />;
+    return <Loading loadingItems={20} />;
   }
 
   if (loadingError) {
@@ -114,30 +102,11 @@ export function AllWalletsList({
   }
 
   return (
-    <FlatList
-      key={columns}
-      fadingEdgeLength={20}
-      bounces={false}
-      numColumns={columns}
+    <WalletList
       data={walletList}
-      renderItem={({ item }) => (
-        <WalletItem
-          item={item}
-          itemWidth={itemWidth}
-          imageHeaders={imageHeaders}
-          onItemPress={onItemPress}
-        />
-      )}
-      style={{ maxHeight: maxHeight - headerHeight - Spacing['4xl'] }}
-      contentContainerStyle={[styles.contentContainer, { paddingHorizontal: padding + Spacing.xs }]}
       onEndReached={fetchNextPage}
       onEndReachedThreshold={2}
-      keyExtractor={(item, index) => item?.id ?? index}
-      getItemLayout={(_, index) => ({
-        length: ITEM_HEIGHT,
-        offset: ITEM_HEIGHT * index,
-        index
-      })}
+      onItemPress={onItemPress}
     />
   );
 }

package/src/partials/w3m-all-wallets-list/styles.ts

@@ -3,12 +3,16 @@ import { StyleSheet } from 'react-native';
 
 export default StyleSheet.create({
   contentContainer: {
-    paddingBottom: Spacing['2xl']
+    paddingBottom: Spacing['4xl'],
+    paddingTop: Spacing['3xs'],
+    gap: Spacing['3xs'],
+    alignItems: 'center'
+  },
+  columnWrapperStyle: {
+    justifyContent: 'space-around'
   },
   itemContainer: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginVertical: Spacing.xs
+    width: '23%'
   },
   pageLoader: {
     marginTop: Spacing.xl

package/src/partials/w3m-all-wallets-search/index.tsx

@@ -1,36 +1,23 @@
 import { useCallback, useEffect, useState } from 'react';
-import { FlatList } from 'react-native';
 import { ApiController, SnackController } from '@reown/appkit-core-react-native';
 import { type WcWallet } from '@reown/appkit-common-react-native';
-import { CardSelectHeight, Spacing, useCustomDimensions } from '@reown/appkit-ui-react-native';
+import { useCustomDimensions } from '@reown/appkit-ui-react-native';
 import { Placeholder } from '../w3m-placeholder';
 import styles from './styles';
 
 import { Loading } from '../w3m-all-wallets-list/components/Loading';
-import { WalletItem } from '../w3m-all-wallets-list/components/WalletItem';
+import { WalletList } from '../w3m-all-wallets-list/components/WalletList';
 
 export interface AllWalletsSearchProps {
-  columns: number;
   onItemPress: (wallet: WcWallet) => void;
-  itemWidth?: number;
   searchQuery?: string;
-  headerHeight?: number;
 }
 
-const ITEM_HEIGHT = CardSelectHeight + Spacing.xs * 2;
-
-export function AllWalletsSearch({
-  searchQuery,
-  columns,
-  itemWidth,
-  onItemPress,
-  headerHeight = 0
-}: AllWalletsSearchProps) {
+export function AllWalletsSearch({ searchQuery, onItemPress }: AllWalletsSearchProps) {
   const [loading, setLoading] = useState<boolean>(false);
   const [loadingError, setLoadingError] = useState<boolean>(false);
   const [prevSearchQuery, setPrevSearchQuery] = useState<string>('');
-  const imageHeaders = ApiController._getApiHeaders();
-  const { maxHeight, padding, isLandscape } = useCustomDimensions();
+  const { isLandscape } = useCustomDimensions();
 
   const emptyTemplate = () => {
     return (
@@ -63,7 +50,7 @@ export function AllWalletsSearch({
   }, [searchQuery, prevSearchQuery, searchFetch]);
 
   if (loading) {
-    return <Loading itemWidth={itemWidth} containerStyle={styles.itemContainer} />;
+    return <Loading loadingItems={20} />;
   }
 
   if (loadingError) {
@@ -85,29 +72,5 @@ export function AllWalletsSearch({
     return emptyTemplate();
   }
 
-  return (
-    <FlatList
-      key={columns}
-      fadingEdgeLength={20}
-      bounces={false}
-      numColumns={columns}
-      data={ApiController.state.search}
-      renderItem={({ item }) => (
-        <WalletItem
-          item={item}
-          itemWidth={itemWidth}
-          imageHeaders={imageHeaders}
-          onItemPress={onItemPress}
-        />
-      )}
-      style={{ maxHeight: maxHeight - headerHeight - Spacing['2xl'] }}
-      contentContainerStyle={[styles.contentContainer, { paddingHorizontal: padding + Spacing.xs }]}
-      keyExtractor={item => item.id}
-      getItemLayout={(_, index) => ({
-        length: ITEM_HEIGHT,
-        offset: ITEM_HEIGHT * index,
-        index
-      })}
-    />
-  );
+  return <WalletList onItemPress={onItemPress} data={ApiController.state.search} />;
 }

package/src/partials/w3m-all-wallets-search/styles.ts

@@ -3,7 +3,7 @@ import { StyleSheet } from 'react-native';
 
 export default StyleSheet.create({
   contentContainer: {
-    paddingBottom: Spacing['2xl']
+    paddingBottom: Spacing['4xl']
   },
   placeholderContainer: {
     flex: 0,
@@ -19,7 +19,7 @@ export default StyleSheet.create({
   itemContainer: {
     alignItems: 'center',
     justifyContent: 'center',
-    marginVertical: Spacing.xs
+    margin: Spacing['4xs']
   },
   text: {
     marginTop: Spacing.xs

package/src/partials/w3m-connecting-mobile/index.tsx

@@ -34,7 +34,7 @@ interface Props {
 
 export function ConnectingMobile({ onRetry, onCopyUri, isInstalled }: Props) {
   const { data } = RouterController.state;
-  const { maxWidth: width } = useCustomDimensions();
+  const { padding } = useCustomDimensions();
   const { wcUri, wcError } = useSnapshot(WcController.state);
   const { walletImages } = useSnapshot(AssetController.state);
   const [errorType, setErrorType] = useState<BodyErrorType>();
@@ -100,13 +100,13 @@ export function ConnectingMobile({ onRetry, onCopyUri, isInstalled }: Props) {
   }, [wcUri, onConnect]);
 
   return (
-    <ScrollView bounces={false} fadingEdgeLength={20} contentContainerStyle={styles.container}>
-      <FlexView
-        alignItems="center"
-        alignSelf="center"
-        padding={['2xl', 'l', '0', 'l']}
-        style={{ width }}
-      >
+    <ScrollView
+      bounces={false}
+      fadingEdgeLength={20}
+      style={{ paddingHorizontal: padding }}
+      contentContainerStyle={styles.container}
+    >
+      <FlexView alignItems="center" alignSelf="center" padding={['2xl', 'l', '0', 'l']}>
         <LoadingThumbnail paused={!!errorType || wcError}>
           <WalletImage
             size="xl"

package/src/partials/w3m-connecting-qrcode/index.tsx

@@ -16,11 +16,14 @@ import {
 } from '@reown/appkit-ui-react-native';
 import styles from './styles';
 import { ReownButton } from './components/ReownButton';
+import { useWindowDimensions } from 'react-native';
 
 export function ConnectingQrCode() {
+  const { height, width } = useWindowDimensions();
+  const windowSize = Math.min(height, width);
   const { wcUri } = useSnapshot(WcController.state);
   const showCopy = OptionsController.isClipboardAvailable();
-  const { maxWidth: windowSize, isPortrait } = useCustomDimensions();
+  const { isPortrait } = useCustomDimensions();
   const qrSize = (windowSize - Spacing.xl * 2) / (isPortrait ? 1 : 1.5);
 
   const onCopyAddress = () => {

package/src/partials/w3m-header/index.tsx

@@ -59,6 +59,7 @@ export function Header() {
   };
 
   const noCloseViews = ['OnRampSettings'];
+  const noBackViews = ['UnsupportedChain'];
   const showClose = !noCloseViews.includes(view);
   const header = headings(data, view);
 
@@ -71,7 +72,9 @@ export function Header() {
   };
 
   const dynamicButtonTemplate = () => {
-    const showBack = RouterController.state.history.length > 1;
+    const showBack =
+      RouterController.state.history.length > 1 &&
+      !noBackViews.includes(RouterController.state.view);
     const showHelp = RouterController.state.view === 'Connect';
 
     if (showHelp) {

package/src/partials/w3m-selector-modal/index.tsx

@@ -9,10 +9,12 @@ import {
   Separator,
   Spacing,
   Text,
+  useCustomDimensions,
   useTheme
 } from '@reown/appkit-ui-react-native';
-import styles from './styles';
 import { AssetController, AssetUtil, ConnectionsController } from '@reown/appkit-core-react-native';
+import { Placeholder } from '../w3m-placeholder';
+import styles from './styles';
 
 interface SelectorModalProps {
   title?: string;
@@ -44,6 +46,7 @@ export function SelectorModal({
   showNetwork
 }: SelectorModalProps) {
   const Theme = useTheme();
+  const { maxHeight } = useCustomDimensions();
   const { activeNetwork } = useSnapshot(ConnectionsController.state);
   const { networkImages } = useSnapshot(AssetController.state);
   const networkImage = AssetUtil.getNetworkImage(activeNetwork, networkImages);
@@ -55,66 +58,83 @@ export function SelectorModal({
   return (
     <Modal visible={visible} transparent animationType="slide" onRequestClose={onClose}>
       <View style={styles.modal}>
-        <FlexView style={[styles.container, { backgroundColor: Theme['bg-100'] }]}>
-          <FlexView
-            alignItems="center"
-            justifyContent="space-between"
-            flexDirection="row"
-            style={styles.header}
-          >
-            <IconLink icon="chevronLeft" onPress={onClose} testID="selector-modal-button-back" />
-            {!!title && <Text variant="paragraph-600">{title}</Text>}
-            {showNetwork ? (
-              networkImage ? (
-                <FlexView
-                  alignItems="center"
-                  justifyContent="center"
-                  style={styles.iconPlaceholder}
-                >
-                  <Image source={networkImage} style={styles.networkImage} />
-                </FlexView>
-              ) : (
-                <IconBox
-                  style={styles.iconPlaceholder}
-                  icon="networkPlaceholder"
-                  background
-                  iconColor="fg-200"
-                  size="sm"
+        <FlatList
+          data={items}
+          renderItem={renderItem}
+          fadingEdgeLength={20}
+          automaticallyAdjustKeyboardInsets={false}
+          keyboardShouldPersistTaps="always"
+          style={[styles.container, { backgroundColor: Theme['bg-100'], maxHeight }]}
+          ListHeaderComponentStyle={styles.header}
+          ListEmptyComponent={
+            <Placeholder
+              icon="coinPlaceholder"
+              title="No tokens found"
+              description="There's no available tokens for this network"
+            />
+          }
+          ListHeaderComponent={
+            <>
+              <FlexView
+                alignItems="center"
+                justifyContent="space-between"
+                flexDirection="row"
+                style={styles.headerTop}
+              >
+                <IconLink
+                  icon="chevronLeft"
+                  onPress={onClose}
+                  testID="selector-modal-button-back"
                 />
-              )
-            ) : (
-              <View style={styles.iconPlaceholder} />
-            )}
-          </FlexView>
-          <SearchBar
-            onChangeText={onSearch}
-            style={styles.searchBar}
-            placeholder={searchPlaceholder}
-          />
-          {selectedItem ? (
-            <FlexView style={styles.selectedContainer}>
-              {renderItem({ item: selectedItem })}
-              <Separator style={styles.separator} color="gray-glass-020" />
-            </FlexView>
-          ) : null}
-          <FlatList
-            data={items}
-            renderItem={renderItem}
-            fadingEdgeLength={20}
-            contentContainerStyle={styles.listContent}
-            ItemSeparatorComponent={renderSeparator}
-            keyExtractor={keyExtractor}
-            getItemLayout={
-              itemHeight
-                ? (_, index) => ({
-                    length: itemHeight + SEPARATOR_HEIGHT,
-                    offset: (itemHeight + SEPARATOR_HEIGHT) * index,
-                    index
-                  })
-                : undefined
-            }
-          />
-        </FlexView>
+                {!!title && <Text variant="paragraph-600">{title}</Text>}
+                {showNetwork ? (
+                  networkImage ? (
+                    <FlexView
+                      alignItems="center"
+                      justifyContent="center"
+                      style={styles.iconPlaceholder}
+                    >
+                      <Image source={networkImage} style={styles.networkImage} />
+                    </FlexView>
+                  ) : (
+                    <IconBox
+                      style={styles.iconPlaceholder}
+                      icon="networkPlaceholder"
+                      background
+                      iconColor="fg-200"
+                      size="sm"
+                    />
+                  )
+                ) : (
+                  <View style={styles.iconPlaceholder} />
+                )}
+              </FlexView>
+              <SearchBar
+                onChangeText={onSearch}
+                style={styles.searchBar}
+                placeholder={searchPlaceholder}
+              />
+              {selectedItem ? (
+                <FlexView>
+                  {renderItem({ item: selectedItem })}
+                  <Separator style={styles.separator} color="gray-glass-005" />
+                </FlexView>
+              ) : null}
+            </>
+          }
+          contentContainerStyle={styles.listContent}
+          ItemSeparatorComponent={renderSeparator}
+          keyExtractor={keyExtractor}
+          getItemLayout={
+            itemHeight
+              ? (_, index) => ({
+                  length: itemHeight + SEPARATOR_HEIGHT,
+                  offset: (itemHeight + SEPARATOR_HEIGHT) * index,
+                  index
+                })
+              : undefined
+          }
+        />
       </View>
     </Modal>
   );