feat(toast): handle global toast props

vvv-sss · vvv-sss · commit 26722fccb07b · 2025-11-28T12:46:11.000+02:00
diff --git a/src/components/toast/toast.tsx b/src/components/toast/toast.tsx
@@ -9,6 +9,7 @@ import type { ViewRef } from '../../helpers/types';
 import { createContext } from '../../helpers/utils';
 import * as ToastPrimitive from '../../primitives/toast';
 import type { ToastComponentProps } from '../../providers/toast';
+import { useToastConfig } from '../../providers/toast';
 import { Button } from '../button';
 import type { PressableFeedbackHighlightRootAnimation } from '../pressable-feedback';
 import { useToastRootAnimation } from './toast.animation';
@@ -33,22 +34,32 @@ const [ToastProvider, useToast] = createContext<ToastContextValue>({
 // --------------------------------------------------
 
 const ToastRoot = forwardRef<ViewRef, ToastRootProps>((props, ref) => {
+  const globalConfig = useToastConfig();
+
   const {
     children,
-    variant = 'default',
-    placement = 'top',
+    variant: localVariant,
+    placement: localPlacement,
     index,
     total,
     heights,
     maxVisibleToasts,
     className,
     style,
-    animation,
-    isSwipeable,
+    animation: localAnimation,
+    isSwipeable: localIsSwipeable,
     hide,
     ...restProps
   } = props;
 
+  /**
+   * Merge global config with local props, ensuring local props take precedence
+   */
+  const variant = localVariant ?? globalConfig?.variant ?? 'default';
+  const placement = localPlacement ?? globalConfig?.placement ?? 'top';
+  const animation = localAnimation ?? globalConfig?.animation;
+  const isSwipeable = localIsSwipeable ?? globalConfig?.isSwipeable;
+
   // Access id from props (id is omitted from ToastRootProps type but available at runtime)
   const toastProps = props as ToastRootProps & Pick<ToastComponentProps, 'id'>;
   const { id } = toastProps;
@@ -288,11 +299,14 @@ const ToastClose = forwardRef<View, ToastCloseProps>((props, ref) => {
  * Used internally when showing toasts with string or config object (without component)
  */
 export function DefaultToast(props: DefaultToastProps) {
+  const globalConfig = useToastConfig();
+
   const {
     id,
-    variant = 'default',
-    placement = 'top',
-    isSwipeable,
+    variant: localVariant,
+    placement: localPlacement,
+    isSwipeable: localIsSwipeable,
+    animation: localAnimation,
     label,
     description,
     actionLabel,
@@ -303,6 +317,14 @@ export function DefaultToast(props: DefaultToastProps) {
     ...toastComponentProps
   } = props;
 
+  /**
+   * Merge global config with local props, ensuring local props take precedence
+   */
+  const variant = localVariant ?? globalConfig?.variant ?? 'default';
+  const placement = localPlacement ?? globalConfig?.placement ?? 'top';
+  const isSwipeable = localIsSwipeable ?? globalConfig?.isSwipeable;
+  const animation = localAnimation ?? globalConfig?.animation;
+
   const handleActionPress = () => {
     if (onActionPress) {
       onActionPress({ show, hide });
@@ -315,6 +337,7 @@ export function DefaultToast(props: DefaultToastProps) {
       variant={variant}
       placement={placement}
       isSwipeable={isSwipeable}
+      animation={animation}
       className="flex-row gap-3"
       hide={hide}
       show={show}
diff --git a/src/components/toast/toast.types.ts b/src/components/toast/toast.types.ts
@@ -246,6 +246,10 @@ export interface DefaultToastProps extends ToastComponentProps {
    * @default 'top'
    */
   placement?: ToastRootProps['placement'];
+  /**
+   * Animation configuration for toast
+   */
+  animation?: ToastRootProps['animation'];
   /**
    * Whether the toast can be swiped to dismiss and dragged with rubber effect
    */
diff --git a/src/providers/toast/index.ts b/src/providers/toast/index.ts
@@ -1,2 +1,2 @@
-export { ToastProvider, useToast } from './provider';
+export { ToastProvider, useToast, useToastConfig } from './provider';
 export type * from './types';
diff --git a/src/providers/toast/provider.tsx b/src/providers/toast/provider.tsx
@@ -15,6 +15,7 @@ import { ToastItemRenderer } from './toast-item-renderer';
 import type {
   ToastComponentProps,
   ToasterContextValue,
+  ToastGlobalConfig,
   ToastProviderProps,
   ToastShowConfig,
   ToastShowOptions,
@@ -28,50 +29,116 @@ const DEFAULT_DURATION = 4000;
  */
 const ToasterContext = createContext<ToasterContextValue | null>(null);
 
+/**
+ * Context for global toast configuration
+ */
+const ToastConfigContext = createContext<ToastGlobalConfig | undefined>(
+  undefined
+);
+
+/**
+ * Merges global config with local config, ensuring local config takes precedence
+ * Only includes defined values from localConfig to avoid overriding global config with undefined
+ */
+function mergeToastConfig(
+  globalConfig: ToastGlobalConfig | undefined,
+  localConfig: Partial<ToastGlobalConfig>
+): Partial<ToastGlobalConfig> {
+  const result: Partial<ToastGlobalConfig> = { ...globalConfig };
+
+  // Only override with defined values from localConfig
+  if (localConfig.variant !== undefined) {
+    result.variant = localConfig.variant;
+  }
+  if (localConfig.placement !== undefined) {
+    result.placement = localConfig.placement;
+  }
+  if (localConfig.isSwipeable !== undefined) {
+    result.isSwipeable = localConfig.isSwipeable;
+  }
+  if (localConfig.animation !== undefined) {
+    result.animation = localConfig.animation;
+  }
+
+  return result;
+}
+
 /**
  * Creates a component function for simple string toast
  */
 function createStringToastComponent(
-  label: string
+  label: string,
+  globalConfig: ToastGlobalConfig | undefined
 ): (props: ToastComponentProps) => React.ReactElement {
-  return (props: ToastComponentProps) => (
-    <DefaultToast {...props} label={label} variant="default" />
-  );
+  return (props: ToastComponentProps) => {
+    const mergedConfig = mergeToastConfig(globalConfig, {
+      variant: 'default',
+    });
+    return (
+      <DefaultToast
+        {...props}
+        label={label}
+        variant={mergedConfig.variant}
+        placement={mergedConfig.placement}
+        isSwipeable={mergedConfig.isSwipeable}
+        animation={mergedConfig.animation}
+      />
+    );
+  };
 }
 
 /**
  * Creates a component function for config-based toast
  */
 function createConfigToastComponent(
-  config: ToastShowConfig
+  config: ToastShowConfig,
+  globalConfig: ToastGlobalConfig | undefined
 ): (props: ToastComponentProps) => React.ReactElement {
-  return (props: ToastComponentProps) => (
-    <DefaultToast
-      {...props}
-      variant={config.variant}
-      placement={config.placement}
-      isSwipeable={config.isSwipeable}
-      label={config.label}
-      description={config.description}
-      actionLabel={config.actionLabel}
-      onActionPress={config.onActionPress}
-      icon={config.icon}
-    />
-  );
+  return (props: ToastComponentProps) => {
+    const mergedConfig = mergeToastConfig(globalConfig, {
+      variant: config.variant,
+      placement: config.placement,
+      isSwipeable: config.isSwipeable,
+      animation: config.animation,
+    });
+    return (
+      <DefaultToast
+        {...props}
+        variant={mergedConfig.variant}
+        placement={mergedConfig.placement}
+        isSwipeable={mergedConfig.isSwipeable}
+        animation={mergedConfig.animation}
+        label={config.label}
+        description={config.description}
+        actionLabel={config.actionLabel}
+        onActionPress={config.onActionPress}
+        icon={config.icon}
+      />
+    );
+  };
 }
 
 /**
  * Toast provider component
  * Wraps your app to enable toast functionality
  */
 export function ToastProvider({
+  defaultProps,
   insets,
   maxVisibleToasts = 3,
   contentWrapper,
   children,
 }: ToastProviderProps) {
   const [toasts, dispatch] = useReducer(toastReducer, []);
 
+  /**
+   * Memoize global config to prevent unnecessary re-renders
+   */
+  const globalConfig = useMemo<ToastGlobalConfig | undefined>(
+    () => defaultProps,
+    [defaultProps]
+  );
+
   const isToastVisible = toasts.length > 0;
 
   const heights = useSharedValue<Record<string, number>>({});
@@ -206,7 +273,7 @@ export function ToastProvider({
       if (typeof options === 'string') {
         normalizedOptions = {
           id: undefined,
-          component: createStringToastComponent(options),
+          component: createStringToastComponent(options, globalConfig),
           duration: DEFAULT_DURATION,
         };
         duration = DEFAULT_DURATION;
@@ -219,7 +286,7 @@ export function ToastProvider({
         explicitId = config.id;
         normalizedOptions = {
           id: config.id,
-          component: createConfigToastComponent(config),
+          component: createConfigToastComponent(config, globalConfig),
           duration,
           onShow: config.onShow,
           onHide: config.onHide,
@@ -289,7 +356,7 @@ export function ToastProvider({
 
       return id;
     },
-    [total, toasts]
+    [total, toasts, globalConfig]
   );
 
   const contextValue = useMemo<ToasterContextValue>(
@@ -304,25 +371,27 @@ export function ToastProvider({
   );
 
   return (
-    <ToasterContext.Provider value={contextValue}>
-      {children}
-      <InsetsContainer insets={insets} contentWrapper={contentWrapper}>
-        <View className="flex-1">
-          {toasts.map((toastItem, index) => (
-            <ToastItemRenderer
-              key={toastItem.id}
-              toastItem={toastItem}
-              show={show}
-              hide={hide}
-              index={index}
-              total={total}
-              heights={heights}
-              maxVisibleToasts={maxVisibleToasts}
-            />
-          ))}
-        </View>
-      </InsetsContainer>
-    </ToasterContext.Provider>
+    <ToastConfigContext.Provider value={globalConfig}>
+      <ToasterContext.Provider value={contextValue}>
+        {children}
+        <InsetsContainer insets={insets} contentWrapper={contentWrapper}>
+          <View className="flex-1">
+            {toasts.map((toastItem, index) => (
+              <ToastItemRenderer
+                key={toastItem.id}
+                toastItem={toastItem}
+                show={show}
+                hide={hide}
+                index={index}
+                total={total}
+                heights={heights}
+                maxVisibleToasts={maxVisibleToasts}
+              />
+            ))}
+          </View>
+        </InsetsContainer>
+      </ToasterContext.Provider>
+    </ToastConfigContext.Provider>
   );
 }
 
@@ -359,3 +428,18 @@ export function useToast() {
     isToastVisible: context.isToastVisible,
   };
 }
+
+/**
+ * Hook to access global toast configuration
+ *
+ * @returns Global toast configuration or undefined if not set
+ *
+ * @example
+ * ```tsx
+ * const globalConfig = useToastConfig();
+ * // Use globalConfig.variant, globalConfig.placement, etc.
+ * ```
+ */
+export function useToastConfig(): ToastGlobalConfig | undefined {
+  return useContext(ToastConfigContext);
+}
diff --git a/src/providers/toast/types.ts b/src/providers/toast/types.ts
@@ -1,6 +1,16 @@
 import type { SharedValue } from 'react-native-reanimated';
 import type { ToastRootProps } from '../../components/toast/toast.types';
 
+/**
+ * Global toast configuration
+ * These values are used as defaults for all toasts unless overridden locally
+ */
+export interface ToastGlobalConfig
+  extends Pick<
+    ToastRootProps,
+    'variant' | 'placement' | 'isSwipeable' | 'animation'
+  > {}
+
 /**
  * Insets for spacing from screen edges
  */
@@ -12,7 +22,7 @@ export interface ToastInsets {
   top?: number;
   /**
    * Inset from the bottom edge in pixels (added to safe area inset)
-   * @default Platform-specific: iOS = 0, Android = 12
+   * @default Platform-specific: iOS = 6, Android = 12
    */
   bottom?: number;
   /**
@@ -31,6 +41,12 @@ export interface ToastInsets {
  * Props for the ToastProvider component
  */
 export interface ToastProviderProps {
+  /**
+   * Global toast configuration
+   * These values are used as defaults for all toasts unless overridden locally
+   * Local configs have precedence over global config
+   */
+  defaultProps?: ToastGlobalConfig;
   /**
    * Insets for spacing from screen edges (added to safe area insets)
    * @default Platform-specific:
@@ -117,7 +133,10 @@ export interface ToastComponentProps {
  * Used when component is not provided
  */
 export interface ToastShowConfig
-  extends Pick<ToastRootProps, 'variant' | 'placement' | 'isSwipeable'> {
+  extends Pick<
+    ToastRootProps,
+    'variant' | 'placement' | 'isSwipeable' | 'animation'
+  > {
   /**
    * Duration in milliseconds before the toast automatically disappears
    * Set to `'persistent'` to prevent auto-hide (toast will remain until manually dismissed)

Original file line number	Diff line number	Diff line change
`@@ -1,2 +1,2 @@`
`1`		`-export { ToastProvider, useToast } from './provider';`
	`1`	`+export { ToastProvider, useToast, useToastConfig } from './provider';`
`2`	`2`	`export type * from './types';`