CP-12242: Fix toast width covering full screen and blocking interactions outside toast (#3259)

Author: onghwan

packages/core-mobile/app/new/ContextApp.tsx

@@ -7,20 +7,13 @@ import { EncryptedStoreProvider } from 'contexts/EncryptedStoreProvider'
 import { PosthogContextProvider } from 'contexts/PosthogContext'
 import { ReactQueryProvider } from 'contexts/ReactQueryProvider'
 import React, { FC, PropsWithChildren } from 'react'
-import { Platform } from 'react-native'
 import { ConfettiMethods } from 'react-native-fast-confetti'
 import { RootSiblingParent } from 'react-native-root-siblings'
-import { FullWindowOverlay } from 'react-native-screens'
-import Toast from 'react-native-toast-notifications'
 import SentryService from 'services/sentry/SentryService'
 import { App } from './App'
 import JailbreakCheck from './common/components/JailbreakCheck'
 import TopLevelErrorFallback from './common/components/TopLevelErrorFallback'
 
-const setGlobalToast = (toast: Toast): void => {
-  global.toast = toast
-}
-
 const setGlobalConfetti = (confetti: ConfettiMethods): void => {
   global.confetti = confetti
 }
@@ -44,22 +37,6 @@ const ContextApp = (): JSX.Element => {
           <App />
         </RootSiblingParent>
         <JailbreakCheck />
-        <Toast
-          ToastContainerWrapper={
-            Platform.OS === 'ios'
-              ? {
-                  component: FullWindowOverlay,
-                  props: {
-                    children: undefined
-                  }
-                }
-              : undefined
-          }
-          ref={setGlobalToast}
-          offsetTop={30}
-          normalColor={'00FFFFFF'}
-        />
-
         <Confetti ref={setGlobalConfetti} />
       </ContextProviders>
     </Sentry.ErrorBoundary>

packages/core-mobile/app/new/common/utils/toast.tsx

@@ -43,6 +43,7 @@ export const GlobalToast = (): JSX.Element => {
             }
           : undefined
       }
+      containerStyle={{ width: undefined }}
       placement="top"
       animationType="slide-in"
       offsetTop={offsetTop}

packages/k2-alpine/src/components/Toast/TransactionSnackbar.tsx

@@ -110,7 +110,7 @@ export const TransactionSnackbar = ({
       onPress={onPress}>
       <View
         style={{
-          width: SCREEN_WIDTH,
+          maxWidth: SCREEN_WIDTH * 0.9,
           justifyContent: 'center',
           alignItems: 'center'
         }}>
@@ -129,7 +129,6 @@ export const TransactionSnackbar = ({
             variant="body1"
             numberOfLines={1}
             sx={{
-              maxWidth: '80%',
               marginLeft: 5,
               fontSize: 14,
               color: textColor