rn-toastify 1.0.11 → 2.0.0

package/index.js

@@ -1,35 +1,61 @@
-// Fixed index.js - Simplified export structure
-const useToastModule = require('./src/hooks/useToast');
-const ToastModule = require('./src/Toast');
-const ToastContainerModule = require('./src/context/ToastContainer');
-const SuccessToastModule = require('./src/components/SuccessToast');
-const CustomeToastModule = require('./src/components/CustomeToast');
-const EmojiToastModule = require('./src/components/EmojiToast');
-const ErrorToastModule = require('./src/components/ErrorToast');
-const LoadingToastModule = require('./src/components/LoadingToast');
-
-// Extract default exports properly
-const useToast = useToastModule.default || useToastModule;
-const Toast = ToastModule.default || ToastModule;
-const ToastContainer = ToastContainerModule.default || ToastContainerModule;
-const SuccessToast = SuccessToastModule.default || SuccessToastModule;
-const CustomeToast = CustomeToastModule.default || CustomeToastModule;
-const EmojiToast = EmojiToastModule.default || EmojiToastModule;
-const ErrorToast = ErrorToastModule.default || ErrorToastModule;
-const LoadingToast = LoadingToastModule.default || LoadingToastModule;
-
-// Primary default export
-module.exports = useToast;
-
-// Named exports
-module.exports.useToast = useToast;
-module.exports.Toast = Toast;
-module.exports.ToastContainer = ToastContainer;
-module.exports.SuccessToast = SuccessToast;
-module.exports.CustomeToast = CustomeToast;
-module.exports.EmojiToast = EmojiToast;
-module.exports.ErrorToast = ErrorToast;
-module.exports.LoadingToast = LoadingToast;
-
-// Also support default property for ES6 imports
+// rn-toastify v2.0.0 — Production-ready toast notifications for React Native
+const useToastModule = require('./src/hooks/useToast');
+const ToastModule = require('./src/Toast');
+const ToastContainerModule = require('./src/context/ToastContainer');
+const ToastManagerModule = require('./src/context/ToastManager');
+const SuccessToastModule = require('./src/components/SuccessToast');
+const ErrorToastModule = require('./src/components/ErrorToast');
+const InfoToastModule = require('./src/components/InfoToast');
+const WarningToastModule = require('./src/components/WarningToast');
+const LoadingToastModule = require('./src/components/LoadingToast');
+const EmojiToastModule = require('./src/components/EmojiToast');
+const CustomToastModule = require('./src/components/CustomToast');
+const BaseToastModule = require('./src/components/BaseToast');
+const ProgressBarModule = require('./src/components/ProgressBar');
+const themeModule = require('./src/utils/theme');
+
+// Extract default exports properly
+const useToast = useToastModule.default || useToastModule;
+const Toast = ToastModule.default || ToastModule;
+const ToastContainer = ToastContainerModule.default || ToastContainerModule;
+const ToastManager = ToastManagerModule.default || ToastManagerModule;
+const SuccessToast = SuccessToastModule.default || SuccessToastModule;
+const ErrorToast = ErrorToastModule.default || ErrorToastModule;
+const InfoToast = InfoToastModule.default || InfoToastModule;
+const WarningToast = WarningToastModule.default || WarningToastModule;
+const LoadingToast = LoadingToastModule.default || LoadingToastModule;
+const EmojiToast = EmojiToastModule.default || EmojiToastModule;
+const CustomToast = CustomToastModule.default || CustomToastModule;
+const BaseToast = BaseToastModule.default || BaseToastModule;
+const ProgressBar = ProgressBarModule.default || ProgressBarModule;
+
+// Primary default export
+module.exports = useToast;
+
+// Named exports
+module.exports.useToast = useToast;
+module.exports.Toast = Toast;
+module.exports.ToastContainer = ToastContainer;
+module.exports.ToastManager = ToastManager;
+
+// Built-in toast components
+module.exports.SuccessToast = SuccessToast;
+module.exports.ErrorToast = ErrorToast;
+module.exports.InfoToast = InfoToast;
+module.exports.WarningToast = WarningToast;
+module.exports.LoadingToast = LoadingToast;
+module.exports.EmojiToast = EmojiToast;
+module.exports.CustomToast = CustomToast;
+module.exports.BaseToast = BaseToast;
+module.exports.ProgressBar = ProgressBar;
+
+// Theme utilities
+module.exports.TOAST_COLORS = themeModule.TOAST_COLORS;
+module.exports.TOAST_THEME = themeModule.TOAST_THEME;
+module.exports.TOAST_DEFAULTS = themeModule.TOAST_DEFAULTS;
+
+// Backward compatibility aliases
+module.exports.CustomeToast = CustomToast;
+
+// ES6 default
 module.exports.default = useToast;

