@reown/appkit-react-native 0.0.0-fix-height-calc-20250815174808 → 0.0.0-fix-improvements-20250827190629

package/src/AppKit.ts

@@ -663,6 +663,7 @@ export class AppKit {
     OptionsController.setEnableAnalytics(options.enableAnalytics);
     OptionsController.setDebug(options.debug);
     OptionsController.setFeatures(options.features);
+    OptionsController.setRequestedNetworks(this.networks);
 
     if (options.defaultNetwork) {
       const network = NetworkUtil.formatNetwork(options.defaultNetwork, this.projectId);
@@ -709,14 +710,17 @@ export class AppKit {
     const wallets = await StorageUtil.getRecentWallets();
     const filteredWallets = wallets.filter(wallet => {
       const { includeWalletIds, excludeWalletIds } = options;
-      if (includeWalletIds) {
+
+      if (includeWalletIds?.length) {
         return includeWalletIds.includes(wallet.id);
       }
-      if (excludeWalletIds) {
+      if (excludeWalletIds?.length) {
         return !excludeWalletIds.includes(wallet.id);
       }
 
-      return true;
+      return this.networks.some(
+        network => wallet.chains?.some(chain => network.caipNetworkId === chain)
+      );
     });
 
     WcController.setRecentWallets(filteredWallets);
@@ -740,8 +744,12 @@ export class AppKit {
 
     const customList = [...(customWallets ?? [])];
 
-    const addPhantom =
+    const isSolanaEnabled =
       adapters.some(adapter => adapter.getSupportedNamespace() === 'solana') &&
+      this.networks.some(network => network.chainNamespace === 'solana');
+
+    const addPhantom =
+      isSolanaEnabled &&
       extraConnectors?.some(connector => connector.type.toLowerCase() === 'phantom') &&
       !customList.some(wallet => wallet.id === ConstantsUtil.PHANTOM_CUSTOM_WALLET.id);
 
@@ -750,7 +758,7 @@ export class AppKit {
     }
 
     const addSolflare =
-      adapters.some(adapter => adapter.getSupportedNamespace() === 'solana') &&
+      isSolanaEnabled &&
       extraConnectors?.some(connector => connector.type.toLowerCase() === 'solflare') &&
       !customList.some(wallet => wallet.id === ConstantsUtil.SOLFLARE_CUSTOM_WALLET.id);
 

package/src/connectors/WalletConnectConnector.ts

@@ -210,12 +210,12 @@ export class WalletConnectConnector extends WalletConnector {
     const provider = this.provider as IUniversalProvider;
 
     if (namespace) {
-      const _chainId = this.getChainId(namespace);
-
       // @ts-ignore
       return {
         ...provider,
         request: (args: RequestArguments, chainId?: CaipNetworkId) => {
+          const _chainId = this.getChainId(namespace);
+
           return provider.request(args, chainId || _chainId);
         }
       };

package/src/partials/w3m-account-activity/index.tsx

@@ -1,6 +1,6 @@
 import { useSnapshot } from 'valtio';
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { ScrollView, View, type StyleProp, type ViewStyle, RefreshControl } from 'react-native';
+import { View, type StyleProp, type ViewStyle, RefreshControl } from 'react-native';
 import {
   FlexView,
   Link,
@@ -8,7 +8,8 @@ import {
   LoadingSpinner,
   Text,
   TransactionUtil,
-  useTheme
+  useTheme,
+  ScrollView
 } from '@reown/appkit-ui-react-native';
 import { type Transaction, type TransactionImage } from '@reown/appkit-common-react-native';
 import {
@@ -121,9 +122,8 @@ export function AccountActivity({ style }: Props) {
 
   return (
     <ScrollView
-      style={[styles.container, style]}
-      fadingEdgeLength={20}
-      contentContainerStyle={[styles.contentContainer]}
+      style={style}
+      contentContainerStyle={styles.contentContainer}
       refreshControl={
         <RefreshControl
           refreshing={refreshing}

package/src/partials/w3m-account-activity/styles.ts

@@ -2,11 +2,8 @@ import { Spacing } from '@reown/appkit-ui-react-native';
 import { StyleSheet } from 'react-native';
 
 export default StyleSheet.create({
-  container: {
-    paddingHorizontal: Spacing.xs
-  },
   contentContainer: {
-    paddingBottom: Spacing.m
+    paddingBottom: Spacing.xl
   },
   separatorText: {
     marginVertical: Spacing.xs

package/src/partials/w3m-account-tokens/index.tsx

@@ -1,11 +1,5 @@
 import { useCallback, useState } from 'react';
-import {
-  RefreshControl,
-  ScrollView,
-  StyleSheet,
-  type StyleProp,
-  type ViewStyle
-} from 'react-native';
+import { RefreshControl, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
 import { useSnapshot } from 'valtio';
 import {
   AssetController,
@@ -20,7 +14,8 @@ import {
   ListToken,
   useTheme,
   Spacing,
-  LoadingSpinner
+  LoadingSpinner,
+  ScrollView
 } from '@reown/appkit-ui-react-native';
 
 interface Props {
@@ -70,7 +65,6 @@ export function AccountTokens({ style, isLoading }: Props) {
 
   return (
     <ScrollView
-      fadingEdgeLength={20}
       style={style}
       refreshControl={
         <RefreshControl

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

@@ -0,0 +1,45 @@
+import { CardSelectLoader, FlexView, useCustomDimensions } from '@reown/appkit-ui-react-native';
+import { memo } from 'react';
+import { type StyleProp, type ViewStyle, StyleSheet } from 'react-native';
+
+interface LoadingProps {
+  itemWidth?: number;
+  containerStyle?: StyleProp<ViewStyle>;
+}
+
+function _Loading({ itemWidth, containerStyle }: LoadingProps) {
+  const { maxWidth, maxHeight } = useCustomDimensions();
+
+  return (
+    <FlexView
+      flexDirection="row"
+      flexWrap="wrap"
+      alignSelf="center"
+      style={[styles.container, { 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 }]} />
+    </FlexView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignSelf: 'center',
+    justifyContent: 'center'
+  }
+});
+
+export const Loading = memo(_Loading, () => {
+  return true;
+});

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

@@ -0,0 +1,47 @@
+import { useSnapshot } from 'valtio';
+import { ApiController, AssetController, AssetUtil } from '@reown/appkit-core-react-native';
+import { CardSelect, CardSelectLoader } from '@reown/appkit-ui-react-native';
+import type { WcWallet } from '@reown/appkit-common-react-native';
+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,
+  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 }, style]} />;
+  }
+
+  return (
+    <CardSelect
+      imageSrc={imageSrc}
+      style={[containerStyle, { width: itemWidth }, style]}
+      imageHeaders={imageHeaders}
+      name={item?.name ?? 'Unknown'}
+      onPress={() => onItemPress(item)}
+      installed={!!isInstalled}
+    />
+  );
+}
+
+export const MemoizedWalletItem = memo(WalletItem, (prevProps, nextProps) => {
+  return prevProps.item.id === nextProps.item.id;
+});

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

@@ -1,26 +1,18 @@
 import { useEffect, useState } from 'react';
 import { useSnapshot } from 'valtio';
-import { FlatList, View } from 'react-native';
+import { FlatList } from 'react-native';
 import {
   ApiController,
-  AssetController,
-  AssetUtil,
   OptionsController,
   SnackController,
   type OptionsControllerState
 } from '@reown/appkit-core-react-native';
 import { type WcWallet } from '@reown/appkit-common-react-native';
-import {
-  CardSelect,
-  CardSelectLoader,
-  CardSelectHeight,
-  FlexView,
-  Spacing,
-  useCustomDimensions
-} from '@reown/appkit-ui-react-native';
+import { CardSelectHeight, Spacing, useCustomDimensions } from '@reown/appkit-ui-react-native';
 import styles from './styles';
-import { UiUtil } from '../../utils/UiUtil';
 import { Placeholder } from '../w3m-placeholder';
+import { Loading } from './components/Loading';
+import { WalletItem } from './components/WalletItem';
 
 interface AllWalletsListProps {
   columns: number;
@@ -29,6 +21,8 @@ interface AllWalletsListProps {
   headerHeight?: number;
 }
 
+const ITEM_HEIGHT = CardSelectHeight + Spacing.xs * 2;
+
 export function AllWalletsList({
   columns,
   itemWidth,
@@ -38,9 +32,8 @@ export function AllWalletsList({
   const [loading, setLoading] = useState<boolean>(ApiController.state.wallets.length === 0);
   const [loadingError, setLoadingError] = useState<boolean>(false);
   const [pageLoading, setPageLoading] = useState<boolean>(false);
-  const { maxWidth, maxHeight, padding } = useCustomDimensions();
+  const { maxHeight, padding } = useCustomDimensions();
   const { installed, featured, recommended, wallets } = useSnapshot(ApiController.state);
-  const { walletImages } = useSnapshot(AssetController.state);
   const { customWallets } = useSnapshot(OptionsController.state) as OptionsControllerState;
   const imageHeaders = ApiController._getApiHeaders();
   const preloadedWallets = installed.length + featured.length + recommended.length;
@@ -64,55 +57,11 @@ export function AllWalletsList({
     ...(pageLoading ? (Array.from({ length: loadingItems }) as WcWallet[]) : [])
   ];
 
-  const ITEM_HEIGHT = CardSelectHeight + Spacing.xs * 2;
-
-  const loadingTemplate = (items: number) => {
-    return (
-      <FlexView
-        flexDirection="row"
-        flexWrap="wrap"
-        alignSelf="center"
-        padding={['0', '0', 's', 'xs']}
-        style={{ maxWidth, maxHeight }}
-      >
-        {Array.from({ length: items }).map((_, index) => (
-          <View key={index} style={[styles.itemContainer, { width: itemWidth }]}>
-            <CardSelectLoader />
-          </View>
-        ))}
-      </FlexView>
-    );
-  };
-
-  const walletTemplate = ({ item }: { item: WcWallet; index: number }) => {
-    const isInstalled = ApiController.state.installed.find(wallet => wallet?.id === item?.id);
-    if (!item?.id) {
-      return (
-        <View style={[styles.itemContainer, { width: itemWidth }]}>
-          <CardSelectLoader />
-        </View>
-      );
-    }
-
-    return (
-      <View style={[styles.itemContainer, { width: itemWidth }]}>
-        <CardSelect
-          imageSrc={AssetUtil.getWalletImage(item, walletImages)}
-          imageHeaders={imageHeaders}
-          name={item?.name ?? 'Unknown'}
-          onPress={() => onItemPress(item)}
-          installed={!!isInstalled}
-        />
-      </View>
-    );
-  };
-
   const initialFetch = async () => {
     try {
       setLoading(true);
       setLoadingError(false);
       await ApiController.fetchWallets({ page: 1 });
-      UiUtil.createViewTransition();
       setLoading(false);
     } catch (error) {
       SnackController.showError('Failed to load wallets');
@@ -146,7 +95,7 @@ export function AllWalletsList({
   }, []);
 
   if (loading) {
-    return loadingTemplate(20);
+    return <Loading itemWidth={itemWidth} containerStyle={styles.itemContainer} />;
   }
 
   if (loadingError) {
@@ -171,9 +120,20 @@ export function AllWalletsList({
       bounces={false}
       numColumns={columns}
       data={walletList}
-      renderItem={walletTemplate}
+      renderItem={({ item }) => (
+        <WalletItem
+          item={item}
+          itemWidth={itemWidth}
+          imageHeaders={imageHeaders}
+          onItemPress={onItemPress}
+          style={styles.itemContainer}
+        />
+      )}
       style={{ maxHeight: maxHeight - headerHeight - Spacing['4xl'] }}
-      contentContainerStyle={[styles.contentContainer, { paddingHorizontal: padding + Spacing.xs }]}
+      contentContainerStyle={[
+        styles.contentContainer,
+        { paddingHorizontal: padding + Spacing['2xs'] }
+      ]}
       onEndReached={fetchNextPage}
       onEndReachedThreshold={2}
       keyExtractor={(item, index) => item?.id ?? index}

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

@@ -3,12 +3,13 @@ import { StyleSheet } from 'react-native';
 
 export default StyleSheet.create({
   contentContainer: {
-    paddingBottom: Spacing['2xl']
+    paddingBottom: Spacing['4xl'],
+    paddingTop: Spacing['3xs']
   },
   itemContainer: {
     alignItems: 'center',
     justifyContent: 'center',
-    marginVertical: Spacing.xs
+    margin: Spacing['4xs']
   },
   pageLoader: {
     marginTop: Spacing.xl

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

@@ -1,23 +1,13 @@
 import { useCallback, useEffect, useState } from 'react';
-import { FlatList, View } from 'react-native';
-import {
-  ApiController,
-  AssetController,
-  AssetUtil,
-  SnackController
-} from '@reown/appkit-core-react-native';
+import { FlatList } from 'react-native';
+import { ApiController, SnackController } from '@reown/appkit-core-react-native';
 import { type WcWallet } from '@reown/appkit-common-react-native';
-import {
-  CardSelect,
-  CardSelectHeight,
-  CardSelectLoader,
-  FlexView,
-  Spacing,
-  useCustomDimensions
-} from '@reown/appkit-ui-react-native';
+import { CardSelectHeight, Spacing, useCustomDimensions } from '@reown/appkit-ui-react-native';
 import { Placeholder } from '../w3m-placeholder';
 import styles from './styles';
-import { useSnapshot } from 'valtio';
+
+import { Loading } from '../w3m-all-wallets-list/components/Loading';
+import { WalletItem } from '../w3m-all-wallets-list/components/WalletItem';
 
 export interface AllWalletsSearchProps {
   columns: number;
@@ -27,6 +17,8 @@ export interface AllWalletsSearchProps {
   headerHeight?: number;
 }
 
+const ITEM_HEIGHT = CardSelectHeight + Spacing.xs * 2;
+
 export function AllWalletsSearch({
   searchQuery,
   columns,
@@ -38,45 +30,7 @@ export function AllWalletsSearch({
   const [loadingError, setLoadingError] = useState<boolean>(false);
   const [prevSearchQuery, setPrevSearchQuery] = useState<string>('');
   const imageHeaders = ApiController._getApiHeaders();
-  const { maxWidth, maxHeight, padding, isLandscape } = useCustomDimensions();
-  const { walletImages } = useSnapshot(AssetController.state);
-
-  const ITEM_HEIGHT = CardSelectHeight + Spacing.xs * 2;
-
-  const walletTemplate = ({ item }: { item: WcWallet }) => {
-    const isInstalled = ApiController.state.installed.find(wallet => wallet?.id === item?.id);
-
-    return (
-      <View key={item?.id} style={[styles.itemContainer, { width: itemWidth }]}>
-        <CardSelect
-          imageSrc={AssetUtil.getWalletImage(item, walletImages)}
-          imageHeaders={imageHeaders}
-          name={item?.name ?? 'Unknown'}
-          onPress={() => onItemPress(item)}
-          installed={!!isInstalled}
-          testID={`wallet-search-item-${item?.id}`}
-        />
-      </View>
-    );
-  };
-
-  const loadingTemplate = (items: number) => {
-    return (
-      <FlexView
-        flexDirection="row"
-        flexWrap="wrap"
-        alignSelf="center"
-        padding={['0', '0', 's', 'xs']}
-        style={{ maxWidth, maxHeight: maxHeight - headerHeight }}
-      >
-        {Array.from({ length: items }).map((_, index) => (
-          <View key={index} style={[styles.itemContainer, { width: itemWidth }]}>
-            <CardSelectLoader />
-          </View>
-        ))}
-      </FlexView>
-    );
-  };
+  const { maxHeight, padding, isLandscape } = useCustomDimensions();
 
   const emptyTemplate = () => {
     return (
@@ -109,7 +63,7 @@ export function AllWalletsSearch({
   }, [searchQuery, prevSearchQuery, searchFetch]);
 
   if (loading) {
-    return loadingTemplate(20);
+    return <Loading itemWidth={itemWidth} containerStyle={styles.itemContainer} />;
   }
 
   if (loadingError) {
@@ -138,9 +92,20 @@ export function AllWalletsSearch({
       bounces={false}
       numColumns={columns}
       data={ApiController.state.search}
-      renderItem={walletTemplate}
+      renderItem={({ item }) => (
+        <WalletItem
+          item={item}
+          itemWidth={itemWidth}
+          imageHeaders={imageHeaders}
+          onItemPress={onItemPress}
+          style={styles.itemContainer}
+        />
+      )}
       style={{ maxHeight: maxHeight - headerHeight - Spacing['2xl'] }}
-      contentContainerStyle={[styles.contentContainer, { paddingHorizontal: padding + Spacing.xs }]}
+      contentContainerStyle={[
+        styles.contentContainer,
+        { paddingHorizontal: padding + Spacing['2xs'] }
+      ]}
       keyExtractor={item => item.id}
       getItemLayout={(_, index) => ({
         length: ITEM_HEIGHT,

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

@@ -1,6 +1,6 @@
 import { useSnapshot } from 'valtio';
 import { useCallback, useEffect, useState } from 'react';
-import { Platform, ScrollView } from 'react-native';
+import { Platform } from 'react-native';
 import {
   RouterController,
   ApiController,
@@ -19,7 +19,8 @@ import {
   WalletImage,
   Link,
   IconBox,
-  useCustomDimensions
+  useCustomDimensions,
+  ScrollView
 } from '@reown/appkit-ui-react-native';
 
 import { StoreLink } from './components/StoreLink';
@@ -100,7 +101,7 @@ export function ConnectingMobile({ onRetry, onCopyUri, isInstalled }: Props) {
   }, [wcUri, onConnect]);
 
   return (
-    <ScrollView bounces={false} fadingEdgeLength={20} contentContainerStyle={styles.container}>
+    <ScrollView contentContainerStyle={styles.container}>
       <FlexView
         alignItems="center"
         alignSelf="center"

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

@@ -64,6 +64,7 @@ export function ConnectingQrCode() {
             iconLeft="copySmall"
             color="fg-200"
             style={styles.copyButton}
+            disabled={!wcUri}
             onPress={onCopyAddress}
             testID="copy-link"
           >

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

@@ -1,6 +1,6 @@
 import { useSnapshot } from 'valtio';
 import { useCallback } from 'react';
-import { Linking, ScrollView } from 'react-native';
+import { Linking } from 'react-native';
 import {
   RouterController,
   ApiController,
@@ -17,7 +17,8 @@ import {
   LoadingThumbnail,
   WalletImage,
   Link,
-  IconBox
+  IconBox,
+  ScrollView
 } from '@reown/appkit-ui-react-native';
 
 import { ConnectingBody, getMessage } from '../w3m-connecting-body';
@@ -65,7 +66,7 @@ export function ConnectingWeb({ onCopyUri }: ConnectingWebProps) {
   }, [data?.wallet, wcUri]);
 
   return (
-    <ScrollView bounces={false} fadingEdgeLength={20}>
+    <ScrollView>
       <FlexView alignItems="center" padding={['2xl', 'm', '3xl', 'm']}>
         <LoadingThumbnail paused={wcError}>
           <WalletImage

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

@@ -14,7 +14,7 @@ export function Header() {
   const { close, back } = useInternalAppKit();
   const { data, view } = useSnapshot(RouterController.state);
   const onHelpPress = () => {
-    RouterController.push('WhatIsAWallet');
+    RouterController.push('WhatIsAWallet', undefined, 'backward');
     EventsController.sendEvent({ type: 'track', event: 'CLICK_WALLET_HELP' });
   };
 

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

@@ -1,5 +1,5 @@
 import { useSnapshot } from 'valtio';
-import { FlatList, View, Modal } from 'react-native';
+import { FlatList, View, Modal, Animated } from 'react-native';
 import {
   FlexView,
   IconBox,
@@ -13,6 +13,7 @@ import {
 } from '@reown/appkit-ui-react-native';
 import styles from './styles';
 import { AssetController, AssetUtil, ConnectionsController } from '@reown/appkit-core-react-native';
+import { useEffect, useRef } from 'react';
 
 interface SelectorModalProps {
   title?: string;
@@ -47,6 +48,32 @@ export function SelectorModal({
   const { activeNetwork } = useSnapshot(ConnectionsController.state);
   const { networkImages } = useSnapshot(AssetController.state);
   const networkImage = AssetUtil.getNetworkImage(activeNetwork, networkImages);
+  const backdropOpacity = useRef(new Animated.Value(0)).current;
+
+  // Handle backdrop animation
+  useEffect(() => {
+    let backdropAnimation: Animated.CompositeAnimation;
+
+    if (visible) {
+      backdropAnimation = Animated.timing(backdropOpacity, {
+        toValue: 1,
+        duration: 300,
+        useNativeDriver: true
+      });
+      backdropAnimation.start();
+    } else {
+      backdropAnimation = Animated.timing(backdropOpacity, {
+        toValue: 0,
+        duration: 50,
+        useNativeDriver: true
+      });
+      backdropAnimation.start();
+    }
+
+    return () => {
+      backdropAnimation?.stop();
+    };
+  }, [visible, backdropOpacity]);
 
   const renderSeparator = () => {
     return <View style={{ height: SEPARATOR_HEIGHT }} />;
@@ -54,7 +81,7 @@ export function SelectorModal({
 
   return (
     <Modal visible={visible} transparent animationType="slide" onRequestClose={onClose}>
-      <View style={styles.modal}>
+      <Animated.View style={[styles.modal, { opacity: backdropOpacity }]}>
         <FlexView style={[styles.container, { backgroundColor: Theme['bg-100'] }]}>
           <FlexView
             alignItems="center"
@@ -115,7 +142,7 @@ export function SelectorModal({
             }
           />
         </FlexView>
-      </View>
+      </Animated.View>
     </Modal>
   );
 }

package/src/partials/w3m-selector-modal/styles.ts

@@ -5,14 +5,15 @@ export default StyleSheet.create({
   modal: {
     flex: 1,
     margin: 0,
-    justifyContent: 'flex-end'
+    justifyContent: 'flex-end',
+    backgroundColor: 'rgba(0, 0, 0, 0.5)'
   },
   header: {
     marginBottom: Spacing.s,
     paddingHorizontal: Spacing.m
   },
   container: {
-    height: '80%',
+    height: '90%',
     borderTopLeftRadius: BorderRadius.l,
     borderTopRightRadius: BorderRadius.l,
     paddingTop: Spacing.m