react-native-bread 0.1.0

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

@@ -0,0 +1,52 @@
+import { type ReactNode } from "react";
+import type { ToastConfig } from "./types";
+interface BreadLoafProps {
+    children: ReactNode;
+    /**
+     * 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 provider component that enables toast notifications in your app.
+ * Wrap your root component with `<BreadLoaf>` to start showing toasts.
+ *
+ * @example
+ * ```tsx
+ * import { BreadLoaf } from 'react-native-bread';
+ *
+ * // Basic usage
+ * <BreadLoaf>
+ *   <App />
+ * </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 },
+ *   }}
+ * >
+ *   <App />
+ * </BreadLoaf>
+ * ```
+ */
+export declare function BreadLoaf({ children, config }: BreadLoafProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=toast-provider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toast-provider.d.ts","sourceRoot":"","sources":["../../src/toast-provider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAa,MAAM,OAAO,CAAC;AAIlD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,UAAU,cAAc;IACtB,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;;;;;;;;;OAYG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,cAAc,2CAgB7D"}

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

@@ -0,0 +1,26 @@
+import type { Toast, ToastConfig, ToastOptions, ToastState, ToastTheme, ToastType } from "./types";
+export type Listener = (state: ToastState) => void;
+declare class ToastStore {
+    private state;
+    private theme;
+    private listeners;
+    private toastIdCounter;
+    private timeouts;
+    subscribe: (listener: Listener) => () => void;
+    private emit;
+    private setState;
+    getState: () => ToastState;
+    getTheme: () => ToastTheme;
+    setConfig: (config: ToastConfig | undefined) => void;
+    show: (title: string, description?: string, type?: ToastType, duration?: number, options?: ToastOptions) => string;
+    private addToast;
+    private scheduleTimeout;
+    private rescheduleAllTimeouts;
+    hide: (id: string) => void;
+    private removeToast;
+    updateToast: (id: string, data: Partial<Omit<Toast, "id" | "createdAt">>) => void;
+    hideAll: () => void;
+}
+export declare const toastStore: ToastStore;
+export type { Toast, ToastState, ToastType };
+//# sourceMappingURL=toast-store.d.ts.map

package/lib/typescript/toast-store.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast-store.d.ts","sourceRoot":"","sources":["../../src/toast-store.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAmB,MAAM,SAAS,CAAC;AAEpH,MAAM,MAAM,QAAQ,GAAG,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;AA0DnD,cAAM,UAAU;IACd,OAAO,CAAC,KAAK,CAEX;IAEF,OAAO,CAAC,KAAK,CAA6B;IAE1C,OAAO,CAAC,SAAS,CAAuB;IACxC,OAAO,CAAC,cAAc,CAAK;IAC3B,OAAO,CAAC,QAAQ,CAAoD;IAEpE,SAAS,GAAI,UAAU,QAAQ,gBAK7B;IAEF,OAAO,CAAC,IAAI;IAMZ,OAAO,CAAC,QAAQ;IAKhB,QAAQ,mBAAoB;IAE5B,QAAQ,mBAAoB;IAE5B,SAAS,GAAI,QAAQ,WAAW,GAAG,SAAS,UAE1C;IAEF,IAAI,GACF,OAAO,MAAM,EACb,cAAc,MAAM,EACpB,OAAM,SAAqB,EAC3B,WAAW,MAAM,EACjB,UAAU,YAAY,KACrB,MAAM,CA8DP;IAEF,OAAO,CAAC,QAAQ;IAYhB,OAAO,CAAC,eAAe;IAgBvB,OAAO,CAAC,qBAAqB;IAW7B,IAAI,GAAI,IAAI,MAAM,UAqBhB;IAEF,OAAO,CAAC,WAAW;IAenB,WAAW,GAAI,IAAI,MAAM,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,GAAG,WAAW,CAAC,CAAC,UAYvE;IAEF,OAAO,aAML;CACH;AAED,eAAO,MAAM,UAAU,YAAmB,CAAC;AAE3C,YAAY,EAAE,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,CAAC"}

package/lib/typescript/toast.d.ts

@@ -0,0 +1,2 @@
+export declare const ToastContainer: () => import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=toast.d.ts.map

package/lib/typescript/toast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../src/toast.tsx"],"names":[],"mappings":"AAkFA,eAAO,MAAM,cAAc,sDAgD1B,CAAC"}

package/lib/typescript/types.d.ts

@@ -0,0 +1,101 @@
+import type { ReactNode } from "react";
+import type { TextStyle, ViewStyle } from "react-native";
+export type ToastType = "success" | "error" | "info" | "loading";
+export type ToastPosition = "top" | "bottom";
+export interface ToastTypeColors {
+    /** Accent color used for title text and icons */
+    accent: string;
+    /** Background color of the toast */
+    background: string;
+}
+/** Props passed to custom icon render functions */
+export interface IconProps {
+    /** The accent color from the theme for this toast type */
+    color: string;
+    /** Default icon size */
+    size: number;
+}
+/** Custom icon render function */
+export type IconRenderFn = (props: IconProps) => ReactNode;
+export interface ToastTheme {
+    /** Position of toasts on screen */
+    position: ToastPosition;
+    /** Extra offset from safe area edge (in addition to safe area insets) */
+    offset: number;
+    /** Whether to show multiple toasts stacked (default: true). When false, only one toast shows at a time. */
+    stacking: boolean;
+    /** Maximum number of toasts visible at once when stacking is enabled (default: 3) */
+    maxStack: number;
+    /** Whether toasts can be dismissed via swipe gesture (default: true) */
+    dismissible: boolean;
+    /** Whether to show the close button on toasts (default: true). Loading toasts never show close button. */
+    showCloseButton: boolean;
+    /** Colors for each toast type */
+    colors: Record<ToastType, ToastTypeColors>;
+    /** Custom icons for each toast type */
+    icons: Partial<Record<ToastType, IconRenderFn>>;
+    /** Style overrides for the toast container */
+    toastStyle: ViewStyle;
+    /** Style overrides for the title text */
+    titleStyle: TextStyle;
+    /** Style overrides for the description text */
+    descriptionStyle: TextStyle;
+    /** Default duration in ms for toasts (default: 4000) */
+    defaultDuration: number;
+}
+/** Per-toast options for customizing individual toasts */
+export interface ToastOptions {
+    /** Description text */
+    description?: string;
+    /** Duration in ms (overrides default) */
+    duration?: number;
+    /** Custom icon (ReactNode or render function) */
+    icon?: ReactNode | IconRenderFn;
+    /** Style overrides for this toast's container */
+    style?: ViewStyle;
+    /** Style overrides for this toast's title */
+    titleStyle?: TextStyle;
+    /** Style overrides for this toast's description */
+    descriptionStyle?: TextStyle;
+    /** Whether this toast can be dismissed via swipe (overrides config) */
+    dismissible?: boolean;
+    /** Whether to show the close button on this toast (overrides config) */
+    showCloseButton?: boolean;
+}
+/** Configuration options for customizing toast behavior and appearance. All properties are optional. */
+export type ToastConfig = {
+    [K in keyof ToastTheme]?: K extends "colors" ? Partial<Record<ToastType, Partial<ToastTypeColors>>> : K extends "icons" ? Partial<Record<ToastType, IconRenderFn>> : ToastTheme[K];
+};
+export interface Toast {
+    id: string;
+    title: string;
+    description?: string;
+    type: ToastType;
+    duration: number;
+    createdAt: number;
+    isExiting?: boolean;
+    /** Per-toast style/icon overrides */
+    options?: ToastOptions;
+}
+export interface ToastState {
+    /** Visible toasts (index 0 = front/newest) */
+    visibleToasts: Toast[];
+}
+export type MessageInput = string | {
+    title: string;
+    description?: string;
+    /** Override duration (ms) after promise settles */
+    duration?: number;
+};
+export type ErrorMessageInput = MessageInput | ((error: Error) => MessageInput);
+export interface PromiseMessages {
+    loading: MessageInput;
+    success: MessageInput;
+    error: ErrorMessageInput;
+}
+export interface PromiseResult<T> {
+    data?: T;
+    error?: Error;
+    success: boolean;
+}
+//# sourceMappingURL=types.d.ts.map

package/lib/typescript/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,87 @@
+{
+  "name": "react-native-bread",
+  "version": "0.1.0",
+  "description": "A delicious toast library for React Native with beautiful animations and gesture support",
+  "main": "lib/commonjs/index.js",
+  "module": "lib/module/index.js",
+  "types": "lib/typescript/index.d.ts",
+  "react-native": "src/index.ts",
+  "source": "src/index.ts",
+  "files": ["src", "lib", "!**/__tests__", "!**/__fixtures__", "!**/__mocks__"],
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/AlshehriAli0/react-native-bread.git"
+  },
+  "author": "Ali <ali0fawzish@outlook.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/AlshehriAli0/react-native-bread/issues"
+  },
+  "homepage": "https://github.com/AlshehriAli0/react-native-bread#readme",
+  "keywords": ["react-native", "toast", "notification", "snackbar", "bread", "animation", "gesture", "reanimated"],
+  "scripts": {
+    "build": "bob build",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf lib",
+    "prepare": "bob build"
+  },
+  "devDependencies": {
+    "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.1.1",
+    "react-native-safe-area-context": "~5.4.0",
+    "react-native-worklets": "0.5.1",
+    "react-native-svg": "15.12.1",
+    "typescript": "~5.9.2"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-native": ">=0.76.0",
+    "react-native-gesture-handler": ">=2.0.0",
+    "react-native-reanimated": ">=4.0.0",
+    "react-native-safe-area-context": ">=4.0.0",
+    "react-native-svg": ">=14.0.0",
+    "react-native-worklets": ">=0.4.0"
+  },
+  "peerDependenciesMeta": {
+    "react-native-gesture-handler": {
+      "optional": false
+    },
+    "react-native-reanimated": {
+      "optional": false
+    },
+    "react-native-safe-area-context": {
+      "optional": false
+    },
+    "react-native-svg": {
+      "optional": false
+    }
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "commonjs",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  }
+}

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,26 @@
+// Main exports
+
+// Icons (for customization)
+export { CloseIcon, GreenCheck, InfoIcon, RedX } from "./icons";
+export { ToastContainer } from "./toast";
+export { toast } from "./toast-api";
+export { BreadLoaf } from "./toast-provider";
+
+// Store (for advanced usage)
+export { toastStore } from "./toast-store";
+// Types
+export type {
+  ErrorMessageInput,
+  IconProps,
+  IconRenderFn,
+  MessageInput,
+  PromiseMessages,
+  PromiseResult,
+  Toast,
+  ToastConfig,
+  ToastOptions,
+  ToastPosition,
+  ToastState,
+  ToastType,
+  ToastTypeColors,
+} from "./types";

