feat(toast): handle native modal overlay

Author: vvv-sss

example/src/app/(home)/_layout.tsx

@@ -144,6 +144,13 @@ export default function Layout() {
             animationDuration: 300,
           }}
         />
+        <Stack.Screen
+          name="components/toast-native-modal"
+          options={{
+            title: 'Toast From Native Modal',
+            presentation: 'formSheet',
+          }}
+        />
       </Stack>
     </View>
   );

example/src/app/(home)/components/toast-native-modal.tsx

@@ -0,0 +1,33 @@
+import { Button, useToast } from 'heroui-native';
+import { View } from 'react-native';
+
+export default function ToastNativeModalScreen() {
+  const { toast } = useToast();
+
+  return (
+    <View className="pt-40 px-5 items-center justify-center gap-5">
+      <Button
+        variant="secondary"
+        className="self-center"
+        onPress={() => {
+          toast.show({
+            variant: 'success',
+            duration: 2000,
+            label: 'Payment successful',
+            description:
+              'Your subscription has been renewed. You will be charged $9.99/month. Thank you for your continued support.',
+            actionLabel: 'Close',
+            onActionPress: ({ hide }) => {
+              hide();
+            },
+          });
+        }}
+      >
+        Show toast
+      </Button>
+      <Button onPress={() => toast.hide('all')} variant="destructive-soft">
+        Hide toast
+      </Button>
+    </View>
+  );
+}

example/src/app/(home)/components/toast.tsx

@@ -1,5 +1,6 @@
 import Feather from '@expo/vector-icons/Feather';
 import Octicons from '@expo/vector-icons/Octicons';
+import { useRouter } from 'expo-router';
 import { Button, useToast, type ToastComponentProps } from 'heroui-native';
 import { useCallback, useRef, useState } from 'react';
 import { TextInput, View } from 'react-native';
@@ -255,6 +256,23 @@ const KeyboardAvoidingContent = () => {
 
 // ------------------------------------------------------------------------------
 
+const FromNativeModalContent = () => {
+  const router = useRouter();
+
+  return (
+    <View className="flex-1 items-center justify-center px-5 gap-5">
+      <Button
+        variant="secondary"
+        onPress={() => router.push('components/toast-native-modal')}
+      >
+        Open modal
+      </Button>
+    </View>
+  );
+};
+
+// ------------------------------------------------------------------------------
+
 const CustomToastsContent = () => {
   const { toast } = useToast();
   const LOADING_TOAST_ID = 'loading-toast';
@@ -411,6 +429,11 @@ const TOAST_VARIANTS: UsageVariant[] = [
     label: 'Keyboard avoiding',
     content: <KeyboardAvoidingContent />,
   },
+  {
+    value: 'from-native-modal',
+    label: 'From native modal',
+    content: <FromNativeModalContent />,
+  },
   {
     value: 'custom-toasts',
     label: 'Custom toasts',

src/providers/toast/insets-container.tsx

@@ -1,7 +1,8 @@
 import type { ReactNode } from 'react';
-import { useMemo } from 'react';
+import { Fragment, useMemo } from 'react';
 import { Platform, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { FullWindowOverlay } from 'react-native-screens';
 import type { ToastInsets } from './types';
 
 interface InsetsContainerProps {
@@ -53,21 +54,21 @@ export function InsetsContainer({
     };
   }, [safeAreaInsets, insets]);
 
+  const WindowOverlay = Platform.OS === 'ios' ? FullWindowOverlay : Fragment;
+
   return (
-    <View
-      className="absolute inset-0 pointer-events-box-none"
-      style={{
-        paddingTop: finalInsets.top,
-        paddingBottom: finalInsets.bottom,
-        paddingLeft: finalInsets.left,
-        paddingRight: finalInsets.right,
-      }}
-    >
-      {contentWrapper ? (
-        contentWrapper(children)
-      ) : (
-        <View className="flex-1">{children}</View>
-      )}
-    </View>
+    <WindowOverlay>
+      <View
+        className="absolute inset-0 pointer-events-box-none"
+        style={{
+          paddingTop: finalInsets.top,
+          paddingBottom: finalInsets.bottom,
+          paddingLeft: finalInsets.left,
+          paddingRight: finalInsets.right,
+        }}
+      >
+        {contentWrapper ? contentWrapper(children) : children}
+      </View>
+    </WindowOverlay>
   );
 }