react-native-bread 0.5.2 → 0.6.0

package/lib/module/toast.js

@@ -1 +1,345 @@
-"use strict";import{memo as t,useCallback as e,useEffect as o,useMemo as i,useState as n}from"react";import{Pressable as s,StyleSheet as a,Text as r,View as l}from"react-native";import{Gesture as c,GestureDetector as u}from"react-native-gesture-handler";import d,{interpolate as p,useAnimatedStyle as m,useSharedValue as g,withTiming as h}from"react-native-reanimated";import{useSafeAreaInsets as f}from"react-native-safe-area-context";import{scheduleOnRN as v}from"react-native-worklets";import{DISMISS_THRESHOLD as x,DISMISS_VELOCITY_THRESHOLD as y,EASING as T,ENTRY_DURATION as w,ENTRY_OFFSET as C,EXIT_DURATION as b,EXIT_OFFSET as Y,ICON_ANIMATION_DURATION as k,MAX_DRAG_CLAMP as I,MAX_DRAG_RESISTANCE as S,SPRING_BACK_DURATION as j,STACK_OFFSET_PER_ITEM as z,STACK_SCALE_PER_ITEM as B,STACK_TRANSITION_DURATION as E,SWIPE_EXIT_OFFSET as M}from"./constants.js";import{CloseIcon as H}from"./icons/index.js";import{animationPool as R,getSlotIndex as F,releaseSlot as V,slotTrackers as D}from"./pool.js";import{AnimatedIcon as W,resolveIcon as A}from"./toast-icons.js";import{toastStore as O}from"./toast-store.js";import{useToastState as P}from"./use-toast-state.js";import{jsx as L,jsxs as U}from"react/jsx-runtime";export const ToastContainer=()=>{const{top:t,bottom:o}=f(),{visibleToasts:n,theme:s,toastsWithIndex:a,isBottom:r,topToastRef:d,isBottomRef:p,isDismissibleRef:m}=P(),w=g(!1),C=i(()=>c.Pan().onStart(()=>{"worklet";w.set(!1)}).onUpdate(t=>{"worklet";if(!m.current.value)return;const e=d.current.value;if(!e)return;const{slot:o}=e,i=p.current.value,n=t.translationY,s=i?n:-n,a=i?-n:n;if(s>0){const e=i?Math.min(n,I):Math.max(n,-I);o.translationY.value=e;const a=s>x||(i?t.velocityY>y:t.velocityY<-y);w.set(a)}else{const t=S*(1-Math.exp(-a/250));o.translationY.value=i?-Math.min(t,S):Math.min(t,S),w.value=!1}}).onEnd(()=>{"worklet";if(!m.current.value)return;const t=d.current.value;if(!t)return;const{slot:e}=t,o=p.current.value;if(w.value){e.progress.value=h(0,{duration:b,easing:T});const i=o?M:-M;e.translationY.value=h(e.translationY.value+i,{duration:b,easing:T}),v(t.dismiss)}else e.translationY.value=h(0,{duration:j,easing:T})}),[w,m,d,p]),Y=e(t=>{d.current.value=t},[d]);if(0===n.length)return null;const k=r?o:t,z=r?{bottom:k+s.offset+2}:{top:k+s.offset+2};return L(u,{gesture:C,children:L(l,{style:[G.container,z],pointerEvents:"box-none",children:a.map(({toast:t,index:e})=>L(q,{toast:t,index:e,theme:s,position:s.position,isTopToast:0===e,registerTopToast:Y},t.id))})})};const q=t(({toast:t,index:i,theme:a,position:c,isTopToast:u,registerTopToast:g})=>{const[f]=n(()=>F(t.id)),v=R[f],x=D[f],y="bottom"===c,I=y?C:-C,S=y?Y:-Y,[j,M]=n("loading"===t.type),[P,q]=n(!1);o(()=>{v.progress.value=0,v.translationY.value=0,v.stackIndex.value=i,v.progress.value=h(1,{duration:w,easing:T});const e=setTimeout(()=>q(!0),50);return()=>{clearTimeout(e),V(t.id)}},[]);const J=e(()=>{O.hide(t.id)},[t.id]);o(()=>{let e=null;return t.isExiting&&!x.wasExiting&&(x.wasExiting=!0,v.progress.value=h(0,{duration:b,easing:T}),v.translationY.value=h(S,{duration:b,easing:T})),x.initialized&&i!==x.prevIndex&&(v.stackIndex.value=h(i,{duration:E,easing:T})),x.prevIndex=i,x.initialized=!0,"loading"===t.type?M(!0):j&&(e=setTimeout(()=>M(!1),k+50)),u&&g({slot:v,dismiss:J}),()=>{e&&clearTimeout(e),u&&g(null)}},[t.isExiting,i,v,x,S,t.type,j,u,g,J]);const K=j&&"loading"!==t.type,N=m(()=>{const t=p(v.progress.value,[0,1],[I,0]),e=y?v.stackIndex.value*z:v.stackIndex.value*-z,o=1-v.stackIndex.value*B,i=t+v.translationY.value+e,n=p(v.progress.value,[0,1],[0,1]),s=y?v.translationY.value:-v.translationY.value,a=n*(s>0?p(s,[0,130],[1,0],"clamp"):1);return{transform:[{translateY:i},{scale:o*p(Math.abs(v.translationY.value),[0,50],[1,.98],"clamp")}],opacity:a,zIndex:1e3-Math.round(v.stackIndex.value)}}),{options:Q}=t,X=a.colors[t.type];if(void 0!==Q?.customContent){const e=Q.customContent;return L(d.View,{style:[G.toast,G.customContentToast,y?G.toastBottom:G.toastTop,{backgroundColor:X.background},a.toastStyle,Q.style,N],children:"function"==typeof e?e({id:t.id,dismiss:J,type:t.type,isExiting:!!t.isExiting}):e})}const Z="loading"!==t.type&&(Q?.showCloseButton??a.showCloseButton);return U(d.View,{style:[G.toast,y?G.toastBottom:G.toastTop,{backgroundColor:X.background},a.rtl&&G.rtl,a.toastStyle,Q?.style,N],children:[L(l,{style:G.iconContainer,children:P&&(K?L(W,{type:t.type,color:X.accent,custom:Q?.icon,config:a.icons[t.type]},t.type):A(t.type,X.accent,Q?.icon,a.icons[t.type]))}),U(l,{style:G.textContainer,children:[L(r,{maxFontSizeMultiplier:1.35,allowFontScaling:!1,style:[G.title,{color:X.accent},a.rtl&&{textAlign:"right"},a.titleStyle,Q?.titleStyle],children:t.title}),t.description&&L(r,{allowFontScaling:!1,maxFontSizeMultiplier:1.35,style:[G.description,a.rtl&&{textAlign:"right"},a.descriptionStyle,Q?.descriptionStyle],children:t.description})]}),Z&&L(s,{style:G.closeButton,onPress:J,hitSlop:12,children:L(H,{width:20,height:20})})]})},(t,e)=>t.toast.id===e.toast.id&&t.toast.type===e.toast.type&&t.toast.title===e.toast.title&&t.toast.description===e.toast.description&&t.toast.isExiting===e.toast.isExiting&&t.index===e.index&&t.position===e.position&&t.theme===e.theme&&t.isTopToast===e.isTopToast),G=a.create({container:{position:"absolute",left:16,right:16,zIndex:1e3},toast:{flexDirection:"row",alignItems:"center",gap:12,minHeight:36,borderRadius:20,borderCurve:"continuous",position:"absolute",left:0,right:0,paddingHorizontal:12,paddingVertical:10,shadowColor:"#000",shadowOffset:{width:0,height:8},shadowOpacity:.05,shadowRadius:24,elevation:8},customContentToast:{padding:0,paddingHorizontal:0,paddingVertical:0,overflow:"hidden"},rtl:{flexDirection:"row-reverse"},toastTop:{top:0},toastBottom:{bottom:0},iconContainer:{width:48,height:48,alignItems:"center",justifyContent:"center",marginLeft:8},textContainer:{flex:1,gap:1,justifyContent:"center"},title:{fontSize:14,fontWeight:"700",lineHeight:20},description:{color:"#6B7280",fontSize:12,fontWeight:"500",lineHeight:16},closeButton:{padding:4,alignItems:"center",justifyContent:"center"}});
+"use strict";
+
+import { memo, useCallback, useEffect, useMemo, useState } from "react";
+import { Pressable, StyleSheet, Text, View } from "react-native";
+import { Gesture, GestureDetector } from "react-native-gesture-handler";
+import Animated, { interpolate, useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { scheduleOnRN } from "react-native-worklets";
+import { DISMISS_THRESHOLD, DISMISS_VELOCITY_THRESHOLD, EASING, ENTRY_DURATION, ENTRY_OFFSET, EXIT_DURATION, EXIT_OFFSET, ICON_ANIMATION_DURATION, MAX_DRAG_CLAMP, MAX_DRAG_RESISTANCE, SPRING_BACK_DURATION, STACK_OFFSET_PER_ITEM, STACK_SCALE_PER_ITEM, STACK_TRANSITION_DURATION, SWIPE_EXIT_OFFSET } from "./constants.js";
+import { CloseIcon } from "./icons/index.js";
+import { animationPool, getSlotIndex, releaseSlot, slotTrackers } from "./pool.js";
+import { AnimatedIcon, resolveIcon } from "./toast-icons.js";
+import { toastStore } from "./toast-store.js";
+import { useToastState } from "./use-toast-state.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const ToastContainer = () => {
+  const {
+    top,
+    bottom
+  } = useSafeAreaInsets();
+  const {
+    visibleToasts,
+    theme,
+    toastsWithIndex,
+    isBottom,
+    topToastRef,
+    isBottomRef,
+    isDismissibleRef
+  } = useToastState();
+  const shouldDismiss = useSharedValue(false);
+  const panGesture = useMemo(() => Gesture.Pan().onStart(() => {
+    "worklet";
+
+    shouldDismiss.set(false);
+  }).onUpdate(event => {
+    "worklet";
+
+    if (!isDismissibleRef.current.value) return;
+    const ref = topToastRef.current.value;
+    if (!ref) return;
+    const {
+      slot
+    } = ref;
+    const bottom = isBottomRef.current.value;
+    const rawY = event.translationY;
+    const dismissDrag = bottom ? rawY : -rawY;
+    const resistDrag = bottom ? -rawY : rawY;
+    if (dismissDrag > 0) {
+      const clampedY = bottom ? Math.min(rawY, MAX_DRAG_CLAMP) : Math.max(rawY, -MAX_DRAG_CLAMP);
+      slot.translationY.value = clampedY;
+      const shouldTriggerDismiss = dismissDrag > DISMISS_THRESHOLD || (bottom ? event.velocityY > DISMISS_VELOCITY_THRESHOLD : event.velocityY < -DISMISS_VELOCITY_THRESHOLD);
+      shouldDismiss.set(shouldTriggerDismiss);
+    } else {
+      const exponentialDrag = MAX_DRAG_RESISTANCE * (1 - Math.exp(-resistDrag / 250));
+      slot.translationY.value = bottom ? -Math.min(exponentialDrag, MAX_DRAG_RESISTANCE) : Math.min(exponentialDrag, MAX_DRAG_RESISTANCE);
+      shouldDismiss.value = false;
+    }
+  }).onEnd(() => {
+    "worklet";
+
+    if (!isDismissibleRef.current.value) return;
+    const ref = topToastRef.current.value;
+    if (!ref) return;
+    const {
+      slot
+    } = ref;
+    const bottom = isBottomRef.current.value;
+    if (shouldDismiss.value) {
+      slot.progress.value = withTiming(0, {
+        duration: EXIT_DURATION,
+        easing: EASING
+      });
+      const exitOffset = bottom ? SWIPE_EXIT_OFFSET : -SWIPE_EXIT_OFFSET;
+      slot.translationY.value = withTiming(slot.translationY.value + exitOffset, {
+        duration: EXIT_DURATION,
+        easing: EASING
+      });
+      scheduleOnRN(ref.dismiss);
+    } else {
+      slot.translationY.value = withTiming(0, {
+        duration: SPRING_BACK_DURATION,
+        easing: EASING
+      });
+    }
+  }), [shouldDismiss, isDismissibleRef, topToastRef, isBottomRef]);
+  const registerTopToast = useCallback(values => {
+    topToastRef.current.value = values;
+  }, [topToastRef]);
+  if (visibleToasts.length === 0) return null;
+  const inset = isBottom ? bottom : top;
+  const positionStyle = isBottom ? {
+    bottom: inset + theme.offset + 2
+  } : {
+    top: inset + theme.offset + 2
+  };
+  return /*#__PURE__*/_jsx(GestureDetector, {
+    gesture: panGesture,
+    children: /*#__PURE__*/_jsx(View, {
+      style: [styles.container, positionStyle],
+      pointerEvents: "box-none",
+      children: toastsWithIndex.map(({
+        toast,
+        index
+      }) => /*#__PURE__*/_jsx(MemoizedToastItem, {
+        toast: toast,
+        index: index,
+        theme: theme,
+        position: theme.position,
+        isTopToast: index === 0,
+        registerTopToast: registerTopToast
+      }, toast.id))
+    })
+  });
+};
+const ToastItem = ({
+  toast,
+  index,
+  theme,
+  position,
+  isTopToast,
+  registerTopToast
+}) => {
+  const [slotIdx] = useState(() => getSlotIndex(toast.id));
+  const slot = animationPool[slotIdx];
+  const tracker = slotTrackers[slotIdx];
+  const isBottom = position === "bottom";
+  const entryFromY = isBottom ? ENTRY_OFFSET : -ENTRY_OFFSET;
+  const exitToY = isBottom ? EXIT_OFFSET : -EXIT_OFFSET;
+  const [wasLoading, setWasLoading] = useState(toast.type === "loading");
+  const [showIcon, setShowIcon] = useState(false);
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: mount-only effect
+  useEffect(() => {
+    slot.progress.value = 0;
+    slot.translationY.value = 0;
+    slot.stackIndex.value = index;
+    slot.progress.value = withTiming(1, {
+      duration: ENTRY_DURATION,
+      easing: EASING
+    });
+    const iconTimeout = setTimeout(() => setShowIcon(true), 50);
+    return () => {
+      clearTimeout(iconTimeout);
+      releaseSlot(toast.id);
+    };
+  }, []);
+  const dismissToast = useCallback(() => {
+    toastStore.hide(toast.id);
+  }, [toast.id]);
+  useEffect(() => {
+    let loadingTimeout = null;
+    if (toast.isExiting && !tracker.wasExiting) {
+      tracker.wasExiting = true;
+      slot.progress.value = withTiming(0, {
+        duration: EXIT_DURATION,
+        easing: EASING
+      });
+      slot.translationY.value = withTiming(exitToY, {
+        duration: EXIT_DURATION,
+        easing: EASING
+      });
+    }
+    if (tracker.initialized && index !== tracker.prevIndex) {
+      slot.stackIndex.value = withTiming(index, {
+        duration: STACK_TRANSITION_DURATION,
+        easing: EASING
+      });
+    }
+    tracker.prevIndex = index;
+    tracker.initialized = true;
+    if (toast.type === "loading") {
+      setWasLoading(true);
+    } else if (wasLoading) {
+      loadingTimeout = setTimeout(() => setWasLoading(false), ICON_ANIMATION_DURATION + 50);
+    }
+    if (isTopToast) {
+      registerTopToast({
+        slot: slot,
+        dismiss: dismissToast
+      });
+    }
+    return () => {
+      if (loadingTimeout) clearTimeout(loadingTimeout);
+      if (isTopToast) registerTopToast(null);
+    };
+  }, [toast.isExiting, index, slot, tracker, exitToY, toast.type, wasLoading, isTopToast, registerTopToast, dismissToast]);
+  const shouldAnimateIcon = wasLoading && toast.type !== "loading";
+  const animatedStyle = useAnimatedStyle(() => {
+    const baseTranslateY = interpolate(slot.progress.value, [0, 1], [entryFromY, 0]);
+    const stackOffsetY = isBottom ? slot.stackIndex.value * STACK_OFFSET_PER_ITEM : slot.stackIndex.value * -STACK_OFFSET_PER_ITEM;
+    const stackScale = 1 - slot.stackIndex.value * STACK_SCALE_PER_ITEM;
+    const finalTranslateY = baseTranslateY + slot.translationY.value + stackOffsetY;
+    const progressOpacity = interpolate(slot.progress.value, [0, 1], [0, 1]);
+    const dismissDirection = isBottom ? slot.translationY.value : -slot.translationY.value;
+    const dragOpacity = dismissDirection > 0 ? interpolate(dismissDirection, [0, 130], [1, 0], "clamp") : 1;
+    const opacity = progressOpacity * dragOpacity;
+    const dragScale = interpolate(Math.abs(slot.translationY.value), [0, 50], [1, 0.98], "clamp");
+    const scale = stackScale * dragScale;
+    return {
+      transform: [{
+        translateY: finalTranslateY
+      }, {
+        scale
+      }],
+      opacity,
+      zIndex: 1000 - Math.round(slot.stackIndex.value)
+    };
+  });
+  const {
+    options
+  } = toast;
+  const colors = theme.colors[toast.type];
+  if (options?.customContent !== undefined) {
+    const content = options.customContent;
+    return /*#__PURE__*/_jsx(Animated.View, {
+      style: [styles.toast, styles.customContentToast, isBottom ? styles.toastBottom : styles.toastTop, {
+        backgroundColor: colors.background
+      }, theme.toastStyle, options.style, animatedStyle],
+      children: typeof content === "function" ? content({
+        id: toast.id,
+        dismiss: dismissToast,
+        type: toast.type,
+        isExiting: !!toast.isExiting
+      }) : content
+    });
+  }
+  const shouldShowCloseButton = toast.type !== "loading" && (options?.showCloseButton ?? theme.showCloseButton);
+  return /*#__PURE__*/_jsxs(Animated.View, {
+    style: [styles.toast, isBottom ? styles.toastBottom : styles.toastTop, {
+      backgroundColor: colors.background
+    }, theme.rtl && styles.rtl, theme.toastStyle, options?.style, animatedStyle],
+    children: [/*#__PURE__*/_jsx(View, {
+      style: styles.iconContainer,
+      children: showIcon && (shouldAnimateIcon ? /*#__PURE__*/_jsx(AnimatedIcon, {
+        type: toast.type,
+        color: colors.accent,
+        custom: options?.icon,
+        config: theme.icons[toast.type]
+      }, toast.type) : resolveIcon(toast.type, colors.accent, options?.icon, theme.icons[toast.type]))
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.textContainer,
+      children: [/*#__PURE__*/_jsx(Text, {
+        maxFontSizeMultiplier: 1.35,
+        allowFontScaling: false,
+        style: [styles.title, {
+          color: colors.accent
+        }, theme.rtl && {
+          textAlign: "right"
+        }, theme.titleStyle, options?.titleStyle],
+        children: toast.title
+      }), toast.description && /*#__PURE__*/_jsx(Text, {
+        allowFontScaling: false,
+        maxFontSizeMultiplier: 1.35,
+        style: [styles.description, theme.rtl && {
+          textAlign: "right"
+        }, theme.descriptionStyle, options?.descriptionStyle],
+        children: toast.description
+      })]
+    }), shouldShowCloseButton && /*#__PURE__*/_jsx(Pressable, {
+      style: styles.closeButton,
+      onPress: dismissToast,
+      hitSlop: 12,
+      children: /*#__PURE__*/_jsx(CloseIcon, {
+        width: 20,
+        height: 20
+      })
+    })]
+  });
+};
+const MemoizedToastItem = /*#__PURE__*/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 && prev.isTopToast === next.isTopToast;
+});
+const styles = StyleSheet.create({
+  container: {
+    position: "absolute",
+    left: 16,
+    right: 16,
+    zIndex: 1000
+  },
+  toast: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12,
+    minHeight: 36,
+    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
+  },
+  customContentToast: {
+    padding: 0,
+    paddingHorizontal: 0,
+    paddingVertical: 0,
+    overflow: "hidden"
+  },
+  rtl: {
+    flexDirection: "row-reverse"
+  },
+  toastTop: {
+    top: 0
+  },
+  toastBottom: {
+    bottom: 0
+  },
+  iconContainer: {
+    width: 48,
+    height: 48,
+    alignItems: "center",
+    justifyContent: "center",
+    marginLeft: 8
+  },
+  textContainer: {
+    flex: 1,
+    gap: 1,
+    justifyContent: "center"
+  },
+  title: {
+    fontSize: 14,
+    fontWeight: "700",
+    lineHeight: 20
+  },
+  description: {
+    color: "#6B7280",
+    fontSize: 12,
+    fontWeight: "500",
+    lineHeight: 16
+  },
+  closeButton: {
+    padding: 4,
+    alignItems: "center",
+    justifyContent: "center"
+  }
+});
+//# sourceMappingURL=toast.js.map

