rn-toastify 1.0.12 → 2.0.0

package/src/hooks/useToast.js

@@ -1,49 +1,123 @@
-import React from 'react';
-import toastManagerInstance from '../context/ToastManager';
-import LoadingToast from '../components/LoadingToast';
-import SuccessToast from '../components/SuccessToast';
-import ErrorToast from '../components/ErrorToast';
-import CustomToast from '../components/CustomeToast';
-import EmojiToast from '../components/EmojiToast';
-
-
-const useToast = () => {
-    const show = (content, options) => {
-        toastManagerInstance.show(content, options);
-    };
-
-    const success = (message, options) => {
-        show(<SuccessToast message={message} />, options);
-    };
-
-    const error = (message, options) => {
-        show(<ErrorToast message={message} />, options);
-    };
-
-    const promise = (promise, { loading, success, error }) => {
-        toastManagerInstance.promise(promise, {
-            loading: <LoadingToast message={loading} />,
-            success: <SuccessToast message={success} />,
-            error: <ErrorToast message={error} />,
-        });
-    };
-
-    const custom = (content, options) => {
-        show(<CustomToast content={content} />, options);
-    };
-
-    const emoji = (message, emoji, options) => {
-        show(<EmojiToast message={message} emoji={emoji} />, options);
-    };
-
-    return {
-        show,
-        success,
-        error,
-        promise,
-        custom,
-        emoji,
-    };
-};
-
-export default useToast;
+import React from 'react';
+import toastManagerInstance from '../context/ToastManager';
+import LoadingToast from '../components/LoadingToast';
+import SuccessToast from '../components/SuccessToast';
+import ErrorToast from '../components/ErrorToast';
+import InfoToast from '../components/InfoToast';
+import WarningToast from '../components/WarningToast';
+import CustomToast from '../components/CustomToast';
+import EmojiToast from '../components/EmojiToast';
+
+/**
+ * useToast — imperative hook to show toast notifications from anywhere.
+ *
+ * @returns {{
+ *   show: (content: React.ReactNode, options?: Object) => string,
+ *   success: (message: string, options?: Object) => string,
+ *   error: (message: string, options?: Object) => string,
+ *   info: (message: string, options?: Object) => string,
+ *   warning: (message: string, options?: Object) => string,
+ *   promise: (promise: Promise, messages: Object, options?: Object) => Promise,
+ *   custom: (content: React.ReactNode, options?: Object) => string,
+ *   emoji: (message: string, emoji: string, options?: Object) => string,
+ *   dismiss: (id: string) => void,
+ *   dismissAll: () => void,
+ *   update: (id: string, content: React.ReactNode, options?: Object) => void,
+ *   isActive: (id: string) => boolean,
+ * }}
+ */
+const useToast = () => {
+    const show = (content, options) => {
+        return toastManagerInstance.show(content, options);
+    };
+
+    const success = (message, options) => {
+        const { title, ...rest } = options || {};
+        return show(<SuccessToast title={title} message={message} />, rest);
+    };
+
+    const error = (message, options) => {
+        const { title, ...rest } = options || {};
+        return show(<ErrorToast title={title} message={message} />, rest);
+    };
+
+    const info = (message, options) => {
+        const { title, ...rest } = options || {};
+        return show(<InfoToast title={title} message={message} />, rest);
+    };
+
+    const warning = (message, options) => {
+        const { title, ...rest } = options || {};
+        return show(<WarningToast title={title} message={message} />, rest);
+    };
+
+    const promise = (promiseValue, { loading, success: successMsg, error: errorMsg }, options) => {
+        return toastManagerInstance.promise(
+            promiseValue,
+            {
+                loading: typeof loading === 'string'
+                    ? <LoadingToast message={loading} />
+                    : loading,
+                success: typeof successMsg === 'string'
+                    ? <SuccessToast message={successMsg} />
+                    : typeof successMsg === 'function'
+                        ? (result) => {
+                            const msg = successMsg(result);
+                            return typeof msg === 'string' ? <SuccessToast message={msg} /> : msg;
+                        }
+                        : successMsg,
+                error: typeof errorMsg === 'string'
+                    ? <ErrorToast message={errorMsg} />
+                    : typeof errorMsg === 'function'
+                        ? (err) => {
+                            const msg = errorMsg(err);
+                            return typeof msg === 'string' ? <ErrorToast message={msg} /> : msg;
+                        }
+                        : errorMsg,
+            },
+            options
+        );
+    };
+
+    const custom = (content, options) => {
+        return show(<CustomToast content={content} />, options);
+    };
+
+    const emoji = (message, emojiChar, options) => {
+        const { title, ...rest } = options || {};
+        return show(<EmojiToast title={title} message={message} emoji={emojiChar} />, rest);
+    };
+
+    const dismiss = (id) => {
+        toastManagerInstance.remove(id);
+    };
+
+    const dismissAll = () => {
+        toastManagerInstance.dismissAll();
+    };
+
+    const update = (id, content, options) => {
+        toastManagerInstance.update(id, content, options);
+    };
+
+    const isActive = (id) => {
+        return toastManagerInstance.isActive(id);
+    };
+
+    return {
+        show,
+        success,
+        error,
+        info,
+        warning,
+        promise,
+        custom,
+        emoji,
+        dismiss,
+        dismissAll,
+        update,
+        isActive,
+    };
+};
+
+export default useToast;

