@reown/appkit-react-native 2.0.0-alpha.2 → 2.0.0-alpha.4

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

@@ -1,5 +1,6 @@
 import {
   AssetController,
+  AssetUtil,
   ConnectionsController,
   OnRampController,
   RouterController,
@@ -29,7 +30,7 @@ export function OnRampCheckoutView() {
   );
 
   const { activeNetwork } = useSnapshot(ConnectionsController.state);
-  const networkImage = activeNetwork ? networkImages[activeNetwork.id] : undefined;
+  const networkImage = AssetUtil.getNetworkImage(activeNetwork, networkImages);
 
   const value = NumberUtil.roundNumber(selectedQuote?.destinationAmount ?? 0, 6, 5);
   const symbol = selectedQuote?.destinationCurrencyCode;
@@ -59,7 +60,7 @@ export function OnRampCheckoutView() {
         </FlexView>
         <FlexView flexDirection="row" alignItems="center" justifyContent="center">
           <Text color="fg-200">via </Text>
-          {providerImage && <Image source={providerImage} style={styles.providerImage} />}
+          {providerImage ? <Image source={providerImage} style={styles.providerImage} /> : null}
           <Text color="fg-200">{StringUtil.capitalize(selectedQuote?.serviceProvider)}</Text>
         </FlexView>
       </FlexView>
@@ -86,12 +87,12 @@ export function OnRampCheckoutView() {
           <Text>
             {value} {symbol?.split('_')[0] ?? ''}
           </Text>
-          {purchaseCurrency?.symbolImageUrl && (
+          {purchaseCurrency?.symbolImageUrl ? (
             <Image
               source={purchaseCurrency?.symbolImageUrl}
               style={[styles.tokenImage, { borderColor: Theme['gray-glass-010'] }]}
             />
-          )}
+          ) : null}
         </FlexView>
       </FlexView>
       <FlexView
@@ -117,37 +118,37 @@ export function OnRampCheckoutView() {
           alignItems="center"
           style={[styles.paymentMethodContainer, { borderColor: Theme['gray-glass-020'] }]}
         >
-          {paymentLogo && (
+          {paymentLogo ? (
             <Image
               source={paymentLogo}
               style={styles.paymentMethodImage}
               tintColor={Theme['fg-150']}
             />
-          )}
+          ) : null}
           <Text variant="small-600" color="fg-150">
             {selectedPaymentMethod?.name}
           </Text>
         </FlexView>
       </FlexView>
 
-      {showFees && (
+      {showFees ? (
         <Toggle
           title={
             <>
               <Text variant="paragraph-400" color="fg-200">
                 Fees{' '}
-                {showTotalFee && (
+                {showTotalFee ? (
                   <Text variant="paragraph-400">
                     {selectedQuote?.totalFee} {selectedQuote?.sourceCurrencyCode}
                   </Text>
-                )}
+                ) : null}
               </Text>
             </>
           }
           style={[styles.feesToggle, { backgroundColor: Theme['gray-glass-002'] }]}
           contentContainerStyle={styles.feesToggleContent}
         >
-          {showNetworkFee && (
+          {showNetworkFee ? (
             <FlexView
               flexDirection="row"
               justifyContent="space-between"
@@ -158,19 +159,19 @@ export function OnRampCheckoutView() {
                 Network Fees
               </Text>
               <FlexView flexDirection="row" alignItems="center">
-                {networkImage && (
+                {networkImage ? (
                   <Image
                     source={networkImage}
                     style={[styles.networkImage, { borderColor: Theme['gray-glass-010'] }]}
                   />
-                )}
+                ) : null}
                 <Text variant="small-400">
                   {selectedQuote?.networkFee} {selectedQuote?.sourceCurrencyCode}
                 </Text>
               </FlexView>
             </FlexView>
-          )}
-          {showTransactionFee && (
+          ) : null}
+          {showTransactionFee ? (
             <FlexView
               flexDirection="row"
               justifyContent="space-between"
@@ -183,9 +184,9 @@ export function OnRampCheckoutView() {
                 {selectedQuote.transactionFee} {selectedQuote?.sourceCurrencyCode}
               </Text>
             </FlexView>
-          )}
+          ) : null}
         </Toggle>
-      )}
+      ) : null}
       <FlexView flexDirection="row" justifyContent="space-between" margin={['xl', '0', '0', '0']}>
         <Button
           variant="shade"

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

@@ -7,9 +7,15 @@ import {
   OptionsController,
   EventsController
 } from '@reown/appkit-core-react-native';
-import { FlexView, DoubleImageLoader, IconLink, Button, Text } from '@reown/appkit-ui-react-native';
+import {
+  FlexView,
+  DoubleImageLoader,
+  IconLink,
+  Button,
+  Text,
+  useCustomDimensions
+} from '@reown/appkit-ui-react-native';
 
-import { useCustomDimensions } from '../../hooks/useCustomDimensions';
 import { ConnectingBody } from '../../partials/w3m-connecting-body';
 import styles from './styles';
 import { StringUtil } from '@reown/appkit-common-react-native';

package/src/views/w3m-onramp-settings-view/components/Country.tsx

@@ -1,4 +1,4 @@
-import type { OnRampCountry } from '@reown/appkit-core-react-native';
+import { type OnRampCountry } from '@reown/appkit-common-react-native';
 import {
   Pressable,
   FlexView,
@@ -27,7 +27,9 @@ export function Country({ onPress, item, selected }: Props) {
     <Pressable onPress={handlePress} style={styles.container} backgroundColor="transparent">
       <FlexView flexDirection="row" alignItems="center" justifyContent="flex-start" padding="s">
         <FlexView style={styles.imageContainer}>
-          {item.flagImageUrl && SvgUri && <SvgUri uri={item.flagImageUrl} width={36} height={36} />}
+          {item.flagImageUrl && SvgUri ? (
+            <SvgUri uri={item.flagImageUrl} width={36} height={36} />
+          ) : null}
         </FlexView>
         <FlexView style={styles.textContainer}>
           <Text variant="paragraph-400" color="fg-100" numberOfLines={1} ellipsizeMode="tail">
@@ -37,9 +39,9 @@ export function Country({ onPress, item, selected }: Props) {
             {item.countryCode}
           </Text>
         </FlexView>
-        {selected && (
+        {selected ? (
           <Icon name="checkmark" size="md" color="accent-100" style={styles.checkmark} />
-        )}
+        ) : null}
       </FlexView>
     </Pressable>
   );

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

@@ -2,11 +2,8 @@ import { useSnapshot } from 'valtio';
 import { memo, useState } from 'react';
 import { SvgUri } from 'react-native-svg';
 import { FlexView, ListItem, Text, useTheme, Icon, Image } from '@reown/appkit-ui-react-native';
-import {
-  OnRampController,
-  type OnRampCountry,
-  type OnRampFiatCurrency
-} from '@reown/appkit-core-react-native';
+import { OnRampController } from '@reown/appkit-core-react-native';
+import { type OnRampCountry, type OnRampFiatCurrency } from '@reown/appkit-common-react-native';
 
 import { SelectorModal } from '../../partials/w3m-selector-modal';
 import { Country } from './components/Country';
@@ -97,11 +94,11 @@ export function OnRampSettingsView() {
           </FlexView>
           <FlexView>
             <Text color="fg-100">Select Country</Text>
-            {selectedCountry?.name && (
+            {selectedCountry?.name ? (
               <Text variant="small-400" color="fg-200">
                 {selectedCountry?.name}
               </Text>
-            )}
+            ) : null}
           </FlexView>
         </ListItem>
         <ListItem onPress={onPaymentCurrencyPress} chevron contentStyle={styles.itemContent}>
@@ -120,11 +117,11 @@ export function OnRampSettingsView() {
           </FlexView>
           <FlexView>
             <Text color="fg-100">Select Currency</Text>
-            {paymentCurrency?.name && (
+            {paymentCurrency?.name ? (
               <Text variant="small-400" color="fg-200">
                 {paymentCurrency?.name}
               </Text>
-            )}
+            ) : null}
           </FlexView>
         </ListItem>
       </FlexView>

package/src/views/w3m-onramp-settings-view/utils.ts

@@ -1,10 +1,7 @@
 import { ITEM_HEIGHT as COUNTRY_ITEM_HEIGHT } from './components/Country';
 import { ITEM_HEIGHT as CURRENCY_ITEM_HEIGHT } from '../w3m-onramp-view/components/Currency';
-import {
-  OnRampController,
-  type OnRampCountry,
-  type OnRampFiatCurrency
-} from '@reown/appkit-core-react-native';
+import { OnRampController } from '@reown/appkit-core-react-native';
+import { type OnRampCountry, type OnRampFiatCurrency } from '@reown/appkit-common-react-native';
 
 // -------------------------- Types --------------------------
 type ModalType = 'country' | 'paymentCurrency';

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

@@ -76,15 +76,15 @@ export function OnRampTransactionView() {
                 {data?.onrampResult?.purchaseAmount}{' '}
                 {data?.onrampResult?.purchaseCurrency?.split('_')[0] ?? ''}
               </Text>
-              {data?.onrampResult?.purchaseImageUrl && (
+              {data?.onrampResult?.purchaseImageUrl ? (
                 <Image
                   source={data?.onrampResult?.purchaseImageUrl}
                   style={[styles.tokenImage, { borderColor: Theme['gray-glass-010'] }]}
                 />
-              )}
+              ) : null}
             </FlexView>
           </FlexView>
-          {showNetwork && (
+          {showNetwork ? (
             <FlexView
               flexDirection="row"
               alignItems="center"
@@ -98,8 +98,8 @@ export function OnRampTransactionView() {
                 {StringUtil.capitalize(data?.onrampResult?.network)}
               </Text>
             </FlexView>
-          )}
-          {showStatus && (
+          ) : null}
+          {showStatus ? (
             <FlexView flexDirection="row" alignItems="center" justifyContent="space-between">
               <Text variant="paragraph-400" color="fg-150">
                 Status
@@ -108,7 +108,7 @@ export function OnRampTransactionView() {
                 {StringUtil.capitalize(data?.onrampResult?.status)}
               </Text>
             </FlexView>
-          )}
+          ) : null}
         </FlexView>
       </FlexView>
       <Button variant="fill" size="md" onPress={onClose}>

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

@@ -1,7 +1,7 @@
 import {
   type OnRampFiatCurrency,
   type OnRampCryptoCurrency
-} from '@reown/appkit-core-react-native';
+} from '@reown/appkit-common-react-native';
 import {
   Pressable,
   FlexView,
@@ -53,9 +53,9 @@ export function Currency({ onPress, item, selected, title, subtitle, testID }: P
             </Text>
           </FlexView>
         </FlexView>
-        {selected && (
+        {selected ? (
           <Icon name="checkmark" size="md" color="accent-100" style={styles.checkmark} />
-        )}
+        ) : null}
       </FlexView>
     </Pressable>
   );

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

@@ -117,7 +117,7 @@ export function CurrencyInput({
           )}
         </FlexView>
       </FlexView>
-      {suggestedValues && suggestedValues.length > 0 && (
+      {suggestedValues && suggestedValues.length > 0 ? (
         <FlexView flexDirection="row" justifyContent="space-between" margin={['s', '0', '0', '0']}>
           {suggestedValues?.map((suggestion: number) => {
             const isSelected = suggestion.toString() === value;
@@ -144,7 +144,7 @@ export function CurrencyInput({
             );
           })}
         </FlexView>
-      )}
+      ) : null}
       <Separator color="gray-glass-020" style={styles.separator} />
       <NumericKeyboard onKeyPress={handleKeyPress} />
     </FlexView>

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

@@ -1,18 +1,16 @@
 import { StyleSheet } from 'react-native';
-import { ModalController, RouterController } from '@reown/appkit-core-react-native';
 import { IconLink, Text, FlexView } from '@reown/appkit-ui-react-native';
+import { useInternalAppKit } from '../../../AppKitContext';
 
 interface HeaderProps {
   onSettingsPress: () => void;
 }
 
 export function Header({ onSettingsPress }: HeaderProps) {
+  const { back } = useInternalAppKit();
+
   const handleGoBack = () => {
-    if (RouterController.state.history.length > 1) {
-      RouterController.goBack();
-    } else {
-      ModalController.close();
-    }
+    back();
   };
 
   return (

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

@@ -73,9 +73,9 @@ function PaymentButton({
           <Text variant="paragraph-400" color="fg-100">
             {title}
           </Text>
-          {subtitle && (
+          {subtitle ? (
             <FlexView flexDirection="row" alignItems="center" margin={['4xs', '0', '0', '0']}>
-              {providerLogo && (
+              {providerLogo ? (
                 <>
                   <Text variant="small-400" color="fg-150">
                     via
@@ -87,12 +87,12 @@ function PaymentButton({
                     resizeMode="contain"
                   />
                 </>
-              )}
+              ) : null}
               <Text variant="small-400" color="fg-150">
                 {subtitle}
               </Text>
             </FlexView>
-          )}
+          ) : null}
         </FlexView>
         {loading ? (
           <LoadingSpinner size="md" color="fg-200" style={styles.rightIcon} />

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

@@ -1,5 +1,6 @@
 import { useSnapshot } from 'valtio';
-import { ThemeController, type OnRampPaymentMethod } from '@reown/appkit-core-react-native';
+import { ThemeController } from '@reown/appkit-core-react-native';
+import { type OnRampPaymentMethod } from '@reown/appkit-common-react-native';
 import {
   Pressable,
   FlexView,
@@ -49,7 +50,7 @@ export function PaymentMethod({ onPress, item, selected, testID }: Props) {
           resizeMethod="resize"
           resizeMode="contain"
         />
-        {selected && (
+        {selected ? (
           <IconBox
             icon="checkmark"
             size="sm"
@@ -59,7 +60,7 @@ export function PaymentMethod({ onPress, item, selected, testID }: Props) {
             style={styles.checkmark}
             testID="payment-method-checkmark"
           />
-        )}
+        ) : null}
       </FlexView>
       <Text variant="tiny-400" color="fg-100" numberOfLines={2} style={styles.text}>
         {item.name}

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

@@ -1,5 +1,4 @@
-import { NumberUtil } from '@reown/appkit-common-react-native';
-import { type OnRampQuote } from '@reown/appkit-core-react-native';
+import { NumberUtil, type OnRampQuote } from '@reown/appkit-common-react-native';
 import {
   FlexView,
   Image,
@@ -55,11 +54,11 @@ export function Quote({ item, logoURL, onQuotePress, selected, tagText, testID }
               <Text variant="paragraph-500" style={styles.providerText}>
                 {item.serviceProvider?.toLowerCase()}
               </Text>
-              {tagText && (
+              {tagText ? (
                 <Tag variant="main" style={styles.tag}>
                   {tagText}
                 </Tag>
-              )}
+              ) : null}
             </FlexView>
             <Text variant="tiny-500">
               {NumberUtil.roundNumber(item.destinationAmount, 6, 5)}{' '}
@@ -67,7 +66,7 @@ export function Quote({ item, logoURL, onQuotePress, selected, tagText, testID }
             </Text>
           </FlexView>
         </FlexView>
-        {selected && <Icon name="checkmark" color="accent-100" />}
+        {selected ? <Icon name="checkmark" color="accent-100" /> : null}
       </FlexView>
     </Pressable>
   );

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

@@ -1,8 +1,7 @@
 /* eslint-disable valtio/state-snapshot-rule */
 import { useSnapshot } from 'valtio';
 import { useRef, useState, useMemo, useEffect } from 'react';
-import Modal from 'react-native-modal';
-import { FlatList, StyleSheet, View } from 'react-native';
+import { FlatList, StyleSheet, View, Modal } from 'react-native';
 import {
   FlexView,
   IconLink,
@@ -12,13 +11,10 @@ import {
   Separator,
   BorderRadius
 } from '@reown/appkit-ui-react-native';
-import {
-  OnRampController,
-  type OnRampPaymentMethod,
-  type OnRampQuote
-} from '@reown/appkit-core-react-native';
+import { OnRampController } from '@reown/appkit-core-react-native';
 import { Quote, ITEM_HEIGHT as QUOTE_ITEM_HEIGHT } from './Quote';
 import { PaymentMethod } from './PaymentMethod';
+import { type OnRampPaymentMethod, type OnRampQuote } from '@reown/appkit-common-react-native';
 
 interface SelectPaymentModalProps {
   title?: string;
@@ -135,69 +131,63 @@ export function SelectPaymentModal({ title, visible, onClose }: SelectPaymentMod
   }, [visible]);
 
   return (
-    <Modal
-      isVisible={visible}
-      useNativeDriver
-      useNativeDriverForBackdrop
-      statusBarTranslucent
-      hideModalContentWhileAnimating
-      onBackdropPress={onClose}
-      onDismiss={onClose}
-      style={styles.modal}
-    >
-      <FlexView style={[styles.container, { backgroundColor: Theme['bg-100'] }]}>
-        <FlexView
-          alignItems="center"
-          justifyContent="space-between"
-          flexDirection="row"
-          style={styles.header}
-        >
-          <IconLink icon="arrowLeft" onPress={onClose} testID="payment-modal-button-back" />
-          {!!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>
+    <Modal visible={visible} transparent animationType="slide" onRequestClose={onClose}>
+      <View style={styles.modalContent}>
+        <FlexView style={[styles.container, { backgroundColor: Theme['bg-100'] }]}>
+          <FlexView
+            alignItems="center"
+            justifyContent="space-between"
+            flexDirection="row"
+            style={styles.header}
+          >
+            <IconLink icon="arrowLeft" onPress={onClose} testID="payment-modal-button-back" />
+            {!!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>
+            <FlatList
+              data={availablePaymentMethods}
+              renderItem={renderPaymentMethod}
+              ref={paymentMethodsRef}
+              style={styles.paymentMethodsContainer}
+              contentContainerStyle={styles.paymentMethodsContent}
+              fadingEdgeLength={20}
+              keyExtractor={item => item.paymentMethod}
+              horizontal
+              showsHorizontalScrollIndicator={false}
+            />
+          </FlexView>
+          <Separator style={styles.separator} color="gray-glass-010" />
+          <Text variant="small-500" color="fg-150" style={styles.subtitle}>
+            Providers
+          </Text>
           <FlatList
-            data={availablePaymentMethods}
-            renderItem={renderPaymentMethod}
-            ref={paymentMethodsRef}
-            style={styles.paymentMethodsContainer}
-            contentContainerStyle={styles.paymentMethodsContent}
+            data={sortedQuotes}
+            bounces={false}
+            renderItem={renderQuote}
+            extraData={selectedPaymentMethod}
+            contentContainerStyle={styles.listContent}
+            ItemSeparatorComponent={renderSeparator}
             fadingEdgeLength={20}
-            keyExtractor={item => item.paymentMethod}
-            horizontal
-            showsHorizontalScrollIndicator={false}
+            keyExtractor={item => `${item.serviceProvider}-${item.paymentMethodType}`}
+            getItemLayout={(_, index) => ({
+              length: QUOTE_ITEM_HEIGHT + SEPARATOR_HEIGHT,
+              offset: (QUOTE_ITEM_HEIGHT + SEPARATOR_HEIGHT) * index,
+              index
+            })}
           />
         </FlexView>
-        <Separator style={styles.separator} color="gray-glass-010" />
-        <Text variant="small-500" color="fg-150" style={styles.subtitle}>
-          Providers
-        </Text>
-        <FlatList
-          data={sortedQuotes}
-          bounces={false}
-          renderItem={renderQuote}
-          extraData={selectedPaymentMethod}
-          contentContainerStyle={styles.listContent}
-          ItemSeparatorComponent={renderSeparator}
-          fadingEdgeLength={20}
-          keyExtractor={item => `${item.serviceProvider}-${item.paymentMethodType}`}
-          getItemLayout={(_, index) => ({
-            length: QUOTE_ITEM_HEIGHT + SEPARATOR_HEIGHT,
-            offset: (QUOTE_ITEM_HEIGHT + SEPARATOR_HEIGHT) * index,
-            index
-          })}
-        />
-      </FlexView>
+      </View>
     </Modal>
   );
 }
 const styles = StyleSheet.create({
-  modal: {
+  modalContent: {
     margin: 0,
+    flex: 1,
     justifyContent: 'flex-end'
   },
   header: {

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

@@ -3,14 +3,14 @@ import { memo, useCallback, useEffect, useState } from 'react';
 import { ScrollView } from 'react-native';
 import {
   OnRampController,
-  type OnRampCryptoCurrency,
   ThemeController,
   RouterController,
   type OnRampControllerState,
   SnackController,
   ConstantsUtil,
   ConnectionsController,
-  AssetController
+  AssetController,
+  AssetUtil
 } from '@reown/appkit-core-react-native';
 import {
   Button,
@@ -20,7 +20,11 @@ import {
   TokenButton,
   useTheme
 } from '@reown/appkit-ui-react-native';
-import { NumberUtil, StringUtil } from '@reown/appkit-common-react-native';
+import {
+  NumberUtil,
+  StringUtil,
+  type OnRampCryptoCurrency
+} from '@reown/appkit-common-react-native';
 import { SelectorModal } from '../../partials/w3m-selector-modal';
 import { Currency, ITEM_HEIGHT as CURRENCY_ITEM_HEIGHT } from './components/Currency';
 import { getPurchaseCurrencies, getQuotesDebounced } from './utils';
@@ -56,7 +60,7 @@ export function OnRampView() {
   const [isPaymentMethodModalVisible, setIsPaymentMethodModalVisible] = useState(false);
   const purchaseCurrencyCode =
     purchaseCurrency?.currencyCode?.split('_')[0] ?? purchaseCurrency?.currencyCode;
-  const networkImage = activeNetwork ? networkImages[activeNetwork.id] : undefined;
+  const networkImage = AssetUtil.getNetworkImage(activeNetwork, networkImages);
 
   const getQuotes = useCallback(() => {
     if (OnRampController.canGenerateQuote()) {

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

@@ -1,25 +1,22 @@
 import { useSnapshot } from 'valtio';
 import { useEffect } from 'react';
-import { Platform, ScrollView } from 'react-native';
+import { ScrollView } from 'react-native';
 import { NumberUtil } from '@reown/appkit-common-react-native';
 import { RouterController, SwapController } from '@reown/appkit-core-react-native';
 import {
   Button,
   FlexView,
   Icon,
-  Spacing,
   Text,
   TokenButton,
-  UiUtil
+  UiUtil,
+  useCustomDimensions
 } from '@reown/appkit-ui-react-native';
 import { SwapDetails } from '../../partials/w3m-swap-details';
-import { useCustomDimensions } from '../../hooks/useCustomDimensions';
-import { useKeyboard } from '../../hooks/useKeyboard';
 import styles from './styles';
 
 export function SwapPreviewView() {
   const { padding } = useCustomDimensions();
-  const { keyboardShown, keyboardHeight } = useKeyboard();
   const {
     sourceToken,
     sourceTokenAmount,
@@ -37,11 +34,6 @@ export function SwapPreviewView() {
     NumberUtil.parseLocalStringToNumber(sourceTokenAmount) * sourceTokenPriceInUSD;
   const toTokenMarketValue = NumberUtil.parseLocalStringToNumber(toTokenAmount) * toTokenPriceInUSD;
 
-  const paddingBottom = Platform.select({
-    android: keyboardShown ? keyboardHeight + Spacing['2xl'] : Spacing['2xl'],
-    default: Spacing['2xl']
-  });
-
   const loading =
     loadingQuote || loadingBuildTransaction || loadingTransaction || loadingApprovalTransaction;
 
@@ -75,12 +67,8 @@ export function SwapPreviewView() {
   }, []);
 
   return (
-    <ScrollView
-      style={{ paddingHorizontal: padding }}
-      bounces={false}
-      keyboardShouldPersistTaps="always"
-    >
-      <FlexView padding="l" justifyContent="center" style={{ paddingBottom }}>
+    <ScrollView style={{ paddingHorizontal: padding }} bounces={false}>
+      <FlexView padding={['l', 'l', '2xl', 'l']} justifyContent="center">
         <FlexView flexDirection="row" justifyContent="space-between">
           <FlexView>
             <Text variant="small-400" color="fg-150">

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

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