react-native-bread 0.6.0 → 0.7.0

package/README.md

@@ -16,9 +16,10 @@ An extremely lightweight, opinionated toast component for React Native.
 - Promise handling with automatic loading → success/error states
 - Toast stacking with configurable limits
 - **Works above modals** - automatic on iOS, simple setup on Android
-- **RTL support** - perfect for Arabic and other RTL languages
+- **RTL support** - code-level RTL for when you're not using native RTL (`I18nManager`)
 - Completely customizable - colors, icons, styles, animations
 - Full Expo compatibility
+- **React Compiler compatible** - uses `.set()` / `.value` API for shared values
 
 
 
@@ -181,7 +182,7 @@ Customize all toasts globally via the `config` prop on `<BreadLoaf />`:
 <BreadLoaf
   config={{
     position: 'bottom',
-    rtl: false, // Enable for RTL languages
+    rtl: false, // Code-level RTL — not needed if using native RTL (I18nManager)
     stacking: true,
     maxStack: 3,
     defaultDuration: 4000,
@@ -221,21 +222,39 @@ Available options include:
 
 Toasts automatically appear above native modals on **iOS**.
 
-On **Android**, add `<ToastPortal />` inside your modal layouts:
+On **Android**, you have two options:
+
+### Option 1: Use a Contained Modal
+
+The simplest fix is to use `containedModal` presentation instead of `modal`. On Android, `modal` and `containedModal` look nearly identical, so this is an easy swap:
+
+```tsx
+<Stack.Screen
+  name="(modal)"
+  options={{ presentation: Platform.OS === "android" ? "containedModal" : "modal" }}
+/>
+```
+
+This renders the modal within the React hierarchy on Android, so toasts from your root `<BreadLoaf />` remain visible.
+
+### Option 2: Use ToastPortal
+
+If you need native modals, add `<ToastPortal />` inside your modal layouts:
 
 ```tsx
 // app/(modal)/_layout.tsx
 import { Stack } from "expo-router";
-import { Platform } from "react-native";
 import { ToastPortal } from "react-native-bread";
 
 export default function ModalLayout() {
   return (
     <>
       <Stack screenOptions={{ headerShown: false }} />
-      {Platform.OS === "android" && <ToastPortal />}
+      <ToastPortal />
     </>
   );
 }
 ```
 
+The `ToastPortal` component only renders on Android - it returns `null` on iOS, so no platform check is needed.
+

package/lib/commonjs/toast-icons.js

@@ -61,10 +61,10 @@ const AnimatedIcon = exports.AnimatedIcon = /*#__PURE__*/(0, _react.memo)(({
 }) => {
   const progress = (0, _reactNativeReanimated.useSharedValue)(0);
   (0, _react.useEffect)(() => {
-    progress.value = (0, _reactNativeReanimated.withTiming)(1, {
+    progress.set((0, _reactNativeReanimated.withTiming)(1, {
       duration: _constants.ICON_ANIMATION_DURATION,
       easing: _reactNativeReanimated.Easing.out(_reactNativeReanimated.Easing.back(1.5))
-    });
+    }));
   }, [progress]);
   const style = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
     opacity: progress.value,

package/lib/commonjs/toast-provider.js

@@ -77,6 +77,9 @@ function BreadLoaf({
  * the main `<BreadLoaf />` won't be visible. Add `<ToastPortal />` inside your
  * modal layouts to show toasts above modal content.
  *
+ * This component only renders on Android - it returns `null` on iOS where
+ * `<BreadLoaf />` already handles modal overlay via `FullWindowOverlay`.
+ *
  * This component only renders toasts - it does not accept configuration.
  * All styling/behavior is inherited from your root `<BreadLoaf />` config.
  *
@@ -85,19 +88,21 @@ function BreadLoaf({
  * // 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 />}
+ *       <ToastPortal />
  *     </>
  *   );
  * }
  * ```
  */
 function ToastPortal() {
+  if (_reactNative.Platform.OS !== "android") {
+    return null;
+  }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(ToastContent, {});
 }
 const styles = _reactNative.StyleSheet.create({

package/lib/commonjs/toast.js

@@ -28,69 +28,69 @@ const ToastContainer = () => {
     theme,
     toastsWithIndex,
     isBottom,
-    topToastRef,
-    isBottomRef,
-    isDismissibleRef
+    topToastMutable,
+    isBottomMutable,
+    isDismissibleMutable
   } = (0, _useToastState.useToastState)();
   const shouldDismiss = (0, _reactNativeReanimated.useSharedValue)(false);
-  const panGesture = (0, _react.useMemo)(() => _reactNativeGestureHandler.Gesture.Pan().onStart(() => {
+  const panGesture = _reactNativeGestureHandler.Gesture.Pan().onStart(() => {
     "worklet";
 
     shouldDismiss.set(false);
   }).onUpdate(event => {
     "worklet";
 
-    if (!isDismissibleRef.current.value) return;
-    const ref = topToastRef.current.value;
+    if (!isDismissibleMutable.value) return;
+    const ref = topToastMutable.value;
     if (!ref) return;
     const {
       slot
     } = ref;
-    const bottom = isBottomRef.current.value;
+    const bottom = isBottomMutable.value;
     const rawY = event.translationY;
     const dismissDrag = bottom ? rawY : -rawY;
     const resistDrag = bottom ? -rawY : rawY;
     if (dismissDrag > 0) {
       const clampedY = bottom ? Math.min(rawY, _constants.MAX_DRAG_CLAMP) : Math.max(rawY, -_constants.MAX_DRAG_CLAMP);
-      slot.translationY.value = clampedY;
+      slot.translationY.set(clampedY);
       const shouldTriggerDismiss = dismissDrag > _constants.DISMISS_THRESHOLD || (bottom ? event.velocityY > _constants.DISMISS_VELOCITY_THRESHOLD : event.velocityY < -_constants.DISMISS_VELOCITY_THRESHOLD);
       shouldDismiss.set(shouldTriggerDismiss);
     } else {
       const exponentialDrag = _constants.MAX_DRAG_RESISTANCE * (1 - Math.exp(-resistDrag / 250));
-      slot.translationY.value = bottom ? -Math.min(exponentialDrag, _constants.MAX_DRAG_RESISTANCE) : Math.min(exponentialDrag, _constants.MAX_DRAG_RESISTANCE);
-      shouldDismiss.value = false;
+      slot.translationY.set(bottom ? -Math.min(exponentialDrag, _constants.MAX_DRAG_RESISTANCE) : Math.min(exponentialDrag, _constants.MAX_DRAG_RESISTANCE));
+      shouldDismiss.set(false);
     }
   }).onEnd(() => {
     "worklet";
 
-    if (!isDismissibleRef.current.value) return;
-    const ref = topToastRef.current.value;
+    if (!isDismissibleMutable.value) return;
+    const ref = topToastMutable.value;
     if (!ref) return;
     const {
       slot
     } = ref;
-    const bottom = isBottomRef.current.value;
+    const bottom = isBottomMutable.value;
     if (shouldDismiss.value) {
-      slot.progress.value = (0, _reactNativeReanimated.withTiming)(0, {
+      slot.progress.set((0, _reactNativeReanimated.withTiming)(0, {
         duration: _constants.EXIT_DURATION,
         easing: _constants.EASING
-      });
+      }));
       const exitOffset = bottom ? _constants.SWIPE_EXIT_OFFSET : -_constants.SWIPE_EXIT_OFFSET;
-      slot.translationY.value = (0, _reactNativeReanimated.withTiming)(slot.translationY.value + exitOffset, {
+      slot.translationY.set((0, _reactNativeReanimated.withTiming)(slot.translationY.value + exitOffset, {
         duration: _constants.EXIT_DURATION,
         easing: _constants.EASING
-      });
+      }));
       (0, _reactNativeWorklets.scheduleOnRN)(ref.dismiss);
     } else {
-      slot.translationY.value = (0, _reactNativeReanimated.withTiming)(0, {
+      slot.translationY.set((0, _reactNativeReanimated.withTiming)(0, {
         duration: _constants.SPRING_BACK_DURATION,
         easing: _constants.EASING
-      });
+      }));
     }
-  }), [shouldDismiss, isDismissibleRef, topToastRef, isBottomRef]);
+  });
   const registerTopToast = (0, _react.useCallback)(values => {
-    topToastRef.current.value = values;
-  }, [topToastRef]);
+    topToastMutable.set(values);
+  }, [topToastMutable]);
   if (visibleToasts.length === 0) return null;
   const inset = isBottom ? bottom : top;
   const positionStyle = isBottom ? {
@@ -137,13 +137,13 @@ const ToastItem = ({
 
   // biome-ignore lint/correctness/useExhaustiveDependencies: mount-only effect
   (0, _react.useEffect)(() => {
-    slot.progress.value = 0;
-    slot.translationY.value = 0;
-    slot.stackIndex.value = index;
-    slot.progress.value = (0, _reactNativeReanimated.withTiming)(1, {
+    slot.progress.set(0);
+    slot.translationY.set(0);
+    slot.stackIndex.set(index);
+    slot.progress.set((0, _reactNativeReanimated.withTiming)(1, {
       duration: _constants.ENTRY_DURATION,
       easing: _constants.EASING
-    });
+    }));
     const iconTimeout = setTimeout(() => setShowIcon(true), 50);
     return () => {
       clearTimeout(iconTimeout);
@@ -157,20 +157,20 @@ const ToastItem = ({
     let loadingTimeout = null;
     if (toast.isExiting && !tracker.wasExiting) {
       tracker.wasExiting = true;
-      slot.progress.value = (0, _reactNativeReanimated.withTiming)(0, {
+      slot.progress.set((0, _reactNativeReanimated.withTiming)(0, {
         duration: _constants.EXIT_DURATION,
         easing: _constants.EASING
-      });
-      slot.translationY.value = (0, _reactNativeReanimated.withTiming)(exitToY, {
+      }));
+      slot.translationY.set((0, _reactNativeReanimated.withTiming)(exitToY, {
         duration: _constants.EXIT_DURATION,
         easing: _constants.EASING
-      });
+      }));
     }
     if (tracker.initialized && index !== tracker.prevIndex) {
-      slot.stackIndex.value = (0, _reactNativeReanimated.withTiming)(index, {
+      slot.stackIndex.set((0, _reactNativeReanimated.withTiming)(index, {
         duration: _constants.STACK_TRANSITION_DURATION,
         easing: _constants.EASING
-      });
+      }));
     }
     tracker.prevIndex = index;
     tracker.initialized = true;

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

@@ -10,9 +10,9 @@ var _toastStore = require("./toast-store.js");
 const useToastState = () => {
   const [visibleToasts, setVisibleToasts] = (0, _react.useState)([]);
   const [theme, setTheme] = (0, _react.useState)(() => _toastStore.toastStore.getTheme());
-  const topToastRef = (0, _react.useRef)((0, _reactNativeReanimated.makeMutable)(null));
-  const isBottomRef = (0, _react.useRef)((0, _reactNativeReanimated.makeMutable)(theme.position === "bottom"));
-  const isDismissibleRef = (0, _react.useRef)((0, _reactNativeReanimated.makeMutable)(true));
+  const [topToastMutable] = (0, _react.useState)(() => (0, _reactNativeReanimated.makeMutable)(null));
+  const [isBottomMutable] = (0, _react.useState)(() => (0, _reactNativeReanimated.makeMutable)(theme.position === "bottom"));
+  const [isDismissibleMutable] = (0, _react.useState)(() => (0, _reactNativeReanimated.makeMutable)(true));
   const isBottom = theme.position === "bottom";
   const topToast = visibleToasts.find(t => !t.isExiting);
   const isTopDismissible = topToast?.options?.dismissible ?? theme.dismissible;
@@ -21,8 +21,8 @@ const useToastState = () => {
     const initialTheme = _toastStore.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;
+    isBottomMutable.set(initialTheme.position === "bottom");
+    isDismissibleMutable.set(initialTopToast?.options?.dismissible ?? initialTheme.dismissible);
     let pendingToasts = null;
     let rafId = null;
     const unsubscribe = _toastStore.toastStore.subscribe(state => {
@@ -38,13 +38,13 @@ const useToastState = () => {
           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;
+          isBottomMutable.set(currentTheme.position === "bottom");
+          isDismissibleMutable.set(topToast?.options?.dismissible ?? currentTheme.dismissible);
         });
       }
     });
     return unsubscribe;
-  }, []);
+  }, [isBottomMutable, isDismissibleMutable]);
   const toastsWithIndex = (0, _react.useMemo)(() => {
     const indices = new Map();
     let visualIndex = 0;
@@ -63,9 +63,9 @@ const useToastState = () => {
     toastsWithIndex,
     isBottom,
     isTopDismissible,
-    topToastRef,
-    isBottomRef,
-    isDismissibleRef
+    topToastMutable,
+    isBottomMutable,
+    isDismissibleMutable
   };
 };
 exports.useToastState = useToastState;

package/lib/module/toast-icons.js

@@ -55,10 +55,10 @@ export const AnimatedIcon = /*#__PURE__*/memo(({
 }) => {
   const progress = useSharedValue(0);
   useEffect(() => {
-    progress.value = withTiming(1, {
+    progress.set(withTiming(1, {
       duration: ICON_ANIMATION_DURATION,
       easing: Easing.out(Easing.back(1.5))
-    });
+    }));
   }, [progress]);
   const style = useAnimatedStyle(() => ({
     opacity: progress.value,

package/lib/module/toast-provider.js

@@ -72,6 +72,9 @@ export function BreadLoaf({
  * the main `<BreadLoaf />` won't be visible. Add `<ToastPortal />` inside your
  * modal layouts to show toasts above modal content.
  *
+ * This component only renders on Android - it returns `null` on iOS where
+ * `<BreadLoaf />` already handles modal overlay via `FullWindowOverlay`.
+ *
  * This component only renders toasts - it does not accept configuration.
  * All styling/behavior is inherited from your root `<BreadLoaf />` config.
  *
@@ -80,19 +83,21 @@ export function BreadLoaf({
  * // 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 />}
+ *       <ToastPortal />
  *     </>
  *   );
  * }
  * ```
  */
 export function ToastPortal() {
+  if (Platform.OS !== "android") {
+    return null;
+  }
   return /*#__PURE__*/_jsx(ToastContent, {});
 }
 const styles = StyleSheet.create({

package/lib/module/toast.js

@@ -1,6 +1,6 @@
 "use strict";
 
-import { memo, useCallback, useEffect, useMemo, useState } from "react";
+import { memo, useCallback, useEffect, 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";
@@ -23,69 +23,69 @@ export const ToastContainer = () => {
     theme,
     toastsWithIndex,
     isBottom,
-    topToastRef,
-    isBottomRef,
-    isDismissibleRef
+    topToastMutable,
+    isBottomMutable,
+    isDismissibleMutable
   } = useToastState();
   const shouldDismiss = useSharedValue(false);
-  const panGesture = useMemo(() => Gesture.Pan().onStart(() => {
+  const panGesture = Gesture.Pan().onStart(() => {
     "worklet";
 
     shouldDismiss.set(false);
   }).onUpdate(event => {
     "worklet";
 
-    if (!isDismissibleRef.current.value) return;
-    const ref = topToastRef.current.value;
+    if (!isDismissibleMutable.value) return;
+    const ref = topToastMutable.value;
     if (!ref) return;
     const {
       slot
     } = ref;
-    const bottom = isBottomRef.current.value;
+    const bottom = isBottomMutable.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;
+      slot.translationY.set(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;
+      slot.translationY.set(bottom ? -Math.min(exponentialDrag, MAX_DRAG_RESISTANCE) : Math.min(exponentialDrag, MAX_DRAG_RESISTANCE));
+      shouldDismiss.set(false);
     }
   }).onEnd(() => {
     "worklet";
 
-    if (!isDismissibleRef.current.value) return;
-    const ref = topToastRef.current.value;
+    if (!isDismissibleMutable.value) return;
+    const ref = topToastMutable.value;
     if (!ref) return;
     const {
       slot
     } = ref;
-    const bottom = isBottomRef.current.value;
+    const bottom = isBottomMutable.value;
     if (shouldDismiss.value) {
-      slot.progress.value = withTiming(0, {
+      slot.progress.set(withTiming(0, {
         duration: EXIT_DURATION,
         easing: EASING
-      });
+      }));
       const exitOffset = bottom ? SWIPE_EXIT_OFFSET : -SWIPE_EXIT_OFFSET;
-      slot.translationY.value = withTiming(slot.translationY.value + exitOffset, {
+      slot.translationY.set(withTiming(slot.translationY.value + exitOffset, {
         duration: EXIT_DURATION,
         easing: EASING
-      });
+      }));
       scheduleOnRN(ref.dismiss);
     } else {
-      slot.translationY.value = withTiming(0, {
+      slot.translationY.set(withTiming(0, {
         duration: SPRING_BACK_DURATION,
         easing: EASING
-      });
+      }));
     }
-  }), [shouldDismiss, isDismissibleRef, topToastRef, isBottomRef]);
+  });
   const registerTopToast = useCallback(values => {
-    topToastRef.current.value = values;
-  }, [topToastRef]);
+    topToastMutable.set(values);
+  }, [topToastMutable]);
   if (visibleToasts.length === 0) return null;
   const inset = isBottom ? bottom : top;
   const positionStyle = isBottom ? {
@@ -131,13 +131,13 @@ const ToastItem = ({
 
   // 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, {
+    slot.progress.set(0);
+    slot.translationY.set(0);
+    slot.stackIndex.set(index);
+    slot.progress.set(withTiming(1, {
       duration: ENTRY_DURATION,
       easing: EASING
-    });
+    }));
     const iconTimeout = setTimeout(() => setShowIcon(true), 50);
     return () => {
       clearTimeout(iconTimeout);
@@ -151,20 +151,20 @@ const ToastItem = ({
     let loadingTimeout = null;
     if (toast.isExiting && !tracker.wasExiting) {
       tracker.wasExiting = true;
-      slot.progress.value = withTiming(0, {
+      slot.progress.set(withTiming(0, {
         duration: EXIT_DURATION,
         easing: EASING
-      });
-      slot.translationY.value = withTiming(exitToY, {
+      }));
+      slot.translationY.set(withTiming(exitToY, {
         duration: EXIT_DURATION,
         easing: EASING
-      });
+      }));
     }
     if (tracker.initialized && index !== tracker.prevIndex) {
-      slot.stackIndex.value = withTiming(index, {
+      slot.stackIndex.set(withTiming(index, {
         duration: STACK_TRANSITION_DURATION,
         easing: EASING
-      });
+      }));
     }
     tracker.prevIndex = index;
     tracker.initialized = true;

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

@@ -1,14 +1,14 @@
 "use strict";
 
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, 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 [topToastMutable] = useState(() => makeMutable(null));
+  const [isBottomMutable] = useState(() => makeMutable(theme.position === "bottom"));
+  const [isDismissibleMutable] = useState(() => makeMutable(true));
   const isBottom = theme.position === "bottom";
   const topToast = visibleToasts.find(t => !t.isExiting);
   const isTopDismissible = topToast?.options?.dismissible ?? theme.dismissible;
@@ -17,8 +17,8 @@ export const useToastState = () => {
     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;
+    isBottomMutable.set(initialTheme.position === "bottom");
+    isDismissibleMutable.set(initialTopToast?.options?.dismissible ?? initialTheme.dismissible);
     let pendingToasts = null;
     let rafId = null;
     const unsubscribe = toastStore.subscribe(state => {
@@ -34,13 +34,13 @@ export const useToastState = () => {
           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;
+          isBottomMutable.set(currentTheme.position === "bottom");
+          isDismissibleMutable.set(topToast?.options?.dismissible ?? currentTheme.dismissible);
         });
       }
     });
     return unsubscribe;
-  }, []);
+  }, [isBottomMutable, isDismissibleMutable]);
   const toastsWithIndex = useMemo(() => {
     const indices = new Map();
     let visualIndex = 0;
@@ -59,9 +59,9 @@ export const useToastState = () => {
     toastsWithIndex,
     isBottom,
     isTopDismissible,
-    topToastRef,
-    isBottomRef,
-    isDismissibleRef
+    topToastMutable,
+    isBottomMutable,
+    isDismissibleMutable
   };
 };
 //# sourceMappingURL=use-toast-state.js.map

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

@@ -56,6 +56,9 @@ export declare function BreadLoaf({ config }: BreadLoafProps): import("react/jsx
  * the main `<BreadLoaf />` won't be visible. Add `<ToastPortal />` inside your
  * modal layouts to show toasts above modal content.
  *
+ * This component only renders on Android - it returns `null` on iOS where
+ * `<BreadLoaf />` already handles modal overlay via `FullWindowOverlay`.
+ *
  * This component only renders toasts - it does not accept configuration.
  * All styling/behavior is inherited from your root `<BreadLoaf />` config.
  *
@@ -64,18 +67,17 @@ export declare function BreadLoaf({ config }: BreadLoafProps): import("react/jsx
  * // 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 />}
+ *       <ToastPortal />
  *     </>
  *   );
  * }
  * ```
  */
-export declare function ToastPortal(): import("react/jsx-runtime").JSX.Element;
+export declare function ToastPortal(): import("react/jsx-runtime").JSX.Element | null;
 export {};
 //# sourceMappingURL=toast-provider.d.ts.map

package/lib/typescript/types.d.ts

@@ -1,5 +1,6 @@
 import type { ReactNode } from "react";
 import type { TextStyle, ViewStyle } from "react-native";
+import type { SharedValue } from "react-native-reanimated";
 export type ToastType = "success" | "error" | "info" | "loading";
 export type ToastPosition = "top" | "bottom";
 export interface ToastTypeColors {
@@ -35,7 +36,11 @@ export interface ToastTheme {
     position: ToastPosition;
     /** Extra offset from safe area edge (in addition to safe area insets) */
     offset: number;
-    /** Enable right-to-left layout (reverses icon/text order) */
+    /**
+     * Enable right-to-left layout at the code level (reverses icon/text order and text alignment).
+     * Only needed when you handle RTL in JavaScript — native RTL (e.g. via `I18nManager.forceRTL`)
+     * already flips the entire layout automatically, so this option is unnecessary in that case.
+     */
     rtl: boolean;
     /** Whether to show multiple toasts stacked (default: true). When false, only one toast shows at a time. */
     stacking: boolean;
@@ -121,15 +126,9 @@ export interface PromiseResult<T> {
 }
 export interface TopToastRef {
     slot: {
-        progress: {
-            value: number;
-        };
-        translationY: {
-            value: number;
-        };
-        stackIndex: {
-            value: number;
-        };
+        progress: SharedValue<number>;
+        translationY: SharedValue<number>;
+        stackIndex: SharedValue<number>;
     };
     dismiss: () => void;
 }

package/lib/typescript/use-toast-state.d.ts

@@ -9,8 +9,8 @@ export declare const useToastState: () => {
     }[];
     isBottom: boolean;
     isTopDismissible: boolean;
-    topToastRef: import("react").RefObject<import("react-native-reanimated/lib/typescript/commonTypes").Mutable<TopToastRef | null>>;
-    isBottomRef: import("react").RefObject<import("react-native-reanimated/lib/typescript/commonTypes").Mutable<boolean>>;
-    isDismissibleRef: import("react").RefObject<import("react-native-reanimated/lib/typescript/commonTypes").Mutable<boolean>>;
+    topToastMutable: import("react-native-reanimated/lib/typescript/commonTypes").Mutable<TopToastRef | null>;
+    isBottomMutable: import("react-native-reanimated/lib/typescript/commonTypes").Mutable<boolean>;
+    isDismissibleMutable: import("react-native-reanimated/lib/typescript/commonTypes").Mutable<boolean>;
 };
 //# sourceMappingURL=use-toast-state.d.ts.map