@reown/appkit-react-native 0.0.0-feat-multichain-20250725183909 → 0.0.0-feat-multichain-20250731180941

package/lib/typescript/views/w3m-swap-preview-view/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/views/w3m-swap-preview-view/styles.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;AAGA,wBAcG"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/views/w3m-swap-preview-view/styles.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAGA,wBAiBG"}

package/lib/typescript/views/w3m-swap-view/components/select-token-view/index.d.ts

@@ -1,8 +1,10 @@
+import { type StyleProp, type ViewStyle } from 'react-native';
 import { type SwapInputTarget } from '@reown/appkit-core-react-native';
 interface Props {
     onClose: () => void;
     type?: SwapInputTarget;
+    style?: StyleProp<ViewStyle>;
 }
-export declare function SwapSelectTokenView({ onClose, type }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function SwapSelectTokenView({ onClose, type, style }: Props): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/views/w3m-swap-view/components/select-token-view/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/views/w3m-swap-view/components/select-token-view/index.tsx"],"names":[],"mappings":"AAeA,OAAO,EAKL,KAAK,eAAe,EAErB,MAAM,iCAAiC,CAAC;AAOzC,UAAU,KAAK;IACb,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,IAAI,CAAC,EAAE,eAAe,CAAC;CACxB;AAED,wBAAgB,mBAAmB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,KAAK,2CAmI3D"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/views/w3m-swap-view/components/select-token-view/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAKL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAatB,OAAO,EAKL,KAAK,eAAe,EAErB,MAAM,iCAAiC,CAAC;AAOzC,UAAU,KAAK;IACb,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,wBAAgB,mBAAmB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,KAAK,2CAoIlE"}

package/lib/typescript/views/w3m-swap-view/components/select-token-view/styles.d.ts

@@ -6,7 +6,6 @@ declare const _default: {
         borderBottomRightRadius: number;
         overflow: "hidden";
         marginTop: number;
-        flex: number;
     };
     title: {
         paddingTop: number;

package/lib/typescript/views/w3m-swap-view/components/select-token-view/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../../src/views/w3m-swap-view/components/select-token-view/styles.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA,wBAmCG"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../../src/views/w3m-swap-view/components/select-token-view/styles.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA,wBAkCG"}

package/lib/typescript/views/w3m-swap-view/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/w3m-swap-view/index.tsx"],"names":[],"mappings":"AAuBA,wBAAgB,QAAQ,4CAyMvB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/w3m-swap-view/index.tsx"],"names":[],"mappings":"AAsBA,wBAAgB,QAAQ,4CA6LvB"}

package/lib/typescript/views/w3m-swap-view/styles.d.ts

@@ -17,10 +17,14 @@ declare const _default: {
         marginTop: number;
         width: "100%";
     };
-    modal: {
+    modalContent: {
         margin: number;
+        flex: number;
         justifyContent: "flex-end";
     };
+    withKeyboard: {
+        height: "100%";
+    };
 };
 export default _default;
 //# sourceMappingURL=styles.d.ts.map

package/lib/typescript/views/w3m-swap-view/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/views/w3m-swap-view/styles.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAGA,wBAuBG"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/views/w3m-swap-view/styles.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA,wBA2BG"}

package/lib/typescript/views/w3m-wallet-receive-view/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/w3m-wallet-receive-view/index.tsx"],"names":[],"mappings":"AAuBA,wBAAgB,iBAAiB,wDAoEhC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/w3m-wallet-receive-view/index.tsx"],"names":[],"mappings":"AAsBA,wBAAgB,iBAAiB,wDAmEhC"}

package/lib/typescript/views/w3m-wallet-send-view/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/w3m-wallet-send-view/index.tsx"],"names":[],"mappings":"AAgBA,wBAAgB,cAAc,4CA6G7B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/w3m-wallet-send-view/index.tsx"],"names":[],"mappings":"AAgBA,wBAAgB,cAAc,4CAwG7B"}

package/lib/typescript/views/w3m-wallet-send-view/styles.d.ts

