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

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,15 @@
 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
-} from '@reown/appkit-ui-react-native';
+import { Button, FlexView, Icon, Text, TokenButton, UiUtil } 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 +27,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 +60,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%'
   }
 });

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

@@ -1,6 +1,13 @@
 import { useState } from 'react';
 import { useSnapshot } from 'valtio';
-import { ScrollView, SectionList, View, type SectionListData } from 'react-native';
+import {
+  ScrollView,
+  SectionList,
+  View,
+  type SectionListData,
+  type StyleProp,
+  type ViewStyle
+} from 'react-native';
 import {
   FlexView,
   IconLink,
@@ -15,13 +22,14 @@ import {
 
 import {
   AssetController,
+  AssetUtil,
   ConnectionsController,
   SwapController,
-  type SwapControllerState,
-  type SwapInputTarget,
-  type SwapTokenWithBalance
+  type SwapControllerState
 } from '@reown/appkit-core-react-native';
 
+import { type SwapInputTarget, type SwapTokenWithBalance } from '@reown/appkit-common-react-native';
+
 import { useCustomDimensions } from '../../../../hooks/useCustomDimensions';
 import { Placeholder } from '../../../../partials/w3m-placeholder';
 import styles from './styles';
@@ -30,9 +38,10 @@ import { createSections } from './utils';
 interface Props {
   onClose: () => void;
   type?: SwapInputTarget;
+  style?: StyleProp<ViewStyle>;
 }
 
-export function SwapSelectTokenView({ onClose, type }: Props) {
+export function SwapSelectTokenView({ onClose, type, style }: Props) {
   const { padding } = useCustomDimensions();
   const Theme = useTheme();
   const { activeNetwork } = useSnapshot(ConnectionsController.state);
@@ -41,7 +50,7 @@ export function SwapSelectTokenView({ onClose, type }: Props) {
     SwapController.state
   ) as SwapControllerState;
 
-  const networkImage = activeNetwork ? networkImages[activeNetwork.id] : undefined;
+  const networkImage = AssetUtil.getNetworkImage(activeNetwork, networkImages);
   const [tokenSearch, setTokenSearch] = useState<string>('');
   const isSourceToken = type === 'sourceToken';
 
@@ -77,7 +86,8 @@ export function SwapSelectTokenView({ onClose, type }: Props) {
         {
           paddingHorizontal: padding,
           backgroundColor: Theme['bg-100']
-        }
+        },
+        style
       ]}
     >
       <FlexView

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

@@ -8,8 +8,7 @@ export default StyleSheet.create({
     borderBottomLeftRadius: 0,
     borderBottomRightRadius: 0,
     overflow: 'hidden',
-    marginTop: 80,
-    flex: 1
+    marginTop: 80
   },
   title: {
     paddingTop: Spacing['2xs']

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

@@ -1,4 +1,5 @@
-import { SwapController, type SwapTokenWithBalance } from '@reown/appkit-core-react-native';
+import { type SwapTokenWithBalance } from '@reown/appkit-common-react-native';
+import { SwapController } from '@reown/appkit-core-react-native';
 
 export function filterTokens(tokens?: SwapTokenWithBalance[], searchValue?: string) {
   if (!tokens) {

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

@@ -1,17 +1,15 @@
 import { useSnapshot } from 'valtio';
 import { useEffect, useState } from 'react';
-import { Platform, ScrollView } from 'react-native';
-import Modal from 'react-native-modal';
+import { ScrollView, Modal } from 'react-native';
 import {
   ConnectionsController,
   ConstantsUtil,
   EventsController,
   RouterController,
-  SwapController,
-  type SwapInputTarget
+  SwapController
 } from '@reown/appkit-core-react-native';
-import { Button, FlexView, IconLink, Spacing, useTheme } from '@reown/appkit-ui-react-native';
-import { NumberUtil } from '@reown/appkit-common-react-native';
+import { Button, FlexView, IconLink, useTheme } from '@reown/appkit-ui-react-native';
+import { NumberUtil, type SwapInputTarget } from '@reown/appkit-common-react-native';
 
 import { useKeyboard } from '../../hooks/useKeyboard';
 import { useCustomDimensions } from '../../hooks/useCustomDimensions';
@@ -37,7 +35,7 @@ export function SwapView() {
   } = useSnapshot(SwapController.state);
   const Theme = useTheme();
   const { padding } = useCustomDimensions();
-  const { keyboardShown, keyboardHeight } = useKeyboard();
+  const { keyboardShown } = useKeyboard();
   const [showModal, setShowModal] = useState<SwapInputTarget | undefined>();
   const showDetails = !!sourceToken && !!toToken && !inputError;
 
@@ -51,11 +49,6 @@ export function SwapView() {
       token => token.address === SwapController.state.toToken?.address
     ) >= 0;
 
-  const paddingBottom = Platform.select({
-    android: keyboardShown ? keyboardHeight + Spacing['2xl'] : Spacing['2xl'],
-    default: Spacing['2xl']
-  });
-
   const getActionButtonState = () => {
     if (!SwapController.state.sourceToken || !SwapController.state.toToken) {
       return { text: 'Select token', disabled: true };
@@ -159,11 +152,11 @@ export function SwapView() {
   return (
     <>
       <ScrollView
-        style={{ paddingHorizontal: padding }}
+        style={[{ paddingHorizontal: padding }, keyboardShown && styles.withKeyboard]}
         bounces={false}
         keyboardShouldPersistTaps="always"
       >
-        <FlexView padding="l" alignItems="center" justifyContent="center" style={{ paddingBottom }}>
+        <FlexView padding={['l', 'l', '2xl', 'l']} alignItems="center" justifyContent="center">
           <SwapInput
             token={sourceToken}
             value={sourceTokenAmount}
@@ -186,7 +179,7 @@ export function SwapView() {
               onTokenPress={() => setShowModal('toToken')}
               editable={false}
             />
-            {showSwitch && (
+            {showSwitch ? (
               <IconLink
                 icon="recycleHorizontal"
                 size="lg"
@@ -197,9 +190,9 @@ export function SwapView() {
                 style={[styles.arrowIcon, { borderColor: Theme['bg-100'] }]}
                 onPress={onSwitchPress}
               />
-            )}
+            ) : null}
           </FlexView>
-          {showDetails && <SwapDetails />}
+          {showDetails ? <SwapDetails /> : null}
           <Button
             style={styles.actionButton}
             loading={actionLoading}
@@ -210,15 +203,8 @@ export function SwapView() {
           </Button>
         </FlexView>
       </ScrollView>
-      <Modal
-        isVisible={!!showModal}
-        useNativeDriver
-        useNativeDriverForBackdrop
-        onBackdropPress={onModalClose}
-        onDismiss={onModalClose}
-        style={styles.modal}
-      >
-        <SwapSelectTokenView onClose={onModalClose} type={showModal} />
+      <Modal visible={!!showModal} transparent animationType="slide" onRequestClose={onModalClose}>
+        <SwapSelectTokenView style={styles.modalContent} onClose={onModalClose} type={showModal} />
       </Modal>
     </>
   );

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

@@ -20,8 +20,12 @@ export default StyleSheet.create({
     marginTop: Spacing.xs,
     width: '100%'
   },
-  modal: {
+  modalContent: {
     margin: 0,
+    flex: 1,
     justifyContent: 'flex-end'
+  },
+  withKeyboard: {
+    height: '100%'
   }
 });

package/src/views/w3m-unsupported-chain-view/index.tsx

@@ -5,21 +5,20 @@ import { Icon, ListItem, Separator, Text } from '@reown/appkit-ui-react-native';
 import {
   ApiController,
   AssetController,
+  AssetUtil,
   ConnectionsController
 } from '@reown/appkit-core-react-native';
 import type { AppKitNetwork } from '@reown/appkit-common-react-native';
-import { useAppKit } from '../../AppKitContext';
+import { useInternalAppKit } from '../../AppKitContext';
 import styles from './styles';
 
 export function UnsupportedChainView() {
   const { activeNetwork } = useSnapshot(ConnectionsController.state);
   const { networkImages } = useSnapshot(AssetController.state);
   const [disconnecting, setDisconnecting] = useState(false);
-  //TODO: should show requested networks disabled
-  // const networks = CoreHelperUtil.sortNetworks(approvedCaipNetworkIds, requestedCaipNetworks);
   const networks = ConnectionsController.getConnectedNetworks();
   const imageHeaders = ApiController._getApiHeaders();
-  const { disconnect, switchNetwork } = useAppKit();
+  const { disconnect, switchNetwork } = useInternalAppKit();
 
   const onNetworkPress = async (network: AppKitNetwork) => {
     switchNetwork(network);
@@ -48,7 +47,7 @@ export function UnsupportedChainView() {
           key={item.id}
           icon="networkPlaceholder"
           iconBackgroundColor="gray-glass-010"
-          imageSrc={networkImages[item.id]}
+          imageSrc={AssetUtil.getNetworkImage(item, networkImages)}
           imageHeaders={imageHeaders}
           onPress={() => onNetworkPress(item)}
           testID="button-network"

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

@@ -4,6 +4,7 @@ import { FlexView, Text, Banner, NetworkImage } from '@reown/appkit-ui-react-nat
 import {
   ApiController,
   AssetController,
+  AssetUtil,
   ConnectionsController
 } from '@reown/appkit-core-react-native';
 import { useCustomDimensions } from '../../hooks/useCustomDimensions';
@@ -25,7 +26,7 @@ export function WalletCompatibleNetworks() {
 
   return (
     <ScrollView bounces={false} style={{ paddingHorizontal: padding }} fadingEdgeLength={20}>
-      <FlexView padding={['xl', 's', '2xl', 's']}>
+      <FlexView padding={['xl', 's', '2xl', 's']} margin={['0', '0', '2xl', '0']}>
         <Banner icon="warningCircle" text="You can only receive assets on these networks." />
         {approvedNetworks.map((network, index) => (
           <FlexView
@@ -35,7 +36,7 @@ export function WalletCompatibleNetworks() {
             padding={['s', 's', 's', 's']}
           >
             <NetworkImage
-              imageSrc={networkImages[network.id]}
+              imageSrc={AssetUtil.getNetworkImage(network, networkImages)}
               imageHeaders={imageHeaders}
               size="sm"
               style={styles.image}

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

@@ -12,6 +12,7 @@ import {
 import {
   ApiController,
   AssetController,
+  AssetUtil,
   ConnectionsController,
   CoreHelperUtil,
   OptionsController,
@@ -26,7 +27,7 @@ export function WalletReceiveView() {
     ConnectionsController.state
   );
   const address = CoreHelperUtil.getPlainAddress(activeAddress);
-  const networkImage = activeNetwork ? networkImages[activeNetwork.id] : undefined;
+  const networkImage = AssetUtil.getNetworkImage(activeNetwork, networkImages);
   const { padding } = useCustomDimensions();
   const canCopy = OptionsController.isClipboardAvailable();
   const isSmartAccount = accountType === 'smartAccount';
@@ -40,7 +41,10 @@ export function WalletReceiveView() {
   const imagesArray = approvedNetworks
     .filter(network => network?.id)
     .slice(0, 5)
-    .map(network => AssetController.state.networkImages[network.id])
+    .map(
+      network =>
+        network.imageUrl ?? AssetUtil.getNetworkImage(network, AssetController.state.networkImages)
+    )
     .filter(Boolean) as string[];
 
   const label = UiUtil.getTruncateString({

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

@@ -1,4 +1,4 @@
-import { AssetController } from '@reown/appkit-core-react-native';
+import { AssetController, AssetUtil } from '@reown/appkit-core-react-native';
 import type { AppKitNetwork } from '@reown/appkit-common-react-native';
 import {
   BorderRadius,
@@ -43,7 +43,7 @@ export function PreviewSendDetails({
     truncate: 'middle'
   });
 
-  const networkImage = activeNetwork ? networkImages[activeNetwork.id] : undefined;
+  const networkImage = AssetUtil.getNetworkImage(activeNetwork, networkImages);
 
   return (
     <FlexView

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

@@ -4,6 +4,7 @@ import { ScrollView } from 'react-native';
 import { FlexView, InputText, ListToken, Text } from '@reown/appkit-ui-react-native';
 import {
   AssetController,
+  AssetUtil,
   ConnectionsController,
   RouterController,
   SendController
@@ -18,7 +19,7 @@ export function WalletSendSelectTokenView() {
   const { padding } = useCustomDimensions();
   const { activeNetwork, balances } = useSnapshot(ConnectionsController.state);
   const { networkImages } = useSnapshot(AssetController.state);
-  const networkImage = activeNetwork ? networkImages[activeNetwork.id] : undefined;
+  const networkImage = AssetUtil.getNetworkImage(activeNetwork, networkImages);
   const [tokenSearch, setTokenSearch] = useState<string>('');
   const [filteredTokens, setFilteredTokens] = useState(balances ?? []);
 

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

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { Platform, ScrollView } from 'react-native';
+import { ScrollView } from 'react-native';
 import { useSnapshot } from 'valtio';
 import {
   ConnectionsController,
@@ -7,7 +7,7 @@ import {
   RouterController,
   SendController
 } from '@reown/appkit-core-react-native';
-import { Button, FlexView, IconBox, Spacing } from '@reown/appkit-ui-react-native';
+import { Button, FlexView, IconBox } from '@reown/appkit-ui-react-native';
 import { SendInputToken } from '../../partials/w3m-send-input-token';
 import { useCustomDimensions } from '../../hooks/useCustomDimensions';
 import { useKeyboard } from '../../hooks/useKeyboard';
@@ -16,17 +16,12 @@ import styles from './styles';
 
 export function WalletSendView() {
   const { padding } = useCustomDimensions();
-  const { keyboardShown, keyboardHeight } = useKeyboard();
+  const { keyboardShown } = useKeyboard();
   const [isBalanceLoading, setBalanceLoading] = useState(false);
   const { token, sendTokenAmount, receiverAddress, receiverProfileName, loading } = useSnapshot(
     SendController.state
   );
 
-  const paddingBottom = Platform.select({
-    android: keyboardShown ? keyboardHeight + Spacing['2xl'] : Spacing['2xl'],
-    default: Spacing['2xl']
-  });
-
   const onSendPress = () => {
     RouterController.push('WalletSendPreview');
   };
@@ -86,11 +81,11 @@ export function WalletSendView() {
 
   return (
     <ScrollView
-      style={{ paddingHorizontal: padding }}
+      style={[{ paddingHorizontal: padding }, keyboardShown && styles.withKeyboard]}
       bounces={false}
       keyboardShouldPersistTaps="always"
     >
-      <FlexView padding="l" alignItems="center" justifyContent="center" style={{ paddingBottom }}>
+      <FlexView padding={['l', 'l', '2xl', 'l']} alignItems="center" justifyContent="center">
         <SendInputToken
           token={token}
           sendTokenAmount={sendTokenAmount}

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

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

package/lib/commonjs/config/animations.js

@@ -1,9 +0,0 @@
-"use strict";
-
-var _reactNative = require("react-native");
-if (_reactNative.Platform.OS === 'android') {
-  if (_reactNative.UIManager.setLayoutAnimationEnabledExperimental) {
-    _reactNative.UIManager.setLayoutAnimationEnabledExperimental(true);
-  }
-}
-//# sourceMappingURL=animations.js.map

package/lib/commonjs/config/animations.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_reactNative","require","Platform","OS","UIManager","setLayoutAnimationEnabledExperimental"],"sourceRoot":"../../../src","sources":["config/animations.ts"],"mappings":";;AAAA,IAAAA,YAAA,GAAAC,OAAA;AAEA,IAAIC,qBAAQ,CAACC,EAAE,KAAK,SAAS,EAAE;EAC7B,IAAIC,sBAAS,CAACC,qCAAqC,EAAE;IACnDD,sBAAS,CAACC,qCAAqC,CAAC,IAAI,CAAC;EACvD;AACF","ignoreList":[]}