feat(toast): add InsetsContainer component

Author: vvv-sss

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

@@ -202,11 +202,11 @@ const MultipleToastsContent = () => {
 // ------------------------------------------------------------------------------
 
 const TOAST_VARIANTS: UsageVariant[] = [
-  // {
-  //   value: 'all-variants',
-  //   label: 'All variants',
-  //   content: <AllVariantsContent />,
-  // },
+  {
+    value: 'all-variants',
+    label: 'All variants',
+    content: <AllVariantsContent />,
+  },
   {
     value: 'interactive-demo',
     label: 'Interactive Demo',

src/providers/toast/insets-container.tsx

@@ -0,0 +1,52 @@
+import type { ReactNode } from 'react';
+import { useMemo } from 'react';
+import { View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import type { ToastInsets } from './types';
+
+interface InsetsContainerProps {
+  /**
+   * Optional inset values for all edges
+   * If not provided, defaults to safe area insets + 12px
+   */
+  insets?: ToastInsets;
+  /**
+   * Children to render inside the container
+   */
+  children: ReactNode;
+}
+
+/**
+ * Container component that applies inset padding to position toasts
+ * away from screen edges and safe areas
+ *
+ * Combines custom insets with safe area insets:
+ * - If custom inset is provided, it overrides safe area + default padding
+ * - If not provided, uses safe area inset + 12px default padding
+ */
+export function InsetsContainer({ insets, children }: InsetsContainerProps) {
+  const safeAreaInsets = useSafeAreaInsets();
+
+  const finalInsets = useMemo(() => {
+    return {
+      top: insets?.top ?? safeAreaInsets.top + 12,
+      bottom: insets?.bottom ?? safeAreaInsets.bottom + 12,
+      left: insets?.left ?? safeAreaInsets.left + 12,
+      right: insets?.right ?? safeAreaInsets.right + 12,
+    };
+  }, [safeAreaInsets, insets]);
+
+  return (
+    <View
+      className="absolute inset-0 pointer-events-box-none"
+      style={{
+        paddingTop: finalInsets.top,
+        paddingBottom: finalInsets.bottom,
+        paddingLeft: finalInsets.left,
+        paddingRight: finalInsets.right,
+      }}
+    >
+      {children}
+    </View>
+  );
+}

src/providers/toast/provider.tsx

@@ -3,13 +3,12 @@ import {
   Fragment,
   useCallback,
   useContext,
-  useEffect,
   useMemo,
   useReducer,
   useRef,
 } from 'react';
 import { View } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { InsetsContainer } from './insets-container';
 import { toastReducer } from './reducer';
 import type {
   ToasterContextValue,
@@ -30,23 +29,8 @@ const ToasterContext = createContext<ToasterContextValue | null>(null);
 export function ToastProvider({ insets, children }: ToastProviderProps) {
   const [toasts, dispatch] = useReducer(toastReducer, []);
 
-  useEffect(() => {
-    console.log('🔴 🔴', toasts); // VS remove
-  }, [toasts]);
-
-  const safeAreaInsets = useSafeAreaInsets();
-
   const idCounter = useRef(0);
 
-  const finalInsets = useMemo(() => {
-    return {
-      top: insets?.top ?? safeAreaInsets.top + 12,
-      bottom: insets?.bottom ?? safeAreaInsets.bottom + 12,
-      left: insets?.left ?? safeAreaInsets.left + 12,
-      right: insets?.right ?? safeAreaInsets.right + 12,
-    };
-  }, [safeAreaInsets, insets]);
-
   /**
    * Show a toast
    */
@@ -92,23 +76,15 @@ export function ToastProvider({ insets, children }: ToastProviderProps) {
   return (
     <ToasterContext.Provider value={contextValue}>
       {children}
-      <View
-        className="absolute inset-0 pointer-events-box-none"
-        style={{
-          paddingTop: finalInsets.top,
-          paddingBottom: finalInsets.bottom,
-          paddingLeft: finalInsets.left,
-          paddingRight: finalInsets.right,
-        }}
-      >
+      <InsetsContainer insets={insets}>
         <View className="flex-1">
           {toasts.map((toastItem) => {
             return (
               <Fragment key={toastItem.id}>{toastItem.component}</Fragment>
             );
           })}
         </View>
-      </View>
+      </InsetsContainer>
     </ToasterContext.Provider>
   );
 }