package/src/types.d.ts

@@ -0,0 +1,172 @@
+import React from 'react';
+
+// ─── Toast Options ───────────────────────────────────────────────────────────
+
+export interface ToastOptions {
+    /** Duration in milliseconds before auto-dismiss. Use `Infinity` to persist. Default: 3000 */
+    duration?: number;
+    /** Position on screen. Default: 'top' */
+    position?: 'top' | 'bottom' | 'center';
+    /** Custom styles for the toast wrapper */
+    style?: object;
+    /** Bold title text (displayed above message) */
+    title?: string;
+}
+
+export interface PromiseMessages<T = any> {
+    /** Content to show while the promise is pending */
+    loading: string | React.ReactNode;
+    /** Content to show on success. Can be a string, element, or function receiving the result */
+    success: string | React.ReactNode | ((result: T) => string | React.ReactNode);
+    /** Content to show on error. Can be a string, element, or function receiving the error */
+    error: string | React.ReactNode | ((error: any) => string | React.ReactNode);
+}
+
+export interface PromiseOptions extends Omit<ToastOptions, 'title'> {
+    /** Duration for the success toast */
+    successDuration?: number;
+    /** Duration for the error toast */
+    errorDuration?: number;
+}
+
+// ─── useToast Hook ───────────────────────────────────────────────────────────
+
+export interface UseToastReturn {
+    /** Show a raw toast with custom content */
+    show: (content: React.ReactNode, options?: ToastOptions) => string;
+    /** Show a success toast with green accent */
+    success: (message: string, options?: ToastOptions) => string;
+    /** Show an error toast with red accent */
+    error: (message: string, options?: ToastOptions) => string;
+    /** Show an info toast with blue accent */
+    info: (message: string, options?: ToastOptions) => string;
+    /** Show a warning toast with amber accent */
+    warning: (message: string, options?: ToastOptions) => string;
+    /** Handle promise states: loading → success/error */
+    promise: <T>(promise: Promise<T>, messages: PromiseMessages<T>, options?: PromiseOptions) => Promise<T>;
+    /** Show a toast with custom React content */
+    custom: (content: React.ReactNode, options?: Omit<ToastOptions, 'title'>) => string;
+    /** Show a toast with an emoji */
+    emoji: (message: string, emoji: string, options?: ToastOptions) => string;
+    /** Dismiss a specific toast by ID */
+    dismiss: (id: string) => void;
+    /** Dismiss all active toasts */
+    dismissAll: () => void;
+    /** Update an existing toast's content */
+    update: (id: string, content: React.ReactNode, options?: Partial<ToastOptions>) => void;
+    /** Check if a toast with the given ID is currently visible */
+    isActive: (id: string) => boolean;
+}
+
+declare function useToast(): UseToastReturn;
+export default useToast;
+export { useToast };
+
+// ─── ToastContainer ──────────────────────────────────────────────────────────
+
+export interface ToastContainerProps {
+    /** Force a specific theme. If omitted, follows system preference */
+    theme?: 'light' | 'dark';
+    /** Maximum number of visible toasts at once. Default: 3 */
+    maxVisible?: number;
+    /** Default toast position when not specified per-toast. Default: 'top' */
+    defaultPosition?: 'top' | 'bottom' | 'center';
+    /** Extra offset from the top edge (in addition to safe area). Default: 0 */
+    topOffset?: number;
+    /** Extra offset from the bottom edge. Default: 0 */
+    bottomOffset?: number;
+    /** Whether toasts can be swiped to dismiss. Default: true */
+    swipeable?: boolean;
+}
+
+export declare const ToastContainer: React.FC<ToastContainerProps>;
+
+// ─── Toast Components ────────────────────────────────────────────────────────
+
+export interface ToastComponentProps {
+    /** Bold title text */
+    title?: string;
+    /** Body message text */
+    message?: string;
+    /** Theme (injected by container, can be overridden) */
+    theme?: 'light' | 'dark';
+    /** Duration (injected by container for progress bar) */
+    duration?: number;
+}
+
+export interface EmojiToastProps extends ToastComponentProps {
+    /** Emoji character to display */
+    emoji?: string;
+}
+
+export interface CustomToastProps {
+    /** Custom React content to render */
+    content?: React.ReactNode;
+    /** Theme */
+    theme?: 'light' | 'dark';
+}
+
+export declare const SuccessToast: React.FC<ToastComponentProps>;
+export declare const ErrorToast: React.FC<ToastComponentProps>;
+export declare const InfoToast: React.FC<ToastComponentProps>;
+export declare const WarningToast: React.FC<ToastComponentProps>;
+export declare const LoadingToast: React.FC<ToastComponentProps>;
+export declare const EmojiToast: React.FC<EmojiToastProps>;
+export declare const CustomToast: React.FC<CustomToastProps>;
+export declare const BaseToast: React.FC<any>;
+export declare const ProgressBar: React.FC<{
+    duration?: number;
+    color?: string;
+    trackColor?: string;
+    paused?: boolean;
+}>;
+
+/** @deprecated Use `CustomToast` instead */
+export declare const CustomeToast: React.FC<CustomToastProps>;
+
+// ─── Toast animation wrapper ────────────────────────────────────────────────
+
+export declare const Toast: React.FC<{
+    visible: boolean;
+    duration?: number;
+    position?: 'top' | 'bottom' | 'center';
+    children: React.ReactNode;
+    onHide?: () => void;
+    style?: object;
+    theme?: 'light' | 'dark';
+}>;
+
+// ─── ToastManager (singleton) ────────────────────────────────────────────────
+
+export declare const ToastManager: {
+    show: (content: React.ReactNode, options?: ToastOptions, id?: string) => string;
+    remove: (id: string) => void;
+    dismissAll: () => void;
+    update: (id: string, content: React.ReactNode, options?: Partial<ToastOptions>) => void;
+    isActive: (id: string) => boolean;
+    promise: <T>(promise: Promise<T>, messages: PromiseMessages<T>, options?: PromiseOptions) => Promise<T>;
+    configure: (config: { maxVisible?: number }) => void;
+};
+
+// ─── Theme Utilities ─────────────────────────────────────────────────────────
+
+export declare const TOAST_COLORS: {
+    success: { accent: string; iconBg: string; iconBorder: string; lightText: string; darkText: string; lightSubtext: string; darkSubtext: string };
+    error: { accent: string; iconBg: string; iconBorder: string; lightText: string; darkText: string; lightSubtext: string; darkSubtext: string };
+    info: { accent: string; iconBg: string; iconBorder: string; lightText: string; darkText: string; lightSubtext: string; darkSubtext: string };
+    warning: { accent: string; iconBg: string; iconBorder: string; lightText: string; darkText: string; lightSubtext: string; darkSubtext: string };
+    loading: { accent: string; iconBg: string; iconBorder: string; lightText: string; darkText: string; lightSubtext: string; darkSubtext: string };
+};
+
+export declare const TOAST_THEME: {
+    light: { background: string; title: string; message: string; border: string; shadow: string; progressTrack: string };
+    dark: { background: string; title: string; message: string; border: string; shadow: string; progressTrack: string };
+};
+
+export declare const TOAST_DEFAULTS: {
+    duration: number;
+    position: string;
+    maxVisible: number;
+    iconSize: number;
+    animationDuration: number;
+};

