rn-toastify 1.0.10 → 1.0.12

package/index.js

@@ -1,26 +1,27 @@
- // CommonJS-friendly entry to avoid default/import interop issues with Metro in some RN versions
-// We attempt to require modules and use .default if present (handles transpiled ESM)
-const _useToastMod = require('./src/hooks/useToast');
-const _toastMod = require('./src/Toast');
-const _containerMod = require('./src/context/ToastContainer');
-const _successMod = require('./src/components/SuccessToast');
-const _customeMod = require('./src/components/CustomeToast');
-const _emojiMod = require('./src/components/EmojiToast');
-const _errorMod = require('./src/components/ErrorToast');
-const _loadingMod = require('./src/components/LoadingToast');
+// 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');
 
-const useToast = (_useToastMod && _useToastMod.__esModule) ? _useToastMod.default : _useToastMod;
-const Toast = (_toastMod && _toastMod.__esModule) ? _toastMod.default : _toastMod;
-const ToastContainer = (_containerMod && _containerMod.__esModule) ? _containerMod.default : _containerMod;
-const SuccessToast = (_successMod && _successMod.__esModule) ? _successMod.default : _successMod;
-const CustomeToast = (_customeMod && _customeMod.__esModule) ? _customeMod.default : _customeMod;
-const EmojiToast = (_emojiMod && _emojiMod.__esModule) ? _emojiMod.default : _emojiMod;
-const ErrorToast = (_errorMod && _errorMod.__esModule) ? _errorMod.default : _errorMod;
-const LoadingToast = (_loadingMod && _loadingMod.__esModule) ? _loadingMod.default : _loadingMod;
+// 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;
 
-// Export for both require() and import syntax
+// Primary default export
 module.exports = useToast;
-module.exports.default = useToast;
+
+// Named exports
 module.exports.useToast = useToast;
 module.exports.Toast = Toast;
 module.exports.ToastContainer = ToastContainer;
@@ -28,4 +29,7 @@ module.exports.SuccessToast = SuccessToast;
 module.exports.CustomeToast = CustomeToast;
 module.exports.EmojiToast = EmojiToast;
 module.exports.ErrorToast = ErrorToast;
-module.exports.LoadingToast = LoadingToast;
+module.exports.LoadingToast = LoadingToast;
+
+// Also support default property for ES6 imports
+module.exports.default = useToast;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-toastify",
-  "version": "1.0.10",
+  "version": "1.0.12",
   "description": "A customizable and performant toast notification library for React Native, featuring smooth animations, swipe gestures, and flexible styling options.",
   "main": "index.js",
   "repository": {
@@ -13,19 +13,50 @@
   },
   "keywords": [
     "react-native",
+    "react native",
     "toast",
-    "react-native-toastify",
+    "toastify",
+    "notification",
+    "alert",
+    "snackbar",
+    "message",
+    "popup",
     "react-native-toast",
+    "react-native-toastify",
     "react-native-toast-message",
+    "react-native-notifications",
+    "rn-toast",
     "rn-toastify",
-    "alert",
-    "notification",
-    "library"
+    "animated-toast",
+    "swipe-toast",
+    "promise-toast",
+    "success-toast",
+    "error-toast",
+    "loading-toast",
+    "custom-toast",
+    "ios",
+    "android",
+    "cross-platform",
+    "reanimated",
+    "lottie",
+    "gesture",
+    "animation",
+    "dark-mode",
+    "theme",
+    "typescript",
+    "mobile",
+    "notification-library",
+    "alert-library",
+    "toast-notification",
+    "react-native-component"
   ],
