react-native-sooner 1.0.0

package/src/toast.tsx

@@ -0,0 +1,429 @@
+import { useCallback, useEffect, useMemo, useRef } from "react";
+import { Pressable, Text, View, type ViewStyle, type TextStyle } from "react-native";
+import { Gesture, GestureDetector } from "react-native-gesture-handler";
+import Animated, {
+  Easing,
+  runOnJS,
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+  withTiming,
+} from "react-native-reanimated";
+import {
+  ANIMATION_DEFAULTS,
+  DAMPING_FACTOR,
+  ENTRY_OFFSET,
+  SNAP_BACK_DURATION,
+  SWIPE_EXIT_DISTANCE,
+  SWIPE_THRESHOLD,
+  VELOCITY_THRESHOLD,
+} from "./constants";
+import { CloseIcon, getIcon } from "./icons";
+import { baseStyles, getIconColor, getToastColors } from "./theme";
+import type { AnimationConfig, ToastIcons, ToastProps, ToastT, ToastType } from "./types";
+import { usePauseableTimer } from "./use-pauseable-timer";
+
+let Haptics: typeof import("expo-haptics") | null = null;
+try {
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
+  Haptics = require("expo-haptics");
+} catch {
+  // expo-haptics not available
+}
+
+function triggerHaptic(type: "light" | "medium" | "success" | "warning" | "error" = "light"): void {
+  if (!Haptics) return;
+
+  try {
+    switch (type) {
+      case "success":
+        Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
+        break;
+      case "warning":
+        Haptics.notificationAsync(Haptics.NotificationFeedbackType.Warning);
+        break;
+      case "error":
+        Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
+        break;
+      case "medium":
+        Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
+        break;
+      default:
+        Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+    }
+  } catch {
+    // ignore
+  }
+}
+
+function getSpringConfig(animation: Required<AnimationConfig>) {
+  return {
+    damping: animation.damping,
+    stiffness: animation.stiffness,
+    mass: animation.mass,
+  };
+}
+
+function ToastIcon({
+  icon,
+  icons,
+  type,
+  iconColor,
+}: {
+  icon?: React.ReactNode;
+  icons?: ToastIcons;
+  type: ToastType;
+  iconColor: string;
+}) {
+  if (icon) {
+    return <View style={baseStyles.iconContainer}>{icon}</View>;
+  }
+
+  if (icons && type in icons) {
+    const customIcon = icons[type as keyof ToastIcons];
+    if (customIcon) {
+      return <View style={baseStyles.iconContainer}>{customIcon}</View>;
+    }
+  }
+
+  const defaultIcon = getIcon(type, iconColor);
+  if (defaultIcon) {
+    return <View style={baseStyles.iconContainer}>{defaultIcon}</View>;
+  }
+
+  return null;
+}
+
+function ToastActions({
+  toast,
+  action,
+  cancel,
+  toastColors,
+  defaultStyles,
+  hapticFeedback,
+}: {
+  toast: ToastT;
+  action?: ToastT["action"];
+  cancel?: ToastT["cancel"];
+  toastColors: ReturnType<typeof getToastColors>;
+  defaultStyles?: ToastProps["defaultStyles"];
+  hapticFeedback: boolean;
+}) {
+  const handleActionPress = useCallback(() => {
+    if (hapticFeedback) triggerHaptic("medium");
+    action?.onClick(toast);
+  }, [action, toast, hapticFeedback]);
+
+  const handleCancelPress = useCallback(() => {
+    if (hapticFeedback) triggerHaptic("light");
+    cancel?.onClick(toast);
+  }, [cancel, toast, hapticFeedback]);
+
+  if (!action && !cancel) return null;
+
+  const cancelButtonStyle: ViewStyle = {
+    ...baseStyles.cancelButton,
+    borderColor: toastColors.border,
+    ...(defaultStyles?.cancelButton as ViewStyle),
+    ...(toast.styles?.cancelButton as ViewStyle),
+    ...(cancel?.style as ViewStyle),
+  };
+
+  const cancelTextStyle: TextStyle = {
+    ...baseStyles.cancelButtonText,
+    color: toastColors.description,
+    ...(defaultStyles?.cancelButtonText as TextStyle),
+    ...(toast.styles?.cancelButtonText as TextStyle),
+    ...(cancel?.textStyle as TextStyle),
+  };
+
+  const actionButtonStyle: ViewStyle = {
+    ...baseStyles.actionButton,
+    backgroundColor: toastColors.foreground,
+    ...(defaultStyles?.actionButton as ViewStyle),
+    ...(toast.styles?.actionButton as ViewStyle),
+    ...(action?.style as ViewStyle),
+  };
+
+  const actionTextStyle: TextStyle = {
+    ...baseStyles.actionButtonText,
+    color: toastColors.background,
+    ...(defaultStyles?.actionButtonText as TextStyle),
+    ...(toast.styles?.actionButtonText as TextStyle),
+    ...(action?.textStyle as TextStyle),
+  };
+
+  return (
+    <View style={baseStyles.actionsContainer}>
+      {cancel && (
+        <Pressable
+          onPress={handleCancelPress}
+          style={cancelButtonStyle}
+          accessibilityLabel={cancel.label}
+        >
+          <Text style={cancelTextStyle}>{cancel.label}</Text>
+        </Pressable>
+      )}
+
+      {action && (
+        <Pressable
+          onPress={handleActionPress}
+          style={actionButtonStyle}
+          accessibilityLabel={action.label}
+        >
+          <Text style={actionTextStyle}>{action.label}</Text>
+        </Pressable>
+      )}
+    </View>
+  );
+}
+
+export function Toast({
+  toast,
+  position,
+  gap,
+  swipeToDismiss,
+  swipeDirection,
+  theme,
+  richColors,
+  closeButton,
+  icons,
+  defaultStyles,
+  defaultAnimation = ANIMATION_DEFAULTS,
+  onDismiss,
+  duration,
+  pauseOnAppBackground,
+  hapticFeedback = false,
+}: ToastProps) {
+  const animation: Required<AnimationConfig> = useMemo(() => {
+    const toastAnim = toast.animation;
+    return {
+      duration: toastAnim?.duration ?? defaultAnimation.duration ?? ANIMATION_DEFAULTS.duration,
+      exitDuration: toastAnim?.exitDuration ?? defaultAnimation.exitDuration ?? ANIMATION_DEFAULTS.exitDuration,
+      useSpring: toastAnim?.useSpring ?? defaultAnimation.useSpring ?? ANIMATION_DEFAULTS.useSpring,
+      damping: toastAnim?.damping ?? defaultAnimation.damping ?? ANIMATION_DEFAULTS.damping,
+      stiffness: toastAnim?.stiffness ?? defaultAnimation.stiffness ?? ANIMATION_DEFAULTS.stiffness,
+      mass: toastAnim?.mass ?? defaultAnimation.mass ?? ANIMATION_DEFAULTS.mass,
+    };
+  }, [defaultAnimation, toast.animation]);
+
+  const opacity = useSharedValue(0);
+  const translateY = useSharedValue(position.startsWith("top") ? -ENTRY_OFFSET : ENTRY_OFFSET);
+  const translateX = useSharedValue(0);
+  const scale = useSharedValue(0.95);
+  const isExiting = useRef(false);
+
+  const canSwipeLeft = swipeDirection.includes("left");
+  const canSwipeRight = swipeDirection.includes("right");
+
+  const { type, title, description, action, cancel, icon, dismissible = true } = toast;
+  const toastColors = getToastColors(type, theme, richColors);
+
+  const hasCustomIcon = Boolean(icon) || Boolean(icons?.[type as keyof ToastIcons]);
+  const iconColor = useMemo(() => {
+    if (hasCustomIcon || type === "default") return "";
+    return getIconColor(type, theme, richColors);
+  }, [hasCustomIcon, type, theme, richColors]);
+
+  const hasIcon = hasCustomIcon || type !== "default";
+
+  useEffect(() => {
+    if (animation.useSpring) {
+      const springConfig = getSpringConfig(animation);
+      opacity.value = withTiming(1, { duration: animation.duration * 0.6 });
+      translateY.value = withSpring(0, springConfig);
+      scale.value = withSpring(1, springConfig);
+    } else {
+      const timingConfig = {
+        duration: animation.duration,
+        easing: Easing.bezier(0.19, 1, 0.22, 1),
+      };
+      opacity.value = withTiming(1, { duration: animation.duration * 0.6 });
+      translateY.value = withTiming(0, timingConfig);
+      scale.value = withTiming(1, timingConfig);
+    }
+
+    if (hapticFeedback) {
+      const hapticType = type === "success" ? "success"
+        : type === "error" ? "error"
+        : type === "warning" ? "warning"
+        : "light";
+      triggerHaptic(hapticType);
+    }
+  }, [opacity, translateY, scale, animation, hapticFeedback, type]);
+
+  const handleDismiss = useCallback(() => {
+    if (isExiting.current) return;
+    isExiting.current = true;
+
+    const exitOffset = position.startsWith("top") ? -ENTRY_OFFSET : ENTRY_OFFSET;
+    const exitConfig = {
+      duration: animation.exitDuration,
+      easing: Easing.bezier(0.4, 0, 1, 1),
+    };
+
+    opacity.value = withTiming(0, { duration: animation.exitDuration * 0.7 });
+    translateY.value = withTiming(exitOffset, exitConfig);
+    scale.value = withTiming(0.95, exitConfig);
+
+    setTimeout(() => onDismiss(toast.id), animation.exitDuration);
+  }, [opacity, translateY, scale, position, onDismiss, toast.id, animation.exitDuration]);
+
+  const delayedDismiss = useCallback(() => {
+    if (isExiting.current) return;
+    isExiting.current = true;
+    setTimeout(() => onDismiss(toast.id), animation.exitDuration);
+  }, [onDismiss, toast.id, animation.exitDuration]);
+
+  const effectiveDuration = toast.duration ?? duration;
+  const shouldAutoDismiss =
+    effectiveDuration > 0 &&
+    effectiveDuration !== Number.POSITIVE_INFINITY &&
+    toast.type !== "loading";
+
+  const handleAutoClose = useCallback(() => {
+    toast.onAutoClose?.(toast);
+    handleDismiss();
+  }, [toast, handleDismiss]);
+
+  usePauseableTimer(handleAutoClose, effectiveDuration, shouldAutoDismiss, pauseOnAppBackground);
+
+  const panGesture = Gesture.Pan()
+    .enabled(swipeToDismiss && dismissible)
+    .onUpdate((event) => {
+      "worklet";
+      if (canSwipeLeft && event.translationX < 0) {
+        translateX.value = event.translationX;
+      } else if (canSwipeRight && event.translationX > 0) {
+        translateX.value = event.translationX;
+      }
+
+      if (Math.abs(translateX.value) > SWIPE_THRESHOLD) {
+        const excess = Math.abs(translateX.value) - SWIPE_THRESHOLD;
+        const direction = translateX.value > 0 ? 1 : -1;
+        translateX.value = direction * (SWIPE_THRESHOLD + excess * DAMPING_FACTOR);
+      }
+    })
+    .onEnd((event) => {
+      "worklet";
+      const shouldDismiss =
+        Math.abs(event.translationX) > SWIPE_THRESHOLD ||
+        Math.abs(event.velocityX) > VELOCITY_THRESHOLD;
+
+      if (shouldDismiss) {
+        const direction = event.translationX > 0 ? 1 : -1;
+        translateX.value = withTiming(
+          direction * SWIPE_EXIT_DISTANCE,
+          { duration: animation.exitDuration }
+        );
+        opacity.value = withTiming(0, { duration: animation.exitDuration });
+        runOnJS(delayedDismiss)();
+      } else {
+        translateX.value = withTiming(0, { duration: SNAP_BACK_DURATION });
+      }
+    });
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    opacity: opacity.value,
+    transform: [
+      { translateY: translateY.value },
+      { translateX: translateX.value },
+      { scale: scale.value },
+    ],
+  }));
+
+  const containerStyle: ViewStyle = {
+    ...baseStyles.container,
+    backgroundColor: toastColors.background,
+    borderColor: toastColors.border,
+    marginBottom: gap,
+    ...(defaultStyles?.container as ViewStyle),
+    ...(toast.styles?.container as ViewStyle),
+  };
+
+  const contentStyle: ViewStyle = {
+    ...baseStyles.content,
+    ...(!hasIcon ? baseStyles.contentNoIcon : {}),
+    ...(defaultStyles?.content as ViewStyle),
+    ...(toast.styles?.content as ViewStyle),
+  };
+
+  const titleStyle: TextStyle = {
+    ...baseStyles.title,
+    color: toastColors.foreground,
+    ...(defaultStyles?.title as TextStyle),
+    ...(toast.styles?.title as TextStyle),
+  };
+
+  const descriptionStyle: TextStyle = {
+    ...baseStyles.description,
+    color: toastColors.description,
+    ...(defaultStyles?.description as TextStyle),
+    ...(toast.styles?.description as TextStyle),
+  };
+
+  const closeButtonStyle: ViewStyle = {
+    ...baseStyles.closeButton,
+    ...(defaultStyles?.closeButton as ViewStyle),
+    ...(toast.styles?.closeButton as ViewStyle),
+  };
+
+  const accessibilityLabel = toast.accessibility?.accessibilityLabel
+    ?? (typeof title === "string" ? title : undefined);
+
+  return (
+    <GestureDetector gesture={panGesture}>
+      <Animated.View
+        style={[containerStyle, animatedStyle]}
+        accessible={true}
+        accessibilityLabel={accessibilityLabel}
+      >
+        <ToastIcon
+          icon={icon}
+          icons={icons}
+          type={type}
+          iconColor={iconColor}
+        />
+
+        <View style={contentStyle}>
+          {typeof title === "string" ? (
+            <Text style={titleStyle} numberOfLines={2}>
+              {title}
+            </Text>
+          ) : (
+            title
+          )}
+
+          {description &&
+            (typeof description === "string" ? (
+              <Text style={descriptionStyle} numberOfLines={3}>
+                {description}
+              </Text>
+            ) : (
+              description
+            ))}
+        </View>
+
+        <ToastActions
+          toast={toast}
+          action={action}
+          cancel={cancel}
+          toastColors={toastColors}
+          defaultStyles={defaultStyles}
+          hapticFeedback={hapticFeedback}
+        />
+
+        {closeButton && dismissible && (
+          <Pressable
+            onPress={handleDismiss}
+            style={closeButtonStyle}
+            hitSlop={8}
+            accessibilityLabel="Close notification"
+          >
+            <CloseIcon color={toastColors.description} />
+          </Pressable>
+        )}
+      </Animated.View>
+    </GestureDetector>
+  );
+}

