rn-toastify 1.0.11 → 2.0.0

package/src/__tests__/Toast.test.js

@@ -1,54 +1,54 @@
-import React from 'react';
-import { render, act } from '@testing-library/react-native';
-import Toast from '../Toast'; // Adjust the import path as needed
-
-jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper'); // Mock for animated
-
-describe('Toast Component', () => {
-    jest.useFakeTimers();
-
-    it('should render and show toast', () => {
-        const { getByText } = render(
-            <Toast visible={true} duration={2000} position="bottom">
-                Test Toast
-            </Toast>
-        );
-
-        expect(getByText('Test Toast')).toBeTruthy();
-    });
-
-    it('should hide toast after duration', () => {
-        const onHideMock = jest.fn();
-
-        const { queryByText } = render(
-            <Toast visible={true} duration={2000} position="bottom" onHide={onHideMock}>
-                Test Toast
-            </Toast>
-        );
-
-        act(() => {
-            jest.advanceTimersByTime(2000);
-        });
-
-        expect(queryByText('Test Toast')).toBeNull();
-        expect(onHideMock).toHaveBeenCalled();
-    });
-
-    it('should apply correct styles based on position', () => {
-        const { getByText, rerender } = render(
-            <Toast visible={true} duration={2000} position="top">
-                Test Toast
-            </Toast>
-        );
-
-        expect(getByText('Test Toast').parent.parent.props.style).toContainEqual({ top: 0 });
-
-        rerender(
-            <Toast visible={true} duration={2000} position="bottom">
-                Test Toast
-            </Toast>
-        );
-
-        expect(getByText('Test Toast').parent.parent.props.style).toContainEqual({ bottom: 50 });
-    });
-});
+import React from 'react';
+import { render, act } from '@testing-library/react-native';
+import Toast from '../Toast'; // Adjust the import path as needed
+
+jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper'); // Mock for animated
+
+describe('Toast Component', () => {
+    jest.useFakeTimers();
+
+    it('should render and show toast', () => {
+        const { getByText } = render(
+            <Toast visible={true} duration={2000} position="bottom">
+                Test Toast
+            </Toast>
+        );
+
+        expect(getByText('Test Toast')).toBeTruthy();
+    });
+
+    it('should hide toast after duration', () => {
+        const onHideMock = jest.fn();
+
+        const { queryByText } = render(
+            <Toast visible={true} duration={2000} position="bottom" onHide={onHideMock}>
+                Test Toast
+            </Toast>
+        );
+
+        act(() => {
+            jest.advanceTimersByTime(2000);
+        });
+
+        expect(queryByText('Test Toast')).toBeNull();
+        expect(onHideMock).toHaveBeenCalled();
+    });
+
+    it('should apply correct styles based on position', () => {
+        const { getByText, rerender } = render(
+            <Toast visible={true} duration={2000} position="top">
+                Test Toast
+            </Toast>
+        );
+
+        expect(getByText('Test Toast').parent.parent.props.style).toContainEqual({ top: 0 });
+
+        rerender(
+            <Toast visible={true} duration={2000} position="bottom">
+                Test Toast
+            </Toast>
+        );
+
+        expect(getByText('Test Toast').parent.parent.props.style).toContainEqual({ bottom: 50 });
+    });
+});

package/src/components/BaseToast.js

