feat(toast): add provider contentWrapper prop

Author: vvv-sss

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

@@ -1,8 +1,8 @@
 import Feather from '@expo/vector-icons/Feather';
 import Octicons from '@expo/vector-icons/Octicons';
 import { Button, useToast, type ToastComponentProps } from 'heroui-native';
-import { useCallback } from 'react';
-import { View } from 'react-native';
+import { useCallback, useRef, useState } from 'react';
+import { TextInput, View } from 'react-native';
 import { withUniwind } from 'uniwind';
 import type { UsageVariant } from '../../../components/component-presentation/types';
 import { UsageVariantFlatList } from '../../../components/component-presentation/usage-variant-flatlist';
@@ -199,6 +199,62 @@ const DifferentContentSizesContent = () => {
 
 // ------------------------------------------------------------------------------
 
+const KeyboardAvoidingContent = () => {
+  const [isFocused, setIsFocused] = useState(false);
+
+  const { toast } = useToast();
+
+  const inputRef = useRef<TextInput>(null);
+
+  return (
+    <View className="flex-1 items-center justify-center px-5 gap-5">
+      <Button
+        variant="secondary"
+        onPress={() => {
+          toast.show({
+            variant: 'success',
+            duration: 'persistent',
+            placement: 'bottom',
+            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();
+              inputRef.current?.blur();
+            },
+          });
+        }}
+      >
+        Show toast
+      </Button>
+      <Button
+        onPress={() => {
+          if (isFocused) {
+            inputRef.current?.blur();
+          } else {
+            inputRef.current?.focus();
+          }
+        }}
+        variant="secondary"
+      >
+        Toggle keyboard
+      </Button>
+      <Button onPress={() => toast.hide('all')} variant="destructive-soft">
+        Hide toast
+      </Button>
+      <TextInput
+        ref={inputRef}
+        className="opacity-0 pointer-events-none"
+        onFocus={() => setIsFocused(true)}
+        onBlur={() => setIsFocused(false)}
+      />
+    </View>
+  );
+};
+
+// ------------------------------------------------------------------------------
+
 const CustomToastsContent = () => {
   const { toast } = useToast();
   const LOADING_TOAST_ID = 'loading-toast';
@@ -350,6 +406,11 @@ const TOAST_VARIANTS: UsageVariant[] = [
     label: 'Different content sizes',
     content: <DifferentContentSizesContent />,
   },
+  {
+    value: 'keyboard-avoiding',
+    label: 'Keyboard avoiding',
+    content: <KeyboardAvoidingContent />,
+  },
   {
     value: 'custom-toasts',
     label: 'Custom toasts',

example/src/app/_layout.tsx

@@ -7,9 +7,13 @@ import {
 } from '@expo-google-fonts/inter';
 import { Slot } from 'expo-router';
 import { HeroUINativeProvider } from 'heroui-native';
+import { useCallback } from 'react';
 import { StyleSheet } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
-import { KeyboardProvider } from 'react-native-keyboard-controller';
+import {
+  KeyboardAvoidingView,
+  KeyboardProvider,
+} from 'react-native-keyboard-controller';
 import {
   configureReanimatedLogger,
   ReanimatedLogLevel,
@@ -23,6 +27,41 @@ configureReanimatedLogger({
   strict: false,
 });
 
+/**
+ * Component that wraps app content inside KeyboardProvider
+ * Contains the contentWrapper and HeroUINativeProvider configuration
+ */
+function AppContent() {
+  const contentWrapper = useCallback(
+    (children: React.ReactNode) => (
+      <KeyboardAvoidingView
+        pointerEvents="box-none"
+        behavior="padding"
+        keyboardVerticalOffset={12}
+        className="flex-1"
+      >
+        {children}
+      </KeyboardAvoidingView>
+    ),
+    []
+  );
+
+  return (
+    <AppThemeProvider>
+      <HeroUINativeProvider
+        config={{
+          toast: {
+            contentWrapper,
+          },
+        }}
+      >
+        <Slot />
+        <Toaster />
+      </HeroUINativeProvider>
+    </AppThemeProvider>
+  );
+}
+
 export default function Layout() {
   const fonts = useFonts({
     Inter_400Regular,
@@ -38,12 +77,7 @@ export default function Layout() {
   return (
     <GestureHandlerRootView style={styles.root}>
       <KeyboardProvider>
-        <AppThemeProvider>
-          <HeroUINativeProvider>
-            <Slot />
-            <Toaster />
-          </HeroUINativeProvider>
-        </AppThemeProvider>
+        <AppContent />
       </KeyboardProvider>
     </GestureHandlerRootView>
   );

src/components/toast/toast.animation.ts

@@ -308,11 +308,17 @@ export function useToastRootAnimation(options: UseToastRootAnimationOptions) {
       scale = gestureScale.get();
     } else {
       // Normal state: use stack-based interpolation
-      translateY = interpolate(index, inputRange, [
-        translateYValue[0],
-        translateYValue[1] * sign,
-      ]);
-      scale = interpolate(index, inputRange, scaleValue);
+      translateY = interpolate(
+        index,
+        inputRange,
+        [translateYValue[0], translateYValue[1] * sign],
+        {
+          extrapolateLeft: Extrapolation.CLAMP,
+        }
+      );
+      scale = interpolate(index, inputRange, scaleValue, {
+        extrapolateLeft: Extrapolation.CLAMP,
+      });
     }
 
     if (isAnimationDisabled) {

src/providers/toast/insets-container.tsx

@@ -12,6 +12,13 @@ interface InsetsContainerProps {
    * - Android: safe area insets + 12px (all edges)
    */
   insets?: ToastInsets;
+  /**
+   * Custom wrapper function to wrap the toast content
+   * Receives children and should return a component that wraps them
+   * The wrapper should apply flex: 1 (via className or style) to ensure proper layout
+   * Can be any component wrapper - KeyboardAvoidingView, View, or any custom component
+   */
+  contentWrapper?: (children: ReactNode) => React.ReactElement;
   /**
    * Children to render inside the container
    */
@@ -28,15 +35,19 @@ interface InsetsContainerProps {
  *   - iOS: safe area inset + 0px for top/bottom, + 12px for left/right
  *   - Android: safe area inset + 12px for all edges
  */
-export function InsetsContainer({ insets, children }: InsetsContainerProps) {
+export function InsetsContainer({
+  insets,
+  contentWrapper,
+  children,
+}: InsetsContainerProps) {
   const safeAreaInsets = useSafeAreaInsets();
 
   const finalInsets = useMemo(() => {
     return {
       top: insets?.top ?? safeAreaInsets.top + (Platform.OS === 'ios' ? 0 : 12),
       bottom:
         insets?.bottom ??
-        safeAreaInsets.bottom + (Platform.OS === 'ios' ? 0 : 12),
+        safeAreaInsets.bottom + (Platform.OS === 'ios' ? 6 : 12),
       left: insets?.left ?? safeAreaInsets.left + 12,
       right: insets?.right ?? safeAreaInsets.right + 12,
     };
@@ -52,7 +63,11 @@ export function InsetsContainer({ insets, children }: InsetsContainerProps) {
         paddingRight: finalInsets.right,
       }}
     >
-      {children}
+      {contentWrapper ? (
+        contentWrapper(children)
+      ) : (
+        <View className="flex-1">{children}</View>
+      )}
     </View>
   );
 }

src/providers/toast/provider.tsx

@@ -67,6 +67,7 @@ function createConfigToastComponent(
 export function ToastProvider({
   insets,
   maxVisibleToasts = 3,
+  contentWrapper,
   children,
 }: ToastProviderProps) {
   const [toasts, dispatch] = useReducer(toastReducer, []);
@@ -305,7 +306,7 @@ export function ToastProvider({
   return (
     <ToasterContext.Provider value={contextValue}>
       {children}
-      <InsetsContainer insets={insets}>
+      <InsetsContainer insets={insets} contentWrapper={contentWrapper}>
         <View className="flex-1">
           {toasts.map((toastItem, index) => (
             <ToastItemRenderer

src/providers/toast/types.ts

@@ -44,6 +44,28 @@ export interface ToastProviderProps {
    * @default 3
    */
   maxVisibleToasts?: number;
+  /**
+   * Custom wrapper function to wrap the toast content
+   * Receives children and should return a component that wraps them
+   * The wrapper should apply flex: 1 (via className or style) to ensure proper layout
+   * Can be any component wrapper - KeyboardAvoidingView, View, or any custom component
+   *
+   * @example
+   * ```tsx
+   * <ToastProvider
+   *   contentWrapper={(children) => (
+   *     <KeyboardAvoidingView
+   *       behavior="padding"
+   *       keyboardVerticalOffset={24}
+   *       className="flex-1"
+   *     >
+   *       {children}
+   *     </KeyboardAvoidingView>
+   *   )}
+   * >
+   * ```
+   */
+  contentWrapper?: (children: React.ReactNode) => React.ReactElement;
   /**
    * Children to render
    */