package/lib/module/types.js

@@ -1 +1,4 @@
-"use strict";export{};
+"use strict";
+
+export {};
+//# sourceMappingURL=types.js.map

package/lib/module/use-toast-state.js

@@ -1 +1,67 @@
-"use strict";import{useEffect as t,useMemo as i,useRef as s,useState as e}from"react";import{makeMutable as o}from"react-native-reanimated";import{toastStore as n}from"./toast-store.js";export const useToastState=()=>{const[r,l]=e([]),[m,a]=e(()=>n.getTheme()),u=s(o(null)),b=s(o("bottom"===m.position)),c=s(o(!0)),p="bottom"===m.position,d=r.find(t=>!t.isExiting),f=d?.options?.dismissible??m.dismissible;t(()=>{const t=n.getState().visibleToasts,i=n.getTheme();l(t);const s=t.find(t=>!t.isExiting);b.current.value="bottom"===i.position,c.current.value=s?.options?.dismissible??i.dismissible;let e=null,o=null;const r=n.subscribe(t=>{e=t.visibleToasts,null===o&&(o=requestAnimationFrame(()=>{const t=e??n.getState().visibleToasts,i=n.getTheme();e&&(l(e),e=null),o=null,a(t=>t===i?t:i);const s=t.find(t=>!t.isExiting);b.current.value="bottom"===i.position,c.current.value=s?.options?.dismissible??i.dismissible}))});return r},[]);const g=i(()=>{const t=new Map;let i=0;for(const s of r)t.set(s.id,s.isExiting?-1:i),s.isExiting||i++;return[...r].reverse().map(i=>({toast:i,index:t.get(i.id)??0}))},[r]);return{visibleToasts:r,theme:m,toastsWithIndex:g,isBottom:p,isTopDismissible:f,topToastRef:u,isBottomRef:b,isDismissibleRef:c}};
+"use strict";
+
+import { useEffect, useMemo, useRef, useState } from "react";
+import { makeMutable } from "react-native-reanimated";
+import { toastStore } from "./toast-store.js";
+export const useToastState = () => {
+  const [visibleToasts, setVisibleToasts] = useState([]);
+  const [theme, setTheme] = useState(() => toastStore.getTheme());
+  const topToastRef = useRef(makeMutable(null));
+  const isBottomRef = useRef(makeMutable(theme.position === "bottom"));
+  const isDismissibleRef = useRef(makeMutable(true));
+  const isBottom = theme.position === "bottom";
+  const topToast = visibleToasts.find(t => !t.isExiting);
+  const isTopDismissible = topToast?.options?.dismissible ?? theme.dismissible;
+  useEffect(() => {
+    const initialToasts = toastStore.getState().visibleToasts;
+    const initialTheme = toastStore.getTheme();
+    setVisibleToasts(initialToasts);
+    const initialTopToast = initialToasts.find(t => !t.isExiting);
+    isBottomRef.current.value = initialTheme.position === "bottom";
+    isDismissibleRef.current.value = initialTopToast?.options?.dismissible ?? initialTheme.dismissible;
+    let pendingToasts = null;
+    let rafId = null;
+    const unsubscribe = toastStore.subscribe(state => {
+      pendingToasts = state.visibleToasts;
+      if (rafId === null) {
+        rafId = requestAnimationFrame(() => {
+          const currentToasts = pendingToasts ?? toastStore.getState().visibleToasts;
+          const currentTheme = toastStore.getTheme();
+          if (pendingToasts) {
+            setVisibleToasts(pendingToasts);
+            pendingToasts = null;
+          }
+          rafId = null;
+          setTheme(prev => prev === currentTheme ? prev : currentTheme);
+          const topToast = currentToasts.find(t => !t.isExiting);
+          isBottomRef.current.value = currentTheme.position === "bottom";
+          isDismissibleRef.current.value = topToast?.options?.dismissible ?? currentTheme.dismissible;
+        });
+      }
+    });
+    return unsubscribe;
+  }, []);
+  const toastsWithIndex = useMemo(() => {
+    const indices = new Map();
+    let visualIndex = 0;
+    for (const t of visibleToasts) {
+      indices.set(t.id, t.isExiting ? -1 : visualIndex);
+      if (!t.isExiting) visualIndex++;
+    }
+    return [...visibleToasts].reverse().map(t => ({
+      toast: t,
+      index: indices.get(t.id) ?? 0
+    }));
+  }, [visibleToasts]);
+  return {
+    visibleToasts,
+    theme,
+    toastsWithIndex,
+    isBottom,
+    isTopDismissible,
+    topToastRef,
+    isBottomRef,
+    isDismissibleRef
+  };
+};
+//# sourceMappingURL=use-toast-state.js.map

