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

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

@@ -1,5 +1,5 @@
 import { useSnapshot } from 'valtio';
-import { ScrollView, View } from 'react-native';
+import { View } from 'react-native';
 import {
   ApiController,
   EventUtil,
@@ -14,7 +14,7 @@ import {
   ListItem,
   Separator,
   Text,
-  useCustomDimensions
+  ScrollView
 } from '@reown/appkit-ui-react-native';
 import { Placeholder } from '../../partials/w3m-placeholder';
 import { CustomWalletList } from './components/custom-wallet-list';
@@ -28,7 +28,6 @@ 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;
@@ -61,8 +60,8 @@ export function ConnectView() {
   };
 
   return (
-    <ScrollView style={{ paddingHorizontal: padding }} bounces={false}>
-      <FlexView padding={['xs', '0', '2xl', '0']}>
+    <ScrollView>
+      <FlexView padding={['xs', '0', 'xl', '0']}>
         {isSocialEnabled ? (
           <>
             <SocialLoginList options={features?.socials} />
@@ -70,7 +69,7 @@ export function ConnectView() {
           </>
         ) : null}
 
-        <FlexView padding={['0', 's', 'xs', 's']}>
+        <FlexView padding={['0', 's', '0', '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, ScrollView } from 'react-native';
+import { Platform } from 'react-native';
 import {
   RouterController,
   ApiController,
@@ -16,7 +16,8 @@ import {
   IconBox,
   LoadingThumbnail,
   WalletImage,
-  useCustomDimensions
+  useCustomDimensions,
+  ScrollView
 } from '@reown/appkit-ui-react-native';
 
 import { ConnectingBody, getMessage, type BodyErrorType } from '../../partials/w3m-connecting-body';
@@ -92,7 +93,7 @@ export function ConnectingExternalView() {
   }, [onConnect]);
 
   return (
-    <ScrollView bounces={false} fadingEdgeLength={20} contentContainerStyle={styles.container}>
+    <ScrollView contentContainerStyle={styles.container}>
       <FlexView
         alignItems="center"
         alignSelf="center"

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

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

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

@@ -1,4 +1,5 @@
-import { ScrollView, View } from 'react-native';
+import { useSnapshot } from 'valtio';
+import { View } from 'react-native';
 import {
   CardSelect,
   CardSelectWidth,
@@ -7,7 +8,8 @@ import {
   Separator,
   Spacing,
   Text,
-  useCustomDimensions
+  useCustomDimensions,
+  ScrollView
 } from '@reown/appkit-ui-react-native';
 import {
   ApiController,
@@ -21,13 +23,12 @@ 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, padding } = useCustomDimensions();
+  const { maxWidth: width } = useCustomDimensions();
   const numColumns = 4;
   const usableWidth = width - Spacing.xs * 2 - Spacing['4xs'];
   const itemWidth = Math.abs(Math.trunc(usableWidth / numColumns));
@@ -83,35 +84,31 @@ export function NetworksView() {
 
   return (
     <>
-      <ScrollView
-        bounces={false}
-        fadingEdgeLength={20}
-        style={{ paddingHorizontal: padding, marginBottom: Spacing.xl }}
-      >
+      <ScrollView>
         <FlexView flexDirection="row" flexWrap="wrap" padding={['xs', 'xs', '4xl', 'xs']}>
           {networksTemplate()}
         </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"
+        <Separator />
+        <FlexView
+          padding={['s', 's', '2xl', 's']}
+          alignItems="center"
+          alignSelf="center"
+          style={{ width }}
         >
-          What is a network?
-        </Link>
-      </FlexView>
+          <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>
     </>
   );
 }

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

@@ -1,6 +1,6 @@
 import { useCallback, useEffect } from 'react';
 import { useSnapshot } from 'valtio';
-import { Linking, ScrollView } from 'react-native';
+import { Linking } from 'react-native';
 import {
   RouterController,
   OnRampController,
@@ -13,7 +13,8 @@ import {
   IconLink,
   Button,
   Text,
-  useCustomDimensions
+  useCustomDimensions,
+  ScrollView
 } from '@reown/appkit-ui-react-native';
 
 import { ConnectingBody } from '../../partials/w3m-connecting-body';
@@ -107,12 +108,7 @@ export function OnRampLoadingView() {
   }, [onConnect]);
 
   return (
-    <ScrollView
-      bounces={false}
-      fadingEdgeLength={20}
-      contentContainerStyle={styles.container}
-      testID="onramp-loading-widget-view"
-    >
+    <ScrollView contentContainerStyle={styles.container} testID="onramp-loading-widget-view">
       <FlexView
         alignItems="center"
         alignSelf="center"

package/src/views/w3m-onramp-view/components/LoadingView.tsx

@@ -1,5 +1,5 @@
-import { FlexView, Text, Shimmer } from '@reown/appkit-ui-react-native';
-import { Dimensions, ScrollView } from 'react-native';
+import { FlexView, Text, Shimmer, ScrollView } from '@reown/appkit-ui-react-native';
+import { Dimensions } from 'react-native';
 import { Header } from './Header';
 import styles from '../styles';
 
@@ -9,7 +9,7 @@ export function LoadingView() {
   return (
     <>
       <Header onSettingsPress={() => {}} />
-      <ScrollView bounces={false} testID="onramp-loading-view">
+      <ScrollView testID="onramp-loading-view">
         <FlexView padding={['s', 'l', '4xl', 'l']}>
           <FlexView flexDirection="row" alignItems="center" justifyContent="space-between">
             <Text variant="small-400" color="fg-150">

package/src/views/w3m-onramp-view/components/SelectPaymentModal.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable valtio/state-snapshot-rule */
 import { useSnapshot } from 'valtio';
 import { useRef, useState, useMemo, useEffect } from 'react';
-import { FlatList, StyleSheet, View, Modal } from 'react-native';
+import { FlatList, StyleSheet, View, Modal, Animated } from 'react-native';
 import {
   FlexView,
   IconLink,
@@ -9,7 +9,8 @@ import {
   Text,
   useTheme,
   Separator,
-  BorderRadius
+  BorderRadius,
+  useCustomDimensions
 } from '@reown/appkit-ui-react-native';
 import { OnRampController } from '@reown/appkit-core-react-native';
 import { Quote, ITEM_HEIGHT as QUOTE_ITEM_HEIGHT } from './Quote';
@@ -27,6 +28,7 @@ const SEPARATOR_HEIGHT = Spacing.s;
 export function SelectPaymentModal({ title, visible, onClose }: SelectPaymentModalProps) {
   const Theme = useTheme();
   const { selectedQuote, quotes, selectedPaymentMethod } = useSnapshot(OnRampController.state);
+  const { padding } = useCustomDimensions();
 
   const paymentMethodsRef = useRef<FlatList>(null);
   const [paymentMethods, setPaymentMethods] = useState<OnRampPaymentMethod[]>(
@@ -116,6 +118,33 @@ export function SelectPaymentModal({ title, visible, onClose }: SelectPaymentMod
     );
   };
 
+  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]);
+
   useEffect(() => {
     if (visible && OnRampController.state.selectedPaymentMethod) {
       const methods = [
@@ -132,7 +161,7 @@ export function SelectPaymentModal({ title, visible, onClose }: SelectPaymentMod
 
   return (
     <Modal visible={visible} transparent animationType="slide" onRequestClose={onClose}>
-      <View style={styles.modalContent}>
+      <Animated.View style={[styles.modalContent, { opacity: backdropOpacity }]}>
         <FlexView style={[styles.container, { backgroundColor: Theme['bg-100'] }]}>
           <FlexView
             alignItems="center"
@@ -144,10 +173,10 @@ export function SelectPaymentModal({ title, visible, onClose }: SelectPaymentMod
             {!!title && <Text variant="paragraph-600">{title}</Text>}
             <View style={styles.iconPlaceholder} />
           </FlexView>
-          <Text variant="small-500" color="fg-150" style={styles.subtitle}>
-            Pay with
-          </Text>
-          <FlexView>
+          <FlexView style={{ paddingHorizontal: padding }}>
+            <Text variant="small-500" color="fg-150" style={styles.subtitle}>
+              Pay with
+            </Text>
             <FlatList
               data={availablePaymentMethods}
               renderItem={renderPaymentMethod}
@@ -161,7 +190,11 @@ export function SelectPaymentModal({ title, visible, onClose }: SelectPaymentMod
             />
           </FlexView>
           <Separator style={styles.separator} color="gray-glass-010" />
-          <Text variant="small-500" color="fg-150" style={styles.subtitle}>
+          <Text
+            variant="small-500"
+            color="fg-150"
+            style={[styles.subtitle, { paddingHorizontal: padding }]}
+          >
             Providers
           </Text>
           <FlatList
@@ -169,6 +202,7 @@ export function SelectPaymentModal({ title, visible, onClose }: SelectPaymentMod
             bounces={false}
             renderItem={renderQuote}
             extraData={selectedPaymentMethod}
+            style={{ paddingHorizontal: padding }}
             contentContainerStyle={styles.listContent}
             ItemSeparatorComponent={renderSeparator}
             fadingEdgeLength={20}
@@ -180,7 +214,7 @@ export function SelectPaymentModal({ title, visible, onClose }: SelectPaymentMod
             })}
           />
         </FlexView>
-      </View>
+      </Animated.View>
     </Modal>
   );
 }
@@ -188,7 +222,8 @@ const styles = StyleSheet.create({
   modalContent: {
     margin: 0,
     flex: 1,
-    justifyContent: 'flex-end'
+    justifyContent: 'flex-end',
+    backgroundColor: 'rgba(0, 0, 0, 0.5)'
   },
   header: {
     marginBottom: Spacing.l,
@@ -196,7 +231,7 @@ const styles = StyleSheet.create({
     paddingTop: Spacing.m
   },
   container: {
-    height: '80%',
+    height: '90%',
     borderTopLeftRadius: BorderRadius.l,
     borderTopRightRadius: BorderRadius.l
   },

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

@@ -1,6 +1,5 @@
 import { useSnapshot } from 'valtio';
 import { memo, useCallback, useEffect, useState } from 'react';
-import { ScrollView } from 'react-native';
 import {
   OnRampController,
   ThemeController,
@@ -18,7 +17,8 @@ import {
   Image,
   Text,
   TokenButton,
-  useTheme
+  useTheme,
+  ScrollView
 } from '@reown/appkit-ui-react-native';
 import {
   NumberUtil,
@@ -176,7 +176,7 @@ export function OnRampView() {
   return (
     <>
       <Header onSettingsPress={() => RouterController.push('OnRampSettings')} />
-      <ScrollView bounces={false}>
+      <ScrollView>
         <FlexView padding={['s', 'l', '4xl', 'l']}>
           <FlexView flexDirection="row" alignItems="center" justifyContent="space-between">
             <Text variant="small-400" color="fg-150">
@@ -245,25 +245,25 @@ export function OnRampView() {
               Continue
             </Button>
           </FlexView>
-          <SelectPaymentModal
-            visible={isPaymentMethodModalVisible}
-            onClose={onModalClose}
-            title="Payment"
-          />
-          <SelectorModal
-            selectedItem={purchaseCurrency}
-            visible={isCurrencyModalVisible}
-            onClose={onModalClose}
-            items={getPurchaseCurrencies(searchValue, true)}
-            onSearch={handleSearch}
-            renderItem={renderCurrencyItem}
-            keyExtractor={item => item.currencyCode}
-            title="Select token"
-            itemHeight={CURRENCY_ITEM_HEIGHT}
-            showNetwork
-          />
         </FlexView>
       </ScrollView>
+      <SelectPaymentModal
+        visible={isPaymentMethodModalVisible}
+        onClose={onModalClose}
+        title="Payment"
+      />
+      <SelectorModal
+        selectedItem={purchaseCurrency}
+        visible={isCurrencyModalVisible}
+        onClose={onModalClose}
+        items={getPurchaseCurrencies(searchValue, true)}
+        onSearch={handleSearch}
+        renderItem={renderCurrencyItem}
+        keyExtractor={item => item.currencyCode}
+        title="Select token"
+        itemHeight={CURRENCY_ITEM_HEIGHT}
+        showNetwork
+      />
     </>
   );
 }

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

@@ -1,6 +1,5 @@
 import { useSnapshot } from 'valtio';
 import { useEffect } from 'react';
-import { ScrollView } from 'react-native';
 import { NumberUtil } from '@reown/appkit-common-react-native';
 import { RouterController, SwapController } from '@reown/appkit-core-react-native';
 import {
@@ -10,13 +9,12 @@ import {
   Text,
   TokenButton,
   UiUtil,
-  useCustomDimensions
+  ScrollView
 } from '@reown/appkit-ui-react-native';
 import { SwapDetails } from '../../partials/w3m-swap-details';
 import styles from './styles';
 
 export function SwapPreviewView() {
-  const { padding } = useCustomDimensions();
   const {
     sourceToken,
     sourceTokenAmount,
@@ -67,7 +65,7 @@ export function SwapPreviewView() {
   }, []);
 
   return (
-    <ScrollView style={{ paddingHorizontal: padding }} bounces={false}>
+    <ScrollView>
       <FlexView padding={['l', 'l', '2xl', 'l']} justifyContent="center">
         <FlexView flexDirection="row" justifyContent="space-between">
           <FlexView>

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

@@ -1,6 +1,6 @@
 import { useSnapshot } from 'valtio';
 import { useEffect, useState } from 'react';
-import { ScrollView, Modal } from 'react-native';
+import { Modal } from 'react-native';
 import {
   ConnectionsController,
   ConstantsUtil,
@@ -8,13 +8,7 @@ import {
   RouterController,
   SwapController
 } from '@reown/appkit-core-react-native';
-import {
-  Button,
-  FlexView,
-  IconLink,
-  useTheme,
-  useCustomDimensions
-} from '@reown/appkit-ui-react-native';
+import { Button, FlexView, IconLink, useTheme, ScrollView } from '@reown/appkit-ui-react-native';
 import { NumberUtil, type SwapInputTarget } from '@reown/appkit-common-react-native';
 
 import { useKeyboard } from '../../hooks/useKeyboard';
@@ -39,8 +33,7 @@ export function SwapView() {
     inputError
   } = useSnapshot(SwapController.state);
   const Theme = useTheme();
-  const { padding } = useCustomDimensions();
-  const { keyboardShown } = useKeyboard();
+  const { keyboardShown, keyboardHeight } = useKeyboard();
   const [showModal, setShowModal] = useState<SwapInputTarget | undefined>();
   const showDetails = !!sourceToken && !!toToken && !inputError;
 
@@ -157,8 +150,7 @@ export function SwapView() {
   return (
     <>
       <ScrollView
-        style={[{ paddingHorizontal: padding }, keyboardShown && styles.withKeyboard]}
-        bounces={false}
+        style={keyboardShown ? [styles.withKeyboard, { marginBottom: keyboardHeight }] : undefined}
         keyboardShouldPersistTaps="always"
       >
         <FlexView padding={['l', 'l', '2xl', 'l']} alignItems="center" justifyContent="center">

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

@@ -26,6 +26,7 @@ export default StyleSheet.create({
     justifyContent: 'flex-end'
   },
   withKeyboard: {
-    height: '100%'
+    height: '100%',
+    maxHeight: '100%'
   }
 });

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

@@ -1,12 +1,5 @@
-import { ScrollView } from 'react-native';
 import { useSnapshot } from 'valtio';
-import {
-  FlexView,
-  Text,
-  Banner,
-  NetworkImage,
-  useCustomDimensions
-} from '@reown/appkit-ui-react-native';
+import { FlexView, Text, Banner, NetworkImage, ScrollView } from '@reown/appkit-ui-react-native';
 import {
   ApiController,
   AssetController,
@@ -16,7 +9,6 @@ import {
 import styles from './styles';
 
 export function WalletCompatibleNetworks() {
-  const { padding } = useCustomDimensions();
   const { networks, accountType } = useSnapshot(ConnectionsController.state);
   const { networkImages } = useSnapshot(AssetController.state);
   const isSmartAccount = accountType === 'smartAccount';
@@ -30,8 +22,8 @@ export function WalletCompatibleNetworks() {
   const imageHeaders = ApiController._getApiHeaders();
 
   return (
-    <ScrollView bounces={false} style={{ paddingHorizontal: padding }} fadingEdgeLength={20}>
-      <FlexView padding={['xl', 's', '2xl', 's']} margin={['0', '0', '2xl', '0']}>
+    <ScrollView>
+      <FlexView padding={['xl', 's', 'l', 's']}>
         <Banner icon="warningCircle" text="You can only receive assets on these networks." />
         {approvedNetworks.map((network, index) => (
           <FlexView

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

@@ -1,5 +1,5 @@
 import { useSnapshot } from 'valtio';
-import { ScrollView, StyleSheet } from 'react-native';
+import { StyleSheet } from 'react-native';
 import {
   Chip,
   CompatibleNetwork,
@@ -8,7 +8,7 @@ import {
   Spacing,
   Text,
   UiUtil,
-  useCustomDimensions
+  ScrollView
 } from '@reown/appkit-ui-react-native';
 import {
   ApiController,
@@ -28,7 +28,6 @@ export function WalletReceiveView() {
   );
   const address = CoreHelperUtil.getPlainAddress(activeAddress);
   const networkImage = AssetUtil.getNetworkImage(activeNetwork, networkImages);
-  const { padding } = useCustomDimensions();
   const canCopy = OptionsController.isClipboardAvailable();
   const isSmartAccount = accountType === 'smartAccount';
 
@@ -68,7 +67,7 @@ export function WalletReceiveView() {
   if (!address) return;
 
   return (
-    <ScrollView bounces={false} style={{ paddingHorizontal: padding }}>
+    <ScrollView>
       <FlexView padding={['xl', 'xl', '2xl', 'xl']} alignItems="center">
         <Chip
           label={label}

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

@@ -1,5 +1,4 @@
 import { useSnapshot } from 'valtio';
-import { ScrollView } from 'react-native';
 import {
   Avatar,
   Button,
@@ -8,7 +7,7 @@ import {
   Image,
   Text,
   UiUtil,
-  useCustomDimensions
+  ScrollView
 } from '@reown/appkit-ui-react-native';
 import { NumberUtil } from '@reown/appkit-common-react-native';
 import {
@@ -21,7 +20,6 @@ import styles from './styles';
 import { PreviewSendDetails } from './components/preview-send-details';
 
 export function WalletSendPreviewView() {
-  const { padding } = useCustomDimensions();
   const { activeNetwork } = useSnapshot(ConnectionsController.state);
   const { token, receiverAddress, receiverProfileName, receiverProfileImageUrl, loading } =
     useSnapshot(SendController.state);
@@ -69,7 +67,7 @@ export function WalletSendPreviewView() {
   };
 
   return (
-    <ScrollView style={{ paddingHorizontal: padding }}>
+    <ScrollView>
       <FlexView padding={['l', 'xl', '3xl', 'xl']}>
         <FlexView flexDirection="row" alignItems="center" justifyContent="space-between">
           <FlexView>