@@ -15,6 +15,9 @@ declare const _default: {
     addressContainer: {
         width: "100%";
     };
+    withKeyboard: {
+        height: "100%";
+    };
 };
 export default _default;
 //# sourceMappingURL=styles.d.ts.map

package/lib/typescript/views/w3m-wallet-send-view/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/views/w3m-wallet-send-view/styles.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAGA,wBAiBG"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/views/w3m-wallet-send-view/styles.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAGA,wBAoBG"}

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@reown/appkit-react-native",
-  "version": "0.0.0-feat-multichain-20250725183909",
+  "version": "0.0.0-feat-multichain-20250731180941",
   "main": "lib/commonjs/index.js",
   "types": "lib/typescript/index.d.ts",
   "module": "lib/module/index.js",
+  "react-native": "src/index.ts",
   "source": "src/index.ts",
   "scripts": {
     "build": "bob build",
@@ -37,12 +38,11 @@
     "access": "public"
   },
   "dependencies": {
-    "@reown/appkit-common-react-native": "0.0.0-feat-multichain-20250725183909",
-    "@reown/appkit-core-react-native": "0.0.0-feat-multichain-20250725183909",
-    "@reown/appkit-siwe-react-native": "0.0.0-feat-multichain-20250725183909",
-    "@reown/appkit-ui-react-native": "0.0.0-feat-multichain-20250725183909",
+    "@reown/appkit-common-react-native": "0.0.0-feat-multichain-20250731180941",
+    "@reown/appkit-core-react-native": "0.0.0-feat-multichain-20250731180941",
+    "@reown/appkit-siwe-react-native": "0.0.0-feat-multichain-20250731180941",
+    "@reown/appkit-ui-react-native": "0.0.0-feat-multichain-20250731180941",
     "@walletconnect/universal-provider": "2.21.5",
-    "react-native-modal": ">=13",
     "valtio": "2.1.5"
   },
   "peerDependencies": {
@@ -52,21 +52,6 @@
     "react-native": ">=0.72",
     "react-native-svg": ">=13.10"
   },