-  "author": "Mukesh Prajapati",
+  "author": {
+    "name": "Mukesh Prajapati",
+    "url": "https://github.com/muku534"
+  },
   "license": "MIT",
   "peerDependencies": {
-    "react": ">=16.8.0 <19.0.0",
+    "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"

package/src/components/CustomeToast.js

@@ -8,6 +8,7 @@ import {
 const CustomToast = ({ content, theme = 'light' }) => {
     const isDark = theme === 'dark';
     const bg = isDark ? '#111827' : '#FFFFFF';
+    
     return (
         <View style={[styles.customToast, { backgroundColor: bg }]}>
             {content}
@@ -17,12 +18,24 @@ const CustomToast = ({ content, theme = 'light' }) => {
 
 const styles = StyleSheet.create({
     customToast: {
-        padding: wp(1),
-        borderRadius: wp(2),
-        backgroundColor: 'white',
+        minHeight: hp(6.5),
+        paddingHorizontal: wp(4),
+        paddingVertical: hp(1.2),
+        borderRadius: wp(3),
+        backgroundColor: '#FFFFFF',
         flexDirection: 'row',
         alignItems: 'center',
+        // Shadow for iOS
+        shadowColor: '#000',
+        shadowOffset: {
+            width: 0,
+            height: 4,
+        },
+        shadowOpacity: 0.15,
+        shadowRadius: 8,
+        // Shadow for Android
+        elevation: 6,
     },
 });
 
-export default CustomToast;
+export default CustomToast;

package/src/components/EmojiToast.js

@@ -7,32 +7,51 @@ import {
 
 const EmojiToast = ({ message, emoji, theme = 'light' }) => {
     const isDark = theme === 'dark';
-    const bg = isDark ? '#111827' : '#F7F7FC';
-    const textColor = isDark ? '#F3F4F6' : 'black';
+    const bg = isDark ? '#111827' : '#FFFFFF';
+    const textColor = isDark ? '#F3F4F6' : '#1F2937';
 
     return (
         <View style={[styles.emojiToast, { backgroundColor: bg }]}>
-            <Text style={[styles.text, { color: textColor }]}>{emoji} {message}</Text>
+            <Text style={styles.emoji}>{emoji}</Text>
+            <Text style={[styles.text, { color: textColor }]} numberOfLines={2}>
+                {message}
+            </Text>
         </View>
     );
-}
+};
+
 const styles = StyleSheet.create({
     emojiToast: {
         width: wp(87),
-        height: hp(6.8),
+        minHeight: hp(6.5),
         paddingHorizontal: wp(4),
-        borderRadius: wp(4),
-        // backgroundColor: '#d2f7d2',
-        backgroundColor: '#F7F7FC',
+        paddingVertical: hp(1.2),
+        borderRadius: wp(3),
+        backgroundColor: '#FFFFFF',
         alignItems: 'center',
         flexDirection: 'row',
-
+        // Shadow for iOS
+        shadowColor: '#000',
+        shadowOffset: {
+            width: 0,
+            height: 4,
+        },
+        shadowOpacity: 0.15,
+        shadowRadius: 8,
+        // Shadow for Android
+        elevation: 6,
+    },
+    emoji: {
+        fontSize: hp(2.8),
+        marginRight: wp(2),
     },
     text: {
-        fontSize: hp(2.2),
-        color: 'black',
-        paddingHorizontal: wp(1.5)
+        fontSize: hp(1.85),
+        color: '#1F2937',
+        fontWeight: '500',
+        flex: 1,
+        lineHeight: hp(2.4),
     },
 });
 
-export default EmojiToast;
+export default EmojiToast;

package/src/components/ErrorToast.js

@@ -1,4 +1,3 @@
-// src/components/ToastHelpers/ErrorToast.js
 import LottieView from 'lottie-react-native';
 import React from 'react';
 import { View, Text, StyleSheet } from 'react-native';
@@ -9,44 +8,58 @@ import {
 
 const ErrorToast = ({ message, theme = 'light' }) => {
     const isDark = theme === 'dark';
-    const containerBg = isDark ? '#111827' : '#F7F7FC';
+    const containerBg = isDark ? '#111827' : '#FFFFFF';
     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
+                source={require('../../assets/animated_Icon/ErrorAnimation.json')}
                 autoPlay
                 loop={false}
                 speed={1.5}
                 style={styles.lottie}
             />
-            <Text style={[styles.text, { color: textColor }]}>{message}</Text>
+            <Text style={[styles.text, { color: textColor }]} numberOfLines={2}>
+                {message}
+            </Text>
         </View>
     );
-}
+};
 
 const styles = StyleSheet.create({
     container: {
         width: wp(87),
-        height: hp(6.8),
+        minHeight: hp(6.5),
         paddingHorizontal: wp(4),
-        borderRadius: wp(4),
-        // backgroundColor: '#f8c4c4',
-        backgroundColor: '#F7F7FC',
+        paddingVertical: hp(1.2),
+        borderRadius: wp(3),
+        backgroundColor: '#FFFFFF',
         alignItems: 'center',
-        flexDirection: 'row'
+        flexDirection: 'row',
+        // Shadow for iOS
+        shadowColor: '#000',
+        shadowOffset: {
+            width: 0,
+            height: 4,
+        },
+        shadowOpacity: 0.15,
+        shadowRadius: 8,
+        // Shadow for Android
+        elevation: 6,
     },
     text: {
-        fontSize: hp(2.3),
-        color: 'black',
+        fontSize: hp(1.85),
+        color: '#991B1B',
         fontWeight: '500',
-        paddingHorizontal: wp(3)
+        paddingHorizontal: wp(2.5),
+        flex: 1,
+        lineHeight: hp(2.4),
     },
     lottie: {
-        width: wp(8.5),
-        height: hp(4.5),
+        width: wp(7),
+        height: hp(3.5),
     },
 });
 
-export default ErrorToast;
+export default ErrorToast;

package/src/components/LoadingToast.js

@@ -1,4 +1,3 @@
-// src/components/ToastHelpers/LoadingToast.js
 import React from 'react';
 import { View, Text, StyleSheet, ActivityIndicator } from 'react-native';
 import {
@@ -10,24 +9,47 @@ const LoadingToast = ({ message, theme = 'light' }) => {
     const isDark = theme === 'dark';
     const bg = isDark ? '#111827' : '#FFFFFF';
     const indicatorColor = isDark ? '#9CA3AF' : '#6B7280';
+    const textColor = isDark ? '#F3F4F6' : '#1F2937';
 
     return (
         <View style={[styles.toast, { backgroundColor: bg }]}>
             <ActivityIndicator size="small" color={indicatorColor} />
-            {/** <Text style={styles.text}>{message}</Text>  */}
+            {message && (
+                <Text style={[styles.text, { color: textColor }]} numberOfLines={1}>
+                    {message}
+                </Text>
+            )}
         </View>
     );
-}
+};
+
 const styles = StyleSheet.create({
     toast: {
-        padding: wp(1),
-        borderRadius: wp(10),
-        backgroundColor: 'white',
+        minHeight: hp(6.5),
+        paddingHorizontal: wp(4),
+        paddingVertical: hp(1.2),
+        borderRadius: wp(3),
+        backgroundColor: '#FFFFFF',
+        flexDirection: 'row',
+        alignItems: 'center',
+        // Shadow for iOS
+        shadowColor: '#000',
+        shadowOffset: {
+            width: 0,
+            height: 4,
+        },
+        shadowOpacity: 0.15,
+        shadowRadius: 8,
+        // Shadow for Android
+        elevation: 6,
     },
     text: {
-        fontSize: hp(2.2),
-        color: 'black',
+        fontSize: hp(1.85),
+        color: '#1F2937',
+        fontWeight: '500',
+        marginLeft: wp(3),
+        lineHeight: hp(2.4),
     },
 });
 
-export default LoadingToast;
+export default LoadingToast;

package/src/components/SuccessToast.js

@@ -8,19 +8,21 @@ import {
 
 const SuccessToast = ({ message, theme = 'light' }) => {
     const isDark = theme === 'dark';
-    const containerBg = isDark ? '#111827' : '#F7F7FC';
-    const textColor = isDark ? '#F3F4F6' : '#064E3B';
+    const containerBg = isDark ? '#111827' : '#FFFFFF';
+    const textColor = isDark ? '#F3F4F6' : '#1F2937';
 
     return (
         <View style={[styles.container, { backgroundColor: containerBg }]}>
             <LottieView
-                source={require('../../assets/animated_Icon/SuccessAnimation.json')}  // Replace with your success Lottie animation path
+                source={require('../../assets/animated_Icon/SuccessAnimation.json')}
                 autoPlay
                 loop={false}
                 style={styles.lottie}
                 speed={1.2}
             />
-            <Text style={[styles.text, { color: textColor }]}>{message}</Text>
+            <Text style={[styles.text, { color: textColor }]} numberOfLines={2}>
+                {message}
+            </Text>
         </View>
     );
 };
@@ -28,24 +30,36 @@ const SuccessToast = ({ message, theme = 'light' }) => {
 const styles = StyleSheet.create({
     container: {
         width: wp(87),
-        height: hp(6.8),
+        minHeight: hp(6.5),
         paddingHorizontal: wp(4),
-        borderRadius: wp(4),
-            // backgroundColor: '#d2f7d2',
-            backgroundColor: '#F7F7FC',
+        paddingVertical: hp(1.2),
+        borderRadius: wp(3),
+        backgroundColor: '#FFFFFF',
         alignItems: 'center',
         flexDirection: 'row',
+        // Shadow for iOS
+        shadowColor: '#000',
+        shadowOffset: {
+            width: 0,
+            height: 4,
+        },
+        shadowOpacity: 0.15,
+        shadowRadius: 8,
+        // Shadow for Android
+        elevation: 6,
     },
     text: {
-        fontSize: hp(2.3),
-        color: 'black',
+        fontSize: hp(1.85),
+        color: '#1F2937',
         fontWeight: '500',
-        paddingHorizontal: wp(3)
+        paddingHorizontal: wp(2.5),
+        flex: 1,
+        lineHeight: hp(2.4),
     },
     lottie: {
-        width: wp(8),
-        height: hp(4),
+        width: wp(7),
+        height: hp(3.5),
     },
 });
 
-export default SuccessToast;
+export default SuccessToast;

package/src/context/ToastContainer.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { View, StyleSheet, Appearance, StatusBar, Platform, SafeAreaView } from 'react-native';
+import { View, StyleSheet, Appearance, StatusBar, Platform } from 'react-native';
 import Toast from '../Toast';
 import toastManagerInstance from './ToastManager';
 import {
@@ -35,23 +35,29 @@ const ToastContainer = ({ theme: forcedTheme } = {}) => {
             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 */}
-            <SafeAreaView
-                style={[
-                    styles.topContainer,
-                    {
-                        top: Platform.OS === 'android' ? StatusBar.currentHeight || 0 : 0,
-                    },
-                ]}
+            <View
+                style={[styles.topContainer, { top: topMargin + hp(1) }]}
                 pointerEvents="box-none"
             >
                 {topToasts.map((toast, index) => (
@@ -61,13 +67,13 @@ const ToastContainer = ({ theme: forcedTheme } = {}) => {
                         duration={toast?.options?.duration}
                         position="top"
                         theme={theme}
-                        style={[toast?.options?.style || {}, { marginTop: index * 60 }]} // Adjust spacing between top toasts
+                        style={[toast?.options?.style || {}, { marginTop: index * (hp(7) + hp(1)) }]}
                         onHide={() => toastManagerInstance.remove(toast.id)}
                     >
                         {toast.content}
                     </Toast>
                 ))}
-            </SafeAreaView>
+            </View>
 
             {/* Center positioned toasts */}
             <View style={styles.centerContainer} pointerEvents="box-none">
@@ -78,7 +84,7 @@ const ToastContainer = ({ theme: forcedTheme } = {}) => {
                         duration={toast?.options?.duration}
                         position="center"
                         theme={theme}
-                        style={[toast?.options?.style || {}, { marginTop: index * 60 }]} // Adjust spacing between center toasts
+                        style={[toast?.options?.style || {}, { marginTop: index * (hp(7) + hp(1)) }]}
                         onHide={() => toastManagerInstance.remove(toast.id)}
                     >
                         {toast.content}
@@ -95,7 +101,7 @@ const ToastContainer = ({ theme: forcedTheme } = {}) => {
                         duration={toast?.options?.duration}
                         position="bottom"
                         theme={theme}
-                        style={[toast?.options?.style || {}, { bottom: hp(2) + index * 60 }]} // Adjust spacing between bottom toasts
+                        style={[toast?.options?.style || {}, { bottom: hp(2) + index * (hp(7) + hp(1)) }]}
                         onHide={() => toastManagerInstance.remove(toast.id)}
                     >
                         {toast.content}
@@ -109,7 +115,6 @@ const ToastContainer = ({ theme: forcedTheme } = {}) => {
 const styles = StyleSheet.create({
     topContainer: {
         position: 'absolute',
-        top: 0,
         left: 0,
         right: 0,
         zIndex: 9999,
@@ -119,13 +124,12 @@ const styles = StyleSheet.create({
     centerContainer: {
         position: 'absolute',
         top: '50%',
-        bottom: '50%',
         left: 0,
         right: 0,
         zIndex: 9999,
         pointerEvents: 'box-none',
         alignItems: 'center',
-        transform: [{ translateY: -30 }] // Center the first toast vertically
+        transform: [{ translateY: -hp(3.5) }]
     },
     bottomContainer: {
         position: 'absolute',
@@ -138,4 +142,4 @@ const styles = StyleSheet.create({
     },
 });
 
-export default React.memo(ToastContainer);
+export default React.memo(ToastContainer);