package/src/utils/Pixel/Index.js

@@ -1,28 +1,28 @@
-import {Dimensions, PixelRatio} from 'react-native';
-let {width, height} = Dimensions.get('window');
-const widthPercentageToDP = widthPercent => {
-  const elemWidth =
-    widthPercent === 'number' ? widthPercent : parseFloat(widthPercent);
-
-  return PixelRatio.roundToNearestPixel((width * elemWidth) / 100);
-};
-
-const heightPercentageToDP = heightPercent => {
-  const elemHeight =
-    heightPercent === 'number' ? heightPercent : parseFloat(heightPercent);
-
-  return PixelRatio.roundToNearestPixel((height * elemHeight) / 100);
-};
-
-const listenOrientationChange = that => {
-  Dimensions.addEventListener('change', newDimensions => {
-    width = newDimensions.window.width;
-    height = newDimensions.window.height;
-
-    that.setState({
-      orientation: width < height ? 'portrait' : 'landscape',
-    });
-  });
-};
-
-export {widthPercentageToDP, heightPercentageToDP, listenOrientationChange};
+import { Dimensions, PixelRatio } from 'react-native';
+
+let { width, height } = Dimensions.get('window');
+
+const widthPercentageToDP = (widthPercent) => {
+    const elemWidth =
+        typeof widthPercent === 'number' ? widthPercent : parseFloat(widthPercent);
+    return PixelRatio.roundToNearestPixel((width * elemWidth) / 100);
+};
+
+const heightPercentageToDP = (heightPercent) => {
+    const elemHeight =
+        typeof heightPercent === 'number' ? heightPercent : parseFloat(heightPercent);
+    return PixelRatio.roundToNearestPixel((height * elemHeight) / 100);
+};
+
+const listenOrientationChange = (callback) => {
+    const subscription = Dimensions.addEventListener('change', ({ window }) => {
+        width = window.width;
+        height = window.height;
+        if (typeof callback === 'function') {
+            callback(width < height ? 'portrait' : 'landscape');
+        }
+    });
+    return subscription;
+};
+
+export { widthPercentageToDP, heightPercentageToDP, listenOrientationChange };

