@reown/appkit-react-native 0.0.0-fix-ui-changes-20250828211016 → 0.0.0-fix-ui-changes-20250829161224

package/lib/typescript/views/w3m-networks-view/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/w3m-networks-view/index.tsx"],"names":[],"mappings":"AAyBA,wBAAgB,YAAY,4CA2F3B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/w3m-networks-view/index.tsx"],"names":[],"mappings":"AAyBA,wBAAgB,YAAY,4CAyF3B"}

package/lib/typescript/views/w3m-onramp-loading-view/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/w3m-onramp-loading-view/index.tsx"],"names":[],"mappings":"AAsBA,wBAAgB,iBAAiB,4CA4IhC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/w3m-onramp-loading-view/index.tsx"],"names":[],"mappings":"AAsBA,wBAAgB,iBAAiB,4CAwIhC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reown/appkit-react-native",
-  "version": "0.0.0-fix-ui-changes-20250828211016",
+  "version": "0.0.0-fix-ui-changes-20250829161224",
   "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-ui-changes-20250828211016",
-    "@reown/appkit-core-react-native": "0.0.0-fix-ui-changes-20250828211016",
-    "@reown/appkit-siwe-react-native": "0.0.0-fix-ui-changes-20250828211016",
-    "@reown/appkit-ui-react-native": "0.0.0-fix-ui-changes-20250828211016",
+    "@reown/appkit-common-react-native": "0.0.0-fix-ui-changes-20250829161224",
+    "@reown/appkit-core-react-native": "0.0.0-fix-ui-changes-20250829161224",
+    "@reown/appkit-siwe-react-native": "0.0.0-fix-ui-changes-20250829161224",
+    "@reown/appkit-ui-react-native": "0.0.0-fix-ui-changes-20250829161224",
     "@walletconnect/universal-provider": "2.21.5",
     "valtio": "2.1.5"
   },

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

