@mehul214/react-native-flash-toast 1.0.0 → 1.0.1

package/dist/index.mjs

@@ -55,43 +55,147 @@ var flash = showMessage;
 var dismissFlash = hideMessage;
 var BuiltInIcon = ({
   type,
-  size = 22,
+  size = 18,
   color = "#FFFFFF"
 }) => {
-  const containerStyle = [
-    styles.circle,
-    {
-      width: size,
-      height: size,
-      borderRadius: size / 2,
-      borderColor: color
-    }
-  ];
   switch (type) {
-    case "success":
-      return /* @__PURE__ */ jsx(View, { style: containerStyle, children: /* @__PURE__ */ jsx(Text, { style: [styles.symbol, { color, fontSize: size * 0.65 }], children: "\u2713" }) });
-    case "danger":
-      return /* @__PURE__ */ jsx(View, { style: containerStyle, children: /* @__PURE__ */ jsx(Text, { style: [styles.symbol, { color, fontSize: size * 0.65 }], children: "\u2715" }) });
-    case "warning":
-      return /* @__PURE__ */ jsx(View, { style: containerStyle, children: /* @__PURE__ */ jsx(Text, { style: [styles.symbol, { color, fontSize: size * 0.65 }], children: "!" }) });
-    case "info":
-      return /* @__PURE__ */ jsx(View, { style: containerStyle, children: /* @__PURE__ */ jsx(Text, { style: [styles.symbol, { color, fontSize: size * 0.65 }], children: "\u2139" }) });
+    case "success": {
+      const checkWidth = size * 0.36;
+      const checkHeight = size * 0.65;
+      const stroke = Math.max(2, size * 0.12);
+      return /* @__PURE__ */ jsx(View, { style: [styles.center, { width: size, height: size }], children: /* @__PURE__ */ jsx(
+        View,
+        {
+          style: {
+            width: checkWidth,
+            height: checkHeight,
+            borderColor: color,
+            borderBottomWidth: stroke,
+            borderRightWidth: stroke,
+            borderRadius: 1,
+            transform: [{ rotate: "45deg" }, { translateY: -size * 0.08 }]
+          }
+        }
+      ) });
+    }
+    case "danger": {
+      const crossThickness = Math.max(2, size * 0.12);
+      const crossLength = size * 0.72;
+      return /* @__PURE__ */ jsxs(View, { style: [styles.center, { width: size, height: size }], children: [
+        /* @__PURE__ */ jsx(
+          View,
+          {
+            style: [
+              styles.crossBar,
+              {
+                width: crossLength,
+                height: crossThickness,
+                backgroundColor: color,
+                borderRadius: crossThickness / 2,
+                transform: [{ rotate: "45deg" }]
+              }
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          View,
+          {
+            style: [
+              styles.crossBar,
+              {
+                width: crossLength,
+                height: crossThickness,
+                backgroundColor: color,
+                borderRadius: crossThickness / 2,
+                transform: [{ rotate: "-45deg" }]
+              }
+            ]
+          }
+        )
+      ] });
+    }
+    case "warning": {
+      const warnThickness = Math.max(2, size * 0.13);
+      const dotSize = warnThickness * 1.1;
+      return /* @__PURE__ */ jsxs(View, { style: [styles.center, { width: size, height: size }], children: [
+        /* @__PURE__ */ jsx(
+          View,
+          {
+            style: {
+              width: warnThickness,
+              height: size * 0.46,
+              backgroundColor: color,
+              borderRadius: warnThickness / 2,
+              marginBottom: size * 0.14
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          View,
+          {
+            style: {
+              width: dotSize,
+              height: dotSize,
+              borderRadius: dotSize / 2,
+              backgroundColor: color
+            }
+          }
+        )
+      ] });
+    }
+    case "info": {
+      const infoThickness = Math.max(2, size * 0.13);
+      const infoDotSize = infoThickness * 1.1;
+      return /* @__PURE__ */ jsxs(View, { style: [styles.center, { width: size, height: size }], children: [
+        /* @__PURE__ */ jsx(
+          View,
+          {
+            style: {
+              width: infoDotSize,
+              height: infoDotSize,
+              borderRadius: infoDotSize / 2,
+              backgroundColor: color,
+              marginBottom: size * 0.14
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          View,
+          {
+            style: {
+              width: infoThickness,
+              height: size * 0.46,
+              backgroundColor: color,
+              borderRadius: infoThickness / 2
+            }
+          }
+        )
+      ] });
+    }
     case "default":
-    default:
-      return /* @__PURE__ */ jsx(View, { style: containerStyle, children: /* @__PURE__ */ jsx(Text, { style: [styles.symbol, { color, fontSize: size * 0.6 }], children: "\u25CF" }) });
+    default: {
+      const defaultDot = size * 0.44;
+      return /* @__PURE__ */ jsx(View, { style: [styles.center, { width: size, height: size }], children: /* @__PURE__ */ jsx(
+        View,
+        {
+          style: {
+            width: defaultDot,
+            height: defaultDot,
+            borderRadius: defaultDot / 2,
+            backgroundColor: color
+          }
+        }
+      ) });
+    }
   }
 };
 var styles = StyleSheet.create({
-  circle: {
-    borderWidth: 1.5,
+  center: {
     justifyContent: "center",
     alignItems: "center"
   },
-  symbol: {
-    fontWeight: "800",
-    textAlign: "center",
-    includeFontPadding: false,
-    lineHeight: 22
+  crossBar: {
+    position: "absolute"
   }
 });
 var COLORS = {
@@ -154,22 +258,22 @@ var styles2 = StyleSheet.create({
       ios: {
         shadowColor: "#000000",
         shadowOffset: { width: 0, height: 6 },
-        shadowOpacity: 0.18,
-        shadowRadius: 12
+        shadowOpacity: 0.2,
+        shadowRadius: 14
       },
       android: {
         elevation: 8
       },
       web: {
-        boxShadow: "0 10px 25px -5px rgba(0, 0, 0, 0.2), 0 8px 10px -6px rgba(0, 0, 0, 0.1)"
+        boxShadow: "0 10px 25px -5px rgba(0, 0, 0, 0.25), 0 8px 10px -6px rgba(0, 0, 0, 0.15)"
       }
     })
   },
   floatingContainer: {
     marginHorizontal: 16,
-    borderRadius: 14,
-    borderWidth: StyleSheet.hairlineWidth,
-    borderColor: "rgba(255, 255, 255, 0.15)"
+    borderRadius: 16,
+    borderWidth: 1,
+    borderColor: "rgba(255, 255, 255, 0.16)"
   },
   edgeToEdgeContainer: {
     marginHorizontal: 0,
@@ -179,7 +283,7 @@ var styles2 = StyleSheet.create({
     flex: 1,
     flexDirection: "row",
     alignItems: "center",
-    paddingVertical: 14,
+    paddingVertical: 13,
     paddingHorizontal: 16
   },
   iconContainer: {
@@ -187,6 +291,14 @@ var styles2 = StyleSheet.create({
     justifyContent: "center",
     alignItems: "center"
   },
+  iconBadge: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    backgroundColor: "rgba(255, 255, 255, 0.22)",
+    justifyContent: "center",
+    alignItems: "center"
+  },
   textContainer: {
     flex: 1,
     justifyContent: "center"
@@ -195,25 +307,28 @@ var styles2 = StyleSheet.create({
     fontSize: 15,
     fontWeight: "600",
     letterSpacing: -0.2,
+    lineHeight: 20,
     color: "#FFFFFF"
   },
   descriptionText: {
     fontSize: 13,
     fontWeight: "400",
-    color: "rgba(255, 255, 255, 0.88)",
+    color: "rgba(255, 255, 255, 0.9)",
     marginTop: 2,
     lineHeight: 18
   },
   actionButton: {
-    marginLeft: 10,
+    marginLeft: 12,
     paddingHorizontal: 12,
     paddingVertical: 6,
     borderRadius: 8,
-    backgroundColor: "rgba(255, 255, 255, 0.2)"
+    backgroundColor: "rgba(255, 255, 255, 0.22)",
+    borderWidth: 1,
+    borderColor: "rgba(255, 255, 255, 0.2)"
   },
   actionButtonText: {
     fontSize: 13,
-    fontWeight: "700",
+    fontWeight: "600",
     color: "#FFFFFF"
   },
   progressBarContainer: {
@@ -222,11 +337,11 @@ var styles2 = StyleSheet.create({
     left: 0,
     right: 0,
     height: 3,
-    backgroundColor: "rgba(255, 255, 255, 0.25)"
+    backgroundColor: "rgba(255, 255, 255, 0.2)"
   },
   progressBarFill: {
     height: "100%",
-    backgroundColor: "#FFFFFF"
+    backgroundColor: "rgba(255, 255, 255, 0.9)"
   }
 });
 function getDefaultSafeAreaInsets() {
@@ -268,6 +383,7 @@ var FlashMessage = React.forwardRef(
     } = props;
     const [currentMessage, setCurrentMessage] = useState(null);
     const [isVisible, setIsVisible] = useState(false);
+    const currentMessageRef = useRef(null);
     const translateY = useRef(new Animated.Value(-150)).current;
     const opacity = useRef(new Animated.Value(0)).current;
     const progress = useRef(new Animated.Value(1)).current;
@@ -276,9 +392,6 @@ var FlashMessage = React.forwardRef(
     const remainingTimeRef = useRef(0);
     const timerStartedAtRef = useRef(0);
     const safeInsets = getDefaultSafeAreaInsets();
-    const position = currentMessage?.position ?? defaultPosition;
-    const isTop = position === "top";
-    const isBottom = position === "bottom";
     const clearTimers = useCallback(() => {
       if (hideTimeoutRef.current) {
         clearTimeout(hideTimeoutRef.current);
@@ -292,7 +405,8 @@ var FlashMessage = React.forwardRef(
     const animateHide = useCallback(
       (callback) => {
         clearTimers();
-        const targetY = isTop ? -180 : isBottom ? 180 : 0;
+        const pos = currentMessageRef.current?.position ?? defaultPosition;
+        const targetY = pos === "top" ? -180 : pos === "bottom" ? 180 : 0;
         Animated.parallel([
           Animated.timing(translateY, {
             toValue: targetY,
@@ -306,14 +420,16 @@ var FlashMessage = React.forwardRef(
           })
         ]).start(() => {
           setIsVisible(false);
-          if (currentMessage?.onHide) {
-            currentMessage.onHide();
-          }
+          const onHide = currentMessageRef.current?.onHide;
+          currentMessageRef.current = null;
           setCurrentMessage(null);
+          if (onHide) {
+            onHide();
+          }
           callback?.();
         });
       },
-      [clearTimers, isTop, isBottom, opacity, translateY, currentMessage]
+      [clearTimers, defaultPosition, opacity, translateY]
     );
     const startAutoHideTimer = useCallback(
       (durationMs) => {
@@ -326,7 +442,6 @@ var FlashMessage = React.forwardRef(
           toValue: 0,
           duration: durationMs,
           useNativeDriver: false
-          // width needs layout or scaleX
         });
         progressAnimationRef.current.start();
         hideTimeoutRef.current = setTimeout(() => {
@@ -354,6 +469,7 @@ var FlashMessage = React.forwardRef(
     const show = useCallback(
       (options) => {
         clearTimers();
+        currentMessageRef.current = options;
         setCurrentMessage(options);
         setIsVisible(true);
         const pos = options.position ?? defaultPosition;
@@ -379,55 +495,62 @@ var FlashMessage = React.forwardRef(
           }
         });
         const shouldAutoHide = options.autoHide ?? true;
-        const dur = shouldAutoHide ? options.duration ?? defaultDuration : 0;
+        const dur = shouldAutoHide ? options.duration !== void 0 ? options.duration : defaultDuration : 0;
         if (dur > 0) {
           startAutoHideTimer(dur);
         }
       },
       [clearTimers, defaultDuration, defaultPosition, opacity, progress, startAutoHideTimer, translateY]
     );
+    const showRef = useRef(show);
+    const animateHideRef = useRef(animateHide);
+    showRef.current = show;
+    animateHideRef.current = animateHide;
     useImperativeHandle(
       ref,
       () => ({
-        showMessage: show,
-        hideMessage: () => animateHide()
+        showMessage: (options) => showRef.current(options),
+        hideMessage: () => animateHideRef.current()
       }),
-      [show, animateHide]
+      []
     );
     useEffect(() => {
       const instanceRef = {
-        showMessage: show,
-        hideMessage: () => animateHide()
+        showMessage: (options) => showRef.current(options),
+        hideMessage: () => animateHideRef.current()
       };
       flashManager.register(instanceRef);
       return () => {
         flashManager.unregister();
         clearTimers();
       };
-    }, [show, animateHide, clearTimers]);
+    }, [clearTimers]);
     const panResponder = useRef(
       PanResponder.create({
-        onStartShouldSetPanResponder: () => true,
+        onStartShouldSetPanResponder: () => false,
         onMoveShouldSetPanResponder: (_, gestureState) => {
-          return Math.abs(gestureState.dy) > 5;
+          const swipeEnabled = currentMessageRef.current?.swipeToDismiss ?? true;
+          return swipeEnabled && Math.abs(gestureState.dy) > 8;
         },
         onPanResponderGrant: () => {
-          if (currentMessage?.pauseOnPress ?? true) {
+          if (currentMessageRef.current?.pauseOnPress ?? true) {
             pauseTimer();
           }
         },
         onPanResponderMove: (_, gestureState) => {
-          if (!(currentMessage?.swipeToDismiss ?? true)) return;
-          if (isTop && gestureState.dy < 0) {
+          if (!(currentMessageRef.current?.swipeToDismiss ?? true)) return;
+          const pos = currentMessageRef.current?.position ?? defaultPosition;
+          if (pos === "top" && gestureState.dy < 0) {
             translateY.setValue(gestureState.dy);
-          } else if (isBottom && gestureState.dy > 0) {
+          } else if (pos === "bottom" && gestureState.dy > 0) {
             translateY.setValue(gestureState.dy);
           }
         },
         onPanResponderRelease: (_, gestureState) => {
+          const pos = currentMessageRef.current?.position ?? defaultPosition;
           const swipeThreshold = 30;
-          const isDismissGesture = isTop && gestureState.dy < -swipeThreshold || isBottom && gestureState.dy > swipeThreshold;
-          if (isDismissGesture && (currentMessage?.swipeToDismiss ?? true)) {
+          const isDismissGesture = pos === "top" && gestureState.dy < -swipeThreshold || pos === "bottom" && gestureState.dy > swipeThreshold;
+          if (isDismissGesture && (currentMessageRef.current?.swipeToDismiss ?? true)) {
             animateHide();
           } else {
             Animated.spring(translateY, {
@@ -436,7 +559,7 @@ var FlashMessage = React.forwardRef(
               friction: 8,
               useNativeDriver: true
             }).start();
-            if (currentMessage?.pauseOnPress ?? true) {
+            if (currentMessageRef.current?.pauseOnPress ?? true) {
               resumeTimer();
             }
           }
@@ -446,6 +569,9 @@ var FlashMessage = React.forwardRef(
     if (!isVisible || !currentMessage) {
       return null;
     }
+    const position = currentMessage.position ?? defaultPosition;
+    const isTop = position === "top";
+    const isBottom = position === "bottom";
     const type = currentMessage.type ?? "default";
     const typeColors = COLORS[type];
     const backgroundColor = currentMessage.backgroundColor ?? typeColors.background;
@@ -457,13 +583,13 @@ var FlashMessage = React.forwardRef(
     const renderIcon = () => {
       if (currentMessage.icon === "none") return null;
       if (typeof currentMessage.icon === "function") {
-        return /* @__PURE__ */ jsx(View, { style: styles2.iconContainer, children: currentMessage.icon({ size: 22, color: textColor }) });
+        return /* @__PURE__ */ jsx(View, { style: styles2.iconContainer, children: /* @__PURE__ */ jsx(View, { style: styles2.iconBadge, children: currentMessage.icon({ size: 18, color: textColor }) }) });
       }
       if (React.isValidElement(currentMessage.icon)) {
-        return /* @__PURE__ */ jsx(View, { style: styles2.iconContainer, children: currentMessage.icon });
+        return /* @__PURE__ */ jsx(View, { style: styles2.iconContainer, children: /* @__PURE__ */ jsx(View, { style: styles2.iconBadge, children: currentMessage.icon }) });
       }
       const iconType = typeof currentMessage.icon === "string" ? currentMessage.icon : type;
-      return /* @__PURE__ */ jsx(View, { style: styles2.iconContainer, children: /* @__PURE__ */ jsx(BuiltInIcon, { type: iconType, color: textColor, size: 22 }) });
+      return /* @__PURE__ */ jsx(View, { style: styles2.iconContainer, children: /* @__PURE__ */ jsx(View, { style: styles2.iconBadge, children: /* @__PURE__ */ jsx(BuiltInIcon, { type: iconType, color: textColor, size: 18 }) }) });
     };
     const handlePress = () => {
       if (currentMessage.onPress) {
@@ -501,6 +627,16 @@ var FlashMessage = React.forwardRef(
                 Pressable,
                 {
                   onPress: handlePress,
+                  onPressIn: () => {
+                    if (currentMessage.pauseOnPress ?? true) {
+                      pauseTimer();
+                    }
+                  },
+                  onPressOut: () => {
+                    if (currentMessage.pauseOnPress ?? true) {
+                      resumeTimer();
+                    }
+                  },
                   onLongPress: currentMessage.onLongPress,
                   style: styles2.contentWrapper,
                   children: [