rn-toastify 1.0.11 → 1.0.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-toastify",
-  "version": "1.0.11",
+  "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,16 +13,47 @@
   },
   "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 <20.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;