-  "react-native": "src/index.ts",
-  "react-native-builder-bob": {
-    "source": "src",
-    "output": "lib",
-    "targets": [
-      "commonjs",
-      "module",
-      [
-        "typescript",
-        {
-          "tsc": "../../node_modules/.bin/tsc"
-        }
-      ]
-    ]
-  },
   "eslintIgnore": [
     "node_modules/",
     "lib/"

package/src/AppKit.ts

@@ -13,7 +13,8 @@ import {
   SwapController,
   OnRampController,
   CoreHelperUtil,
-  SendController
+  SendController,
+  BlockchainApiController
 } from '@reown/appkit-core-react-native';
 
 import {
@@ -37,13 +38,15 @@ import {
   type ConnectionProperties,
   type AccountType,
   type AppKitOpenOptions,
-  ConstantsUtil
+  ConstantsUtil,
+  type Connection
 } from '@reown/appkit-common-react-native';
 import { SIWEController } from '@reown/appkit-siwe-react-native';
 
 import { WalletConnectConnector } from './connectors/WalletConnectConnector';
 import { WcHelpersUtil } from './utils/HelpersUtil';
 import { NetworkUtil } from './utils/NetworkUtil';
+import { RouterUtil } from './utils/RouterUtil';
 
 interface AppKitConfig {
   projectId: string;
@@ -294,8 +297,33 @@ export class AppKit {
     ModalController.open(options);
   }
 
-  close() {
+  async close() {
     ModalController.close();
+
+    if (OptionsController.state.isSiweEnabled && ConnectionsController.state.isConnected) {
+      const session = await SIWEController.getSession();
+      if (
+        !session &&
+        SIWEController.state.status !== 'success' &&
+        ConnectionsController.state.activeNamespace === 'eip155' &&
+        !!ConnectionsController.state.activeAddress
+      ) {
+        await this.disconnect();
+      }
+    }
+
+    RouterUtil.checkOnRampBack();
+    RouterUtil.checkSocialLoginBack();
+  }
+
+  back() {
+    if (RouterController.state.history.length > 1) {
+      RouterUtil.checkBack();
+
+      return RouterController.goBack();
+    }
+
+    return this.close();
   }
 
   async switchAccountType(namespace: ChainNamespace, type: AccountType, network: AppKitNetwork) {
@@ -446,6 +474,7 @@ export class AppKit {
       );
 
       this.syncBalances(adapter, network);
+      this.syncIdentity(namespace, connection);
     });
   }
 
@@ -464,6 +493,40 @@ export class AppKit {
     }
   }
 
+  private async syncIdentity(namespace?: ChainNamespace, connection?: Connection) {
+    if (namespace !== 'eip155' || !connection?.accounts?.length) return;
+
+    const uniqueAddresses = [
+      ...new Set(connection.accounts.map(account => CoreHelperUtil.getPlainAddress(account)))
+    ];
+
+    // Process addresses sequentially to avoid race conditions
+    for (const plainAddress of uniqueAddresses) {
+      try {
+        // Validate address format before type assertion
+        if (!plainAddress || !CoreHelperUtil.isAddress(plainAddress, 'eip155')) {
+          console.warn(`Invalid Ethereum address format: ${plainAddress}`);
+          continue;
+        }
+
+        const identity = await BlockchainApiController.fetchIdentity({
+          address: plainAddress as `0x${string}`
+        });
+
+        if (identity?.name) {
+          ConnectionsController.updateIdentity(
+            namespace,
+            connection,
+            plainAddress as `0x${string}`,
+            identity
+          );
+        }
+      } catch (error) {
+        // Continue processing other addresses even if one fails
+      }
+    }
+  }
+
   private setConnection(
     adapters: BlockchainAdapter[],
     approvedNamespaces: Namespaces,
@@ -706,7 +769,7 @@ export class AppKit {
         // If it's connected but there's no session, show sign view
         return this.onSiweNavigation();
       } else if (isConnection) {
-        //Connected with 1CA
+        // Connected with 1CA
         ModalController.close();
       }
     }

package/src/AppKitContext.tsx

@@ -32,6 +32,7 @@ export const useAppKit = () => {
     disconnect: context.appKit.disconnect.bind(context.appKit),
     open: context.appKit.open.bind(context.appKit),
     close: context.appKit.close.bind(context.appKit),
+    back: context.appKit.back.bind(context.appKit),
     switchNetwork: context.appKit.switchNetwork.bind(context.appKit),
     getProvider: context.appKit.getProvider.bind(context.appKit),
     switchAccountType: context.appKit.switchAccountType.bind(context.appKit)

package/src/hooks/useRouteTransition.ts

@@ -0,0 +1,95 @@
+import { useCallback, useRef, useEffect } from 'react';
+import { Animated, Dimensions } from 'react-native';
+
+const { width: screenWidth } = Dimensions.get('window');
+
+export interface RouteTransitionConfig {
+  duration?: number;
+  useNativeDriver?: boolean;
+}
+
+export function useRouteTransition(config: RouteTransitionConfig = {}) {
+  const { duration = 300, useNativeDriver = true } = config;
+
+  const fadeAnim = useRef(new Animated.Value(1)).current;
+  const slideAnim = useRef(new Animated.Value(0)).current;
+  const isAnimating = useRef(false);
+  const currentAnimation = useRef<Animated.CompositeAnimation | null>(null);
+
+  const animateTransition = useCallback(
+    (direction: 'forward' | 'backward' | 'none') => {
+      if (isAnimating.current || direction === 'none') {
+        return Promise.resolve();
+      }
+
+      if (currentAnimation.current) {
+        currentAnimation.current.stop();
+      }
+
+      isAnimating.current = true;
+
+      return new Promise<void>(resolve => {
+        const startPosition =
+          direction === 'forward'
+            ? screenWidth * 0.02 // Start from right for forward
+            : -screenWidth * 0.02; // Start from left for backward
+
+        // Immediately set starting position and fade out
+        fadeAnim.setValue(0);
+        slideAnim.setValue(startPosition);
+
+        // Animate to final position with fade in
+        const animation = Animated.parallel([
+          Animated.timing(fadeAnim, {
+            toValue: 1,
+            duration,
+            useNativeDriver
+          }),
+          Animated.timing(slideAnim, {
+            toValue: 0, // Slide to center
+            duration,
+            useNativeDriver
+          })
+        ]);
+
+        currentAnimation.current = animation;
+
+        animation.start(({ finished }) => {
+          if (finished) {
+            isAnimating.current = false;
+            currentAnimation.current = null;
+            resolve();
+          }
+        });
+      });
+    },
+    [fadeAnim, slideAnim, duration, useNativeDriver]
+  );
+
+  const getAnimatedStyle = useCallback(
+    () => ({
+      opacity: fadeAnim,
+      transform: [{ translateX: slideAnim }]
+    }),
+    [fadeAnim, slideAnim]
+  );
+
+  useEffect(() => {
+    fadeAnim.setValue(1);
+    slideAnim.setValue(0);
+
+    return () => {
+      if (currentAnimation.current) {
+        currentAnimation.current.stop();
+        currentAnimation.current = null;
+      }
+      isAnimating.current = false;
+    };
+  }, [fadeAnim, slideAnim]);
+
+  return {
+    animateTransition,
+    getAnimatedStyle,
+    isAnimating: isAnimating.current
+  };
+}

package/src/modal/w3m-account-button/index.tsx

@@ -1,7 +1,6 @@
 import { useSnapshot } from 'valtio';
 import type { StyleProp, ViewStyle } from 'react-native';
 import {
-  AccountController,
   CoreHelperUtil,
   ModalController,
   ThemeController,
@@ -18,13 +17,13 @@ export interface AccountButtonProps {
 }
 
 export function AccountButton({ balance, disabled, style, testID }: AccountButtonProps) {
-  const { profileImage, profileName } = useSnapshot(AccountController.state);
   const { themeMode, themeVariables } = useSnapshot(ThemeController.state);
   const { networkImages } = useSnapshot(AssetController.state);
   const {
     activeAddress: address,
     activeBalance,
-    activeNetwork
+    activeNetwork,
+    identity
   } = useSnapshot(ConnectionsController.state);
 
   const networkImage = activeNetwork ? networkImages[activeNetwork.id] : undefined;
@@ -35,9 +34,9 @@ export function AccountButton({ balance, disabled, style, testID }: AccountButto
       <AccountButtonUI
         onPress={() => ModalController.open()}
         address={address?.split(':')[2] ?? ''}
-        profileName={profileName}
+        profileName={identity?.name}
         networkSrc={networkImage}
-        avatarSrc={profileImage}
+        avatarSrc={identity?.avatar}
         disabled={disabled}
         style={style}
         balance={

package/src/modal/w3m-modal/index.tsx

@@ -1,28 +1,25 @@
 import { useSnapshot } from 'valtio';
 import { useCallback, useEffect } from 'react';
 import { useWindowDimensions, StatusBar } from 'react-native';
-import Modal from 'react-native-modal';
-import { Card, ThemeProvider } from '@reown/appkit-ui-react-native';
+import { Card, Modal, ThemeProvider } from '@reown/appkit-ui-react-native';
 import {
   ApiController,
   EventsController,
   ModalController,
   OptionsController,
   RouterController,
-  ThemeController,
-  ConnectionsController
+  ThemeController
 } from '@reown/appkit-core-react-native';
-import { SIWEController } from '@reown/appkit-siwe-react-native';
 
 import { AppKitRouter } from '../w3m-router';
 import { Header } from '../../partials/w3m-header';
 import { Snackbar } from '../../partials/w3m-snackbar';
 import { useCustomDimensions } from '../../hooks/useCustomDimensions';
-import styles from './styles';
 import { useAppKit } from '../../AppKitContext';
+import styles from './styles';
 
 export function AppKit() {
-  const { disconnect } = useAppKit();
+  const { close } = useAppKit();
   const { open } = useSnapshot(ModalController.state);
   const { themeMode, themeVariables } = useSnapshot(ThemeController.state);
   const { projectId } = useSnapshot(OptionsController.state);
@@ -31,12 +28,12 @@ export function AppKit() {
   const portraitHeight = height - 80;
   const landScapeHeight = height * 0.95 - (StatusBar.currentHeight ?? 0);
 
-  const onBackButtonPress = () => {
+  const handleBackPress = () => {
     if (RouterController.state.history.length > 1) {
       return RouterController.goBack();
     }
 
-    return handleClose();
+    return handleModalClose();
   };
 
   const prefetch = useCallback(async () => {
@@ -44,27 +41,10 @@ export function AppKit() {
     EventsController.sendEvent({ type: 'track', event: 'MODAL_LOADED' });
   }, []);
 
-  const handleClose = async () => {
-    if (OptionsController.state.isSiweEnabled) {
-      const session = await SIWEController.getSession();
-      if (
-        !session &&
-        SIWEController.state.status !== 'success' &&
-        ConnectionsController.state.activeNamespace === 'eip155' &&
-        !!ConnectionsController.state.activeAddress
-      ) {
-        await disconnect();
-      }
-    }
-
-    if (
-      RouterController.state.view === 'OnRampLoading' &&
-      EventsController.state.data.event === 'BUY_SUBMITTED'
-    ) {
-      // Send event only if the onramp url was already created
-      EventsController.sendEvent({ type: 'track', event: 'BUY_CANCEL' });
-    }
+  const handleModalClose = async () => {
+    await close();
   };
+
   useEffect(() => {
     if (projectId) {
       prefetch();
@@ -75,16 +55,9 @@ export function AppKit() {
     <>
       <ThemeProvider themeMode={themeMode} themeVariables={themeVariables}>
         <Modal
-          style={styles.modal}
-          isVisible={open}
-          useNativeDriver
-          useNativeDriverForBackdrop
-          statusBarTranslucent
-          hideModalContentWhileAnimating
-          propagateSwipe
-          onModalHide={handleClose}
-          onBackdropPress={ModalController.close}
-          onBackButtonPress={onBackButtonPress}
+          visible={open}
+          onRequestClose={handleBackPress}
+          onBackdropPress={handleModalClose}
           testID="w3m-modal"
         >
           <Card

package/src/modal/w3m-modal/styles.ts

@@ -1,10 +1,6 @@
 import { StyleSheet } from 'react-native';
 
 export default StyleSheet.create({
-  modal: {
-    margin: 0,
-    justifyContent: 'flex-end'
-  },
   card: {
     borderBottomLeftRadius: 0,
     borderBottomRightRadius: 0,

package/src/modal/w3m-router/index.tsx

@@ -1,5 +1,5 @@
 import { useSnapshot } from 'valtio';
-import { useLayoutEffect, useMemo } from 'react';
+import { useEffect, useLayoutEffect, useMemo } from 'react';
 import { RouterController } from '@reown/appkit-core-react-native';
 
 import { AccountDefaultView } from '../../views/w3m-account-default-view';
@@ -32,9 +32,20 @@ import { WalletSendSelectTokenView } from '../../views/w3m-wallet-send-select-to
 import { WhatIsANetworkView } from '../../views/w3m-what-is-a-network-view';
 import { WhatIsAWalletView } from '../../views/w3m-what-is-a-wallet-view';
 import { UiUtil } from '../../utils/UiUtil';
+import { useRouteTransition } from '../../hooks/useRouteTransition';
+
+import { Animated } from 'react-native';
 
 export function AppKitRouter() {
   const { view } = useSnapshot(RouterController.state);
+  const { animateTransition, getAnimatedStyle } = useRouteTransition({
+    duration: 300,
+    useNativeDriver: true
+  });
+
+  useEffect(() => {
+    UiUtil.setRouteTransition(animateTransition);
+  }, [animateTransition]);
 
   useLayoutEffect(() => {
     UiUtil.createViewTransition();
@@ -105,5 +116,9 @@ export function AppKitRouter() {
     }
   }, [view]);
 
-  return <ViewComponent />;
+  return (
+    <Animated.View style={[getAnimatedStyle()]}>
+      <ViewComponent />
+    </Animated.View>
+  );
 }

package/src/partials/w3m-header/index.tsx

@@ -1,7 +1,6 @@
 import { useSnapshot } from 'valtio';
 import {
   RouterController,
-  ModalController,
   EventsController,
   type RouterControllerState
 } from '@reown/appkit-core-react-native';
@@ -9,8 +8,10 @@ import { IconLink, Text, FlexView } from '@reown/appkit-ui-react-native';
 import { StringUtil } from '@reown/appkit-common-react-native';
 
 import styles from './styles';
+import { useAppKit } from '../../AppKitContext';
 
 export function Header() {
+  const { close, back } = useAppKit();
   const { data, view } = useSnapshot(RouterController.state);
   const onHelpPress = () => {
     RouterController.push('WhatIsAWallet');
@@ -61,24 +62,12 @@ export function Header() {
   const showClose = !noCloseViews.includes(view);
   const header = headings(data, view);
 
-  const checkSocial = () => {
-    if (RouterController.state.view === 'ConnectingSocial') {
-      EventsController.sendEvent({
-        type: 'track',
-        event: 'SOCIAL_LOGIN_CANCELED',
-        properties: { provider: RouterController.state.data?.socialProvider! }
-      });
-    }
-  };
-
   const handleGoBack = () => {
-    checkSocial();
-    RouterController.goBack();
+    back();
   };
 
   const handleClose = () => {
-    checkSocial();
-    ModalController.close();
+    close();
   };
 
   const dynamicButtonTemplate = () => {

package/src/partials/w3m-information-modal/index.tsx

@@ -1,4 +1,4 @@
-import Modal from 'react-native-modal';
+import { Modal } from 'react-native';
 import {
   FlexView,
   Text,
@@ -27,38 +27,34 @@ export function InformationModal({
   const Theme = useTheme();
 
   return (
-    <Modal
-      isVisible={visible}
-      useNativeDriver
-      useNativeDriverForBackdrop
-      onBackdropPress={onClose}
-      onDismiss={onClose}
-      style={styles.modal}
-    >
-      <FlexView
-        style={[
-          styles.content,
-          {
-            backgroundColor: Theme['bg-200']
-          }
-        ]}
-        padding="2xl"
-      >
-        <IconBox icon={iconName} size="lg" background />
-        {!!title && (
-          <Text variant="paragraph-500" style={styles.title}>
-            {title}
-          </Text>
-        )}
+    <Modal visible={visible} transparent animationType="slide" onRequestClose={onClose}>
+      <FlexView style={styles.modal}>
+        <FlexView
+          style={[
+            styles.content,
+            {
+              backgroundColor: Theme['bg-100'],
+              borderColor: Theme['gray-glass-015']
+            }
+          ]}
+          padding="2xl"
+        >
+          <IconBox icon={iconName} size="lg" background />
+          {!!title && (
+            <Text variant="paragraph-500" style={styles.title}>
+              {title}
+            </Text>
+          )}
 
-        {!!description && (
-          <Text variant="small-400" color="fg-150" center>
-            {description}
-          </Text>
-        )}
-        <Button onPress={onClose} variant="fill" style={styles.button}>
-          Got it
-        </Button>
+          {!!description && (
+            <Text variant="small-400" color="fg-150" center>
+              {description}
+            </Text>
+          )}
+          <Button onPress={onClose} variant="fill" style={styles.button}>
+            Got it
+          </Button>
+        </FlexView>
       </FlexView>
     </Modal>
   );