package/src/toaster.tsx

@@ -0,0 +1,221 @@
+import React, { useCallback, useMemo } from "react";
+import { AccessibilityInfo, Platform, StyleSheet, View, type ViewStyle } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { ANIMATION_DEFAULTS, toastDefaults } from "./constants";
+import { ToastState } from "./state";
+import { resolveTheme } from "./theme";
+import { Toast } from "./toast";
+import type { AnimationConfig, Position, SwipeDirection, ToasterProps, ToastT } from "./types";
+import { useToastState } from "./use-toast-state";
+
+interface Offset {
+  top: number;
+  bottom: number;
+  left: number;
+  right: number;
+}
+
+function getContainerStyle(position: Position, offset: Offset) {
+  const isTop = position.startsWith("top");
+  const isBottom = position.startsWith("bottom");
+
+  const style: Record<string, number | string> = {
+    position: "absolute",
+    left: offset.left,
+    right: offset.right,
+    flexDirection: "column",
+  };
+
+  if (isTop) {
+    style.top = offset.top;
+  } else if (isBottom) {
+    style.bottom = offset.bottom;
+    style.flexDirection = "column-reverse";
+  }
+
+  if (position.includes("left")) {
+    style.alignItems = "flex-start";
+  } else if (position.includes("right")) {
+    style.alignItems = "flex-end";
+  } else {
+    style.alignItems = "center";
+  }
+
+  return style;
+}
+
+function announceForAccessibility(toast: ToastT): void {
+  if (toast.accessibility?.announceToScreenReader === false) {
+    return;
+  }
+
+  const message = toast.accessibility?.accessibilityLabel
+    ?? (typeof toast.title === "string" ? toast.title : "Notification");
+
+  if (Platform.OS === "ios" || Platform.OS === "android") {
+    AccessibilityInfo.announceForAccessibility(message);
+  }
+}
+
+export function Toaster({
+  position = toastDefaults.position,
+  theme = toastDefaults.theme,
+  duration = toastDefaults.duration,
+  gap = toastDefaults.gap,
+  offset: customOffset,
+  swipeToDismiss = toastDefaults.swipeToDismiss,
+  swipeDirection = toastDefaults.swipeDirection,
+  pauseOnAppBackground = toastDefaults.pauseOnAppBackground,
+  visibleToasts = toastDefaults.visibleToasts,
+  icons,
+  toastStyles,
+  containerStyle,
+  richColors = toastDefaults.richColors,
+  closeButton = toastDefaults.closeButton,
+  toasterId,
+  animation,
+  hapticFeedback = toastDefaults.hapticFeedback,
+}: ToasterProps) {
+  const insets = useSafeAreaInsets();
+  const { toasts } = useToastState();
+
+  const resolvedTheme = resolveTheme(theme);
+
+  // Merge animation config with defaults
+  const mergedAnimation: Required<AnimationConfig> = useMemo(() => ({
+    ...ANIMATION_DEFAULTS,
+    ...animation,
+  }), [animation]);
+
+  const offset = useMemo(() => {
+    const base = { ...toastDefaults.offset, ...customOffset };
+    return {
+      top: base.top + insets.top,
+      bottom: base.bottom + insets.bottom,
+      left: base.left + insets.left,
+      right: base.right + insets.right,
+    };
+  }, [customOffset, insets]);
+
+  const normalizedSwipeDirection: SwipeDirection[] = useMemo(() => {
+    return Array.isArray(swipeDirection) ? swipeDirection : [swipeDirection];
+  }, [swipeDirection]);
+
+  // Filter toasts by toasterId if provided
+  const filteredToasts = useMemo(() => {
+    if (!toasterId) {
+      return toasts;
+    }
+    // Only show toasts that match this toasterId or have no toasterId set
+    return toasts.filter((t) => t.toasterId === toasterId || t.toasterId === undefined);
+  }, [toasts, toasterId]);
+
+  // Sort toasts: newest first for top position, oldest first for bottom
+  // This ensures newest toast appears at the edge (top or bottom)
+  const sortedToasts = useMemo(() => {
+    const sorted = [...filteredToasts].sort((a, b) => b.createdAt - a.createdAt);
+    // For top: newest first (appears at top, older ones below)
+    // For bottom: reverse so newest appears at bottom edge
+    return position.startsWith("bottom") ? sorted.reverse() : sorted;
+  }, [filteredToasts, position]);
+
+  // Enforce visibleToasts limit - show only the most recent N toasts
+  // Important toasts are always shown
+  const visibleToastList = useMemo(() => {
+    if (visibleToasts <= 0) {
+      return sortedToasts;
+    }
+
+    // Separate important and regular toasts
+    const important = sortedToasts.filter((t) => t.important);
+    const regular = sortedToasts.filter((t) => !t.important);
+
+    // Show all important toasts plus fill remaining slots with regular toasts
+    const remainingSlots = Math.max(0, visibleToasts - important.length);
+    const visibleRegular = regular.slice(0, remainingSlots);
+
+    // Combine and maintain sort order
+    const combined = [...important, ...visibleRegular];
+    return combined.sort((a, b) => {
+      const aIndex = sortedToasts.indexOf(a);
+      const bIndex = sortedToasts.indexOf(b);
+      return aIndex - bIndex;
+    });
+  }, [sortedToasts, visibleToasts]);
+
+  const handleDismiss = useCallback((toastId: string | number) => {
+    const toast = toasts.find((t) => t.id === toastId);
+    if (toast) {
+      toast.onDismiss?.(toast);
+    }
+    ToastState.dismiss(toastId);
+  }, [toasts]);
+
+  // Announce new toasts for accessibility
+  const announcedRef = React.useRef<Set<string | number>>(new Set());
+  React.useEffect(() => {
+    for (const toast of visibleToastList) {
+      if (!announcedRef.current.has(toast.id)) {
+        announcedRef.current.add(toast.id);
+        announceForAccessibility(toast);
+      }
+    }
+    // Clean up old IDs
+    const currentIds = new Set(visibleToastList.map((t) => t.id));
+    announcedRef.current.forEach((id) => {
+      if (!currentIds.has(id)) {
+        announcedRef.current.delete(id);
+      }
+    });
+  }, [visibleToastList]);
+
+  if (visibleToastList.length === 0) {
+    return null;
+  }
+
+  const positionStyle = getContainerStyle(position, offset);
+
+  // Build container style using spread
+  const finalContainerStyle: ViewStyle = {
+    ...styles.container,
+    ...positionStyle,
+    ...(containerStyle as ViewStyle),
+  };
+
+  return (
+    <View
+      style={finalContainerStyle}
+      pointerEvents="box-none"
+      accessible={true}
+      accessibilityLabel="Notifications"
+    >
+      {visibleToastList.map((toast) => (
+        <Toast
+          key={toast.id}
+          toast={toast}
+          position={position}
+          gap={gap}
+          swipeToDismiss={swipeToDismiss}
+          swipeDirection={normalizedSwipeDirection}
+          theme={resolvedTheme}
+          richColors={richColors}
+          closeButton={closeButton}
+          icons={icons}
+          defaultStyles={toastStyles}
+          defaultAnimation={mergedAnimation}
+          onDismiss={handleDismiss}
+          duration={duration}
+          pauseOnAppBackground={pauseOnAppBackground}
+          hapticFeedback={hapticFeedback}
+        />
+      ))}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    zIndex: 9999,
+    pointerEvents: "box-none",
+  },
+});