@reown/appkit-react-native 0.0.0-fix-improvements-20250827190629 → 0.0.0-fix-ui-changes-20250828191102

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

@@ -15,14 +15,16 @@ import {
   Spacing,
   Text,
   Toggle,
+  useCustomDimensions,
   useTheme
 } from '@reown/appkit-ui-react-native';
-import { StyleSheet } from 'react-native';
+import { ScrollView, StyleSheet } from 'react-native';
 import { useSnapshot } from 'valtio';
 import { NumberUtil, StringUtil } from '@reown/appkit-common-react-native';
 
 export function OnRampCheckoutView() {
   const Theme = useTheme();
+  const { padding } = useCustomDimensions();
   const { themeMode } = useSnapshot(ThemeController.state);
   const { networkImages } = useSnapshot(AssetController.state);
   const { selectedQuote, selectedPaymentMethod, purchaseCurrency } = useSnapshot(
@@ -49,164 +51,166 @@ export function OnRampCheckoutView() {
   };
 
   return (
-    <FlexView padding={['2xl', 'l', '4xl', 'l']}>
-      <FlexView alignItems="center">
-        <Text color="fg-200">You Buy</Text>
-        <FlexView flexDirection="row" alignItems="center">
-          <Text style={[styles.amount, { color: Theme['fg-100'] }]}>{value}</Text>
-          <Text variant="paragraph-400" color="fg-200">
-            {symbol?.split('_')[0] ?? symbol ?? ''}
-          </Text>
-        </FlexView>
-        <FlexView flexDirection="row" alignItems="center" justifyContent="center">
-          <Text color="fg-200">via </Text>
-          {providerImage ? <Image source={providerImage} style={styles.providerImage} /> : null}
-          <Text color="fg-200">{StringUtil.capitalize(selectedQuote?.serviceProvider)}</Text>
+    <ScrollView style={{ paddingHorizontal: padding }}>
+      <FlexView padding={['2xl', 'l', '4xl', 'l']}>
+        <FlexView alignItems="center">
+          <Text color="fg-200">You Buy</Text>
+          <FlexView flexDirection="row" alignItems="center">
+            <Text style={[styles.amount, { color: Theme['fg-100'] }]}>{value}</Text>
+            <Text variant="paragraph-400" color="fg-200">
+              {symbol?.split('_')[0] ?? symbol ?? ''}
+            </Text>
+          </FlexView>
+          <FlexView flexDirection="row" alignItems="center" justifyContent="center">
+            <Text color="fg-200">via </Text>
+            {providerImage ? <Image source={providerImage} style={styles.providerImage} /> : null}
+            <Text color="fg-200">{StringUtil.capitalize(selectedQuote?.serviceProvider)}</Text>
+          </FlexView>
         </FlexView>
-      </FlexView>
-      <Separator style={styles.separator} color="gray-glass-010" />
-      <FlexView
-        padding={['s', 's', 'xs', 's']}
-        flexDirection="row"
-        justifyContent="space-between"
-        alignItems="center"
-      >
-        <Text color="fg-200">You Pay</Text>
-        <Text>
-          {selectedQuote?.sourceAmount} {selectedQuote?.sourceCurrencyCode}
-        </Text>
-      </FlexView>
-      <FlexView
-        padding={['xs', 's', 'xs', 's']}
-        flexDirection="row"
-        justifyContent="space-between"
-        alignItems="center"
-      >
-        <Text color="fg-200">You Receive</Text>
-        <FlexView flexDirection="row" alignItems="center">
+        <Separator style={styles.separator} color="gray-glass-010" />
+        <FlexView
+          padding={['s', 's', 'xs', 's']}
+          flexDirection="row"
+          justifyContent="space-between"
+          alignItems="center"
+        >
+          <Text color="fg-200">You Pay</Text>
           <Text>
-            {value} {symbol?.split('_')[0] ?? ''}
+            {selectedQuote?.sourceAmount} {selectedQuote?.sourceCurrencyCode}
           </Text>
-          {purchaseCurrency?.symbolImageUrl ? (
-            <Image
-              source={purchaseCurrency?.symbolImageUrl}
-              style={[styles.tokenImage, { borderColor: Theme['gray-glass-010'] }]}
-            />
-          ) : null}
         </FlexView>
-      </FlexView>
-      <FlexView
-        padding={['xs', 's', 'xs', 's']}
-        flexDirection="row"
-        alignItems="center"
-        justifyContent="space-between"
-      >
-        <Text color="fg-200">Network</Text>
-        <FlexView flexDirection="row" alignItems="center">
-          <Text>{purchaseCurrency?.chainName}</Text>
+        <FlexView
+          padding={['xs', 's', 'xs', 's']}
+          flexDirection="row"
+          justifyContent="space-between"
+          alignItems="center"
+        >
+          <Text color="fg-200">You Receive</Text>
+          <FlexView flexDirection="row" alignItems="center">
+            <Text>
+              {value} {symbol?.split('_')[0] ?? ''}
+            </Text>
+            {purchaseCurrency?.symbolImageUrl ? (
+              <Image
+                source={purchaseCurrency?.symbolImageUrl}
+                style={[styles.tokenImage, { borderColor: Theme['gray-glass-010'] }]}
+              />
+            ) : null}
+          </FlexView>
         </FlexView>
-      </FlexView>
-      <FlexView
-        padding={['xs', 's', 'm', 's']}
-        flexDirection="row"
-        alignItems="center"
-        justifyContent="space-between"
-      >
-        <Text color="fg-200">Pay with</Text>
         <FlexView
+          padding={['xs', 's', 'xs', 's']}
           flexDirection="row"
           alignItems="center"
-          style={[styles.paymentMethodContainer, { borderColor: Theme['gray-glass-020'] }]}
+          justifyContent="space-between"
         >
-          {paymentLogo ? (
-            <Image
-              source={paymentLogo}
-              style={styles.paymentMethodImage}
-              tintColor={Theme['fg-150']}
-            />
-          ) : null}
-          <Text variant="small-600" color="fg-150">
-            {selectedPaymentMethod?.name}
-          </Text>
+          <Text color="fg-200">Network</Text>
+          <FlexView flexDirection="row" alignItems="center">
+            <Text>{purchaseCurrency?.chainName}</Text>
+          </FlexView>
+        </FlexView>
+        <FlexView
+          padding={['xs', 's', 'm', 's']}
+          flexDirection="row"
+          alignItems="center"
+          justifyContent="space-between"
+        >
+          <Text color="fg-200">Pay with</Text>
+          <FlexView
+            flexDirection="row"
+            alignItems="center"
+            style={[styles.paymentMethodContainer, { borderColor: Theme['gray-glass-020'] }]}
+          >
+            {paymentLogo ? (
+              <Image
+                source={paymentLogo}
+                style={styles.paymentMethodImage}
+                tintColor={Theme['fg-150']}
+              />
+            ) : null}
+            <Text variant="small-600" color="fg-150">
+              {selectedPaymentMethod?.name}
+            </Text>
+          </FlexView>
         </FlexView>
-      </FlexView>
 
-      {showFees ? (
-        <Toggle
-          title={
-            <>
-              <Text variant="paragraph-400" color="fg-200">
-                Fees{' '}
-                {showTotalFee ? (
-                  <Text variant="paragraph-400">
-                    {selectedQuote?.totalFee} {selectedQuote?.sourceCurrencyCode}
+        {showFees ? (
+          <Toggle
+            title={
+              <>
+                <Text variant="paragraph-400" color="fg-200">
+                  Fees{' '}
+                  {showTotalFee ? (
+                    <Text variant="paragraph-400">
+                      {selectedQuote?.totalFee} {selectedQuote?.sourceCurrencyCode}
+                    </Text>
+                  ) : null}
+                </Text>
+              </>
+            }
+            style={[styles.feesToggle, { backgroundColor: Theme['gray-glass-002'] }]}
+            contentContainerStyle={styles.feesToggleContent}
+          >
+            {showNetworkFee ? (
+              <FlexView
+                flexDirection="row"
+                justifyContent="space-between"
+                style={[styles.toggleItem, { backgroundColor: Theme['gray-glass-002'] }]}
+                margin={['0', '0', 'xs', '0']}
+              >
+                <Text variant="small-500" color="fg-150">
+                  Network Fees
+                </Text>
+                <FlexView flexDirection="row" alignItems="center">
+                  {networkImage ? (
+                    <Image
+                      source={networkImage}
+                      style={[styles.networkImage, { borderColor: Theme['gray-glass-010'] }]}
+                    />
+                  ) : null}
+                  <Text variant="small-400">
+                    {selectedQuote?.networkFee} {selectedQuote?.sourceCurrencyCode}
                   </Text>
-                ) : null}
-              </Text>
-            </>
-          }
-          style={[styles.feesToggle, { backgroundColor: Theme['gray-glass-002'] }]}
-          contentContainerStyle={styles.feesToggleContent}
-        >
-          {showNetworkFee ? (
-            <FlexView
-              flexDirection="row"
-              justifyContent="space-between"
-              style={[styles.toggleItem, { backgroundColor: Theme['gray-glass-002'] }]}
-              margin={['0', '0', 'xs', '0']}
-            >
-              <Text variant="small-500" color="fg-150">
-                Network Fees
-              </Text>
-              <FlexView flexDirection="row" alignItems="center">
-                {networkImage ? (
-                  <Image
-                    source={networkImage}
-                    style={[styles.networkImage, { borderColor: Theme['gray-glass-010'] }]}
-                  />
-                ) : null}
+                </FlexView>
+              </FlexView>
+            ) : null}
+            {showTransactionFee ? (
+              <FlexView
+                flexDirection="row"
+                justifyContent="space-between"
+                style={[styles.toggleItem, { backgroundColor: Theme['gray-glass-002'] }]}
+              >
+                <Text variant="small-500" color="fg-150">
+                  Transaction Fees
+                </Text>
                 <Text variant="small-400">
-                  {selectedQuote?.networkFee} {selectedQuote?.sourceCurrencyCode}
+                  {selectedQuote.transactionFee} {selectedQuote?.sourceCurrencyCode}
                 </Text>
               </FlexView>
-            </FlexView>
-          ) : null}
-          {showTransactionFee ? (
-            <FlexView
-              flexDirection="row"
-              justifyContent="space-between"
-              style={[styles.toggleItem, { backgroundColor: Theme['gray-glass-002'] }]}
-            >
-              <Text variant="small-500" color="fg-150">
-                Transaction Fees
-              </Text>
-              <Text variant="small-400">
-                {selectedQuote.transactionFee} {selectedQuote?.sourceCurrencyCode}
-              </Text>
-            </FlexView>
-          ) : null}
-        </Toggle>
-      ) : null}
-      <FlexView flexDirection="row" justifyContent="space-between" margin={['xl', '0', '0', '0']}>
-        <Button
-          variant="shade"
-          size="md"
-          style={styles.cancelButton}
-          onPress={RouterController.goBack}
-        >
-          Back
-        </Button>
-        <Button
-          variant="fill"
-          size="md"
-          style={styles.confirmButton}
-          onPress={onConfirm}
-          testID="button-confirm"
-        >
-          Confirm
-        </Button>
+            ) : null}
+          </Toggle>
+        ) : null}
+        <FlexView flexDirection="row" justifyContent="space-between" margin={['xl', '0', '0', '0']}>
+          <Button
+            variant="shade"
+            size="md"
+            style={styles.cancelButton}
+            onPress={RouterController.goBack}
+          >
+            Back
+          </Button>
+          <Button
+            variant="fill"
+            size="md"
+            style={styles.confirmButton}
+            onPress={onConfirm}
+            testID="button-confirm"
+          >
+            Confirm
+          </Button>
+        </FlexView>
       </FlexView>
-    </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 } from 'react-native';
+import { Linking, ScrollView } from 'react-native';
 import {
   RouterController,
   OnRampController,
@@ -13,8 +13,7 @@ import {
   IconLink,
   Button,
   Text,
-  useCustomDimensions,
-  ScrollView
+  useCustomDimensions
 } from '@reown/appkit-ui-react-native';
 
 import { ConnectingBody } from '../../partials/w3m-connecting-body';
@@ -108,7 +107,12 @@ export function OnRampLoadingView() {
   }, [onConnect]);
 
   return (
-    <ScrollView contentContainerStyle={styles.container} testID="onramp-loading-widget-view">
+    <ScrollView
+      bounces={false}
+      fadingEdgeLength={20}
+      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, ScrollView } from '@reown/appkit-ui-react-native';
-import { Dimensions } from 'react-native';
+import { FlexView, Text, Shimmer } from '@reown/appkit-ui-react-native';
+import { Dimensions, ScrollView } from 'react-native';
 import { Header } from './Header';
 import styles from '../styles';
 
@@ -9,7 +9,7 @@ export function LoadingView() {
   return (
     <>
       <Header onSettingsPress={() => {}} />
-      <ScrollView testID="onramp-loading-view">
+      <ScrollView bounces={false} 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, Animated } from 'react-native';
+import { FlatList, StyleSheet, View, Modal } from 'react-native';
 import {
   FlexView,
   IconLink,
@@ -9,8 +9,7 @@ import {
   Text,
   useTheme,
   Separator,
-  BorderRadius,
-  useCustomDimensions
+  BorderRadius
 } from '@reown/appkit-ui-react-native';
 import { OnRampController } from '@reown/appkit-core-react-native';
 import { Quote, ITEM_HEIGHT as QUOTE_ITEM_HEIGHT } from './Quote';
@@ -28,7 +27,6 @@ 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[]>(
@@ -118,33 +116,6 @@ 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 = [
@@ -161,7 +132,7 @@ export function SelectPaymentModal({ title, visible, onClose }: SelectPaymentMod
 
   return (
     <Modal visible={visible} transparent animationType="slide" onRequestClose={onClose}>
-      <Animated.View style={[styles.modalContent, { opacity: backdropOpacity }]}>
+      <View style={styles.modalContent}>
         <FlexView style={[styles.container, { backgroundColor: Theme['bg-100'] }]}>
           <FlexView
             alignItems="center"
@@ -173,10 +144,10 @@ export function SelectPaymentModal({ title, visible, onClose }: SelectPaymentMod
             {!!title && <Text variant="paragraph-600">{title}</Text>}
             <View style={styles.iconPlaceholder} />
           </FlexView>
-          <FlexView style={{ paddingHorizontal: padding }}>
-            <Text variant="small-500" color="fg-150" style={styles.subtitle}>
-              Pay with
-            </Text>
+          <Text variant="small-500" color="fg-150" style={styles.subtitle}>
+            Pay with
+          </Text>
+          <FlexView>
             <FlatList
               data={availablePaymentMethods}
               renderItem={renderPaymentMethod}
@@ -190,11 +161,7 @@ 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, { paddingHorizontal: padding }]}
-          >
+          <Text variant="small-500" color="fg-150" style={styles.subtitle}>
             Providers
           </Text>
           <FlatList
@@ -202,7 +169,6 @@ export function SelectPaymentModal({ title, visible, onClose }: SelectPaymentMod
             bounces={false}
             renderItem={renderQuote}
             extraData={selectedPaymentMethod}
-            style={{ paddingHorizontal: padding }}
             contentContainerStyle={styles.listContent}
             ItemSeparatorComponent={renderSeparator}
             fadingEdgeLength={20}
@@ -214,7 +180,7 @@ export function SelectPaymentModal({ title, visible, onClose }: SelectPaymentMod
             })}
           />
         </FlexView>
-      </Animated.View>
+      </View>
     </Modal>
   );
 }
@@ -222,8 +188,7 @@ const styles = StyleSheet.create({
   modalContent: {
     margin: 0,
     flex: 1,
-    justifyContent: 'flex-end',
-    backgroundColor: 'rgba(0, 0, 0, 0.5)'
+    justifyContent: 'flex-end'
   },
   header: {
     marginBottom: Spacing.l,
@@ -231,7 +196,7 @@ const styles = StyleSheet.create({
     paddingTop: Spacing.m
   },
   container: {
-    height: '90%',
+    height: '100%',
     borderTopLeftRadius: BorderRadius.l,
     borderTopRightRadius: BorderRadius.l
   },

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

@@ -1,5 +1,6 @@
 import { useSnapshot } from 'valtio';
 import { memo, useCallback, useEffect, useState } from 'react';
+import { ScrollView } from 'react-native';
 import {
   OnRampController,
   ThemeController,
@@ -17,8 +18,7 @@ import {
   Image,
   Text,
   TokenButton,
-  useTheme,
-  ScrollView
+  useTheme
 } from '@reown/appkit-ui-react-native';
 import {
   NumberUtil,
@@ -176,7 +176,7 @@ export function OnRampView() {
   return (
     <>
       <Header onSettingsPress={() => RouterController.push('OnRampSettings')} />
-      <ScrollView>
+      <ScrollView bounces={false}>
         <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,5 +1,6 @@
 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 {
@@ -9,12 +10,13 @@ import {
   Text,
   TokenButton,
   UiUtil,
-  ScrollView
+  useCustomDimensions
 } 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,
@@ -65,7 +67,7 @@ export function SwapPreviewView() {
   }, []);
 
   return (
-    <ScrollView>
+    <ScrollView style={{ paddingHorizontal: padding }} bounces={false}>
       <FlexView padding={['l', 'l', '2xl', 'l']} justifyContent="center">
         <FlexView flexDirection="row" justifyContent="space-between">
           <FlexView>