react-native-bread 0.5.3 → 0.6.1

package/README.md

@@ -6,20 +6,19 @@ An extremely lightweight, opinionated toast component for React Native.
 
 ## Features
 
-- **Extremely lightweight** package, only 14KB packed size
+- **Lightweight** - only 20KB packed size
+- **New Architecture** - built exclusively for React Native 0.76+ with Fabric
 - Clean, imperative API inspired by [Sonner](https://sonner.emilkowal.ski/)
 - Zero setup - add one component, start toasting. No hooks, no providers
-- Built for mobile with smooth 60fps animations powered by Reanimated
+- Smooth 60fps animations powered by Reanimated
 - Natural swipe gestures that feel native to the platform
 - Multiple toast types: `success`, `error`, `info`, `promise`, and `custom`
 - Promise handling with automatic loading → success/error states
-- Complex animations and gestures but with high performance
 - Toast stacking with configurable limits
-- Position toasts at top or bottom of screen
-- **RTL built-in support** - perfect for Arabic and other RTL languages
+- **Works above modals** - automatic on iOS, simple setup on Android
+- **RTL support** - perfect for Arabic and other RTL languages
 - Completely customizable - colors, icons, styles, animations
 - Full Expo compatibility
-- Imperative API works anywhere - components, utilities, event handlers
 
 
 
@@ -38,19 +37,20 @@ This package requires the following peer dependencies:
 | [react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started) | >= 4.1.0 |
 | [react-native-gesture-handler](https://docs.swmansion.com/react-native-gesture-handler/docs/) | >= 2.25.0 |
 | [react-native-safe-area-context](https://docs.expo.dev/versions/latest/sdk/safe-area-context/) | >= 5.0.0 |
+| [react-native-screens](https://docs.swmansion.com/react-native-screens/) | >= 4.0.0 |
 | [react-native-svg](https://github.com/software-mansion/react-native-svg) | >= 15.8.0 |
 | [react-native-worklets](https://github.com/margelo/react-native-worklets-core) | >= 0.5.0 |
 
 If you don't have these installed, you can install all peer dependencies at once:
 
 ```sh
-bun add react-native-reanimated react-native-gesture-handler react-native-safe-area-context react-native-svg react-native-worklets
+bun add react-native-reanimated react-native-gesture-handler react-native-safe-area-context react-native-screens react-native-svg react-native-worklets
 ```
 
 Or with npm:
 
 ```sh
-npm install react-native-reanimated react-native-gesture-handler react-native-safe-area-context react-native-svg react-native-worklets
+npm install react-native-reanimated react-native-gesture-handler react-native-safe-area-context react-native-screens react-native-svg react-native-worklets
 ```
 
 > **Note**: Make sure your `react-native-reanimated` and `react-native-worklets` versions are compatible. Reanimated 4.1.x works with worklets 0.5.x-0.7.x, while Reanimated 4.2.x requires worklets 0.7.x only.
@@ -217,9 +217,43 @@ Available options include:
 | `toast.dismiss(id)` | Dismiss a specific toast |
 | `toast.dismissAll()` | Dismiss all toasts |
 
-## Known Issues
+## Toasts in Modals
 
-**Modal Pages**: Toasts may render behind React Native's `screenOptions={{ presentation: "modal" }}`  since they are mounted at the native layer above the whole app.
+Toasts automatically appear above native modals on **iOS**.
 
-**Solution**: Use `screenOptions={{ presentation: "containedModal" }}`, or add another `<BreadLoaf>` inside the modal page.
+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 { ToastPortal } from "react-native-bread";
+
+export default function ModalLayout() {
+  return (
+    <>
+      <Stack screenOptions={{ headerShown: false }} />
+      <ToastPortal />
+    </>
+  );
+}
+```
+
+The `ToastPortal` component only renders on Android - it returns `null` on iOS, so no platform check is needed.
 

package/lib/commonjs/index.js

@@ -39,6 +39,12 @@ Object.defineProperty(exports, "ToastContainer", {
     return _toast.ToastContainer;
   }
 });
+Object.defineProperty(exports, "ToastPortal", {
+  enumerable: true,
+  get: function () {
+    return _toastProvider.ToastPortal;
+  }
+});
 Object.defineProperty(exports, "toast", {
   enumerable: true,
   get: function () {

package/lib/commonjs/toast-provider.js

@@ -4,11 +4,20 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.BreadLoaf = BreadLoaf;
+exports.ToastPortal = ToastPortal;
 var _react = require("react");
 var _reactNative = require("react-native");
+var _reactNativeScreens = require("react-native-screens");
 var _toast = require("./toast.js");
 var _toastStore = require("./toast-store.js");
 var _jsxRuntime = require("react/jsx-runtime");
+function ToastContent() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: styles.container,
+    pointerEvents: "box-none",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_toast.ToastContainer, {})
+  });
+}
 /**
  * Toast component that enables toast notifications in your app.
  * Add `<BreadLoaf />` to your root layout to start showing toasts.
@@ -51,11 +60,50 @@ function BreadLoaf({
       _toastStore.toastStore.setConfig(undefined);
     };
   }, [config]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: styles.container,
-    pointerEvents: "box-none",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_toast.ToastContainer, {})
-  });
+
+  // iOS: use FullWindowOverlay to render above native modals
+  if (_reactNative.Platform.OS === "ios") {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeScreens.FullWindowOverlay, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ToastContent, {})
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ToastContent, {});
+}
+
+/**
+ * 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 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.
+ *
+ * @example
+ * ```tsx
+ * // app/(modal)/_layout.tsx
+ * import { Stack } from 'expo-router';
+ * import { ToastPortal } from 'react-native-bread';
+ *
+ * export default function ModalLayout() {
+ *   return (
+ *     <>
+ *       <Stack screenOptions={{ headerShown: false }} />
+ *       <ToastPortal />
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+function ToastPortal() {
+  if (_reactNative.Platform.OS !== "android") {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ToastContent, {});
 }
 const styles = _reactNative.StyleSheet.create({
   container: {

package/lib/module/index.js

@@ -6,7 +6,7 @@
 export { CloseIcon, GreenCheck, InfoIcon, RedX } from "./icons/index.js";
 export { ToastContainer } from "./toast.js";
 export { toast } from "./toast-api.js";
-export { BreadLoaf } from "./toast-provider.js";
+export { BreadLoaf, ToastPortal } from "./toast-provider.js";
 
 // Store (for advanced usage)
 export { toastStore } from "./toast-store.js";

package/lib/module/toast-provider.js

@@ -1,10 +1,18 @@
 "use strict";
 
 import { useEffect } from "react";
-import { StyleSheet, View } from "react-native";
+import { Platform, StyleSheet, View } from "react-native";
+import { FullWindowOverlay } from "react-native-screens";
 import { ToastContainer } from "./toast.js";
 import { toastStore } from "./toast-store.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+function ToastContent() {
+  return /*#__PURE__*/_jsx(View, {
+    style: styles.container,
+    pointerEvents: "box-none",
+    children: /*#__PURE__*/_jsx(ToastContainer, {})
+  });
+}
 /**
  * Toast component that enables toast notifications in your app.
  * Add `<BreadLoaf />` to your root layout to start showing toasts.
@@ -47,11 +55,50 @@ export function BreadLoaf({
       toastStore.setConfig(undefined);
     };
   }, [config]);
-  return /*#__PURE__*/_jsx(View, {
-    style: styles.container,
-    pointerEvents: "box-none",
-    children: /*#__PURE__*/_jsx(ToastContainer, {})
-  });
+
+  // iOS: use FullWindowOverlay to render above native modals
+  if (Platform.OS === "ios") {
+    return /*#__PURE__*/_jsx(FullWindowOverlay, {
+      children: /*#__PURE__*/_jsx(ToastContent, {})
+    });
+  }
+  return /*#__PURE__*/_jsx(ToastContent, {});
+}
+
+/**
+ * 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 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.
+ *
+ * @example
+ * ```tsx
+ * // app/(modal)/_layout.tsx
+ * import { Stack } from 'expo-router';
+ * import { ToastPortal } from 'react-native-bread';
+ *
+ * export default function ModalLayout() {
+ *   return (
+ *     <>
+ *       <Stack screenOptions={{ headerShown: false }} />
+ *       <ToastPortal />
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+export function ToastPortal() {
+  if (Platform.OS !== "android") {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(ToastContent, {});
 }
 const styles = StyleSheet.create({
   container: {

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,35 @@ 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 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.
+ *
+ * @example
+ * ```tsx
+ * // app/(modal)/_layout.tsx
+ * import { Stack } from 'expo-router';
+ * import { ToastPortal } from 'react-native-bread';
+ *
+ * export default function ModalLayout() {
+ *   return (
+ *     <>
+ *       <Stack screenOptions={{ headerShown: false }} />
+ *       <ToastPortal />
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+export declare function ToastPortal(): import("react/jsx-runtime").JSX.Element | null;
 export {};
 //# sourceMappingURL=toast-provider.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-bread",
-  "version": "0.5.3",
+  "version": "0.6.1",
   "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",
@@ -43,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",
@@ -54,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"
   },
@@ -67,6 +69,9 @@
     "react-native-safe-area-context": {
       "optional": false
     },
+    "react-native-screens": {
+      "optional": false
+    },
     "react-native-svg": {
       "optional": false
     }