package/jest.config.js

@@ -1,14 +1,14 @@
-module.exports = {
-    preset: 'react-native',
-    testEnvironment: 'node',
-    collectCoverage: true,
-    collectCoverageFrom: ['src/**/*.{ts,tsx}'],
-    setupFilesAfterEnv: [
-        '@testing-library/jest-native/extend-expect',
-        './jest.setup.js'
-    ],
-    transformIgnorePatterns: [
-        'node_modules/(?!(jest-)?react-native|@react-native|@react-navigation|@react-native-community|@expo)',
-    ],
-    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
-};
+module.exports = {
+    preset: 'react-native',
+    testEnvironment: 'node',
+    collectCoverage: true,
+    collectCoverageFrom: ['src/**/*.{ts,tsx}'],
+    setupFilesAfterEnv: [
+        '@testing-library/jest-native/extend-expect',
+        './jest.setup.js'
+    ],
+    transformIgnorePatterns: [
+        'node_modules/(?!(jest-)?react-native|@react-native|@react-navigation|@react-native-community|@expo)',
+    ],
+    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
+};

package/jest.setup.js

@@ -1 +1 @@
-import '@testing-library/jest-native/extend-expect';
+import '@testing-library/jest-native/extend-expect';

package/package.json

@@ -1,44 +1,87 @@
-{
-  "name": "rn-toastify",
-  "version": "1.0.11",
-  "description": "A customizable and performant toast notification library for React Native, featuring smooth animations, swipe gestures, and flexible styling options.",
-  "main": "index.js",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/muku534/react-native-toast"
-  },
-  "homepage": "https://github.com/muku534/react-native-toast#readme",
-  "scripts": {
-    "test": "jest"
-  },
-  "keywords": [
-    "react-native",
-    "toast",
-    "react-native-toastify",
-    "react-native-toast",
-    "react-native-toast-message",
-    "rn-toastify",
-    "alert",
-    "notification",
-    "library"
-  ],
-  "author": "Mukesh Prajapati",
-  "license": "MIT",
-  "peerDependencies": {
-    "react": ">=16.8.0 <20.0.0",
-    "react-native": ">=0.60.0 <1.0.0",
-    "react-native-reanimated": ">=2.0.0 <5.0.0",
-    "lottie-react-native": ">=3.0.0 <9.0.0"
-  },
-  "dependencies": {
-    "events": "^3.3.0"
-  },
-  "devDependencies": {
-    "@testing-library/jest-native": "^5.4.3",
-    "@testing-library/react-native": "^12.5.2",
-    "@types/jest": "^28.1.0",
-    "@types/react-native": "^0.67.3",
-    "jest": "^28.1.0",
-    "react-test-renderer": "^17.0.2"
-  }
+{
+  "name": "rn-toastify",
+  "version": "2.0.0",
+  "description": "A professional, production-ready toast notification library for React Native. Featuring smooth spring animations, swipe-to-dismiss gestures, progress bars, queue management, and a beautiful design system with light/dark themes.",
+  "main": "index.js",
+  "types": "src/types.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/muku534/react-native-toast"
+  },
+  "homepage": "https://github.com/muku534/react-native-toast#readme",
+  "scripts": {
+    "test": "jest"
+  },
+  "keywords": [
+    "react-native",
+    "react native",
+    "toast",
+    "toastify",
+    "notification",
+    "alert",
+    "snackbar",
+    "message",
+    "popup",
+    "react-native-toast",
+    "react-native-toastify",
+    "react-native-toast-message",
+    "react-native-notifications",
+    "rn-toast",
+    "rn-toastify",
+    "animated-toast",
+    "swipe-toast",
+    "promise-toast",
+    "success-toast",
+    "error-toast",
+    "info-toast",
+    "warning-toast",
+    "loading-toast",
+    "custom-toast",
+    "progress-bar",
+    "queue",
+    "dismiss",
+    "ios",
+    "android",
+    "cross-platform",
+    "reanimated",
+    "gesture",
+    "animation",
+    "spring-animation",
+    "dark-mode",
+    "theme",
+    "accessibility",
+    "production-ready",
+    "typescript",
+    "mobile",
+    "notification-library",
+    "alert-library",
+    "toast-notification",
+    "react-native-component"
+  ],
+  "author": {
+    "name": "Mukesh Prajapati",
+    "url": "https://github.com/muku534"
+  },
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-native": ">=0.60.0",
+    "react-native-reanimated": ">=3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react-native-reanimated": {
+      "optional": false
+    }
+  },
+  "dependencies": {
+    "events": "^3.3.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-native": "^5.4.3",
+    "@testing-library/react-native": "^12.5.2",
+    "@types/jest": "^28.1.0",
+    "@types/react-native": "^0.67.3",
+    "jest": "^28.1.0",
+    "react-test-renderer": "^17.0.2"
+  }
 }