package/src/utils/theme.js

@@ -0,0 +1,81 @@
+/**
+ * rn-toastify — Premium Design Tokens
+ * Inspired by iOS system notifications and Material Design 3
+ */
+
+export const TOAST_COLORS = {
+    success: {
+        accent: '#22C55E',
+        accentSoft: '#DCFCE7',
+        accentSoftDark: 'rgba(34, 197, 94, 0.15)',
+        iconBg: '#DCFCE7',
+        iconBgDark: 'rgba(34, 197, 94, 0.18)',
+        icon: '#16A34A',
+        iconDark: '#4ADE80',
+    },
+    error: {
+        accent: '#EF4444',
+        accentSoft: '#FEE2E2',
+        accentSoftDark: 'rgba(239, 68, 68, 0.15)',
+        iconBg: '#FEE2E2',
+        iconBgDark: 'rgba(239, 68, 68, 0.18)',
+        icon: '#DC2626',
+        iconDark: '#FCA5A5',
+    },
+    info: {
+        accent: '#3B82F6',
+        accentSoft: '#DBEAFE',
+        accentSoftDark: 'rgba(59, 130, 246, 0.15)',
+        iconBg: '#DBEAFE',
+        iconBgDark: 'rgba(59, 130, 246, 0.18)',
+        icon: '#2563EB',
+        iconDark: '#93C5FD',
+    },
+    warning: {
+        accent: '#F59E0B',
+        accentSoft: '#FEF3C7',
+        accentSoftDark: 'rgba(245, 158, 11, 0.15)',
+        iconBg: '#FEF3C7',
+        iconBgDark: 'rgba(245, 158, 11, 0.18)',
+        icon: '#D97706',
+        iconDark: '#FCD34D',
+    },
+    loading: {
+        accent: '#8B5CF6',
+        accentSoft: '#EDE9FE',
+        accentSoftDark: 'rgba(139, 92, 246, 0.15)',
+        iconBg: '#EDE9FE',
+        iconBgDark: 'rgba(139, 92, 246, 0.18)',
+        icon: '#7C3AED',
+        iconDark: '#C4B5FD',
+    },
+};
+
+export const TOAST_THEME = {
+    light: {
+        background: 'rgba(255, 255, 255, 0.96)',
+        surface: 'rgba(248, 250, 252, 0.9)',
+        title: '#0F172A',
+        message: '#475569',
+        border: 'rgba(0, 0, 0, 0.04)',
+        shadow: 'rgba(100, 116, 139, 0.15)',
+        progressTrack: 'rgba(0, 0, 0, 0.05)',
+    },
+    dark: {
+        background: 'rgba(15, 23, 42, 0.96)',
+        surface: 'rgba(30, 41, 59, 0.9)',
+        title: '#F1F5F9',
+        message: '#94A3B8',
+        border: 'rgba(255, 255, 255, 0.08)',
+        shadow: 'rgba(0, 0, 0, 0.5)',
+        progressTrack: 'rgba(255, 255, 255, 0.06)',
+    },
+};
+
+export const TOAST_DEFAULTS = {
+    duration: 3000,
+    position: 'top',
+    maxVisible: 3,
+    iconSize: 22,
+    animationDuration: 350,
+};