rn-toastify 1.0.12 → 2.0.0

package/src/components/icons/WarningIcon.js

@@ -0,0 +1,84 @@
+import React, { useEffect } from 'react';
+import { View, StyleSheet } from 'react-native';
+import Animated, {
+    useSharedValue,
+    useAnimatedStyle,
+    withTiming,
+    withDelay,
+    withSequence,
+    Easing,
+} from 'react-native-reanimated';
+
+/**
+ * WarningIcon — Animated exclamation mark with subtle shake.
+ * Bar + dot that fade in, followed by a quick shake.
+ */
+const WarningIcon = ({ size = 22, color = '#D97706', animated = true }) => {
+    const opacity = useSharedValue(animated ? 0 : 1);
+    const shake = useSharedValue(0);
+
+    useEffect(() => {
+        if (animated) {
+            opacity.value = withDelay(
+                100,
+                withTiming(1, { duration: 350, easing: Easing.out(Easing.cubic) })
+            );
+            shake.value = withDelay(
+                350,
+                withSequence(
+                    withTiming(-2.5, { duration: 40 }),
+                    withTiming(2.5, { duration: 40 }),
+                    withTiming(-1.5, { duration: 40 }),
+                    withTiming(1.5, { duration: 40 }),
+                    withTiming(0, { duration: 40 })
+                )
+            );
+        }
+    }, [animated]);
+
+    const contentStyle = useAnimatedStyle(() => ({
+        opacity: opacity.value,
+        transform: [{ translateX: shake.value }],
+    }));
+
+    const barW = Math.max(2, size * 0.12);
+    const barH = size * 0.35;
+    const dotSize = Math.max(3, size * 0.16);
+
+    return (
+        <View style={[styles.container, { width: size, height: size }]}>
+            <Animated.View style={[styles.content, contentStyle]}>
+                <View
+                    style={{
+                        width: barW,
+                        height: barH,
+                        backgroundColor: color,
+                        borderRadius: barW,
+                        marginBottom: size * 0.08,
+                    }}
+                />
+                <View
+                    style={{
+                        width: dotSize,
+                        height: dotSize,
+                        borderRadius: dotSize / 2,
+                        backgroundColor: color,
+                    }}
+                />
+            </Animated.View>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    content: {
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+});
+
+export default React.memo(WarningIcon);

package/src/components/icons/index.js

@@ -0,0 +1,5 @@
+export { default as CheckIcon } from './CheckIcon';
+export { default as CrossIcon } from './CrossIcon';
+export { default as InfoIcon } from './InfoIcon';
+export { default as WarningIcon } from './WarningIcon';
+export { default as LoadingSpinner } from './LoadingSpinner';

package/src/context/ToastContainer.js

@@ -1,145 +1,224 @@
-import React, { useEffect, useState } from 'react';
-import { View, StyleSheet, Appearance, StatusBar, Platform } from 'react-native';
-import Toast from '../Toast';
-import toastManagerInstance from './ToastManager';
-import {
-    heightPercentageToDP as hp,
-    widthPercentageToDP as wp,
-} from '../utils/Pixel/Index';
-
-const ToastContainer = ({ theme: forcedTheme } = {}) => {
-    const [toasts, setToasts] = useState([]);
-    const [theme, setTheme] = useState(forcedTheme ?? (Appearance.getColorScheme() || 'light'));
-
-    useEffect(() => {
-        const handleShow = (toast) => {
-            setToasts((prevToasts) => [...prevToasts, toast]);
-        };
-
-        const handleRemove = (id) => {
-            setToasts((prevToasts) => prevToasts.filter((toast) => toast.id !== id));
-        };
-
-        toastManagerInstance.on('show', handleShow);
-        toastManagerInstance.on('remove', handleRemove);
-
-        let appearanceSub;
-        if (!forcedTheme && Appearance && Appearance.addChangeListener) {
-            appearanceSub = Appearance.addChangeListener(({ colorScheme }) => {
-                setTheme(colorScheme ?? 'light');
-            });
-        }
-
-        return () => {
-            toastManagerInstance.off('show', handleShow);
-            toastManagerInstance.off('remove', handleRemove);
-            if (appearanceSub && appearanceSub.remove) appearanceSub.remove();
-        };
-    }, [forcedTheme]);
-
-    // Calculate safe top margin for status bar
-    const getTopMargin = () => {
-        if (Platform.OS === 'android') {
-            return StatusBar.currentHeight || 0;
-        }
-        // For iOS, use a default safe area top margin
-        return 44; // Standard iOS notch/status bar height
-    };
-
-    // Separate toasts by position
-    const topToasts = toasts.filter(toast => toast?.options?.position === 'top');
-    const centerToasts = toasts.filter(toast => toast?.options?.position === 'center');
-    const bottomToasts = toasts.filter(toast => toast?.options?.position === 'bottom');
-
-    const topMargin = getTopMargin();
-
-    return (
-        <>
-            {/* Top positioned toasts */}
-            <View
-                style={[styles.topContainer, { top: topMargin + hp(1) }]}
-                pointerEvents="box-none"
-            >
-                {topToasts.map((toast, index) => (
-                    <Toast
-                        key={toast.id}
-                        visible={true}
-                        duration={toast?.options?.duration}
-                        position="top"
-                        theme={theme}
-                        style={[toast?.options?.style || {}, { marginTop: index * (hp(7) + hp(1)) }]}
-                        onHide={() => toastManagerInstance.remove(toast.id)}
-                    >
-                        {toast.content}
-                    </Toast>
-                ))}
-            </View>
-
-            {/* Center positioned toasts */}
-            <View style={styles.centerContainer} pointerEvents="box-none">
-                {centerToasts.map((toast, index) => (
-                    <Toast
-                        key={toast.id}
-                        visible={true}
-                        duration={toast?.options?.duration}
-                        position="center"
-                        theme={theme}
-                        style={[toast?.options?.style || {}, { marginTop: index * (hp(7) + hp(1)) }]}
-                        onHide={() => toastManagerInstance.remove(toast.id)}
-                    >
-                        {toast.content}
-                    </Toast>
-                ))}
-            </View>
-
-            {/* Bottom positioned toasts */}
-            <View style={styles.bottomContainer} pointerEvents="box-none">
-                {bottomToasts.map((toast, index) => (
-                    <Toast
-                        key={toast.id}
-                        visible={true}
-                        duration={toast?.options?.duration}
-                        position="bottom"
-                        theme={theme}
-                        style={[toast?.options?.style || {}, { bottom: hp(2) + index * (hp(7) + hp(1)) }]}
-                        onHide={() => toastManagerInstance.remove(toast.id)}
-                    >
-                        {toast.content}
-                    </Toast>
-                ))}
-            </View>
-        </>
-    );
-};
-
-const styles = StyleSheet.create({
-    topContainer: {
-        position: 'absolute',
-        left: 0,
-        right: 0,
-        zIndex: 9999,
-        pointerEvents: 'box-none',
-        alignItems: 'center',
-    },
-    centerContainer: {
-        position: 'absolute',
-        top: '50%',
-        left: 0,
-        right: 0,
-        zIndex: 9999,
-        pointerEvents: 'box-none',
-        alignItems: 'center',
-        transform: [{ translateY: -hp(3.5) }]
-    },
-    bottomContainer: {
-        position: 'absolute',
-        bottom: 0,
-        left: 0,
-        right: 0,
-        zIndex: 9999,
-        pointerEvents: 'box-none',
-        alignItems: 'center',
-    },
-});
-
+import React, { useEffect, useState, useCallback, useMemo } from 'react';
+import { View, StyleSheet, Appearance, Platform, Keyboard } from 'react-native';
+import Toast from '../Toast';
+import toastManagerInstance from './ToastManager';
+import {
+    heightPercentageToDP as hp,
+    widthPercentageToDP as wp,
+} from '../utils/Pixel/Index';
+
+const ToastContainer = ({
+    theme: forcedTheme,
+    maxVisible = 3,
+    defaultPosition = 'top',
+    topOffset = 0,
+    bottomOffset = 0,
+    swipeable = true,
+} = {}) => {
+    const [toasts, setToasts] = useState([]);
+    const [theme, setTheme] = useState(forcedTheme ?? (Appearance?.getColorScheme?.() || 'light'));
+    const [keyboardHeight, setKeyboardHeight] = useState(0);
+
+    useEffect(() => {
+        // Configure the manager with our settings
+        toastManagerInstance.configure({ maxVisible });
+    }, [maxVisible]);
+
+    useEffect(() => {
+        const handleShow = (toast) => {
+            setToasts((prev) => {
+                // Prevent duplicate IDs
+                const filtered = prev.filter((t) => t.id !== toast.id);
+                return [...filtered, toast];
+            });
+        };
+
+        const handleRemove = (id) => {
+            setToasts((prev) => prev.filter((toast) => toast.id !== id));
+        };
+
+        const handleUpdate = (updatedToast) => {
+            setToasts((prev) =>
+                prev.map((t) => (t.id === updatedToast.id ? updatedToast : t))
+            );
+        };
+
+        toastManagerInstance.on('show', handleShow);
+        toastManagerInstance.on('remove', handleRemove);
+        toastManagerInstance.on('update', handleUpdate);
+
+        // Theme listener
+        let appearanceSub;
+        if (!forcedTheme && Appearance?.addChangeListener) {
+            appearanceSub = Appearance.addChangeListener(({ colorScheme }) => {
+                setTheme(colorScheme ?? 'light');
+            });
+        }
+
+        // Keyboard listener for bottom toasts
+        const keyboardShowSub = Keyboard.addListener(
+            Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow',
+            (e) => setKeyboardHeight(e.endCoordinates.height)
+        );
+        const keyboardHideSub = Keyboard.addListener(
+            Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide',
+            () => setKeyboardHeight(0)
+        );
+
+        return () => {
+            toastManagerInstance.off('show', handleShow);
+            toastManagerInstance.off('remove', handleRemove);
+            toastManagerInstance.off('update', handleUpdate);
+            if (appearanceSub?.remove) appearanceSub.remove();
+            keyboardShowSub.remove();
+            keyboardHideSub.remove();
+        };
+    }, [forcedTheme]);
+
+    // Calculate safe top margin
+    const getTopMargin = useCallback(() => {
+        if (Platform.OS === 'android') {
+            // Use StatusBar height if available
+            try {
+                const { StatusBar } = require('react-native');
+                return (StatusBar.currentHeight || 0) + topOffset;
+            } catch {
+                return topOffset;
+            }
+        }
+        // iOS: default safe area
+        return 50 + topOffset;
+    }, [topOffset]);
+
+    // Separate toasts by position
+    const { topToasts, centerToasts, bottomToasts } = useMemo(() => {
+        const top = [];
+        const center = [];
+        const bottom = [];
+
+        toasts.forEach((toast) => {
+            const pos = toast?.options?.position || defaultPosition;
+            if (pos === 'top') top.push(toast);
+            else if (pos === 'center') center.push(toast);
+            else bottom.push(toast);
+        });
+
+        return { topToasts: top, centerToasts: center, bottomToasts: bottom };
+    }, [toasts, defaultPosition]);
+
+    const topMargin = getTopMargin();
+    const toastSpacing = hp(1.2);
+    const toastHeight = hp(8.5);
+
+    return (
+        <>
+            {/* Top positioned toasts */}
+            {topToasts.length > 0 && (
+                <View
+                    style={[styles.topContainer, { top: topMargin }]}
+                    pointerEvents="box-none"
+                >
+                    {topToasts.map((toast, index) => (
+                        <Toast
+                            key={toast.id}
+                            visible={true}
+                            duration={toast?.options?.duration}
+                            position="top"
+                            theme={theme}
+                            style={[
+                                toast?.options?.style || {},
+                                { marginTop: index * (toastHeight + toastSpacing) },
+                            ]}
+                            onHide={() => toastManagerInstance.remove(toast.id)}
+                        >
+                            {toast.content}
+                        </Toast>
+                    ))}
+                </View>
+            )}
+
+            {/* Center positioned toasts */}
+            {centerToasts.length > 0 && (
+                <View style={styles.centerContainer} pointerEvents="box-none">
+                    {centerToasts.map((toast, index) => (
+                        <Toast
+                            key={toast.id}
+                            visible={true}
+                            duration={toast?.options?.duration}
+                            position="center"
+                            theme={theme}
+                            style={[
+                                toast?.options?.style || {},
+                                { marginTop: index * (toastHeight + toastSpacing) },
+                            ]}
+                            onHide={() => toastManagerInstance.remove(toast.id)}
+                        >
+                            {toast.content}
+                        </Toast>
+                    ))}
+                </View>
+            )}
+
+            {/* Bottom positioned toasts */}
+            {bottomToasts.length > 0 && (
+                <View
+                    style={[
+                        styles.bottomContainer,
+                        { bottom: bottomOffset + keyboardHeight },
+                    ]}
+                    pointerEvents="box-none"
+                >
+                    {bottomToasts.map((toast, index) => (
+                        <Toast
+                            key={toast.id}
+                            visible={true}
+                            duration={toast?.options?.duration}
+                            position="bottom"
+                            theme={theme}
+                            style={[
+                                toast?.options?.style || {},
+                                { bottom: hp(2) + index * (toastHeight + toastSpacing) },
+                            ]}
+                            onHide={() => toastManagerInstance.remove(toast.id)}
+                        >
+                            {toast.content}
+                        </Toast>
+                    ))}
+                </View>
+            )}
+        </>
+    );
+};
+
+const styles = StyleSheet.create({
+    topContainer: {
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        zIndex: 9999,
+        pointerEvents: 'box-none',
+        alignItems: 'center',
+    },
+    centerContainer: {
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        zIndex: 9999,
+        pointerEvents: 'box-none',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    bottomContainer: {
+        position: 'absolute',
+        bottom: 0,
+        left: 0,
+        right: 0,
+        zIndex: 9999,
+        pointerEvents: 'box-none',
+        alignItems: 'center',
+    },
+});
+
 export default React.memo(ToastContainer);

package/src/context/ToastManager.js

@@ -1,36 +1,150 @@
-import { EventEmitter } from 'events';
-
-class ToastManager extends EventEmitter {
-    // show accepts an optional id so callers (like promise) can control the id lifecycle
-    show(content, options = {}, id = null) {
-        const _id = id ?? Date.now().toString();
-        const defaultOptions = {
-            duration: 1000,
-            position: 'bottom',
-            style: {},
-        };
-        this.emit('show', { id: _id, content, options: { ...defaultOptions, ...options } });
-        return _id;
-    }
-
-    remove(id) {
-        this.emit('remove', id);
-    }
-
-    async promise(promise, { loading, success, error }) {
-        const id = Date.now().toString();
-        // show the loading toast using the same id so we can remove it later
-        this.show(loading, { duration: Infinity, position: 'top' }, id);
-        try {
-            await promise;
-            this.remove(id);
-            this.show(success, { duration: 1000, position: 'top' });
-        } catch (err) {
-            this.remove(id);
-            this.show(error, { duration: 1000, position: 'top' });
-        }
-    }
-}
-
-const toastManagerInstance = new ToastManager();
-export default toastManagerInstance;
+import { EventEmitter } from 'events';
+import { TOAST_DEFAULTS } from '../utils/theme';
+
+let _idCounter = 0;
+const generateId = () => `toast_${++_idCounter}_${Date.now()}`;
+
+class ToastManager extends EventEmitter {
+    constructor() {
+        super();
+        this.setMaxListeners(20);
+        this._activeToasts = new Map();
+        this._queue = [];
+        this._maxVisible = TOAST_DEFAULTS.maxVisible;
+    }
+
+    /**
+     * Configure the toast manager.
+     * @param {{ maxVisible?: number }} config
+     */
+    configure(config = {}) {
+        if (config.maxVisible !== undefined) {
+            this._maxVisible = config.maxVisible;
+        }
+    }
+
+    /**
+     * Show a toast notification.
+     * @param {React.ReactNode} content - The toast content to render
+     * @param {Object} options - Toast options (duration, position, style)
+     * @param {string|null} id - Optional custom ID for the toast
+     * @returns {string} The toast ID
+     */
+    show(content, options = {}, id = null) {
+        const _id = id ?? generateId();
+        const defaultOptions = {
+            duration: TOAST_DEFAULTS.duration,
+            position: TOAST_DEFAULTS.position,
+            style: {},
+        };
+
+        const toast = {
+            id: _id,
+            content,
+            options: { ...defaultOptions, ...options },
+            createdAt: Date.now(),
+        };
+
+        // If we've hit the max, queue the toast or dismiss the oldest
+        if (this._activeToasts.size >= this._maxVisible) {
+            // Remove the oldest toast to make room
+            const oldest = this._activeToasts.keys().next().value;
+            if (oldest) {
+                this.remove(oldest);
+            }
+        }
+
+        this._activeToasts.set(_id, toast);
+        this.emit('show', toast);
+        return _id;
+    }
+
+    /**
+     * Remove a toast by ID.
+     * @param {string} id
+     */
+    remove(id) {
+        this._activeToasts.delete(id);
+        this.emit('remove', id);
+
+        // Process queue if there are waiting toasts
+        if (this._queue.length > 0 && this._activeToasts.size < this._maxVisible) {
+            const next = this._queue.shift();
+            if (next) {
+                this.show(next.content, next.options, next.id);
+            }
+        }
+    }
+
+    /**
+     * Dismiss all active toasts.
+     */
+    dismissAll() {
+        const ids = Array.from(this._activeToasts.keys());
+        ids.forEach((id) => this.remove(id));
+        this._queue = [];
+    }
+
+    /**
+     * Update an existing toast's content.
+     * @param {string} id - The toast ID to update
+     * @param {React.ReactNode} content - New content
+     * @param {Object} options - New options (merged with existing)
+     */
+    update(id, content, options = {}) {
+        if (this._activeToasts.has(id)) {
+            const existing = this._activeToasts.get(id);
+            const updated = {
+                ...existing,
+                content: content ?? existing.content,
+                options: { ...existing.options, ...options },
+            };
+            this._activeToasts.set(id, updated);
+            this.emit('update', updated);
+        }
+    }
+
+    /**
+     * Check if a toast is currently active.
+     * @param {string} id
+     * @returns {boolean}
+     */
+    isActive(id) {
+        return this._activeToasts.has(id);
+    }
+
+    /**
+     * Handle promise states with loading → success/error toasts.
+     * @param {Promise} promise
+     * @param {{ loading: React.ReactNode, success: React.ReactNode|Function, error: React.ReactNode|Function }} messages
+     * @param {Object} options
+     */
+    async promise(promise, { loading, success, error }, options = {}) {
+        const id = generateId();
+        // Show the loading toast
+        this.show(loading, { ...options, duration: Infinity, position: options.position || 'top' }, id);
+
+        try {
+            const result = await promise;
+            this.remove(id);
+            // Support function callbacks for dynamic messages
+            const successContent = typeof success === 'function' ? success(result) : success;
+            this.show(successContent, {
+                duration: options.successDuration || TOAST_DEFAULTS.duration,
+                position: options.position || 'top',
+            });
+            return result;
+        } catch (err) {
+            this.remove(id);
+            const errorContent = typeof error === 'function' ? error(err) : error;
+            this.show(errorContent, {
+                duration: options.errorDuration || TOAST_DEFAULTS.duration,
+                position: options.position || 'top',
+            });
+            throw err;
+        }
+    }
+}
+
+const toastManagerInstance = new ToastManager();
+export default toastManagerInstance;