react-native-bread 0.1.0 → 0.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-bread",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "A delicious toast library for React Native with beautiful animations and gesture support",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",

package/src/toast-provider.tsx

@@ -1,11 +1,10 @@
-import { type ReactNode, useEffect } from "react";
+import { useEffect } from "react";
 import { StyleSheet, View } from "react-native";
 import { ToastContainer } from "./toast";
 import { toastStore } from "./toast-store";
 import type { ToastConfig } from "./types";
 
 interface BreadLoafProps {
-  children: ReactNode;
   /**
    * Configuration for customizing toast behavior and appearance.
    * All properties are optional and will be merged with defaults.
@@ -23,17 +22,22 @@ interface BreadLoafProps {
 }
 
 /**
- * Toast provider component that enables toast notifications in your app.
- * Wrap your root component with `<BreadLoaf>` to start showing toasts.
+ * Toast component that enables toast notifications in your app.
+ * Add `<BreadLoaf />` to your root layout to start showing toasts.
  *
  * @example
  * ```tsx
  * import { BreadLoaf } from 'react-native-bread';
  *
- * // Basic usage
- * <BreadLoaf>
- *   <App />
- * </BreadLoaf>
+ * // Basic usage - add to your root layout
+ * export default function RootLayout() {
+ *   return (
+ *     <>
+ *       <Stack />
+ *       <BreadLoaf />
+ *     </>
+ *   );
+ * }
  *
  * // With configuration
  * <BreadLoaf
@@ -47,34 +51,26 @@ interface BreadLoafProps {
  *     },
  *     toastStyle: { borderRadius: 12 },
  *   }}
- * >
- *   <App />
- * </BreadLoaf>
+ * />
  * ```
  */
-export function BreadLoaf({ children, config }: BreadLoafProps) {
+export function BreadLoaf({ config }: BreadLoafProps) {
   useEffect(() => {
     toastStore.setConfig(config);
     return () => {
-      // Reset to defaults when this provider unmounts
       toastStore.setConfig(undefined);
     };
   }, [config]);
+
   return (
-    <View style={styles.root}>
-      {children}
-      <View style={styles.portalContainer} pointerEvents="box-none">
-        <ToastContainer />
-      </View>
+    <View style={styles.container} pointerEvents="box-none">
+      <ToastContainer />
     </View>
   );
 }
 
 const styles = StyleSheet.create({
-  root: {
-    flex: 1,
-  },
-  portalContainer: {
+  container: {
     ...StyleSheet.absoluteFillObject,
     zIndex: 9999,
   },

package/src/toast.tsx

@@ -4,8 +4,8 @@ import { Gesture, GestureDetector } from "react-native-gesture-handler";
 import Animated, {
   Easing,
   interpolate,
-  interpolateColor,
   useAnimatedStyle,
+  useDerivedValue,
   useSharedValue,
   withTiming,
 } from "react-native-reanimated";
@@ -17,21 +17,36 @@ 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 }) => {
+/** Memoized default icons to prevent SVG re-renders */
+const MemoizedGreenCheck = memo(({ fill }: { fill: string }) => <GreenCheck width={36} height={36} fill={fill} />);
+const MemoizedRedX = memo(({ fill }: { fill: string }) => <RedX width={ICON_SIZE} height={ICON_SIZE} fill={fill} />);
+const MemoizedInfoIcon = memo(({ fill }: { fill: string }) => (
+  <InfoIcon width={ICON_SIZE} height={ICON_SIZE} fill={fill} />
+));
+const MemoizedCloseIcon = memo(() => <CloseIcon width={20} height={20} />);
+
+/** Default icon for each toast type - memoized */
+const DefaultIcon = memo(({ type, accentColor }: { type: ToastType; accentColor: string }) => {
   switch (type) {
     case "success":
-      return <GreenCheck width={36} height={36} fill={accentColor} />;
+      return <MemoizedGreenCheck fill={accentColor} />;
     case "error":
-      return <RedX width={ICON_SIZE} height={ICON_SIZE} fill={accentColor} />;
+      return <MemoizedRedX fill={accentColor} />;
     case "loading":
       return <ActivityIndicator size={ICON_SIZE} color={accentColor} />;
     case "info":
-      return <InfoIcon width={ICON_SIZE} height={ICON_SIZE} fill={accentColor} />;
+      return <MemoizedInfoIcon fill={accentColor} />;
     default:
-      return <GreenCheck width={36} height={36} fill={accentColor} />;
+      return <MemoizedGreenCheck fill={accentColor} />;
   }
-};
+});
+
+interface AnimatedIconProps {
+  type: ToastType;
+  accentColor: string;
+  customIcon?: ReactNode | IconRenderFn;
+  configIcon?: IconRenderFn;
+}
 
 /** Resolves the icon to render - checks per-toast, then config, then default */
 const resolveIcon = (
@@ -40,31 +55,20 @@ const resolveIcon = (
   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) => {
+/** Animated icon wrapper with scale/fade animation */
+const AnimatedIcon = memo(({ type, accentColor, customIcon, configIcon }: AnimatedIconProps) => {
   const progress = useSharedValue(0);
 
   useEffect(() => {
@@ -77,7 +81,69 @@ const AnimatedIcon = ({ type, accentColor, customIcon, configIcon }: AnimatedIco
   }));
 
   return <Animated.View style={style}>{resolveIcon(type, accentColor, customIcon, configIcon)}</Animated.View>;
-};
+});
+
+interface ToastContentProps {
+  type: ToastType;
+  title: string;
+  description?: string;
+  accentColor: string;
+  customIcon?: ReactNode | IconRenderFn;
+  configIcon?: IconRenderFn;
+  showCloseButton: boolean;
+  onDismiss: () => void;
+  titleStyle?: object;
+  descriptionStyle?: object;
+  optionsTitleStyle?: object;
+  optionsDescriptionStyle?: object;
+}
+
+/** Memoized toast content to prevent inline JSX recreation */
+const ToastContent = memo(
+  ({
+    type,
+    title,
+    description,
+    accentColor,
+    customIcon,
+    configIcon,
+    showCloseButton,
+    onDismiss,
+    titleStyle,
+    descriptionStyle,
+    optionsTitleStyle,
+    optionsDescriptionStyle,
+  }: ToastContentProps) => (
+    <View style={styles.content}>
+      <View style={styles.icon}>
+        <AnimatedIcon key={type} type={type} accentColor={accentColor} customIcon={customIcon} configIcon={configIcon} />
+      </View>
+      <View style={styles.textContainer}>
+        <Text
+          maxFontSizeMultiplier={1.35}
+          allowFontScaling={false}
+          style={[styles.title, { color: accentColor }, titleStyle, optionsTitleStyle]}
+        >
+          {title}
+        </Text>
+        {description && (
+          <Text
+            allowFontScaling={false}
+            maxFontSizeMultiplier={1.35}
+            style={[styles.description, descriptionStyle, optionsDescriptionStyle]}
+          >
+            {description}
+          </Text>
+        )}
+      </View>
+      {showCloseButton && (
+        <Pressable style={styles.closeButton} onPress={onDismiss} hitSlop={12}>
+          <MemoizedCloseIcon />
+        </Pressable>
+      )}
+    </View>
+  )
+);
 
 // singleton instance
 export const ToastContainer = () => {
@@ -157,17 +223,11 @@ const ToastItem = ({ toast, index, theme, position }: ToastItemProps) => {
   // 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) {
@@ -181,13 +241,9 @@ const ToastItem = ({ toast, index, theme, position }: ToastItemProps) => {
       translationY.value = withTiming(exitToY, { duration: ExitDuration, easing: EASING });
     }
 
-    // Color transition when type changes
+    // Track type changes (for icon animation via key)
     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
@@ -195,80 +251,74 @@ const ToastItem = ({ toast, index, theme, position }: ToastItemProps) => {
       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]),
-  }));
+  }, [toast.isExiting, toast.type, index, progress, translationY, stackIndex, exitToY]);
 
   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 panGesture = useMemo(
+    () =>
+      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,
+            });
+          }
+        }),
+    [isBottom, dismissToast, progress, translationY, shouldDismiss, isBeingDragged]
+  );
+
+  // Memoize disabled gesture to avoid recreation on every render
+  const disabledGesture = useMemo(() => Gesture.Pan().enabled(false), []);
+
+  // Derive zIndex separately - it's not animatable and shouldn't trigger worklet re-runs
+  const zIndex = useDerivedValue(() => 1000 - Math.round(stackIndex.value));
 
   const animatedStyle = useAnimatedStyle(() => {
     const baseTranslateY = interpolate(progress.value, [0, 1], [entryFromY, ToY]);
@@ -293,7 +343,7 @@ const ToastItem = ({ toast, index, theme, position }: ToastItemProps) => {
     return {
       transform: [{ translateY: finalTranslateY }, { scale }],
       opacity,
-      zIndex: 1000 - stackIndex.value,
+      zIndex: zIndex.value,
     };
   });
 
@@ -311,53 +361,52 @@ const ToastItem = ({ toast, index, theme, position }: ToastItemProps) => {
   const shouldShowCloseButton = toast.type !== "loading" && (options?.showCloseButton ?? theme.showCloseButton);
 
   // Enable/disable gesture based on dismissible setting
-  const gesture = isDismissible ? panGesture : Gesture.Pan().enabled(false);
+  const gesture = isDismissible ? panGesture : disabledGesture;
+
+  const animStyle = [
+    styles.toast,
+    verticalAnchor,
+    { backgroundColor },
+    theme.toastStyle,
+    options?.style,
+    animatedStyle,
+  ];
 
   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 style={animStyle}>
+        <ToastContent
+          type={toast.type}
+          title={toast.title}
+          description={toast.description}
+          accentColor={accentColor}
+          customIcon={customIcon}
+          configIcon={configIcon}
+          showCloseButton={shouldShowCloseButton}
+          onDismiss={dismissToast}
+          titleStyle={theme.titleStyle}
+          descriptionStyle={theme.descriptionStyle}
+          optionsTitleStyle={options?.titleStyle}
+          optionsDescriptionStyle={options?.descriptionStyle}
+        />
       </Animated.View>
     </GestureDetector>
   );
 };
 
-const MemoizedToastItem = memo(ToastItem);
+// Custom comparison to prevent re-renders when toast object reference changes but content is same
+const MemoizedToastItem = memo(ToastItem, (prev, next) => {
+  return (
+    prev.toast.id === next.toast.id &&
+    prev.toast.type === next.toast.type &&
+    prev.toast.title === next.toast.title &&
+    prev.toast.description === next.toast.description &&
+    prev.toast.isExiting === next.toast.isExiting &&
+    prev.index === next.index &&
+    prev.position === next.position &&
+    prev.theme === next.theme
+  );
+});
 
 const styles = StyleSheet.create({
   container: {