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

package/src/views/w3m-account-default-view/index.tsx

@@ -1,6 +1,6 @@
 import { useSnapshot } from 'valtio';
 import { useState } from 'react';
-import { Linking } from 'react-native';
+import { Linking, ScrollView } from 'react-native';
 import {
   ApiController,
   CoreHelperUtil,
@@ -16,6 +16,7 @@ import {
   AssetController,
   AssetUtil
 } from '@reown/appkit-core-react-native';
+// import { ConstantsUtil as CommonConstantsUtil } from '@reown/appkit-common-react-native';
 import {
   Avatar,
   Button,
@@ -25,7 +26,7 @@ import {
   UiUtil,
   Spacing,
   ListItem,
-  ScrollView
+  useCustomDimensions
 } from '@reown/appkit-ui-react-native';
 
 import { useInternalAppKit } from '../../AppKitContext';
@@ -76,6 +77,8 @@ export function AccountDefaultView() {
     activeNamespace &&
     ConstantsUtil.ONRAMP_SUPPORTED_NAMESPACES.includes(activeNamespace);
 
+  const { padding } = useCustomDimensions();
+
   async function onDisconnect() {
     setDisconnecting(true);
     await disconnect(ConnectionsController.state.activeNamespace);
@@ -189,8 +192,8 @@ export function AccountDefaultView() {
         onPress={ModalController.close}
         testID="header-close"
       />
-      <ScrollView>
-        <FlexView alignItems="center" padding={['3xl', 's', '2xl', 's']}>
+      <ScrollView bounces={false} fadingEdgeLength={20} style={{ paddingHorizontal: padding }}>
+        <FlexView alignItems="center" padding={['3xl', 's', '3xl', 's']}>
           <Avatar imageSrc={identity?.avatar} address={account ?? ''} />
           <FlexView flexDirection="row" alignItems="center" margin={['s', '0', '0', '0']}>
             <Text variant="medium-title-600">

package/src/views/w3m-account-view/index.tsx

@@ -1,5 +1,6 @@
 import { useSnapshot } from 'valtio';
 import { useEffect } from 'react';
+import { ScrollView } from 'react-native';
 import {
   AccountPill,
   FlexView,
@@ -7,8 +8,7 @@ import {
   IconLink,
   NetworkButton,
   useTheme,
-  useCustomDimensions,
-  ScrollView
+  useCustomDimensions
 } from '@reown/appkit-ui-react-native';
 import {
   ApiController,
@@ -51,7 +51,7 @@ export function AccountView() {
 
   return (
     <ScrollView
-      disablePadding
+      bounces={false}
       contentContainerStyle={[
         styles.contentContainer,
         {

package/src/views/w3m-all-wallets-view/index.tsx

@@ -5,7 +5,6 @@ import {
   FlexView,
   IconLink,
   SearchBar,
-  Spacing,
   useTheme,
   useCustomDimensions
 } from '@reown/appkit-ui-react-native';
@@ -15,24 +14,14 @@ import { useDebounceCallback } from '../../hooks/useDebounceCallback';
 import { AllWalletsList } from '../../partials/w3m-all-wallets-list';
 import { AllWalletsSearch } from '../../partials/w3m-all-wallets-search';
 import { WcHelpersUtil } from '../../utils/HelpersUtil';
-import type { LayoutChangeEvent } from 'react-native';
 
 export function AllWalletsView() {
   const Theme = useTheme();
   const [searchQuery, setSearchQuery] = useState<string>('');
   const { maxWidth } = useCustomDimensions();
-  const [headerHeight, setHeaderHeight] = useState<number>(0);
-  const numColumns = 4;
-  const usableWidth = maxWidth - Spacing['s'] * 2;
-  const itemWidth = Math.abs(Math.trunc(usableWidth / numColumns));
 
   const { debouncedCallback: onInputChange } = useDebounceCallback({ callback: setSearchQuery });
 
-  const onHeaderLayout = (event: LayoutChangeEvent) => {
-    const { height } = event.nativeEvent.layout;
-    setHeaderHeight(height);
-  };
-
   const onWalletPress = (wallet: WcWallet) => {
     const isExternal = WcHelpersUtil.isExternalWallet(wallet);
     if (isExternal) {
@@ -65,7 +54,6 @@ export function AllWalletsView() {
       <FlexView
         padding={['s', 'l', 'xs', 'l']}
         flexDirection="row"
-        onLayout={onHeaderLayout}
         alignItems="center"
         style={[
           styles.header,
@@ -93,25 +81,10 @@ export function AllWalletsView() {
 
   const listTemplate = () => {
     if (searchQuery) {
-      return (
-        <AllWalletsSearch
-          columns={numColumns}
-          itemWidth={itemWidth}
-          searchQuery={searchQuery}
-          onItemPress={onWalletPress}
-          headerHeight={headerHeight}
-        />
-      );
+      return <AllWalletsSearch searchQuery={searchQuery} onItemPress={onWalletPress} />;
     }
 
-    return (
-      <AllWalletsList
-        columns={numColumns}
-        itemWidth={itemWidth}
-        onItemPress={onWalletPress}
-        headerHeight={headerHeight}
-      />
-    );
+    return <AllWalletsList onItemPress={onWalletPress} />;
   };
 
   return (

package/src/views/w3m-connect-socials-view/index.tsx

@@ -1,16 +1,18 @@
 import { useSnapshot } from 'valtio';
+import { ScrollView } from 'react-native';
 import { StringUtil, type SocialProvider } from '@reown/appkit-common-react-native';
 import {
   EventsController,
   OptionsController,
   RouterController
 } from '@reown/appkit-core-react-native';
-import { FlexView, ScrollView, ListSocial, Text } from '@reown/appkit-ui-react-native';
+import { FlexView, ListSocial, Text, useCustomDimensions } from '@reown/appkit-ui-react-native';
 
 import styles from './styles';
 
 export function ConnectSocialsView() {
   const { features } = useSnapshot(OptionsController.state);
+  const { padding } = useCustomDimensions();
   const socialProviders = (features?.socials ?? []) as SocialProvider[];
 
   const onItemPress = (provider: SocialProvider) => {
@@ -24,7 +26,7 @@ export function ConnectSocialsView() {
   };
 
   return (
-    <ScrollView>
+    <ScrollView style={{ paddingHorizontal: padding }} bounces={false}>
       <FlexView padding={['xs', 'm', '2xl', 'm']}>
         {socialProviders.map(provider => (
           <ListSocial

package/src/views/w3m-connect-view/index.tsx

@@ -1,5 +1,5 @@
 import { useSnapshot } from 'valtio';
-import { View } from 'react-native';
+import { ScrollView, View } from 'react-native';
 import {
   ApiController,
   EventUtil,
@@ -14,7 +14,7 @@ import {
   ListItem,
   Separator,
   Text,
-  ScrollView
+  useCustomDimensions
 } from '@reown/appkit-ui-react-native';
 import { Placeholder } from '../../partials/w3m-placeholder';
 import { CustomWalletList } from './components/custom-wallet-list';
@@ -28,6 +28,7 @@ import { WcHelpersUtil } from '../../utils/HelpersUtil';
 export function ConnectView() {
   const { prefetchError } = useSnapshot(ApiController.state);
   const { features } = useSnapshot(OptionsController.state);
+  const { padding } = useCustomDimensions();
 
   const isSocialEnabled = features?.socials && features?.socials.length > 0;
   const showConnectWalletsButton = isSocialEnabled && !features?.showWallets;
@@ -60,8 +61,8 @@ export function ConnectView() {
   };
 
   return (
-    <ScrollView>
-      <FlexView padding={['xs', '0', 'xl', '0']}>
+    <ScrollView style={{ paddingHorizontal: padding }} bounces={false}>
+      <FlexView padding={['xs', '0', 's', '0']}>
         {isSocialEnabled ? (
           <>
             <SocialLoginList options={features?.socials} />
@@ -69,7 +70,7 @@ export function ConnectView() {
           </>
         ) : null}
 
-        <FlexView padding={['0', 's', '0', 's']}>
+        <FlexView padding={['0', 's', 'xs', 's']}>
           {showConnectWalletsButton ? (
             <ListItem contentStyle={styles.connectWalletButton} onPress={onViewAllPress}>
               <Icon name="wallet" size="lg" />

package/src/views/w3m-connecting-external-view/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,
@@ -16,8 +16,7 @@ import {
   IconBox,
   LoadingThumbnail,
   WalletImage,
-  useCustomDimensions,
-  ScrollView
+  useCustomDimensions
 } from '@reown/appkit-ui-react-native';
 
 import { ConnectingBody, getMessage, type BodyErrorType } from '../../partials/w3m-connecting-body';
@@ -93,7 +92,7 @@ export function ConnectingExternalView() {
   }, [onConnect]);
 
   return (
-    <ScrollView contentContainerStyle={styles.container}>
+    <ScrollView bounces={false} fadingEdgeLength={20} contentContainerStyle={styles.container}>
       <FlexView
         alignItems="center"
         alignSelf="center"

package/src/views/w3m-get-wallet-view/index.tsx

@@ -1,5 +1,5 @@
-import { Linking, Platform } from 'react-native';
-import { FlexView, ListWallet, ScrollView } from '@reown/appkit-ui-react-native';
+import { Linking, Platform, ScrollView } from 'react-native';
+import { FlexView, ListWallet, useCustomDimensions } from '@reown/appkit-ui-react-native';
 import { ApiController, AssetController, AssetUtil } from '@reown/appkit-core-react-native';
 import { type WcWallet } from '@reown/appkit-common-react-native';
 import styles from './styles';
@@ -7,6 +7,7 @@ import { useSnapshot } from 'valtio';
 
 export function GetWalletView() {
   const { walletImages } = useSnapshot(AssetController.state);
+  const { padding } = useCustomDimensions();
   const imageHeaders = ApiController._getApiHeaders();
 
   const onWalletPress = (wallet: WcWallet) => {
@@ -31,8 +32,13 @@ export function GetWalletView() {
   };
 
   return (
-    <ScrollView testID="get-a-wallet-view">
-      <FlexView padding={['s', 's', 'xl', 's']}>
+    <ScrollView
+      bounces={false}
+      style={{ paddingHorizontal: padding }}
+      fadingEdgeLength={20}
+      testID="get-a-wallet-view"
+    >
+      <FlexView padding={['s', 's', '3xl', 's']}>
         {listTemplate()}
         <ListWallet
           name="Explore all"

package/src/views/w3m-networks-view/index.tsx

@@ -1,5 +1,4 @@
-import { useSnapshot } from 'valtio';
-import { View } from 'react-native';
+import { ScrollView, View } from 'react-native';
 import {
   CardSelect,
   CardSelectWidth,
@@ -8,8 +7,7 @@ import {
   Separator,
   Spacing,
   Text,
-  useCustomDimensions,
-  ScrollView
+  useCustomDimensions
 } from '@reown/appkit-ui-react-native';
 import {
   ApiController,
@@ -23,12 +21,13 @@ import {
 import type { AppKitNetwork } from '@reown/appkit-common-react-native';
 import styles from './styles';
 import { useInternalAppKit } from '../../AppKitContext';
+import { useSnapshot } from 'valtio';
 
 export function NetworksView() {
   const { networks, isConnected } = useSnapshot(ConnectionsController.state);
   const { networkImages } = useSnapshot(AssetController.state);
   const imageHeaders = ApiController._getApiHeaders();
-  const { maxWidth: width } = useCustomDimensions();
+  const { maxWidth: width, padding } = useCustomDimensions();
   const numColumns = 4;
   const usableWidth = width - Spacing.xs * 2 - Spacing['4xs'];
   const itemWidth = Math.abs(Math.trunc(usableWidth / numColumns));
@@ -84,31 +83,35 @@ export function NetworksView() {
 
   return (
     <>
-      <ScrollView>
+      <ScrollView
+        bounces={false}
+        fadingEdgeLength={20}
+        style={{ paddingHorizontal: padding, marginBottom: Spacing.xl }}
+      >
         <FlexView flexDirection="row" flexWrap="wrap" padding={['xs', 'xs', '4xl', 'xs']}>
           {networksTemplate()}
         </FlexView>
-        <Separator />
-        <FlexView
-          padding={['s', 's', '2xl', 's']}
-          alignItems="center"
-          alignSelf="center"
-          style={{ width }}
-        >
-          <Text variant="small-400" color="fg-300" center>
-            Your connected wallet may not support some of the networks available for this dApp
-          </Text>
-          <Link
-            size="sm"
-            iconLeft="helpCircle"
-            onPress={onHelpPress}
-            style={styles.helpButton}
-            testID="what-is-a-network-button"
-          >
-            What is a network?
-          </Link>
-        </FlexView>
       </ScrollView>
+      <Separator />
+      <FlexView
+        padding={['s', 's', '3xl', 's']}
+        alignItems="center"
+        alignSelf="center"
+        style={{ width }}
+      >
+        <Text variant="small-400" color="fg-300" center>
+          Your connected wallet may not support some of the networks available for this dApp
+        </Text>
+        <Link
+          size="sm"
+          iconLeft="helpCircle"
+          onPress={onHelpPress}
+          style={styles.helpButton}
+          testID="what-is-a-network-button"
+        >
+          What is a network?
+        </Link>
+      </FlexView>
     </>
   );
 }