@@ -0,0 +1,163 @@
+import React from 'react';
+import { View, Text, StyleSheet, Platform } from 'react-native';
+import {
+    heightPercentageToDP as hp,
+    widthPercentageToDP as wp,
+} from '../utils/Pixel/Index';
+import { TOAST_THEME, TOAST_COLORS } from '../utils/theme';
+import ProgressBar from './ProgressBar';
+
+/**
+ * BaseToast — Premium shared layout for all built-in toast types.
+ * 
+ * Design: Compact card with rounded icon badge, subtle accent,
+ * floating shadow, and an edge-to-edge progress indicator.
+ */
+const BaseToast = ({
+    icon,
+    title,
+    message,
+    accentColor,
+    toastType = 'info',
+    theme = 'light',
+    duration,
+    showProgress = true,
+    children,
+}) => {
+    const isDark = theme === 'dark';
+    const themeColors = TOAST_THEME[isDark ? 'dark' : 'light'];
+    const colors = TOAST_COLORS[toastType] || TOAST_COLORS.info;
+    const iconBgColor = isDark ? colors.iconBgDark : colors.iconBg;
+
+    return (
+        <View
+            style={[
+                styles.container,
+                {
+                    backgroundColor: themeColors.background,
+                    borderColor: themeColors.border,
+                    ...Platform.select({
+                        ios: {
+                            shadowColor: themeColors.shadow,
+                            shadowOffset: { width: 0, height: 8 },
+                            shadowOpacity: isDark ? 0.6 : 1,
+                            shadowRadius: 24,
+                        },
+                        android: {
+                            elevation: 8,
+                        },
+                    }),
+                },
+            ]}
+            accessibilityRole="alert"
+            accessibilityLiveRegion="polite"
+            accessibilityLabel={
+                [title, message].filter(Boolean).join('. ')
+            }
+        >
+            {/* Left Edge Accent */}
+            <View style={[styles.leftAccent, { backgroundColor: accentColor || colors.accent }]} />
+
+            {/* Content row */}
+            <View style={styles.body}>
+                {/* Icon wrapper without the heavy badge background */}
+                {icon && (
+                    <View style={styles.iconContainer}>
+                        {icon}
+                    </View>
+                )}
+
+                {/* Text content */}
+                <View style={styles.textContainer}>
+                    {title ? (
+                        <Text
+                            style={[styles.title, { color: themeColors.title }]}
+                            numberOfLines={1}
+                            ellipsizeMode="tail"
+                        >
+                            {title}
+                        </Text>
+                    ) : null}
+                    {message ? (
+                        <Text
+                            style={[
+                                styles.message,
+                                { color: themeColors.message },
+                                !title && styles.messageSolo,
+                            ]}
+                            numberOfLines={2}
+                            ellipsizeMode="tail"
+                        >
+                            {message}
+                        </Text>
+                    ) : null}
+                    {children}
+                </View>
+            </View>
+
+            {/* Progress bar — flush to bottom edge */}
+            {showProgress && duration && duration !== Infinity && (
+                <ProgressBar
+                    duration={duration}
+                    color={accentColor}
+                    trackColor={themeColors.progressTrack}
+                />
+            )}
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        width: wp(88),
+        maxWidth: 400,
+        borderRadius: 24,
+        overflow: 'hidden',
+        borderWidth: 1,
+    },
+    leftAccent: {
+        position: 'absolute',
+        left: 0,
+        top: 0,
+        bottom: 0,
+        width: 4,
+    },
+    body: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: 16,
+        paddingVertical: 14,
+        paddingLeft: 20,
+    },
+    iconContainer: {
+        width: 36,
+        height: 36,
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginRight: 12,
+    },
+    textContainer: {
+        flex: 1,
+        justifyContent: 'center',
+    },
+    title: {
+        fontSize: 15,
+        fontWeight: '700',
+        letterSpacing: -0.2,
+        lineHeight: 20,
+    },
+    message: {
+        fontSize: 13,
+        fontWeight: '500',
+        marginTop: 2,
+        lineHeight: 18,
+        letterSpacing: -0.1,
+    },
+    messageSolo: {
+        fontSize: 14,
+        fontWeight: '600',
+        lineHeight: 20,
+    },
+});
+
+export default React.memo(BaseToast);

package/src/components/CustomToast.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import { View, StyleSheet, Platform } from 'react-native';
+import {
+    widthPercentageToDP as wp,
+} from '../utils/Pixel/Index';
+import { TOAST_THEME } from '../utils/theme';
+
+/**
+ * CustomToast — Wrapper for user-provided custom content.
+ * Matches the premium design system card style.
+ */
+const CustomToast = ({ content, theme = 'light' }) => {
+    const isDark = theme === 'dark';
+    const themeColors = TOAST_THEME[isDark ? 'dark' : 'light'];
+
+    return (
+        <View
+            style={[
+                styles.container,
+                {
+                    backgroundColor: themeColors.background,
+                    borderColor: themeColors.border,
+                    ...Platform.select({
+                        ios: {
+                            shadowColor: themeColors.shadow,
+                            shadowOffset: { width: 0, height: 8 },
+                            shadowOpacity: isDark ? 0.6 : 1,
+                            shadowRadius: 24,
+                        },
+                        android: {
+                            elevation: 8,
+                        },
+                    }),
+                },
+            ]}
+            accessibilityRole="alert"
+            accessibilityLiveRegion="polite"
+        >
+            {content}
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        width: wp(88),
+        maxWidth: 400,
+        paddingHorizontal: 16,
+        paddingVertical: 14,
+        borderRadius: 24,
+        overflow: 'hidden',
+        flexDirection: 'row',
+        alignItems: 'center',
+        borderWidth: 1,
+    },
+});
+
+export default CustomToast;

package/src/components/CustomeToast.js

