react-native-bread 0.1.0

package/src/toast-store.ts

@@ -0,0 +1,270 @@
+import type { Toast, ToastConfig, ToastOptions, ToastState, ToastTheme, ToastType, ToastTypeColors } from "./types";
+
+export type Listener = (state: ToastState) => void;
+
+const EXIT_DURATION = 350;
+
+/** Default theme values */
+const DEFAULT_THEME: ToastTheme = {
+  position: "top",
+  offset: 0,
+  stacking: true,
+  maxStack: 3,
+  dismissible: true,
+  showCloseButton: true,
+  colors: {
+    success: { accent: "#28B770", background: "#FFFFFF" },
+    error: { accent: "#F05964", background: "#FFFFFF" },
+    info: { accent: "#EDBE43", background: "#FFFFFF" },
+    loading: { accent: "#232323", background: "#FFFFFF" },
+  },
+  icons: {},
+  toastStyle: {},
+  titleStyle: {},
+  descriptionStyle: {},
+  defaultDuration: 4000,
+};
+
+/** Deep merge user config with defaults */
+function mergeConfig(config: ToastConfig | undefined): ToastTheme {
+  if (!config) return DEFAULT_THEME;
+
+  const mergedColors = { ...DEFAULT_THEME.colors };
+  if (config.colors) {
+    for (const type of Object.keys(config.colors) as ToastType[]) {
+      const userColors = config.colors[type];
+      if (userColors) {
+        mergedColors[type] = {
+          ...DEFAULT_THEME.colors[type],
+          ...userColors,
+        } as ToastTypeColors;
+      }
+    }
+  }
+
+  return {
+    position: config.position ?? DEFAULT_THEME.position,
+    offset: config.offset ?? DEFAULT_THEME.offset,
+    stacking: config.stacking ?? DEFAULT_THEME.stacking,
+    maxStack: config.maxStack ?? DEFAULT_THEME.maxStack,
+    dismissible: config.dismissible ?? DEFAULT_THEME.dismissible,
+    showCloseButton: config.showCloseButton ?? DEFAULT_THEME.showCloseButton,
+    colors: mergedColors,
+    icons: { ...DEFAULT_THEME.icons, ...config.icons },
+    toastStyle: { ...DEFAULT_THEME.toastStyle, ...config.toastStyle },
+    titleStyle: { ...DEFAULT_THEME.titleStyle, ...config.titleStyle },
+    descriptionStyle: { ...DEFAULT_THEME.descriptionStyle, ...config.descriptionStyle },
+    defaultDuration: config.defaultDuration ?? DEFAULT_THEME.defaultDuration,
+  };
+}
+
+class ToastStore {
+  private state: ToastState = {
+    visibleToasts: [],
+  };
+
+  private theme: ToastTheme = DEFAULT_THEME;
+
+  private listeners = new Set<Listener>();
+  private toastIdCounter = 0;
+  private timeouts = new Map<string, ReturnType<typeof setTimeout>>();
+
+  subscribe = (listener: Listener) => {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  };
+
+  private emit() {
+    for (const listener of this.listeners) {
+      listener(this.state);
+    }
+  }
+
+  private setState(partial: Partial<ToastState>) {
+    this.state = { ...this.state, ...partial };
+    this.emit();
+  }
+
+  getState = () => this.state;
+
+  getTheme = () => this.theme;
+
+  setConfig = (config: ToastConfig | undefined) => {
+    this.theme = mergeConfig(config);
+  };
+
+  show = (
+    title: string,
+    description?: string,
+    type: ToastType = "success",
+    duration?: number,
+    options?: ToastOptions
+  ): string => {
+    const actualDuration = duration ?? options?.duration ?? this.theme.defaultDuration;
+    const maxToasts = this.theme.stacking ? this.theme.maxStack : 1;
+
+    const id = `toast-${++this.toastIdCounter}`;
+    const newToast: Toast = {
+      id,
+      title,
+      description: description ?? options?.description,
+      type,
+      duration: actualDuration,
+      createdAt: Date.now(),
+      isExiting: false,
+      options,
+    };
+
+    const { visibleToasts } = this.state;
+
+    // Get only non-exiting toasts for count
+    const activeToasts = visibleToasts.filter(t => !t.isExiting);
+
+    if (activeToasts.length >= maxToasts) {
+      const toastsToRemove = activeToasts.slice(maxToasts - 1);
+
+      for (const toast of toastsToRemove) {
+        // Clear auto-dismiss timeout
+        const timeout = this.timeouts.get(toast.id);
+        if (timeout) {
+          clearTimeout(timeout);
+          this.timeouts.delete(toast.id);
+        }
+      }
+
+      const removeIds = new Set(toastsToRemove.map(t => t.id));
+
+      if (this.theme.stacking) {
+        // When stacking is ON: remove old toasts from state immediately (no animation for stack overflow)
+        this.setState({
+          visibleToasts: visibleToasts.filter(t => !removeIds.has(t.id)),
+        });
+      } else {
+        // When stacking is OFF: animate out the old toast, wait, then show new one
+        this.setState({
+          visibleToasts: visibleToasts.map(t => (removeIds.has(t.id) ? { ...t, isExiting: true } : t)),
+        });
+
+        // Delay showing the new toast until the old one has animated out
+        setTimeout(() => {
+          for (const toast of toastsToRemove) {
+            this.removeToast(toast.id);
+          }
+          this.addToast(newToast, actualDuration);
+        }, EXIT_DURATION - 220);
+
+        return id;
+      }
+    }
+
+    // Add new toast immediately (stacking ON or no existing toasts)
+    this.addToast(newToast, actualDuration);
+
+    return id;
+  };
+
+  private addToast(toast: Toast, duration: number) {
+    this.setState({
+      visibleToasts: [toast, ...this.state.visibleToasts.filter(t => !t.isExiting)],
+    });
+
+    // Schedule auto-dismiss with duration multiplier based on position
+    this.scheduleTimeout(toast.id, duration, 0);
+
+    // Reschedule timeouts for other toasts based on their new positions
+    this.rescheduleAllTimeouts();
+  }
+
+  private scheduleTimeout(id: string, baseDuration: number, index: number) {
+    const existingTimeout = this.timeouts.get(id);
+    if (existingTimeout) {
+      clearTimeout(existingTimeout);
+    }
+
+    // Duration multiplier: index 0 = 1x, index 1 = 2x, index 2 = 3x
+    const duration = baseDuration * (index + 1);
+
+    const timeout = setTimeout(() => {
+      this.hide(id);
+    }, duration);
+
+    this.timeouts.set(id, timeout);
+  }
+
+  private rescheduleAllTimeouts() {
+    const { visibleToasts } = this.state;
+
+    visibleToasts.forEach((toast, index) => {
+      // Skip if already exiting or index 0 (just scheduled)
+      if (toast.isExiting || index === 0) return;
+
+      this.scheduleTimeout(toast.id, toast.duration, index);
+    });
+  }
+
+  hide = (id: string) => {
+    const { visibleToasts } = this.state;
+    const toast = visibleToasts.find(t => t.id === id);
+    if (!toast || toast.isExiting) return;
+
+    // Clear the auto-dismiss timeout
+    const timeout = this.timeouts.get(id);
+    if (timeout) {
+      clearTimeout(timeout);
+      this.timeouts.delete(id);
+    }
+
+    // Mark as exiting (triggers exit animation in component)
+    this.setState({
+      visibleToasts: visibleToasts.map(t => (t.id === id ? { ...t, isExiting: true } : t)),
+    });
+
+    // After exit animation, actually remove the toast
+    setTimeout(() => {
+      this.removeToast(id);
+    }, EXIT_DURATION);
+  };
+
+  private removeToast(id: string) {
+    const timeout = this.timeouts.get(id);
+    if (timeout) {
+      clearTimeout(timeout);
+      this.timeouts.delete(id);
+    }
+
+    this.setState({
+      visibleToasts: this.state.visibleToasts.filter(t => t.id !== id),
+    });
+
+    // Reschedule remaining toasts with updated positions
+    this.rescheduleAllTimeouts();
+  }
+
+  updateToast = (id: string, data: Partial<Omit<Toast, "id" | "createdAt">>) => {
+    const { visibleToasts } = this.state;
+    const index = visibleToasts.findIndex(t => t.id === id);
+    if (index === -1) return;
+
+    this.setState({
+      visibleToasts: visibleToasts.map(t => (t.id === id ? { ...t, ...data } : t)),
+    });
+
+    if (data.duration !== undefined) {
+      this.scheduleTimeout(id, data.duration, index);
+    }
+  };
+
+  hideAll = () => {
+    for (const timeout of this.timeouts.values()) {
+      clearTimeout(timeout);
+    }
+    this.timeouts.clear();
+    this.setState({ visibleToasts: [] });
+  };
+}
+
+export const toastStore = new ToastStore();
+
+export type { Toast, ToastState, ToastType };

