rn-toastify 1.0.3 → 1.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-toastify",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "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,14 +1,14 @@
-import React, { useEffect, useMemo } from 'react';
+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, runOnJS } from 'react-native-reanimated';
+import Animated, { useSharedValue, useAnimatedStyle, withTiming, withSpring, Easing, runOnJS } from 'react-native-reanimated';
 
 const Toast = ({ visible, duration, position, children, onHide, style }) => {
     const opacity = useSharedValue(0);
-    const translateY = useSharedValue(-50);
+    const translateY = useSharedValue(position === 'top' ? -50 : 50);
     const translateX = useSharedValue(0);
     const scale = useSharedValue(0.9); // Start with a slightly smaller scale
 
@@ -25,7 +25,7 @@ const Toast = ({ visible, duration, position, children, onHide, style }) => {
             if (duration !== Infinity) {
                 const hideTimeout = setTimeout(() => {
                     opacity.value = withTiming(0, { duration: 300 });
-                    translateY.value = withTiming(-50, { duration: 300 });
+                    translateY.value = withTiming(position === 'top' ? -50 : 50, { duration: 300 });
                     runOnJS(onHide)();
                 }, duration);
 
@@ -33,7 +33,7 @@ const Toast = ({ visible, duration, position, children, onHide, style }) => {
             }
         } else {
             opacity.value = withTiming(0, { duration: 300 });
-            translateY.value = withTiming(-50, { duration: 300 });
+            translateY.value = withTiming(position === 'top' ? -50 : 50, { duration: 300 });
             runOnJS(onHide)();
         }
     }, [visible, duration, onHide]);