@@ -1,28 +1,5 @@
-import React from 'react';
-import { View, StyleSheet } from 'react-native';
-import {
-    heightPercentageToDP as hp,
-    widthPercentageToDP as wp,
-} from '../utils/Pixel/Index';
-
-const CustomToast = ({ content, theme = 'light' }) => {
-    const isDark = theme === 'dark';
-    const bg = isDark ? '#111827' : '#FFFFFF';
-    return (
-        <View style={[styles.customToast, { backgroundColor: bg }]}>
-            {content}
-        </View>
-    );
-};
-
-const styles = StyleSheet.create({
-    customToast: {
-        padding: wp(1),
-        borderRadius: wp(2),
-        backgroundColor: 'white',
-        flexDirection: 'row',
-        alignItems: 'center',
-    },
-});
-
-export default CustomToast;
+// Backward compatibility re-export
+// The correct name is "CustomToast" — this file exists for consumers
+// who imported the old misspelled name.
+import CustomToast from './CustomToast';
+export default CustomToast;

package/src/components/EmojiToast.js

@@ -1,38 +1,142 @@
-import React from 'react';
-import { View, Text, StyleSheet } from 'react-native';
-import {
-    heightPercentageToDP as hp,
-    widthPercentageToDP as wp,
-} from '../utils/Pixel/Index';
-
-const EmojiToast = ({ message, emoji, theme = 'light' }) => {
-    const isDark = theme === 'dark';
-    const bg = isDark ? '#111827' : '#F7F7FC';
-    const textColor = isDark ? '#F3F4F6' : 'black';
-
-    return (
-        <View style={[styles.emojiToast, { backgroundColor: bg }]}>
-            <Text style={[styles.text, { color: textColor }]}>{emoji} {message}</Text>
-        </View>
-    );
-}
-const styles = StyleSheet.create({
-    emojiToast: {
-        width: wp(87),
-        height: hp(6.8),
-        paddingHorizontal: wp(4),
-        borderRadius: wp(4),
-        // backgroundColor: '#d2f7d2',
-        backgroundColor: '#F7F7FC',
-        alignItems: 'center',
-        flexDirection: 'row',
-
-    },
-    text: {
-        fontSize: hp(2.2),
-        color: 'black',
-        paddingHorizontal: wp(1.5)
-    },
-});
-
-export default EmojiToast;
+import React, { useEffect } from 'react';
+import { View, Text, StyleSheet, Platform } from 'react-native';
+import Animated, {
+    useSharedValue,
+    useAnimatedStyle,
+    withSpring,
+} from 'react-native-reanimated';
+import {
+    widthPercentageToDP as wp,
+} from '../utils/Pixel/Index';
+import { TOAST_THEME } from '../utils/theme';
+import ProgressBar from './ProgressBar';
+
+/**
+ * EmojiToast — Toast with an emoji and bounce animation.
+ * Styled to match the premium design system.
+ */
+const EmojiToast = ({ title, message, emoji, theme = 'light', duration }) => {
+    const isDark = theme === 'dark';
+    const themeColors = TOAST_THEME[isDark ? 'dark' : 'light'];
+    const emojiScale = useSharedValue(0.3);
+
+    useEffect(() => {
+        emojiScale.value = withSpring(1, { damping: 8, stiffness: 200 });
+    }, []);
+
+    const emojiAnimStyle = useAnimatedStyle(() => ({
+        transform: [{ scale: emojiScale.value }],
+    }));
+
+    return (
+        <View
+            style={[
+                styles.container,
+                {
+                    backgroundColor: themeColors.background,
+                    borderColor: themeColors.border,
+                    ...Platform.select({
+                        ios: {
+                            shadowColor: themeColors.shadow,
+                            shadowOffset: { width: 0, height: 4 },
+                            shadowOpacity: isDark ? 0.4 : 0.08,
+                            shadowRadius: 12,
+                        },
+                        android: {
+                            elevation: 6,
+                        },
+                    }),
+                },
+            ]}
+            accessibilityRole="alert"
+            accessibilityLiveRegion="polite"
+            accessibilityLabel={[emoji, title, message].filter(Boolean).join('. ')}
+        >
+            <View style={styles.body}>
+                <Animated.View style={[styles.emojiBadge, emojiAnimStyle]}>
+                    <Text style={styles.emojiText}>{emoji}</Text>
+                </Animated.View>
+                <View style={styles.textContainer}>
+                    {title ? (
+                        <Text
+                            style={[styles.title, { color: themeColors.title }]}
+                            numberOfLines={1}
+                        >
+                            {title}
+                        </Text>
+                    ) : null}
+                    {message ? (
+                        <Text
+                            style={[
+                                styles.message,
+                                { color: themeColors.message },
+                                !title && styles.messageSolo,
+                            ]}
+                            numberOfLines={2}
+                        >
+                            {message}
+                        </Text>
+                    ) : null}
+                </View>
+            </View>
+            {duration && duration !== Infinity && (
+                <ProgressBar
+                    duration={duration}
+                    color="#8B5CF6"
+                    trackColor={themeColors.progressTrack}
+                />
+            )}
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        width: wp(92),
+        borderRadius: 16,
+        overflow: 'hidden',
+        borderWidth: 1,
+    },
+    body: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: 16,
+        paddingVertical: 14,
+    },
+    emojiBadge: {
+        width: 40,
+        height: 40,
+        borderRadius: 12,
+        backgroundColor: 'rgba(139, 92, 246, 0.1)',
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginRight: 12,
+    },
+    emojiText: {
+        fontSize: 22,
+    },
+    textContainer: {
+        flex: 1,
+        justifyContent: 'center',
+    },
+    title: {
+        fontSize: 15,
+        fontWeight: '600',
+        letterSpacing: -0.2,
+        lineHeight: 20,
+    },
+    message: {
+        fontSize: 13,
+        fontWeight: '400',
+        marginTop: 2,
+        lineHeight: 18,
+        letterSpacing: -0.1,
+    },
+    messageSolo: {
+        fontSize: 14,
+        fontWeight: '500',
+        lineHeight: 20,
+    },
+});
+
+export default React.memo(EmojiToast);