package/src/toast.tsx

@@ -0,0 +1,417 @@
+import { memo, type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { ActivityIndicator, Pressable, StyleSheet, Text, View } from "react-native";
+import { Gesture, GestureDetector } from "react-native-gesture-handler";
+import Animated, {
+  Easing,
+  interpolate,
+  interpolateColor,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { scheduleOnRN } from "react-native-worklets";
+import { CloseIcon, GreenCheck, InfoIcon, RedX } from "./icons";
+import { type Toast as ToastData, type ToastState, type ToastType, toastStore } from "./toast-store";
+import type { IconRenderFn, ToastPosition, ToastTheme } from "./types";
+
+const ICON_SIZE = 28;
+
+/** Default icon for each toast type */
+const DefaultIcon = ({ type, accentColor }: { type: ToastType; accentColor: string }) => {
+  switch (type) {
+    case "success":
+      return <GreenCheck width={36} height={36} fill={accentColor} />;
+    case "error":
+      return <RedX width={ICON_SIZE} height={ICON_SIZE} fill={accentColor} />;
+    case "loading":
+      return <ActivityIndicator size={ICON_SIZE} color={accentColor} />;
+    case "info":
+      return <InfoIcon width={ICON_SIZE} height={ICON_SIZE} fill={accentColor} />;
+    default:
+      return <GreenCheck width={36} height={36} fill={accentColor} />;
+  }
+};
+
+/** Resolves the icon to render - checks per-toast, then config, then default */
+const resolveIcon = (
+  type: ToastType,
+  accentColor: string,
+  customIcon?: ReactNode | IconRenderFn,
+  configIcon?: IconRenderFn
+): ReactNode => {
+  // Per-toast custom icon takes priority
+  if (customIcon) {
+    if (typeof customIcon === "function") {
+      return customIcon({ color: accentColor, size: ICON_SIZE });
+    }
+    return customIcon;
+  }
+
+  // Config-level custom icon
+  if (configIcon) {
+    return configIcon({ color: accentColor, size: ICON_SIZE });
+  }
+
+  // Default icon
+  return <DefaultIcon type={type} accentColor={accentColor} />;
+};
+
+interface AnimatedIconProps {
+  type: ToastType;
+  accentColor: string;
+  customIcon?: ReactNode | IconRenderFn;
+  configIcon?: IconRenderFn;
+}
+
+const AnimatedIcon = ({ type, accentColor, customIcon, configIcon }: AnimatedIconProps) => {
+  const progress = useSharedValue(0);
+
+  useEffect(() => {
+    progress.value = withTiming(1, { duration: 350, easing: Easing.out(Easing.back(1.5)) });
+  }, [progress]);
+
+  const style = useAnimatedStyle(() => ({
+    opacity: progress.value,
+    transform: [{ scale: 0.7 + progress.value * 0.3 }],
+  }));
+
+  return <Animated.View style={style}>{resolveIcon(type, accentColor, customIcon, configIcon)}</Animated.View>;
+};
+
+// singleton instance
+export const ToastContainer = () => {
+  const [visibleToasts, setVisibleToasts] = useState<ToastData[]>([]);
+  const [theme, setTheme] = useState<ToastTheme>(() => toastStore.getTheme());
+  const { top, bottom } = useSafeAreaInsets();
+
+  useEffect(() => {
+    const initialState = toastStore.getState();
+    setVisibleToasts(initialState.visibleToasts);
+    setTheme(toastStore.getTheme());
+
+    return toastStore.subscribe((state: ToastState) => {
+      setVisibleToasts(state.visibleToasts);
+      setTheme(toastStore.getTheme());
+    });
+  }, []);
+
+  // Calculate visual index for each toast (exiting toasts don't count)
+  const getVisualIndex = useCallback(
+    (toastId: string) => {
+      let visualIndex = 0;
+      for (const t of visibleToasts) {
+        if (t.id === toastId) break;
+        if (!t.isExiting) visualIndex++;
+      }
+      return visualIndex;
+    },
+    [visibleToasts]
+  );
+
+  // Memoize the reversed array to avoid recreating on each render
+  const reversedToasts = useMemo(() => [...visibleToasts].reverse(), [visibleToasts]);
+
+  if (visibleToasts.length === 0) {
+    return null;
+  }
+
+  const isBottom = theme.position === "bottom";
+  const inset = isBottom ? bottom : top;
+  const positionStyle = isBottom ? { bottom: inset + theme.offset + 2 } : { top: inset + theme.offset + 2 };
+
+  return (
+    <View style={[styles.container, positionStyle]} pointerEvents="box-none">
+      {reversedToasts.map(toast => {
+        const index = toast.isExiting ? -1 : getVisualIndex(toast.id);
+        return <MemoizedToastItem key={toast.id} toast={toast} index={index} theme={theme} position={theme.position} />;
+      })}
+    </View>
+  );
+};
+
+interface ToastItemProps {
+  toast: ToastData;
+  index: number;
+  theme: ToastTheme;
+  position: ToastPosition;
+}
+
+const EASING = Easing.bezier(0.25, 0.1, 0.25, 1.0);
+const ToY = 0;
+const Duration = 400;
+const ExitDuration = 350;
+const MaxDragDown = 60;
+
+const ToastItem = ({ toast, index, theme, position }: ToastItemProps) => {
+  const progress = useSharedValue(0);
+  const translationY = useSharedValue(0);
+  const isBeingDragged = useSharedValue(false);
+  const shouldDismiss = useSharedValue(false);
+
+  // Position-based animation values
+  const isBottom = position === "bottom";
+  const entryFromY = isBottom ? 80 : -80;
+  const exitToY = isBottom ? 100 : -100;
+
+  // Stack position animation
+  const stackIndex = useSharedValue(index);
+
+  // Title color animation on variant change
+  const colorProgress = useSharedValue(1);
+  const fromColor = useSharedValue(theme.colors[toast.type].accent);
+  const toColor = useSharedValue(theme.colors[toast.type].accent);
+
+  // Refs for tracking previous values to avoid unnecessary animations
+  const lastHandledType = useRef(toast.type);
+  const prevIndex = useRef(index);
+  const hasEntered = useRef(false);
+
+  // Combined animation effect for entry, exit, color transitions, and stack position
+  useEffect(() => {
+    // Entry animation (only once on mount)
+    if (!hasEntered.current && !toast.isExiting) {
+      progress.value = withTiming(1, { duration: Duration, easing: EASING });
+      hasEntered.current = true;
+    }
+
+    // Exit animation when isExiting becomes true
+    if (toast.isExiting) {
+      progress.value = withTiming(0, { duration: ExitDuration, easing: EASING });
+      translationY.value = withTiming(exitToY, { duration: ExitDuration, easing: EASING });
+    }
+
+    // Color transition when type changes
+    if (toast.type !== lastHandledType.current) {
+      fromColor.value = theme.colors[lastHandledType.current].accent;
+      toColor.value = theme.colors[toast.type].accent;
+      lastHandledType.current = toast.type;
+      colorProgress.value = 0;
+      colorProgress.value = withTiming(1, { duration: 300, easing: EASING });
+    }
+
+    // Stack position animation when index changes
+    if (index >= 0 && prevIndex.current !== index) {
+      stackIndex.value = withTiming(index, { duration: 300, easing: EASING });
+      prevIndex.current = index;
+    }
+  }, [
+    toast.isExiting,
+    toast.type,
+    index,
+    progress,
+    translationY,
+    fromColor,
+    toColor,
+    colorProgress,
+    stackIndex,
+    exitToY,
+    theme.colors,
+  ]);
+
+  const titleColorStyle = useAnimatedStyle(() => ({
+    color: interpolateColor(colorProgress.value, [0, 1], [fromColor.value, toColor.value]),
+  }));
+
+  const dismissToast = useCallback(() => {
+    toastStore.hide(toast.id);
+  }, [toast.id]);
+
+  const panGesture = Gesture.Pan()
+    .onStart(() => {
+      "worklet";
+      isBeingDragged.value = true;
+      shouldDismiss.value = false;
+    })
+    .onUpdate(event => {
+      "worklet";
+      const rawY = event.translationY;
+      // For top: negative Y = dismiss direction, positive Y = resistance
+      // For bottom: positive Y = dismiss direction, negative Y = resistance
+      const dismissDrag = isBottom ? rawY : -rawY;
+      const resistDrag = isBottom ? -rawY : rawY;
+
+      if (dismissDrag > 0) {
+        // Moving toward dismiss direction
+        const clampedY = isBottom ? Math.min(rawY, 180) : Math.max(rawY, -180);
+        translationY.value = clampedY;
+        if (dismissDrag > 40 || (isBottom ? event.velocityY > 300 : event.velocityY < -300)) {
+          shouldDismiss.value = true;
+        }
+      } else {
+        // Moving away from edge - apply resistance
+        const exponentialDrag = MaxDragDown * (1 - Math.exp(-resistDrag / 250));
+        translationY.value = isBottom
+          ? -Math.min(exponentialDrag, MaxDragDown)
+          : Math.min(exponentialDrag, MaxDragDown);
+        shouldDismiss.value = false;
+      }
+    })
+    .onEnd(() => {
+      "worklet";
+      isBeingDragged.value = false;
+
+      if (shouldDismiss.value) {
+        progress.value = withTiming(0, {
+          duration: ExitDuration,
+          easing: EASING,
+        });
+        const exitOffset = isBottom ? 200 : -200;
+        translationY.value = withTiming(translationY.value + exitOffset, {
+          duration: ExitDuration,
+          easing: EASING,
+        });
+        scheduleOnRN(dismissToast);
+      } else {
+        translationY.value = withTiming(0, {
+          duration: 650,
+          easing: EASING,
+        });
+      }
+    });
+
+  const animatedStyle = useAnimatedStyle(() => {
+    const baseTranslateY = interpolate(progress.value, [0, 1], [entryFromY, ToY]);
+
+    // Stack offset: each toast behind moves away from edge (up for top, down for bottom)
+    const stackOffsetY = isBottom ? stackIndex.value * 10 : stackIndex.value * -10;
+
+    // Stack scale: each toast behind scales down by 0.05
+    const stackScale = 1 - stackIndex.value * 0.05;
+
+    const finalTranslateY = baseTranslateY + translationY.value + stackOffsetY;
+
+    const progressOpacity = interpolate(progress.value, [0, 1], [0, 1]);
+    // For top: dragging up (negative) fades out. For bottom: dragging down (positive) fades out
+    const dismissDirection = isBottom ? translationY.value : -translationY.value;
+    const dragOpacity = dismissDirection > 0 ? interpolate(dismissDirection, [0, 130], [1, 0], "clamp") : 1;
+    const opacity = progressOpacity * dragOpacity;
+
+    const dragScale = interpolate(Math.abs(translationY.value), [0, 50], [1, 0.98], "clamp");
+    const scale = stackScale * dragScale;
+
+    return {
+      transform: [{ translateY: finalTranslateY }, { scale }],
+      opacity,
+      zIndex: 1000 - stackIndex.value,
+    };
+  });
+
+  const accentColor = theme.colors[toast.type].accent;
+  const backgroundColor = theme.colors[toast.type].background;
+  const verticalAnchor = isBottom ? { bottom: 0 } : { top: 0 };
+
+  // Per-toast overrides from options
+  const { options } = toast;
+  const customIcon = options?.icon;
+  const configIcon = theme.icons[toast.type];
+
+  // Resolve dismissible and showCloseButton (per-toast overrides config)
+  const isDismissible = options?.dismissible ?? theme.dismissible;
+  const shouldShowCloseButton = toast.type !== "loading" && (options?.showCloseButton ?? theme.showCloseButton);
+
+  // Enable/disable gesture based on dismissible setting
+  const gesture = isDismissible ? panGesture : Gesture.Pan().enabled(false);
+
+  return (
+    <GestureDetector gesture={gesture}>
+      <Animated.View
+        style={[styles.toast, verticalAnchor, { backgroundColor }, theme.toastStyle, options?.style, animatedStyle]}
+      >
+        <View style={styles.content}>
+          <View style={styles.icon}>
+            <AnimatedIcon
+              key={toast.type}
+              type={toast.type}
+              accentColor={accentColor}
+              customIcon={customIcon}
+              configIcon={configIcon}
+            />
+          </View>
+          <View style={styles.textContainer}>
+            <Animated.Text
+              maxFontSizeMultiplier={1.35}
+              allowFontScaling={false}
+              style={[styles.title, theme.titleStyle, options?.titleStyle, titleColorStyle]}
+            >
+              {toast.title}
+            </Animated.Text>
+            {toast.description && (
+              <Text
+                allowFontScaling={false}
+                maxFontSizeMultiplier={1.35}
+                style={[styles.description, theme.descriptionStyle, options?.descriptionStyle]}
+              >
+                {toast.description}
+              </Text>
+            )}
+          </View>
+          {shouldShowCloseButton && (
+            <Pressable style={styles.closeButton} onPress={dismissToast} hitSlop={12}>
+              <CloseIcon width={20} height={20} />
+            </Pressable>
+          )}
+        </View>
+      </Animated.View>
+    </GestureDetector>
+  );
+};
+
+const MemoizedToastItem = memo(ToastItem);
+
+const styles = StyleSheet.create({
+  container: {
+    position: "absolute",
+    left: 16,
+    right: 16,
+    zIndex: 1000,
+  },
+  closeButton: {
+    padding: 4,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  icon: {
+    width: 48,
+    height: 48,
+    alignItems: "center",
+    justifyContent: "center",
+    marginLeft: 8,
+  },
+  content: {
+    alignItems: "center",
+    flexDirection: "row",
+    gap: 12,
+    minHeight: 36,
+  },
+  description: {
+    color: "#6B7280",
+    fontSize: 12,
+    fontWeight: "500",
+    lineHeight: 16,
+  },
+  textContainer: {
+    flex: 1,
+    gap: 1,
+    justifyContent: "center",
+  },
+  title: {
+    fontSize: 14,
+    fontWeight: "700",
+    lineHeight: 20,
+  },
+  toast: {
+    borderRadius: 20,
+    borderCurve: "continuous",
+    position: "absolute",
+    left: 0,
+    right: 0,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 8 },
+    shadowOpacity: 0.05,
+    shadowRadius: 24,
+    elevation: 8,
+  },
+});