package/src/toast-api.ts

@@ -0,0 +1,213 @@
+import { toastStore } from "./toast-store";
+import type {
+  ErrorMessageInput,
+  MessageInput,
+  PromiseMessages,
+  PromiseResult,
+  ToastOptions,
+  ToastType,
+} from "./types";
+
+/** Second parameter can be a string (description) or options object */
+type DescriptionOrOptions = string | ToastOptions;
+
+const _toast = (title: string, description?: string, type?: ToastType, duration?: number) => {
+  toastStore.show(title, description, type, duration);
+};
+
+/** Helper to parse the second argument which can be string or options */
+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);
+
+  // Very long duration so it stays visible until we resolve/reject
+  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 };
+  }
+};
+
+type BaseToastFn = ((title: string, description?: string, type?: ToastType, duration?: number) => void) & {
+  /**
+   * 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;
+};
+
+// Build the toast API
+const toastFn = _toast as unknown as BaseToastFn;
+
+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-provider.tsx

@@ -0,0 +1,81 @@
+import { type ReactNode, useEffect } from "react";
+import { StyleSheet, View } from "react-native";
+import { ToastContainer } from "./toast";
+import { toastStore } from "./toast-store";
+import type { ToastConfig } from "./types";
+
+interface BreadLoafProps {
+  children: ReactNode;
+  /**
+   * 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 provider component that enables toast notifications in your app.
+ * Wrap your root component with `<BreadLoaf>` to start showing toasts.
+ *
+ * @example
+ * ```tsx
+ * import { BreadLoaf } from 'react-native-bread';
+ *
+ * // Basic usage
+ * <BreadLoaf>
+ *   <App />
+ * </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 },
+ *   }}
+ * >
+ *   <App />
+ * </BreadLoaf>
+ * ```
+ */
+export function BreadLoaf({ children, config }: BreadLoafProps) {
+  useEffect(() => {
+    toastStore.setConfig(config);
+    return () => {
+      // Reset to defaults when this provider unmounts
+      toastStore.setConfig(undefined);
+    };
+  }, [config]);
+  return (
+    <View style={styles.root}>
+      {children}
+      <View style={styles.portalContainer} pointerEvents="box-none">
+        <ToastContainer />
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+  },
+  portalContainer: {
+    ...StyleSheet.absoluteFillObject,
+    zIndex: 9999,
+  },
+});