rn-toastify 1.0.4 → 1.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-toastify",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "A customizable and performant toast notification library for React Native, featuring smooth animations, swipe gestures, and flexible styling options.",
   "main": "index.js",
   "repository": {

package/src/Toast.js

@@ -1,20 +1,20 @@
-import React, { useEffect, useState, useMemo } from 'react';
-import { PanResponder, StyleSheet, Text } from 'react-native';
-import {
-    heightPercentageToDP as hp,
-    widthPercentageToDP as wp,
-} from './utils/Pixel/Index';
-import Animated, { useSharedValue, useAnimatedStyle, withTiming, withSpring, Easing, runOnJS } from 'react-native-reanimated';
+import React, { useEffect, useMemo } from 'react';
+import { PanResponder, StyleSheet } from 'react-native';
+import Animated, {
+    useSharedValue,
+    useAnimatedStyle,
+    withTiming,
+    withSpring,
+    runOnJS,
+} from 'react-native-reanimated';
 
 const Toast = ({ visible, duration, position, children, onHide, style }) => {
     const opacity = useSharedValue(0);
     const translateY = useSharedValue(position === 'top' ? -50 : 50);
     const translateX = useSharedValue(0);
-    const scale = useSharedValue(0.9); // Start with a slightly smaller scale
+    const scale = useSharedValue(0.9);
 
-    const positionStyle = useMemo(() => {
-        return position === 'top' ? styles.top : styles.bottom;
-    }, [position]);
+    const positionStyle = useMemo(() => (position === 'top' ? styles.top : styles.bottom), [position]);
 
     useEffect(() => {
         if (visible) {
@@ -24,66 +24,64 @@ const Toast = ({ visible, duration, position, children, onHide, style }) => {
 
             if (duration !== Infinity) {
                 const hideTimeout = setTimeout(() => {
-                    opacity.value = withTiming(0, { duration: 300 });
-                    translateY.value = withTiming(position === 'top' ? -50 : 50, { duration: 300 });
-                    runOnJS(onHide)();
+                    hideToast();
                 }, duration);
 
                 return () => clearTimeout(hideTimeout);
             }
         } else {
-            opacity.value = withTiming(0, { duration: 300 });
-            translateY.value = withTiming(position === 'top' ? -50 : 50, { duration: 300 });
-            runOnJS(onHide)();
+            hideToast();
         }
-    }, [visible, duration, onHide]);
+    }, [visible, duration]);
 
-    const animatedStyle = useAnimatedStyle(() => {
-        return {
-            opacity: opacity.value,
-            transform: [
-                { translateY: translateY.value },
-                { translateX: translateX.value },
-                { scale: scale.value },
-            ],
-        };
-    });
+    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)();
+    };
 
-    // Set up PanResponder for swipe gestures
-    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 });
-                    runOnJS(onHide)();
-                } else {
-                    // If the swipe is less than the threshold, reset the position
-                    translateX.value = withSpring(0);
-                }
-            },
-        }), [translateX, opacity, 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;
 
     return (
         <Animated.View
-            style={[
-                styles.container,
-                animatedStyle,
-                positionStyle,
-                style,
-            ]}
+            {...panResponder.panHandlers}
+            style={[styles.container, animatedStyle, positionStyle, style]}
         >
-            <Animated.View style={[styles.toast, { opacity }]}>
-                {typeof children === 'string' ? <Text>{children}</Text> : children}
-            </Animated.View>
+            {children}
         </Animated.View>
     );
 };
@@ -100,16 +98,7 @@ const styles = StyleSheet.create({
         top: 0,
     },
     bottom: {
-        bottom: 50,
-    },
-    toast: {
-        marginTop: hp(1),
-        borderRadius: wp(3),
-        shadowColor: '#000',
-        shadowOffset: { width: 0, height: 1 },
-        shadowOpacity: 0.5,
-        shadowRadius: 10,
-        elevation: 20,
+        bottom: 20,
     },
 });
 

package/src/components/EmojiToast.js