@@ -4,7 +4,8 @@ import {
   CardSelectHeight,
   Spacing,
   useCustomDimensions,
-  CardSelectLoader
+  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';
@@ -12,6 +13,7 @@ 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 {
@@ -63,7 +65,7 @@ export function WalletList({
       contentContainerStyle={[styles.contentContainer, { paddingHorizontal: padding }]}
       onEndReached={onEndReached}
       onEndReachedThreshold={onEndReachedThreshold}
-      keyExtractor={item => item?.id}
+      keyExtractor={(item, index) => item?.id ?? `item-${index}`}
       getItemLayout={(_, index) => ({
         length: ITEM_HEIGHT_WITH_GAP,
         offset: ITEM_HEIGHT_WITH_GAP * index,
@@ -87,6 +89,7 @@ const styles = StyleSheet.create({
     justifyContent: 'space-around'
   },
   itemContainer: {
-    width: '23%'
+    width: '23%',
+    minWidth: ITEM_WIDTH
   }
 });

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

@@ -24,8 +24,6 @@ export function AllWalletsList({ onItemPress }: AllWalletsListProps) {
   const [pageLoading, setPageLoading] = useState<boolean>(false);
   const { installed, featured, recommended, wallets } = useSnapshot(ApiController.state);
   const { customWallets } = useSnapshot(OptionsController.state) as OptionsControllerState;
-  const preloadedWallets = installed.length + featured.length + recommended.length;
-  const loadingItems = 4 - ((100 + preloadedWallets) % 4);
 
   const combinedWallets = [
     ...(customWallets ?? []),
@@ -40,6 +38,8 @@ export function AllWalletsList({ onItemPress }: AllWalletsListProps) {
     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[]) : [])

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/views/w3m-all-wallets-view/index.tsx

@@ -18,7 +18,7 @@ import { WcHelpersUtil } from '../../utils/HelpersUtil';
 export function AllWalletsView() {
   const Theme = useTheme();
   const [searchQuery, setSearchQuery] = useState<string>('');
-  const { maxWidth } = useCustomDimensions();
+  const { padding } = useCustomDimensions();
 
   const { debouncedCallback: onInputChange } = useDebounceCallback({ callback: setSearchQuery });
 
@@ -57,7 +57,11 @@ export function AllWalletsView() {
         alignItems="center"
         style={[
           styles.header,
-          { backgroundColor: Theme['bg-100'], shadowColor: Theme['bg-100'], width: maxWidth }
+          {
+            backgroundColor: Theme['bg-100'],
+            shadowColor: Theme['bg-100'],
+            marginHorizontal: padding
+          }
         ]}
       >
         <SearchBar

package/src/views/w3m-connecting-external-view/index.tsx

@@ -29,7 +29,7 @@ export function ConnectingExternalView() {
   const { data } = useSnapshot(RouterController.state);
   const { walletImages } = useSnapshot(AssetController.state);
   const { connect } = useInternalAppKit();
-  const { maxWidth: width } = useCustomDimensions();
+  const { padding } = useCustomDimensions();
   const [errorType, setErrorType] = useState<BodyErrorType>();
   const bodyMessage = getMessage({ walletName: data?.wallet?.name, errorType });
 
@@ -92,13 +92,13 @@ export function ConnectingExternalView() {
   }, [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}>
           <WalletImage
             size="xl"

package/src/views/w3m-connecting-social-view/index.tsx

@@ -19,9 +19,10 @@ import { ConstantsUtil, StringUtil } from '@reown/appkit-common-react-native';
 
 import { useInternalAppKit } from '../../AppKitContext';
 import styles from './styles';
+import { ScrollView } from 'react-native';
 
 export function ConnectingSocialView() {
-  const { maxWidth: width } = useCustomDimensions();
+  const { padding } = useCustomDimensions();
   const { connect } = useInternalAppKit();
   const { data } = useSnapshot(RouterController.state);
   const { wcUri } = useSnapshot(WcController.state);
@@ -74,32 +75,29 @@ export function ConnectingSocialView() {
   }, [wcUri, onConnect]);
 
   return (
-    <FlexView
-      alignItems="center"
-      alignSelf="center"
-      padding={['2xl', 'l', '3xl', 'l']}
-      style={{ width }}
-    >
-      <LoadingThumbnail paused={!!error}>
-        <Logo logo={data?.socialProvider ?? 'more'} height={72} width={72} />
-        {error ? (
-          <IconBox
-            icon={'close'}
-            border
-            background
-            backgroundColor="icon-box-bg-error-100"
-            size="sm"
-            iconColor="error-100"
-            style={styles.errorIcon}
-          />
-        ) : null}
-      </LoadingThumbnail>
-      <Text style={styles.continueText} variant="paragraph-500">
-        Continue with {StringUtil.capitalize(data?.socialProvider ?? 'Login')}
-      </Text>
-      <Text variant="small-400" color="fg-200">
-        Continue in your browser
-      </Text>
-    </FlexView>
+    <ScrollView bounces={false} fadingEdgeLength={20} style={{ paddingHorizontal: padding }}>
+      <FlexView alignItems="center" alignSelf="center" padding={['2xl', 'l', '2xl', 'l']}>
+        <LoadingThumbnail paused={!!error}>
+          <Logo logo={data?.socialProvider ?? 'more'} height={72} width={72} />
+          {error ? (
+            <IconBox
+              icon={'close'}
+              border
+              background
+              backgroundColor="icon-box-bg-error-100"
+              size="sm"
+              iconColor="error-100"
+              style={styles.errorIcon}
+            />
+          ) : null}
+        </LoadingThumbnail>
+        <Text style={styles.continueText} variant="paragraph-500">
+          Continue with {StringUtil.capitalize(data?.socialProvider ?? 'Login')}
+        </Text>
+        <Text variant="small-400" color="fg-200">
+          Continue in your browser
+        </Text>
+      </FlexView>
+    </ScrollView>
   );
 }

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

@@ -1,4 +1,4 @@
-import { ScrollView, View } from 'react-native';
+import { ScrollView, useWindowDimensions, View } from 'react-native';
 import {
   CardSelect,
   CardSelectWidth,
@@ -24,12 +24,14 @@ import { useInternalAppKit } from '../../AppKitContext';
 import { useSnapshot } from 'valtio';
 
 export function NetworksView() {
+  const { height, width } = useWindowDimensions();
+  const windowSize = Math.min(height, width);
   const { networks, isConnected } = useSnapshot(ConnectionsController.state);
   const { networkImages } = useSnapshot(AssetController.state);
   const imageHeaders = ApiController._getApiHeaders();
-  const { maxWidth: width, padding } = useCustomDimensions();
+  const { padding } = useCustomDimensions();
   const numColumns = 4;
-  const usableWidth = width - Spacing.xs * 2 - Spacing['4xs'];
+  const usableWidth = windowSize - Spacing.xs * 2 - Spacing['4xs'];
   const itemWidth = Math.abs(Math.trunc(usableWidth / numColumns));
   const itemGap = Math.abs(
     Math.trunc((usableWidth - numColumns * CardSelectWidth) / numColumns) / 2
@@ -83,11 +85,7 @@ export function NetworksView() {
 
   return (
     <>
-      <ScrollView
-        bounces={false}
-        fadingEdgeLength={20}
-        style={{ paddingHorizontal: padding, marginBottom: Spacing.xl }}
-      >
+      <ScrollView bounces={false} fadingEdgeLength={20} style={{ paddingHorizontal: padding }}>
         <FlexView flexDirection="row" flexWrap="wrap" padding={['xs', 'xs', '4xl', 'xs']}>
           {networksTemplate()}
         </FlexView>

package/src/views/w3m-onramp-loading-view/index.tsx

@@ -21,7 +21,7 @@ import styles from './styles';
 import { StringUtil } from '@reown/appkit-common-react-native';
 
 export function OnRampLoadingView() {
-  const { maxWidth: width } = useCustomDimensions();
+  const { padding } = useCustomDimensions();
   const { error } = useSnapshot(OnRampController.state);
   const providerName = StringUtil.capitalize(
     OnRampController.state.selectedQuote?.serviceProvider.toLowerCase()
@@ -111,14 +111,10 @@ export function OnRampLoadingView() {
       bounces={false}
       fadingEdgeLength={20}
       contentContainerStyle={styles.container}
+      style={{ paddingHorizontal: padding }}
       testID="onramp-loading-widget-view"
     >
-      <FlexView
-        alignItems="center"
-        alignSelf="center"
-        padding={['2xl', 'l', '0', 'l']}
-        style={{ width }}
-      >
+      <FlexView alignItems="center" alignSelf="center" padding={['2xl', 'l', '0', 'l']}>
         <IconLink
           icon="chevronLeft"
           size="md"

package/src/views/w3m-onramp-loading-view/styles.ts

@@ -3,7 +3,7 @@ import { Spacing } from '@reown/appkit-ui-react-native';
 
 export default StyleSheet.create({
   container: {
-    paddingBottom: Spacing['3xl']
+    paddingBottom: Spacing['xl']
   },
   backButton: {
     alignSelf: 'flex-start'