package/src/Toast.js

@@ -1,114 +1,194 @@
-import React, { useEffect, useMemo } from 'react';
-import { PanResponder, StyleSheet } from 'react-native';
-import Animated, {
-    useSharedValue,
-    useAnimatedStyle,
-    withTiming,
-    withSpring,
-    runOnJS,
-    Easing,
-} from 'react-native-reanimated';
-
-const Toast = ({ visible, duration, position, children, onHide, style, theme }) => {
-    const opacity = useSharedValue(0);
-    const translateY = useSharedValue(position === 'top' ? -50 : 50);
-    const translateX = useSharedValue(0);
-    const scale = useSharedValue(0.9);
-
-    const positionStyle = useMemo(() => (position === 'top' ? styles.top : styles.bottom), [position]);
-
-    useEffect(() => {
-        if (visible) {
-            opacity.value = withTiming(1, { duration: 300 });
-            translateY.value = withSpring(0, { damping: 10, stiffness: 120 });
-            scale.value = withSpring(1, { damping: 10, stiffness: 120 });
-
-            if (duration !== Infinity) {
-                const hideTimeout = setTimeout(() => {
-                    hideToast();
-                }, duration);
-
-                return () => clearTimeout(hideTimeout);
-            }
-        } else {
-            hideToast();
-        }
-    }, [visible, duration]);
-
-    const hideToast = () => {
-        opacity.value = withTiming(0, { duration: 300, easing: Easing.ease });
-        translateY.value = withTiming(position === 'top' ? -50 : 50, { duration: 300, easing: Easing.ease });
-        scale.value = withTiming(0.9, { duration: 300, easing: Easing.ease });
-        runOnJS(onHide)();
-    };
-
-    const animatedStyle = useAnimatedStyle(() => ({
-        opacity: opacity.value,
-        transform: [
-            { translateY: translateY.value },
-            { translateX: translateX.value },
-            { scale: scale.value },
-        ],
-    }));
-
-    const panResponder = useMemo(
-        () =>
-            PanResponder.create({
-                onMoveShouldSetPanResponder: (evt, gestureState) => {
-                    return Math.abs(gestureState.dx) > 20; // Swipe detection threshold
-                },
-                onPanResponderMove: (evt, gestureState) => {
-                    translateX.value = gestureState.dx; // Update translateX as the user swipes
-                },
-                onPanResponderRelease: (evt, gestureState) => {
-                    if (Math.abs(gestureState.dx) > 100) { // If the swipe distance is more than 100 pixels, remove the toast
-                        opacity.value = withTiming(0, { duration: 200 });
-                        translateY.value = withTiming(position === 'top' ? -50 : 50, { duration: 200 });
-                        scale.value = withTiming(0.9, { duration: 200 });
-                        runOnJS(onHide)();
-                    } else {
-                        // If the swipe is less than the threshold, reset the position
-                        translateX.value = withSpring(0);
-                    }
-                },
-            }),
-        []
-    );
-
-    if (!visible) return null;
-
-    // If children is a React element, inject theme prop; otherwise render as-is.
-    const renderContent = () => {
-        if (React.isValidElement(children)) {
-            return React.cloneElement(children, { theme });
-        }
-        return children;
-    };
-
-    return (
-        <Animated.View
-            {...panResponder.panHandlers}
-            style={[styles.container, animatedStyle, positionStyle, style]}
-        >
-            {renderContent()}
-        </Animated.View>
-    );
-};
-
-const styles = StyleSheet.create({
-    container: {
-        position: 'absolute',
-        left: 0,
-        right: 0,
-        alignItems: 'center',
-        zIndex: 9999,
-    },
-    top: {
-        top: 0,
-    },
-    bottom: {
-        bottom: 20,
-    },
-});
-
-export default React.memo(Toast);
+import React, { useEffect, useMemo, useCallback, useRef } from 'react';
+import { PanResponder, StyleSheet } from 'react-native';
+import Animated, {
+    useSharedValue,
+    useAnimatedStyle,
+    withTiming,
+    withSpring,
+    withDelay,
+    runOnJS,
+    Easing,
+    interpolate,
+    cancelAnimation,
+} from 'react-native-reanimated';
+
+const SPRING_CONFIG = {
+    damping: 18,
+    stiffness: 160,
+    mass: 0.8,
+};
+
+const Toast = ({ visible, duration, position, children, onHide, style, theme }) => {
+    const opacity = useSharedValue(0);
+    const translateY = useSharedValue(position === 'top' ? -80 : position === 'center' ? 30 : 80);
+    const translateX = useSharedValue(0);
+    const scale = useSharedValue(0.85);
+    const hideCalledRef = useRef(false);
+
+    const positionStyle = useMemo(
+        () => {
+            if (position === 'top') return styles.top;
+            if (position === 'center') return styles.center;
+            return styles.bottom;
+        },
+        [position]
+    );
+
+    const safeOnHide = useCallback(() => {
+        if (!hideCalledRef.current) {
+            hideCalledRef.current = true;
+            onHide?.();
+        }
+    }, [onHide]);
+
+    useEffect(() => {
+        hideCalledRef.current = false;
+
+        if (visible) {
+            // Entrance animation — smooth spring with overshoot
+            opacity.value = withTiming(1, { duration: 280, easing: Easing.out(Easing.cubic) });
+            translateY.value = withSpring(0, SPRING_CONFIG);
+            scale.value = withSpring(1, { ...SPRING_CONFIG, damping: 14 });
+            translateX.value = 0;
+
+            // Auto-dismiss timer
+            if (duration && duration !== Infinity) {
+                const hideTimeout = setTimeout(() => {
+                    hideToast();
+                }, duration);
+
+                return () => clearTimeout(hideTimeout);
+            }
+        } else {
+            hideToast();
+        }
+    }, [visible, duration]);
+
+    const hideToast = useCallback(() => {
+        const exitY = position === 'top' ? -60 : position === 'center' ? 20 : 60;
+
+        opacity.value = withTiming(0, {
+            duration: 250,
+            easing: Easing.in(Easing.cubic),
+        });
+        translateY.value = withTiming(exitY, {
+            duration: 250,
+            easing: Easing.in(Easing.cubic),
+        });
+        scale.value = withTiming(0.9, {
+            duration: 250,
+            easing: Easing.in(Easing.cubic),
+        }, (finished) => {
+            // Only fire onHide after animation actually completes
+            if (finished) {
+                runOnJS(safeOnHide)();
+            }
+        });
+    }, [position, safeOnHide]);
+
+    const animatedStyle = useAnimatedStyle(() => ({
+        opacity: opacity.value,
+        transform: [
+            { translateY: translateY.value },
+            { translateX: translateX.value },
+            { scale: scale.value },
+        ],
+    }));
+
+    const panResponder = useMemo(
+        () =>
+            PanResponder.create({
+                onMoveShouldSetPanResponder: (evt, gestureState) => {
+                    // More responsive swipe detection
+                    return Math.abs(gestureState.dx) > 15 || Math.abs(gestureState.dy) > 15;
+                },
+                onPanResponderMove: (evt, gestureState) => {
+                    translateX.value = gestureState.dx;
+                    // Add subtle vertical follow for natural feel
+                    if (position === 'top' && gestureState.dy < 0) {
+                        translateY.value = gestureState.dy * 0.3;
+                    } else if (position === 'bottom' && gestureState.dy > 0) {
+                        translateY.value = gestureState.dy * 0.3;
+                    }
+                    // Fade as user swipes further
+                    opacity.value = interpolate(
+                        Math.abs(gestureState.dx),
+                        [0, 150],
+                        [1, 0.3],
+                        'clamp'
+                    );
+                },
+                onPanResponderRelease: (evt, gestureState) => {
+                    if (Math.abs(gestureState.dx) > 80) {
+                        // Dismiss: fly out in swipe direction
+                        const direction = gestureState.dx > 0 ? 1 : -1;
+                        translateX.value = withTiming(direction * 400, { duration: 200 });
+                        opacity.value = withTiming(0, { duration: 200 });
+                        scale.value = withTiming(0.85, { duration: 200 }, (finished) => {
+                            if (finished) {
+                                runOnJS(safeOnHide)();
+                            }
+                        });
+                    } else if (position === 'top' && gestureState.dy < -40) {
+                        // Swipe up to dismiss (for top toasts)
+                        translateY.value = withTiming(-100, { duration: 200 });
+                        opacity.value = withTiming(0, { duration: 200 }, (finished) => {
+                            if (finished) runOnJS(safeOnHide)();
+                        });
+                    } else if (position === 'bottom' && gestureState.dy > 40) {
+                        // Swipe down to dismiss (for bottom toasts)
+                        translateY.value = withTiming(100, { duration: 200 });
+                        opacity.value = withTiming(0, { duration: 200 }, (finished) => {
+                            if (finished) runOnJS(safeOnHide)();
+                        });
+                    } else {
+                        // Snap back with spring
+                        translateX.value = withSpring(0, { damping: 15, stiffness: 200 });
+                        translateY.value = withSpring(0, { damping: 15, stiffness: 200 });
+                        opacity.value = withSpring(1);
+                    }
+                },
+            }),
+        [position, safeOnHide]
+    );
+
+    if (!visible) return null;
+
+    // If children is a React element, inject theme and duration props
+    const renderContent = () => {
+        if (React.isValidElement(children)) {
+            return React.cloneElement(children, { theme, duration });
+        }
+        return children;
+    };
+
+    return (
+        <Animated.View
+            {...panResponder.panHandlers}
+            style={[styles.container, animatedStyle, positionStyle, style]}
+        >
+            {renderContent()}
+        </Animated.View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        alignItems: 'center',
+        zIndex: 9999,
+    },
+    top: {
+        top: 0,
+    },
+    center: {
+        // Center positioning handled by container
+    },
+    bottom: {
+        bottom: 20,
+    },
+});
+
+export default React.memo(Toast);