react-native-bread 0.6.0 → 0.6.1

package/README.md

@@ -221,21 +221,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-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/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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-bread",
-  "version": "0.6.0",
+  "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",