package/src/components/ErrorToast.js

@@ -1,52 +1,23 @@
-// src/components/ToastHelpers/ErrorToast.js
-import LottieView from 'lottie-react-native';
-import React from 'react';
-import { View, Text, StyleSheet } from 'react-native';
-import {
-    heightPercentageToDP as hp,
-    widthPercentageToDP as wp,
-} from '../utils/Pixel/Index';
-
-const ErrorToast = ({ message, theme = 'light' }) => {
-    const isDark = theme === 'dark';
-    const containerBg = isDark ? '#111827' : '#F7F7FC';
-    const textColor = isDark ? '#FEE2E2' : '#991B1B';
-
-    return (
-        <View style={[styles.container, { backgroundColor: containerBg }]}>
-            <LottieView
-                source={require('../../assets/animated_Icon/ErrorAnimation.json')}  // Replace with your success Lottie animation path
-                autoPlay
-                loop={false}
-                speed={1.5}
-                style={styles.lottie}
-            />
-            <Text style={[styles.text, { color: textColor }]}>{message}</Text>
-        </View>
-    );
-}
-
-const styles = StyleSheet.create({
-    container: {
-        width: wp(87),
-        height: hp(6.8),
-        paddingHorizontal: wp(4),
-        borderRadius: wp(4),
-        // backgroundColor: '#f8c4c4',
-        backgroundColor: '#F7F7FC',
-        alignItems: 'center',
-        flexDirection: 'row'
-    },
-    text: {
-        fontSize: hp(2.3),
-        color: 'black',
-        fontWeight: '500',
-        paddingHorizontal: wp(3)
-    },
-    lottie: {
-        width: wp(8.5),
-        height: hp(4.5),
-    },
-});
-
-export default ErrorToast;
+import React from 'react';
+import BaseToast from './BaseToast';
+import { CrossIcon } from './icons';
+import { TOAST_COLORS, TOAST_DEFAULTS } from '../utils/theme';
+
+const ErrorToast = ({ title, message, theme = 'light', duration }) => {
+    const isDark = theme === 'dark';
+    const colors = TOAST_COLORS.error;
+
+    return (
+        <BaseToast
+            icon={<CrossIcon size={TOAST_DEFAULTS.iconSize} color={isDark ? colors.iconDark : colors.icon} />}
+            title={title || null}
+            message={message || null}
+            accentColor={colors.accent}
+            toastType="error"
+            theme={theme}
+            duration={duration}
+        />
+    );
+};
+
+export default React.memo(ErrorToast);

package/src/components/InfoToast.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import BaseToast from './BaseToast';
+import { InfoIcon } from './icons';
+import { TOAST_COLORS, TOAST_DEFAULTS } from '../utils/theme';
+
+const InfoToast = ({ title, message, theme = 'light', duration }) => {
+    const isDark = theme === 'dark';
+    const colors = TOAST_COLORS.info;
+
+    return (
+        <BaseToast
+            icon={<InfoIcon size={TOAST_DEFAULTS.iconSize} color={isDark ? colors.iconDark : colors.icon} />}
+            title={title || null}
+            message={message || null}
+            accentColor={colors.accent}
+            toastType="info"
+            theme={theme}
+            duration={duration}
+        />
+    );
+};
+
+export default React.memo(InfoToast);