@@ -74,7 +74,6 @@ const Toast = ({ visible, duration, position, children, onHide, style }) => {
 
     return (
         <Animated.View
-            // {...panResponder.panHandlers}
             style={[
                 styles.container,
                 animatedStyle,
@@ -105,14 +104,12 @@ const styles = StyleSheet.create({
     },
     toast: {
         marginTop: hp(1),
-        // padding: 10,
-        backgroundColor: 'white',
-        borderRadius: wp(4),
+        borderRadius: wp(3),
         shadowColor: '#000',
-        shadowOffset: { width: 0, height: 1 }, // Adjust to spread the shadow more
-        shadowOpacity: 0.5, // Adjust for the desired darkness
-        shadowRadius: 10, // Increase for a more spread-out shadow
-        elevation: 20, // Higher elevation for Android shadow
+        shadowOffset: { width: 0, height: 1 },
+        shadowOpacity: 0.5,
+        shadowRadius: 10,
+        elevation: 20,
     },
 });
 

package/src/components/ErrorToast.js

@@ -1,3 +1,4 @@
+// src/components/ToastHelpers/ErrorToast.js
 import LottieView from 'lottie-react-native';
 import React from 'react';
 import { View, Text, StyleSheet } from 'react-native';
@@ -23,18 +24,17 @@ const ErrorToast = ({ message }) => {
 
 const styles = StyleSheet.create({
     container: {
-        width: wp(72),
-        height: hp(5.5),
+        width: wp(74),
+        height: hp(6),
         paddingHorizontal: wp(4),
-        borderRadius: wp(4),
-        // backgroundColor: '#f8c4c4',  // Success color (green)
-        backgroundColor: 'white',
+        borderRadius: wp(3),
+        backgroundColor: '#f8c4c4',
         alignItems: 'center',
         flexDirection: 'row'
 
     },
     text: {
-        fontSize: hp(2.1),
+        fontSize: hp(2.3),
         color: 'black',
         paddingHorizontal: wp(1.5)
     },

package/src/components/LoadingToast.js

@@ -1,3 +1,4 @@
+// src/components/ToastHelpers/LoadingToast.js
 import React from 'react';
 import { View, Text, StyleSheet, ActivityIndicator } from 'react-native';
 import {

package/src/components/SuccessToast.js

@@ -23,18 +23,17 @@ const SuccessToast = ({ message }) => {
 
 const styles = StyleSheet.create({
     container: {
-        width: wp(72),
-        height: hp(5.5),
+        width: wp(74),
+        height: hp(6),
         paddingHorizontal: wp(4),
-        borderRadius: wp(4),
-        backgroundColor: '#d2f7d2',  // Success color (green)
-        // backgroundColor: 'white',  // Success color (green)
+        borderRadius: wp(3),
+        backgroundColor: '#d2f7d2',
         alignItems: 'center',
         flexDirection: 'row',
 
     },
     text: {
-        fontSize: hp(2.2),
+        fontSize: hp(2.3),
         color: 'black',
         paddingHorizontal: wp(1.5)
     },

package/src/context/ToastContainer.js

@@ -3,7 +3,6 @@ import { View, StyleSheet } from 'react-native';
 import Toast from '../Toast';
 import toastManagerInstance from './ToastManager';
 
-
 const ToastContainer = () => {
     const [toasts, setToasts] = useState([]);
 
@@ -25,35 +24,93 @@ const ToastContainer = () => {
         };
     }, []);
 
+    // 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');
+
     return (
-        <View style={styles.container}>
-            {toasts.map((toast, index) => (
-                <Toast
-                    key={toast.id}
-                    visible={true}
-                    duration={toast.options.duration}
-                    position={toast.options.position}
-                    style={[toast.options.style, { top: 0 + index * 60 }]}
-                    onHide={() => toastManagerInstance.remove(toast.id)}
-                >
-                    {toast.content}
-                </Toast>
-            ))}
-        </View>
+        <>
+            {/* Top positioned toasts */}
+            <View style={styles.topContainer}>
+                {topToasts.map((toast, index) => (
+                    <Toast
+                        key={toast.id}
+                        visible={true}
+                        duration={toast.options.duration}
+                        position="top"
+                        style={[toast.options.style, { top: 20 + index * 60 }]} // Adjust spacing between top toasts
+                        onHide={() => toastManagerInstance.remove(toast.id)}
+                    >
+                        {toast.content}
+                    </Toast>
+                ))}
+            </View>
+
+            {/* Center positioned toasts */}
+            <View style={styles.centerContainer}>
+                {centerToasts.map((toast, index) => (
+                    <Toast
+                        key={toast.id}
+                        visible={true}
+                        duration={toast.options.duration}
+                        position="center"
+                        style={[toast.options.style, { marginTop: index * 60 }]} // Adjust spacing between center toasts
+                        onHide={() => toastManagerInstance.remove(toast.id)}
+                    >
+                        {toast.content}
+                    </Toast>
+                ))}
+            </View>
+
+            {/* Bottom positioned toasts */}
+            <View style={styles.bottomContainer}>
+                {bottomToasts.map((toast, index) => (
+                    <Toast
+                        key={toast.id}
+                        visible={true}
+                        duration={toast.options.duration}
+                        position="bottom"
+                        style={[toast.options.style, { bottom: 20 + index * 60 }]} // Adjust spacing between bottom toasts
+                        onHide={() => toastManagerInstance.remove(toast.id)}
+                    >
+                        {toast.content}
+                    </Toast>
+                ))}
+            </View>
+        </>
     );
 };
 
 const styles = StyleSheet.create({
-    container: {
+    topContainer: {
         position: 'absolute',
         top: 0,
         left: 0,
         right: 0,
-        bottom: 0,
-        justifyContent: 'center',
+        zIndex: 9999,
+        pointerEvents: 'box-none',
+        alignItems: 'center',
+    },
+    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
+    },
+    bottomContainer: {
+        position: 'absolute',
+        bottom: 0,
+        left: 0,
+        right: 0,
         zIndex: 9999,
         pointerEvents: 'box-none',
+        alignItems: 'center',
     },
 });
 

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,
-        }),
-    ]);
-};