@reown/appkit-react-native 0.0.0-fix-improvements-20250827190629 → 0.0.0-fix-ui-changes-20250828191102

package/lib/typescript/views/w3m-what-is-a-wallet-view/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/w3m-what-is-a-wallet-view/index.tsx"],"names":[],"mappings":"AAIA,wBAAgB,iBAAiB,4CAsDhC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/w3m-what-is-a-wallet-view/index.tsx"],"names":[],"mappings":"AAKA,wBAAgB,iBAAiB,4CA6DhC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reown/appkit-react-native",
-  "version": "0.0.0-fix-improvements-20250827190629",
+  "version": "0.0.0-fix-ui-changes-20250828191102",
   "main": "lib/commonjs/index.js",
   "types": "lib/typescript/index.d.ts",
   "module": "lib/module/index.js",
@@ -38,10 +38,10 @@
     "access": "public"
   },
   "dependencies": {
-    "@reown/appkit-common-react-native": "0.0.0-fix-improvements-20250827190629",
-    "@reown/appkit-core-react-native": "0.0.0-fix-improvements-20250827190629",
-    "@reown/appkit-siwe-react-native": "0.0.0-fix-improvements-20250827190629",
-    "@reown/appkit-ui-react-native": "0.0.0-fix-improvements-20250827190629",
+    "@reown/appkit-common-react-native": "0.0.0-fix-ui-changes-20250828191102",
+    "@reown/appkit-core-react-native": "0.0.0-fix-ui-changes-20250828191102",
+    "@reown/appkit-siwe-react-native": "0.0.0-fix-ui-changes-20250828191102",
+    "@reown/appkit-ui-react-native": "0.0.0-fix-ui-changes-20250828191102",
     "@walletconnect/universal-provider": "2.21.5",
     "valtio": "2.1.5"
   },

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

@@ -1,6 +1,6 @@
 import { useSnapshot } from 'valtio';
 import { useCallback, useEffect } from 'react';
-import { Card, Modal, ThemeProvider, useCustomDimensions } from '@reown/appkit-ui-react-native';
+import { Card, Modal, ThemeProvider } from '@reown/appkit-ui-react-native';
 import {
   ApiController,
   EventsController,
@@ -21,7 +21,6 @@ export function AppKit() {
   const { open } = useSnapshot(ModalController.state);
   const { themeMode, themeVariables } = useSnapshot(ThemeController.state);
   const { projectId } = useSnapshot(OptionsController.state);
-  const { maxHeight } = useCustomDimensions();
 
   const handleBackPress = () => {
     if (RouterController.state.history.length > 1) {
@@ -54,7 +53,7 @@ export function AppKit() {
         onBackdropPress={handleModalClose}
         testID="w3m-modal"
       >
-        <Card style={[styles.card, { maxHeight }]}>
+        <Card style={styles.card}>
           <Header />
           <AppKitRouter />
           <Snackbar />

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

@@ -35,9 +35,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
@@ -117,7 +119,7 @@ export function AppKitRouter() {
   }, [view]);
 
   return (
-    <Animated.View style={[getAnimatedStyle()]}>
+    <Animated.View style={[getAnimatedStyle(), { maxHeight }]}>
       <ViewComponent />
     </Animated.View>
   );

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

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

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

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

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

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

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

@@ -1,45 +1,16 @@
-import { CardSelectLoader, FlexView, useCustomDimensions } from '@reown/appkit-ui-react-native';
 import { memo } from 'react';
-import { type StyleProp, type ViewStyle, StyleSheet } 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"
-      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>
+    <WalletList data={[]} onItemPress={() => {}} isLoading={true} loadingItems={loadingItems} />
   );
 }
 
-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

@@ -33,7 +33,7 @@ export function WalletItem({
   return (
     <CardSelect
       imageSrc={imageSrc}
-      style={[containerStyle, { width: itemWidth }, style]}
+      style={[containerStyle, itemWidth ? { width: itemWidth } : undefined, style]}
       imageHeaders={imageHeaders}
       name={item?.name ?? 'Unknown'}
       onPress={() => onItemPress(item)}

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

@@ -0,0 +1,92 @@
+import { FlatList, StyleSheet } from 'react-native';
+import { WalletItem } from './WalletItem';
+import {
+  CardSelectHeight,
+  Spacing,
+  useCustomDimensions,
+  CardSelectLoader
+} 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_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 } = 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}
+      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 => item?.id}
+      getItemLayout={(_, index) => ({
+        length: ITEM_HEIGHT_WITH_GAP,
+        offset: ITEM_HEIGHT_WITH_GAP * index,
+        index
+      })}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  list: {
+    height: '100%'
+  },
+  contentContainer: {
+    paddingBottom: Spacing['4xl'],
+    paddingTop: Spacing['3xs'],
+    gap: Spacing['3xs'],
+    alignItems: 'center'
+  },
+  columnWrapperStyle: {
+    justifyContent: 'space-around'
+  },
+  itemContainer: {
+    width: '23%'
+  }
+});

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,25 @@ 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 loadingItems = 4 - ((100 + preloadedWallets) % 4);
 
   const combinedWallets = [
     ...(customWallets ?? []),
@@ -95,7 +83,7 @@ export function AllWalletsList({
   }, []);
 
   if (loading) {
-    return <Loading itemWidth={itemWidth} containerStyle={styles.itemContainer} />;
+    return <Loading loadingItems={20} />;
   }
 
   if (loadingError) {
@@ -114,34 +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={styles.itemContainer}
-        />
-      )}
-      style={{ maxHeight: maxHeight - headerHeight - Spacing['4xl'] }}
-      contentContainerStyle={[
-        styles.contentContainer,
-        { paddingHorizontal: padding + Spacing['2xs'] }
-      ]}
       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

@@ -4,12 +4,15 @@ import { StyleSheet } from 'react-native';
 export default StyleSheet.create({
   contentContainer: {
     paddingBottom: Spacing['4xl'],
-    paddingTop: Spacing['3xs']
+    paddingTop: Spacing['3xs'],
+    gap: Spacing['3xs'],
+    alignItems: 'center'
+  },
+  columnWrapperStyle: {
+    justifyContent: 'space-around'
   },
   itemContainer: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    margin: Spacing['4xs']
+    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,33 +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={styles.itemContainer}
-        />
-      )}
-      style={{ maxHeight: maxHeight - headerHeight - Spacing['2xl'] }}
-      contentContainerStyle={[
-        styles.contentContainer,
-        { paddingHorizontal: padding + Spacing['2xs'] }
-      ]}
-      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-connecting-mobile/index.tsx

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

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

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

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

@@ -1,5 +1,5 @@
 import { useSnapshot } from 'valtio';
-import { FlatList, View, Modal, Animated } from 'react-native';
+import { FlatList, View, Modal } from 'react-native';
 import {
   FlexView,
   IconBox,
@@ -13,7 +13,6 @@ 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;
@@ -48,32 +47,6 @@ 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 }} />;
@@ -81,7 +54,7 @@ export function SelectorModal({
 
   return (
     <Modal visible={visible} transparent animationType="slide" onRequestClose={onClose}>
-      <Animated.View style={[styles.modal, { opacity: backdropOpacity }]}>
+      <View style={styles.modal}>
         <FlexView style={[styles.container, { backgroundColor: Theme['bg-100'] }]}>
           <FlexView
             alignItems="center"
@@ -142,7 +115,7 @@ export function SelectorModal({
             }
           />
         </FlexView>
-      </Animated.View>
+      </View>
     </Modal>
   );
 }

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

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