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

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>

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

@@ -1,12 +1,12 @@
 import { useState } from 'react';
 import { useSnapshot } from 'valtio';
-import { ScrollView } from 'react-native';
 import {
   FlexView,
   InputText,
   ListToken,
   Text,
-  useCustomDimensions
+  useCustomDimensions,
+  ScrollView
 } from '@reown/appkit-ui-react-native';
 import {
   AssetController,
@@ -19,14 +19,16 @@ import type { Balance } from '@reown/appkit-common-react-native';
 
 import { Placeholder } from '../../partials/w3m-placeholder';
 import styles from './styles';
+import type { LayoutChangeEvent } from 'react-native';
 
 export function WalletSendSelectTokenView() {
-  const { padding } = useCustomDimensions();
+  const { padding, maxHeight } = useCustomDimensions();
   const { activeNetwork, balances } = useSnapshot(ConnectionsController.state);
   const { networkImages } = useSnapshot(AssetController.state);
   const networkImage = AssetUtil.getNetworkImage(activeNetwork, networkImages);
   const [tokenSearch, setTokenSearch] = useState<string>('');
   const [filteredTokens, setFilteredTokens] = useState(balances ?? []);
+  const [headerHeight, setHeaderHeight] = useState<number>(0);
 
   const onSearchChange = (value: string) => {
     setTokenSearch(value);
@@ -36,6 +38,12 @@ export function WalletSendSelectTokenView() {
     setFilteredTokens(filtered ?? []);
   };
 
+  const onLayout = (event: LayoutChangeEvent) => {
+    const { height } = event.nativeEvent.layout;
+    // Main header height + input height
+    setHeaderHeight(height + 60);
+  };
+
   const onTokenPress = (_token: Balance) => {
     SendController.setToken(_token);
     SendController.setTokenAmount(undefined);
@@ -44,10 +52,10 @@ export function WalletSendSelectTokenView() {
 
   return (
     <FlexView
-      margin={['l', '0', '2xl', '0']}
+      margin={['l', '0', '0', '0']}
       style={[styles.container, { paddingHorizontal: padding }]}
     >
-      <FlexView margin={['0', 'm', 'm', 'm']}>
+      <FlexView margin={['0', 'm', 'm', 'm']} onLayout={onLayout}>
         <InputText
           value={tokenSearch}
           icon="search"
@@ -56,7 +64,11 @@ export function WalletSendSelectTokenView() {
           clearButtonMode="while-editing"
         />
       </FlexView>
-      <ScrollView bounces={false} fadingEdgeLength={20} contentContainerStyle={styles.tokenList}>
+      <ScrollView
+        disablePadding
+        contentContainerStyle={styles.tokenList}
+        style={{ height: maxHeight - headerHeight }}
+      >
         <Text variant="paragraph-500" color="fg-200" style={styles.title}>
           Your tokens
         </Text>

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

@@ -10,6 +10,7 @@ export default StyleSheet.create({
     marginBottom: Spacing.xs
   },
   tokenList: {
-    paddingHorizontal: Spacing.m
+    paddingHorizontal: Spacing.m,
+    paddingBottom: Spacing.m
   }
 });

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

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { ScrollView } from 'react-native';
+
 import { useSnapshot } from 'valtio';
 import {
   ConnectionsController,
@@ -7,15 +7,14 @@ import {
   RouterController,
   SendController
 } from '@reown/appkit-core-react-native';
-import { Button, FlexView, IconBox, useCustomDimensions } from '@reown/appkit-ui-react-native';
+import { Button, FlexView, IconBox, ScrollView } from '@reown/appkit-ui-react-native';
 import { SendInputToken } from '../../partials/w3m-send-input-token';
 import { useKeyboard } from '../../hooks/useKeyboard';
 import { SendInputAddress } from '../../partials/w3m-send-input-address';
 import styles from './styles';
 
 export function WalletSendView() {
-  const { padding } = useCustomDimensions();
-  const { keyboardShown } = useKeyboard();
+  const { keyboardShown, keyboardHeight } = useKeyboard();
   const [isBalanceLoading, setBalanceLoading] = useState(false);
   const { token, sendTokenAmount, receiverAddress, receiverProfileName, loading } = useSnapshot(
     SendController.state
@@ -80,8 +79,7 @@ export function WalletSendView() {
 
   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-wallet-send-view/styles.ts

@@ -19,6 +19,7 @@ export default StyleSheet.create({
     width: '100%'
   },
   withKeyboard: {
-    height: '100%'
+    height: '100%',
+    maxHeight: '100%'
   }
 });

package/src/views/w3m-what-is-a-network-view/index.tsx

@@ -1,16 +1,15 @@
-import { Linking, ScrollView } from 'react-native';
-import { Button, FlexView, Text, Visual, useCustomDimensions } from '@reown/appkit-ui-react-native';
+import { Linking } from 'react-native';
+import { Button, FlexView, Text, Visual, ScrollView } from '@reown/appkit-ui-react-native';
 import styles from './styles';
 
 export function WhatIsANetworkView() {
-  const { padding } = useCustomDimensions();
   const onLearnMorePress = () => {
     Linking.openURL('https://ethereum.org/en/developers/docs/networks/');
   };
 
   return (
-    <ScrollView bounces={false} fadingEdgeLength={20} style={{ paddingHorizontal: padding }}>
-      <FlexView alignItems="center" padding={['l', '4xl', '3xl', '4xl']}>
+    <ScrollView>
+      <FlexView alignItems="center" padding={['l', '4xl', '2xl', '4xl']}>
         <FlexView flexDirection="row" padding={['0', '0', 'xs', '0']}>
           <Visual name="network" />
           <Visual name="layers" style={styles.visual} />

package/src/views/w3m-what-is-a-wallet-view/index.tsx

@@ -1,24 +1,16 @@
-import { ScrollView } from 'react-native';
-import { Button, FlexView, Text, Visual, useCustomDimensions } from '@reown/appkit-ui-react-native';
+import { Button, FlexView, Text, Visual, ScrollView } from '@reown/appkit-ui-react-native';
 import { EventsController, RouterController } from '@reown/appkit-core-react-native';
 import styles from './styles';
 
 export function WhatIsAWalletView() {
-  const { padding } = useCustomDimensions();
-
   const onGetWalletPress = () => {
     RouterController.push('GetWallet');
     EventsController.sendEvent({ type: 'track', event: 'CLICK_GET_WALLET' });
   };
 
   return (
-    <ScrollView
-      bounces={false}
-      fadingEdgeLength={20}
-      style={{ paddingHorizontal: padding }}
-      testID="what-is-a-wallet-view"
-    >
-      <FlexView alignItems="center" padding={['xs', '4xl', 'xl', '4xl']}>
+    <ScrollView testID="what-is-a-wallet-view">
+      <FlexView alignItems="center" padding={['xs', '4xl', 's', '4xl']}>
         <FlexView flexDirection="row" padding={['0', '0', 's', '0']}>
           <Visual name="login" />
           <Visual name="profile" style={styles.visual} />