react-native-bread 0.6.0 → 0.7.0

package/package.json

@@ -1,12 +1,20 @@
 {
   "name": "react-native-bread",
-  "version": "0.6.0",
+  "version": "0.7.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",
   "types": "lib/typescript/index.d.ts",
   "react-native": "lib/module/index.js",
-  "files": ["lib", "!**/__tests__", "!**/__fixtures__", "!**/__mocks__", "!**/*.map"],
+  "files": [
+    "lib",
+    "src",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/*.map",
+    "README.md"
+  ],
   "sideEffects": false,
   "repository": {
     "type": "git",
@@ -31,21 +39,55 @@
     "reanimated"
   ],
   "scripts": {
+    "prepack": "cp ../README.md ./README.md",
+    "postpack": "rm ./README.md",
     "build": "bob build",
     "typecheck": "tsc --noEmit",
     "clean": "rm -rf lib",
-    "prepare": "bob build"
+    "prepare": "bob build",
+    "release": "release-it"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release v${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true,
+      "skipChecks": true,
+      "publishArgs": [
+        "--provenance --access public"
+      ]
+    },
+    "github": {
+      "release": true
+    },
+    "hooks": {
+      "before:init": "bun run build"
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": "conventionalcommits",
+        "infile": "../CHANGELOG.md"
+      }
+    }
   },
   "devDependencies": {
+    "@release-it/conventional-changelog": "^10.0.5",
+    "@types/react": "^19.1.0",
     "react": "19.1.0",
     "react-native": "0.81.5",
     "react-native-builder-bob": "^0.35.2",
     "react-native-gesture-handler": "~2.28.0",
     "react-native-reanimated": "~4.2.1",
-    "react-native-safe-area-context": "~5.4.0",
+    "react-native-safe-area-context": "~5.6.0",
     "react-native-screens": "~4.16.0",
     "react-native-svg": "15.12.1",
     "react-native-worklets": "0.7.2",
+    "release-it": "^19.2.4",
     "terser": "^5.44.1",
     "typescript": "~5.9.2"
   },

package/src/constants.ts

@@ -0,0 +1,23 @@
+import { Easing } from "react-native-reanimated";
+
+export const ICON_SIZE = 28;
+export const POOL_SIZE = 5;
+
+export const ENTRY_DURATION = 400;
+export const EXIT_DURATION = 350;
+export const STACK_TRANSITION_DURATION = 300;
+export const SPRING_BACK_DURATION = 650;
+export const ICON_ANIMATION_DURATION = 350;
+
+export const ENTRY_OFFSET = 80;
+export const EXIT_OFFSET = 100;
+export const SWIPE_EXIT_OFFSET = 200;
+export const MAX_DRAG_CLAMP = 180;
+export const MAX_DRAG_RESISTANCE = 60;
+export const DISMISS_THRESHOLD = 40;
+export const DISMISS_VELOCITY_THRESHOLD = 300;
+
+export const STACK_OFFSET_PER_ITEM = 10;
+export const STACK_SCALE_PER_ITEM = 0.05;
+
+export const EASING = Easing.bezier(0.25, 0.1, 0.25, 1.0);

package/src/icons/CloseIcon.tsx

@@ -0,0 +1,10 @@
+import Svg, { Path, type SvgProps } from "react-native-svg";
+
+export const CloseIcon = (props: SvgProps) => (
+  <Svg viewBox="0 0 24 24" width={24} height={24} fill="none" {...props}>
+    <Path
+      fill={props.fill ?? "#8993A4"}
+      d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41Z"
+    />
+  </Svg>
+);

package/src/icons/GreenCheck.tsx

@@ -0,0 +1,16 @@
+import Svg, { Path, type SvgProps } from "react-native-svg";
+
+export const GreenCheck = (props: SvgProps) => (
+  <Svg viewBox="0 0 30 31" width={30} height={31} fill="none" {...props}>
+    <Path
+      fill={props.fill ?? "#28B770"}
+      fillRule="evenodd"
+      d="m19.866 13.152-5.772 5.773a.933.933 0 0 1-1.326 0L9.88 16.039a.938.938 0 0 1 1.325-1.327l2.225 2.224 5.109-5.11a.938.938 0 1 1 1.326 1.326Zm.28-9.652H9.602C5.654 3.5 3 6.276 3 10.409v9.935c0 4.131 2.654 6.906 6.602 6.906h10.543c3.95 0 6.605-2.775 6.605-6.906v-9.935c0-4.133-2.654-6.909-6.604-6.909Z"
+      clipRule="evenodd"
+    />
+    <Path
+      fill="#fff"
+      d="m19.866 13.152-5.772 5.773a.933.933 0 0 1-1.326 0L9.88 16.039a.938.938 0 0 1 1.325-1.327l2.225 2.224 5.109-5.11a.938.938 0 1 1 1.326 1.326Z"
+    />
+  </Svg>
+);

package/src/icons/InfoIcon.tsx

@@ -0,0 +1,12 @@
+import Svg, { Path, type SvgProps } from "react-native-svg";
+
+export const InfoIcon = (props: SvgProps) => (
+  <Svg viewBox="0 0 24 24" width={24} height={24} fill="none" {...props}>
+    <Path
+      fill={props.fill ?? "#EDBE43"}
+      fillRule="evenodd"
+      d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm1 15h-2v-6h2v6Zm0-8h-2V7h2v2Z"
+      clipRule="evenodd"
+    />
+  </Svg>
+);

package/src/icons/RedX.tsx

@@ -0,0 +1,16 @@
+import Svg, { Path, type SvgProps } from "react-native-svg";
+
+export const RedX = (props: SvgProps) => (
+  <Svg viewBox="0 0 24 24" width={24} height={24} fill="none" {...props}>
+    <Path
+      fill={props.fill ?? "#F05964"}
+      fillRule="evenodd"
+      d="M15.58 15.572a.935.935 0 0 1-1.326 0l-2.258-2.258-2.251 2.252a.938.938 0 0 1-1.326-1.325l2.251-2.252-2.252-2.254A.936.936 0 1 1 9.742 8.41l2.253 2.252 2.252-2.25a.939.939 0 0 1 1.325 1.325l-2.25 2.252 2.257 2.257a.938.938 0 0 1 0 1.326ZM17.271.126H6.727C2.777.125.125 2.9.125 7.032v9.936c0 4.13 2.652 6.907 6.603 6.907H17.27c3.95 0 6.605-2.776 6.605-6.907V7.032c0-4.132-2.654-6.907-6.604-6.907Z"
+      clipRule="evenodd"
+    />
+    <Path
+      fill="#fff"
+      d="M15.58 15.572a.935.935 0 0 1-1.326 0l-2.258-2.258-2.251 2.252a.938.938 0 0 1-1.326-1.325l2.251-2.252-2.252-2.254A.936.936 0 1 1 9.742 8.41l2.253 2.252 2.252-2.25a.939.939 0 0 1 1.325 1.325l-2.25 2.252 2.257 2.257a.938.938 0 0 1 0 1.326Z"
+    />
+  </Svg>
+);

package/src/icons/index.ts

@@ -0,0 +1,4 @@
+export { CloseIcon } from "./CloseIcon";
+export { GreenCheck } from "./GreenCheck";
+export { InfoIcon } from "./InfoIcon";
+export { RedX } from "./RedX";

package/src/index.ts

@@ -0,0 +1,28 @@
+// Main exports
+
+// Icons (for customization)
+export { CloseIcon, GreenCheck, InfoIcon, RedX } from "./icons";
+export { ToastContainer } from "./toast";
+export { toast } from "./toast-api";
+export { BreadLoaf, ToastPortal } from "./toast-provider";
+
+// Store (for advanced usage)
+export { toastStore } from "./toast-store";
+// Types
+export type {
+  CustomContentProps,
+  CustomContentRenderFn,
+  ErrorMessageInput,
+  IconProps,
+  IconRenderFn,
+  MessageInput,
+  PromiseMessages,
+  PromiseResult,
+  Toast,
+  ToastConfig,
+  ToastOptions,
+  ToastPosition,
+  ToastState,
+  ToastType,
+  ToastTypeColors,
+} from "./types";

package/src/pool.ts

@@ -0,0 +1,57 @@
+import { makeMutable, type SharedValue } from "react-native-reanimated";
+import { POOL_SIZE } from "./constants";
+
+export interface AnimSlot {
+  progress: SharedValue<number>;
+  translationY: SharedValue<number>;
+  stackIndex: SharedValue<number>;
+}
+
+export interface SlotTracker {
+  wasExiting: boolean;
+  prevIndex: number;
+  initialized: boolean;
+}
+
+export const animationPool: AnimSlot[] = Array.from({ length: POOL_SIZE }, () => ({
+  progress: makeMutable(0),
+  translationY: makeMutable(0),
+  stackIndex: makeMutable(0),
+}));
+
+export const slotTrackers: SlotTracker[] = Array.from({ length: POOL_SIZE }, () => ({
+  wasExiting: false,
+  prevIndex: 0,
+  initialized: false,
+}));
+
+const slotAssignments = new Map<string, number>();
+const usedSlots = new Set<number>();
+
+export const getSlotIndex = (toastId: string): number => {
+  if (slotAssignments.has(toastId)) {
+    return slotAssignments.get(toastId) ?? 0;
+  }
+  for (let i = 0; i < POOL_SIZE; i++) {
+    if (!usedSlots.has(i)) {
+      slotAssignments.set(toastId, i);
+      usedSlots.add(i);
+      slotTrackers[i].initialized = false;
+      slotTrackers[i].wasExiting = false;
+      slotTrackers[i].prevIndex = 0;
+      return i;
+    }
+  }
+  return 0;
+};
+
+export const releaseSlot = (toastId: string) => {
+  const idx = slotAssignments.get(toastId);
+  if (idx !== undefined) {
+    usedSlots.delete(idx);
+    slotAssignments.delete(toastId);
+    slotTrackers[idx].initialized = false;
+    slotTrackers[idx].wasExiting = false;
+    slotTrackers[idx].prevIndex = 0;
+  }
+};

package/src/toast-api.ts

@@ -0,0 +1,247 @@
+import type { ReactNode } from "react";
+import { toastStore } from "./toast-store";
+import type {
+  CustomContentRenderFn,
+  ErrorMessageInput,
+  MessageInput,
+  PromiseMessages,
+  PromiseResult,
+  ToastOptions,
+  ToastType,
+} from "./types";
+
+type DescriptionOrOptions = string | ToastOptions;
+
+const _toast = (title: string, description?: string, type?: ToastType, duration?: number) => {
+  toastStore.show(title, description, type, duration);
+};
+
+const parseDescriptionOrOptions = (
+  arg?: DescriptionOrOptions
+): { description?: string; duration?: number; options?: ToastOptions } => {
+  if (!arg) return {};
+  if (typeof arg === "string") return { description: arg };
+  return {
+    description: arg.description,
+    duration: arg.duration,
+    options: arg,
+  };
+};
+
+const parseMessage = (input: MessageInput): { title: string; description?: string; duration?: number } =>
+  typeof input === "string" ? { title: input } : input;
+
+const parseErrorMessage = (
+  input: ErrorMessageInput,
+  error: Error
+): { title: string; description?: string; duration?: number } => {
+  if (typeof input === "function") {
+    return parseMessage(input(error));
+  }
+  return parseMessage(input);
+};
+
+const promiseToast = async <T>(promise: Promise<T>, messages: PromiseMessages): Promise<PromiseResult<T>> => {
+  const loadingCfg = parseMessage(messages.loading);
+
+  const toastId = toastStore.show(
+    loadingCfg.title,
+    loadingCfg.description,
+    "loading",
+    loadingCfg.duration ?? 60 * 60 * 1000
+  );
+
+  try {
+    const result = await promise;
+
+    const successCfg = parseMessage(messages.success);
+    toastStore.updateToast(toastId, {
+      title: successCfg.title,
+      description: successCfg.description,
+      type: "success",
+      duration: successCfg.duration ?? 4000,
+    });
+
+    return { data: result, success: true };
+  } catch (err) {
+    const error = err instanceof Error ? err : new Error(String(err));
+    const errorCfg = parseErrorMessage(messages.error, error);
+    toastStore.updateToast(toastId, {
+      title: errorCfg.title,
+      description: errorCfg.description,
+      type: "error",
+      duration: errorCfg.duration ?? 4000,
+    });
+
+    return { error, success: false };
+  }
+};
+
+interface CustomToastOptions extends Omit<ToastOptions, "customContent" | "icon" | "titleStyle" | "descriptionStyle"> {
+  type?: ToastType;
+}
+
+type BaseToastFn = ((title: string, description?: string, type?: ToastType, duration?: number) => void) & {
+  /**
+   * Show a fully custom toast where you control all the content.
+   * The content you provide fills the entire toast container and receives entry/exit animations.
+   * @param content - ReactNode or render function that receives { id, dismiss, type, isExiting }
+   * @param options - Optional configuration for duration, dismissible, style, etc.
+   * @returns The toast ID
+   * @example
+   * ```ts
+   * // Simple custom content
+   * toast.custom(<MyCustomToast />);
+   *
+   * // With render function for dismiss access
+   * toast.custom(({ dismiss }) => (
+   *   <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+   *     <Text>Custom toast!</Text>
+   *     <Button title="Close" onPress={dismiss} />
+   *   </View>
+   * ));
+   *
+   * // With options
+   * toast.custom(<MyToast />, { duration: 5000, dismissible: false });
+   * ```
+   */
+  custom: (content: ReactNode | CustomContentRenderFn, options?: CustomToastOptions) => string;
+  /**
+   * Show a success toast with a green checkmark icon.
+   * @param title - The toast title
+   * @param descriptionOrOptions - Description string OR options object with description, duration, icon, style, etc.
+   * @param duration - Duration in ms (default: 4000). Ignored if options object is passed.
+   * @example
+   * ```ts
+   * // Simple usage
+   * toast.success("Saved!", "Your changes have been saved");
+   *
+   * // With options
+   * toast.success("Saved!", {
+   *   description: "Your changes have been saved",
+   *   duration: 5000,
+   *   icon: <CustomIcon />,
+   *   style: { borderRadius: 8 },
+   * });
+   * ```
+   */
+  success: (title: string, descriptionOrOptions?: DescriptionOrOptions, duration?: number) => void;
+  /**
+   * Show an error toast with a red X icon.
+   * @param title - The toast title
+   * @param descriptionOrOptions - Description string OR options object
+   * @param duration - Duration in ms (default: 4000). Ignored if options object is passed.
+   * @example
+   * ```ts
+   * toast.error("Failed", "Something went wrong");
+   * toast.error("Failed", { description: "Something went wrong", icon: <CustomErrorIcon /> });
+   * ```
+   */
+  error: (title: string, descriptionOrOptions?: DescriptionOrOptions, duration?: number) => void;
+  /**
+   * Show an info toast with a blue info icon.
+   * @param title - The toast title
+   * @param descriptionOrOptions - Description string OR options object
+   * @param duration - Duration in ms (default: 4000). Ignored if options object is passed.
+   * @example
+   * ```ts
+   * toast.info("Tip", "Swipe up to dismiss");
+   * toast.info("Tip", { description: "Swipe up to dismiss", style: { backgroundColor: '#f0f9ff' } });
+   * ```
+   */
+  info: (title: string, descriptionOrOptions?: DescriptionOrOptions, duration?: number) => void;
+  /**
+   * Show a loading toast that automatically transitions to success or error
+   * based on the promise result. Great for async operations like API calls.
+   * @param promise - The promise to track
+   * @param messages - Configuration for loading, success, and error states
+   * @returns Promise result with `{ data, success: true }` or `{ error, success: false }`
+   * @example
+   * ```ts
+   * toast.promise(fetchUser(id), {
+   *   loading: { title: "Loading...", description: "Fetching user data" },
+   *   success: { title: "Done!", description: "User loaded" },
+   *   error: (err) => ({ title: "Error", description: err.message }),
+   * });
+   * ```
+   */
+  promise: <T>(promise: Promise<T>, messages: PromiseMessages) => Promise<PromiseResult<T>>;
+  /**
+   * Dismiss a specific toast by its ID.
+   * @param id - The toast ID to dismiss
+   * @example
+   * ```ts
+   * toast.dismiss("toast-123");
+   * ```
+   */
+  dismiss: (id: string) => void;
+  /**
+   * Dismiss all visible toasts immediately.
+   * @example
+   * ```ts
+   * toast.dismissAll();
+   * ```
+   */
+  dismissAll: () => void;
+};
+
+const toastFn = _toast as unknown as BaseToastFn;
+
+toastFn.custom = (content: ReactNode | CustomContentRenderFn, options?: CustomToastOptions) => {
+  const type = options?.type ?? "info";
+  return toastStore.show("", undefined, type, options?.duration, {
+    ...options,
+    customContent: content,
+  });
+};
+
+toastFn.success = (title: string, descriptionOrOptions?: DescriptionOrOptions, duration?: number) => {
+  const { description, duration: optDuration, options } = parseDescriptionOrOptions(descriptionOrOptions);
+  toastStore.show(title, description, "success", duration ?? optDuration, options);
+};
+
+toastFn.error = (title: string, descriptionOrOptions?: DescriptionOrOptions, duration?: number) => {
+  const { description, duration: optDuration, options } = parseDescriptionOrOptions(descriptionOrOptions);
+  toastStore.show(title, description, "error", duration ?? optDuration, options);
+};
+
+toastFn.info = (title: string, descriptionOrOptions?: DescriptionOrOptions, duration?: number) => {
+  const { description, duration: optDuration, options } = parseDescriptionOrOptions(descriptionOrOptions);
+  toastStore.show(title, description, "info", duration ?? optDuration, options);
+};
+
+toastFn.promise = promiseToast;
+
+toastFn.dismiss = (id: string) => {
+  toastStore.hide(id);
+};
+
+toastFn.dismissAll = () => {
+  toastStore.hideAll();
+};
+
+/**
+ * Toast API for showing notifications.
+ *
+ * @example
+ * ```ts
+ * import { toast } from 'react-native-bread';
+ *
+ * // Basic toasts
+ * toast.success("Saved!", "Your changes have been saved");
+ * toast.error("Error", "Something went wrong");
+ * toast.info("Tip", "Swipe up to dismiss");
+ *
+ * // Promise toast (loading → success/error)
+ * toast.promise(apiCall(), {
+ *   loading: { title: "Loading..." },
+ *   success: { title: "Done!" },
+ *   error: (err) => ({ title: "Failed", description: err.message }),
+ * });
+ *
+ * // Dismiss toasts
+ * toast.dismiss(id);
+ * toast.dismissAll();
+ * ```
+ */
+export const toast = toastFn;

package/src/toast-icons.tsx

@@ -0,0 +1,55 @@
+import { memo, type ReactNode, useEffect } from "react";
+import { ActivityIndicator } from "react-native";
+import Animated, { Easing, useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
+import { ICON_ANIMATION_DURATION, ICON_SIZE } from "./constants";
+import { GreenCheck, InfoIcon, RedX } from "./icons";
+import type { IconRenderFn, ToastType } from "./types";
+
+export const resolveIcon = (
+  type: ToastType,
+  color: string,
+  custom?: ReactNode | IconRenderFn,
+  config?: IconRenderFn
+) => {
+  if (custom) return typeof custom === "function" ? custom({ color, size: ICON_SIZE }) : custom;
+  if (config) return config({ color, size: ICON_SIZE });
+  switch (type) {
+    case "success":
+      return <GreenCheck width={36} height={36} fill={color} />;
+    case "error":
+      return <RedX width={ICON_SIZE} height={ICON_SIZE} fill={color} />;
+    case "loading":
+      return <ActivityIndicator size={ICON_SIZE} color={color} />;
+    case "info":
+      return <InfoIcon width={ICON_SIZE} height={ICON_SIZE} fill={color} />;
+    default:
+      return <GreenCheck width={36} height={36} fill={color} />;
+  }
+};
+
+export const AnimatedIcon = memo(
+  ({
+    type,
+    color,
+    custom,
+    config,
+  }: {
+    type: ToastType;
+    color: string;
+    custom?: ReactNode | IconRenderFn;
+    config?: IconRenderFn;
+  }) => {
+    const progress = useSharedValue(0);
+
+    useEffect(() => {
+      progress.set(withTiming(1, { duration: ICON_ANIMATION_DURATION, easing: Easing.out(Easing.back(1.5)) }));
+    }, [progress]);
+
+    const style = useAnimatedStyle(() => ({
+      opacity: progress.value,
+      transform: [{ scale: 0.7 + progress.value * 0.3 }],
+    }));
+
+    return <Animated.View style={style}>{resolveIcon(type, color, custom, config)}</Animated.View>;
+  }
+);

package/src/toast-provider.tsx

@@ -0,0 +1,127 @@
+import { useEffect } from "react";
+import { Platform, StyleSheet, View } from "react-native";
+import { FullWindowOverlay } from "react-native-screens";
+import { ToastContainer } from "./toast";
+import { toastStore } from "./toast-store";
+import type { ToastConfig } from "./types";
+
+function ToastContent() {
+  return (
+    <View style={styles.container} pointerEvents="box-none">
+      <ToastContainer />
+    </View>
+  );
+}
+
+interface BreadLoafProps {
+  /**
+   * Configuration for customizing toast behavior and appearance.
+   * All properties are optional and will be merged with defaults.
+   *
+   * @property position - Where toasts appear: `'top'` (default) or `'bottom'`
+   * @property offset - Extra spacing from screen edge in pixels (default: `0`)
+   * @property stacking - Show multiple toasts stacked (default: `true`). When `false`, only one toast shows at a time
+   * @property defaultDuration - Default display time in ms (default: `4000`)
+   * @property colors - Customize colors per toast type (`success`, `error`, `info`, `loading`)
+   * @property toastStyle - Style overrides for the toast container (borderRadius, shadow, padding, etc.)
+   * @property titleStyle - Style overrides for the title text
+   * @property descriptionStyle - Style overrides for the description text
+   */
+  config?: ToastConfig;
+}
+
+/**
+ * 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 - add to your root layout
+ * export default function RootLayout() {
+ *   return (
+ *     <>
+ *       <Stack />
+ *       <BreadLoaf />
+ *     </>
+ *   );
+ * }
+ *
+ * // With configuration
+ * <BreadLoaf
+ *   config={{
+ *     position: 'bottom',
+ *     stacking: false,
+ *     defaultDuration: 5000,
+ *     colors: {
+ *       success: { accent: '#22c55e', background: '#f0fdf4' },
+ *       error: { accent: '#ef4444', background: '#fef2f2' },
+ *     },
+ *     toastStyle: { borderRadius: 12 },
+ *   }}
+ * />
+ * ```
+ */
+export function BreadLoaf({ config }: BreadLoafProps) {
+  useEffect(() => {
+    toastStore.setConfig(config);
+    return () => {
+      toastStore.setConfig(undefined);
+    };
+  }, [config]);
+
+  // iOS: use FullWindowOverlay to render above native modals
+  if (Platform.OS === "ios") {
+    return (
+      <FullWindowOverlay>
+        <ToastContent />
+      </FullWindowOverlay>
+    );
+  }
+
+  return <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 <ToastContent />;
+}
+
+const styles = StyleSheet.create({
+  container: {
+    ...StyleSheet.absoluteFillObject,
+    zIndex: 9999,
+  },
+});