@@ -14,13 +14,14 @@ const EmojiToast = ({ message, emoji }) => {
 }
 const styles = StyleSheet.create({
     emojiToast: {
-        width: wp(72),
-        height: hp(5.5),
+        width: wp(87),
+        height: hp(6.8),
         paddingHorizontal: wp(4),
         borderRadius: wp(4),
-        backgroundColor: 'white',
-        flexDirection: 'row',
+        // backgroundColor: '#d2f7d2',
+        backgroundColor: '#F7F7FC',
         alignItems: 'center',
+        flexDirection: 'row',
 
     },
     text: {

package/src/components/ErrorToast.js

@@ -24,19 +24,20 @@ const ErrorToast = ({ message }) => {
 
 const styles = StyleSheet.create({
     container: {
-        width: wp(74),
-        height: hp(6),
+        width: wp(87),
+        height: hp(6.8),
         paddingHorizontal: wp(4),
-        borderRadius: wp(3),
-        backgroundColor: '#f8c4c4',
+        borderRadius: wp(4),
+        // backgroundColor: '#f8c4c4',
+        backgroundColor: '#F7F7FC',
         alignItems: 'center',
         flexDirection: 'row'
-
     },
     text: {
         fontSize: hp(2.3),
         color: 'black',
-        paddingHorizontal: wp(1.5)
+        fontWeight: '500',
+        paddingHorizontal: wp(3)
     },
     lottie: {
         width: wp(8.5),

package/src/components/SuccessToast.js

@@ -23,19 +23,20 @@ const SuccessToast = ({ message }) => {
 
 const styles = StyleSheet.create({
     container: {
-        width: wp(74),
-        height: hp(6),
+        width: wp(87),
+        height: hp(6.8),
         paddingHorizontal: wp(4),
-        borderRadius: wp(3),
-        backgroundColor: '#d2f7d2',
+        borderRadius: wp(4),
+        // backgroundColor: '#d2f7d2',
+        backgroundColor: '#F7F7FC',
         alignItems: 'center',
         flexDirection: 'row',
-
     },
     text: {
         fontSize: hp(2.3),
         color: 'black',
-        paddingHorizontal: wp(1.5)
+        fontWeight: '500',
+        paddingHorizontal: wp(3)
     },
     lottie: {
         width: wp(8),

package/src/context/ToastContainer.js

@@ -2,6 +2,10 @@ import React, { useEffect, useState } from 'react';
 import { View, StyleSheet } from 'react-native';
 import Toast from '../Toast';
 import toastManagerInstance from './ToastManager';
+import {
+    heightPercentageToDP as hp,
+    widthPercentageToDP as wp,
+} from '../utils/Pixel/Index';
 
 const ToastContainer = () => {
     const [toasts, setToasts] = useState([]);
@@ -39,7 +43,7 @@ const ToastContainer = () => {
                         visible={true}
                         duration={toast.options.duration}
                         position="top"
-                        style={[toast.options.style, { top: 20 + index * 60 }]} // Adjust spacing between top toasts
+                        style={[toast.options.style, { top: hp(0.1) + index * 60 }]} // Adjust spacing between top toasts
                         onHide={() => toastManagerInstance.remove(toast.id)}
                     >
                         {toast.content}
@@ -71,7 +75,7 @@ const ToastContainer = () => {
                         visible={true}
                         duration={toast.options.duration}
                         position="bottom"
-                        style={[toast.options.style, { bottom: 20 + index * 60 }]} // Adjust spacing between bottom toasts
+                        style={[toast.options.style, { bottom: hp(2) + index * 60 }]} // Adjust spacing between bottom toasts
                         onHide={() => toastManagerInstance.remove(toast.id)}
                     >
                         {toast.content}

package/src/animations/customeAnimations.js

@@ -1,31 +0,0 @@
-import { Animated } from 'react-native';
-
-export const customEnterAnimation = (opacity, translateY) => {
-    return Animated.parallel([
-        Animated.timing(opacity, {
-            toValue: 1,
-            duration: 1000,
-            useNativeDriver: true,
-        }),
-        Animated.spring(translateY, {
-            toValue: 0,
-            friction: 5,
-            useNativeDriver: true,
-        }),
-    ]);
-};
-
-export const customExitAnimation = (opacity, translateY) => {
-    return Animated.parallel([
-        Animated.timing(opacity, {
-            toValue: 0,
-            duration: 1000,
-            useNativeDriver: true,
-        }),
-        Animated.timing(translateY, {
-            toValue: -50,
-            duration: 1000,
-            useNativeDriver: true,
-        }),
-    ]);
-};

package/src/animations/fadeInDown.js

@@ -1,16 +0,0 @@
-import { Animated } from 'react-native';
-
-export const fadeInDown = (opacity, translateY) => {
-    return Animated.parallel([
-        Animated.timing(opacity, {
-            toValue: 1,
-            duration: 500,
-            useNativeDriver: true,
-        }),
-        Animated.timing(translateY, {
-            toValue: 0,
-            duration: 500,
-            useNativeDriver: true,
-        }),
-    ]);
-};

package/src/animations/fadeOutUp.js

@@ -1,16 +0,0 @@
-import { Animated } from 'react-native';
-
-export const fadeOutUp = (opacity, translateY) => {
-    return Animated.parallel([
-        Animated.timing(opacity, {
-            toValue: 0,
-            duration: 500,
-            useNativeDriver: true,
-        }),
-        Animated.timing(translateY, {
-            toValue: -50,
-            duration: 500,
-            useNativeDriver: true,
-        }),
-    ]);
-};