@reown/appkit-react-native 0.0.0-fix-ui-changes-20250828200500 → 0.0.0-fix-ui-changes-20250829144656

package/lib/typescript/views/w3m-swap-view/components/select-token-modal/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/views/w3m-swap-view/components/select-token-modal/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAML,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAsBtB,OAAO,EAAE,KAAK,eAAe,EAA6B,MAAM,mCAAmC,CAAC;AAMpG,UAAU,KAAK;IACb,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,wBAAgB,oBAAoB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,KAAK,2CAwI5E"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/views/w3m-swap-view/components/select-token-modal/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAML,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAsBtB,OAAO,EAAE,KAAK,eAAe,EAA6B,MAAM,mCAAmC,CAAC;AAMpG,UAAU,KAAK;IACb,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,wBAAgB,oBAAoB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,KAAK,2CAyI5E"}

package/lib/typescript/views/w3m-swap-view/components/select-token-modal/styles.d.ts

@@ -5,9 +5,11 @@ declare const _default: {
         borderBottomLeftRadius: number;
         borderBottomRightRadius: number;
         overflow: "hidden";
+        position: "absolute";
+        bottom: number;
+        left: number;
+        right: number;
         margin: number;
-        flex: number;
-        justifyContent: "flex-end";
     };
     title: {
         paddingTop: number;

package/lib/typescript/views/w3m-swap-view/components/select-token-modal/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../../src/views/w3m-swap-view/components/select-token-modal/styles.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA,wBAoCG"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../../src/views/w3m-swap-view/components/select-token-modal/styles.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA,wBAsCG"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/w3m-swap-view/index.tsx"],"names":[],"mappings":"AA0BA,wBAAgB,QAAQ,4CA2LvB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/w3m-swap-view/index.tsx"],"names":[],"mappings":"AA0BA,wBAAgB,QAAQ,4CA8LvB"}

package/lib/typescript/views/w3m-swap-view/styles.d.ts

@@ -17,9 +17,6 @@ declare const _default: {
         marginTop: number;
         width: "100%";
     };
-    withKeyboard: {
-        height: "100%";
-    };
 };
 export default _default;
 //# sourceMappingURL=styles.d.ts.map

package/lib/typescript/views/w3m-swap-view/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/views/w3m-swap-view/styles.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAGA,wBAuBG"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/views/w3m-swap-view/styles.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAGA,wBAmBG"}

package/lib/typescript/views/w3m-wallet-send-view/styles.d.ts

@@ -15,9 +15,6 @@ declare const _default: {
     addressContainer: {
         width: "100%";
     };
-    withKeyboard: {
-        height: "80%";
-    };
 };
 export default _default;
 //# sourceMappingURL=styles.d.ts.map

package/lib/typescript/views/w3m-wallet-send-view/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/views/w3m-wallet-send-view/styles.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAGA,wBAoBG"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/views/w3m-wallet-send-view/styles.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAGA,wBAiBG"}

package/package.json

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

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

@@ -63,7 +63,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,

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

@@ -24,7 +24,8 @@ 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 preloadedWallets =
+    installed.length + featured.length + recommended.length + (customWallets?.length ?? 0);
   const loadingItems = 4 - ((100 + preloadedWallets) % 4);
 
   const combinedWallets = [

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'

package/src/views/w3m-swap-preview-view/styles.ts

@@ -14,8 +14,5 @@ export default StyleSheet.create({
   sendButton: {
     marginLeft: Spacing.s,
     flex: 3
-  },
-  withKeyboard: {
-    height: '100%'
   }
 });

package/src/views/w3m-swap-view/components/select-token-modal/index.tsx

@@ -44,7 +44,7 @@ interface Props {
 }
 
 export function SwapSelectTokenModal({ onClose, type, style, visible }: Props) {
-  const { padding } = useCustomDimensions();
+  const { padding, maxHeight } = useCustomDimensions();
   const Theme = useTheme();
   const { activeNetwork } = useSnapshot(ConnectionsController.state);
   const { networkImages } = useSnapshot(AssetController.state);
@@ -88,7 +88,8 @@ export function SwapSelectTokenModal({ onClose, type, style, visible }: Props) {
           styles.container,
           {
             paddingHorizontal: padding,
-            backgroundColor: Theme['bg-100']
+            backgroundColor: Theme['bg-100'],
+            height: maxHeight
           },
           style
         ]}

package/src/views/w3m-swap-view/components/select-token-modal/styles.ts

@@ -8,9 +8,11 @@ export default StyleSheet.create({
     borderBottomLeftRadius: 0,
     borderBottomRightRadius: 0,
     overflow: 'hidden',
-    margin: 0,
-    flex: 1,
-    justifyContent: 'flex-end'
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    margin: 0
   },
   title: {
     paddingTop: Spacing['2xs']

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

@@ -39,7 +39,7 @@ export function SwapView() {
     inputError
   } = useSnapshot(SwapController.state);
   const Theme = useTheme();
-  const { padding } = useCustomDimensions();
+  const { padding, maxHeight } = useCustomDimensions();
   const { keyboardShown } = useKeyboard();
   const [showModal, setShowModal] = useState<SwapInputTarget | undefined>();
   const showDetails = !!sourceToken && !!toToken && !inputError;
@@ -157,7 +157,10 @@ export function SwapView() {
   return (
     <>
       <ScrollView
-        style={[{ paddingHorizontal: padding }, keyboardShown && styles.withKeyboard]}
+        style={[
+          { paddingHorizontal: padding },
+          keyboardShown && !showModal && { height: maxHeight }
+        ]}
         bounces={false}
         keyboardShouldPersistTaps="always"
       >

package/src/views/w3m-swap-view/styles.ts

@@ -19,9 +19,5 @@ export default StyleSheet.create({
   actionButton: {
     marginTop: Spacing.xs,
     width: '100%'
-  },
-
-  withKeyboard: {
-    height: '100%'
   }
 });

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

@@ -14,7 +14,7 @@ import { SendInputAddress } from '../../partials/w3m-send-input-address';
 import styles from './styles';
 
 export function WalletSendView() {
-  const { padding } = useCustomDimensions();
+  const { padding, maxHeight } = useCustomDimensions();
   const { keyboardShown } = useKeyboard();
   const [isBalanceLoading, setBalanceLoading] = useState(false);
   const { token, sendTokenAmount, receiverAddress, receiverProfileName, loading } = useSnapshot(
@@ -80,7 +80,7 @@ export function WalletSendView() {
 
   return (
     <ScrollView
-      style={[{ paddingHorizontal: padding }, keyboardShown && styles.withKeyboard]}
+      style={[{ paddingHorizontal: padding }, keyboardShown && { height: maxHeight }]}
       bounces={false}
       keyboardShouldPersistTaps="always"
     >

package/src/views/w3m-wallet-send-view/styles.ts

@@ -17,8 +17,5 @@ export default StyleSheet.create({
   },
   addressContainer: {
     width: '100%'
-  },
-  withKeyboard: {
-    height: '80%'
   }
 });