package/lib/typescript/index.d.ts

@@ -1,7 +1,7 @@
 export { CloseIcon, GreenCheck, InfoIcon, RedX } from "./icons";
 export { ToastContainer } from "./toast";
 export { toast } from "./toast-api";
-export { BreadLoaf } from "./toast-provider";
+export { BreadLoaf, ToastPortal } from "./toast-provider";
 export { toastStore } from "./toast-store";
 export type { CustomContentProps, CustomContentRenderFn, ErrorMessageInput, IconProps, IconRenderFn, MessageInput, PromiseMessages, PromiseResult, Toast, ToastConfig, ToastOptions, ToastPosition, ToastState, ToastType, ToastTypeColors, } from "./types";
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/toast-provider.d.ts

@@ -49,5 +49,33 @@ interface BreadLoafProps {
  * ```
  */
 export declare function BreadLoaf({ config }: BreadLoafProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Lightweight toast renderer for use inside modal screens.
+ *
+ * On Android, native modals render above the root React view, so toasts from
+ * the main `<BreadLoaf />` won't be visible. Add `<ToastPortal />` inside your
+ * modal layouts to show toasts above modal content.
+ *
+ * This component only renders toasts - it does not accept configuration.
+ * All styling/behavior is inherited from your root `<BreadLoaf />` config.
+ *
+ * @example
+ * ```tsx
+ * // app/(modal)/_layout.tsx
+ * import { Stack } from 'expo-router';
+ * import { ToastPortal } from 'react-native-bread';
+ * import { Platform } from 'react-native';
+ *
+ * export default function ModalLayout() {
+ *   return (
+ *     <>
+ *       <Stack screenOptions={{ headerShown: false }} />
+ *       {Platform.OS === 'android' && <ToastPortal />}
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+export declare function ToastPortal(): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=toast-provider.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-bread",
-  "version": "0.5.2",
+  "version": "0.6.0",
   "description": "A lightweight toast library for React Native with premium feeling animations and complex gesture support",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -32,10 +32,9 @@
   ],
   "scripts": {
     "build": "bob build",
-    "minify": "find lib -name '*.js' -not -path '*/node_modules/*' -exec terser {} -o {} -c directives=false -m --module \\;",
     "typecheck": "tsc --noEmit",
     "clean": "rm -rf lib",
-    "prepare": "bob build && npm run minify"
+    "prepare": "bob build"
   },
   "devDependencies": {
     "react": "19.1.0",
@@ -44,6 +43,7 @@
     "react-native-gesture-handler": "~2.28.0",
     "react-native-reanimated": "~4.2.1",
     "react-native-safe-area-context": "~5.4.0",
+    "react-native-screens": "~4.16.0",
     "react-native-svg": "15.12.1",
     "react-native-worklets": "0.7.2",
     "terser": "^5.44.1",
@@ -55,6 +55,7 @@
     "react-native-gesture-handler": ">=2.25.0",
     "react-native-reanimated": ">=4.1.0",
     "react-native-safe-area-context": ">=5.0.0",
+    "react-native-screens": ">=4.0.0",
     "react-native-svg": ">=15.8.0",
     "react-native-worklets": ">=0.5.0"
   },
@@ -68,6 +69,9 @@
     "react-native-safe-area-context": {
       "optional": false
     },
+    "react-native-screens": {
+      "optional": false
+    },
     "react-native-svg": {
       "optional": false
     }