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

package/dist/index.d.mts

@@ -183,6 +183,14 @@ declare const styles: {
         justifyContent: "center";
         alignItems: "center";
     };
+    iconBadge: {
+        width: number;
+        height: number;
+        borderRadius: number;
+        backgroundColor: string;
+        justifyContent: "center";
+        alignItems: "center";
+    };
     textContainer: {
         flex: number;
         justifyContent: "center";
@@ -191,6 +199,7 @@ declare const styles: {
         fontSize: number;
         fontWeight: "600";
         letterSpacing: number;
+        lineHeight: number;
         color: string;
     };
     descriptionText: {
@@ -206,10 +215,12 @@ declare const styles: {
         paddingVertical: number;
         borderRadius: number;
         backgroundColor: string;
+        borderWidth: number;
+        borderColor: string;
     };
     actionButtonText: {
         fontSize: number;
-        fontWeight: "700";
+        fontWeight: "600";
         color: string;
     };
     progressBarContainer: {

package/dist/index.d.ts

@@ -183,6 +183,14 @@ declare const styles: {
         justifyContent: "center";
         alignItems: "center";
     };
+    iconBadge: {
+        width: number;
+        height: number;
+        borderRadius: number;
+        backgroundColor: string;
+        justifyContent: "center";
+        alignItems: "center";
+    };
     textContainer: {
         flex: number;
         justifyContent: "center";
@@ -191,6 +199,7 @@ declare const styles: {
         fontSize: number;
         fontWeight: "600";
         letterSpacing: number;
+        lineHeight: number;
         color: string;
     };
     descriptionText: {
@@ -206,10 +215,12 @@ declare const styles: {
         paddingVertical: number;
         borderRadius: number;
         backgroundColor: string;
+        borderWidth: number;
+        borderColor: string;
     };
     actionButtonText: {
         fontSize: number;
-        fontWeight: "700";
+        fontWeight: "600";
         color: string;
     };
     progressBarContainer: {

package/dist/index.js

@@ -63,43 +63,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__ */ jsxRuntime.jsx(reactNative.View, { style: containerStyle, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles.symbol, { color, fontSize: size * 0.65 }], children: "\u2713" }) });
-    case "danger":
-      return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: containerStyle, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles.symbol, { color, fontSize: size * 0.65 }], children: "\u2715" }) });
-    case "warning":
-      return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: containerStyle, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles.symbol, { color, fontSize: size * 0.65 }], children: "!" }) });
-    case "info":
-      return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: containerStyle, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.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__ */ jsxRuntime.jsx(reactNative.View, { style: [styles.center, { width: size, height: size }], children: /* @__PURE__ */ jsxRuntime.jsx(
+        reactNative.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__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles.center, { width: size, height: size }], children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.View,
+          {
+            style: [
+              styles.crossBar,
+              {
+                width: crossLength,
+                height: crossThickness,
+                backgroundColor: color,
+                borderRadius: crossThickness / 2,
+                transform: [{ rotate: "45deg" }]
+              }
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.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__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles.center, { width: size, height: size }], children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.View,
+          {
+            style: {
+              width: warnThickness,
+              height: size * 0.46,
+              backgroundColor: color,
+              borderRadius: warnThickness / 2,
+              marginBottom: size * 0.14
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.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__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles.center, { width: size, height: size }], children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.View,
+          {
+            style: {
+              width: infoDotSize,
+              height: infoDotSize,
+              borderRadius: infoDotSize / 2,
+              backgroundColor: color,
+              marginBottom: size * 0.14
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.View,
+          {
+            style: {
+              width: infoThickness,
+              height: size * 0.46,
+              backgroundColor: color,
+              borderRadius: infoThickness / 2
+            }
+          }
+        )
+      ] });
+    }
     case "default":
-    default:
-      return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: containerStyle, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles.symbol, { color, fontSize: size * 0.6 }], children: "\u25CF" }) });
+    default: {
+      const defaultDot = size * 0.44;
+      return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles.center, { width: size, height: size }], children: /* @__PURE__ */ jsxRuntime.jsx(
+        reactNative.View,
+        {
+          style: {
+            width: defaultDot,
+            height: defaultDot,
+            borderRadius: defaultDot / 2,
+            backgroundColor: color
+          }
+        }
+      ) });
+    }
   }
 };
 var styles = reactNative.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 = {
@@ -162,22 +266,22 @@ var styles2 = reactNative.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: reactNative.StyleSheet.hairlineWidth,
-    borderColor: "rgba(255, 255, 255, 0.15)"
+    borderRadius: 16,
+    borderWidth: 1,
+    borderColor: "rgba(255, 255, 255, 0.16)"
   },
   edgeToEdgeContainer: {
     marginHorizontal: 0,
@@ -187,7 +291,7 @@ var styles2 = reactNative.StyleSheet.create({
     flex: 1,
     flexDirection: "row",
     alignItems: "center",
-    paddingVertical: 14,
+    paddingVertical: 13,
     paddingHorizontal: 16
   },
   iconContainer: {
@@ -195,6 +299,14 @@ var styles2 = reactNative.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"
@@ -203,25 +315,28 @@ var styles2 = reactNative.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: {
@@ -230,11 +345,11 @@ var styles2 = reactNative.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() {
@@ -276,6 +391,7 @@ var FlashMessage = React__default.default.forwardRef(
     } = props;
     const [currentMessage, setCurrentMessage] = React.useState(null);
     const [isVisible, setIsVisible] = React.useState(false);
+    const currentMessageRef = React.useRef(null);
     const translateY = React.useRef(new reactNative.Animated.Value(-150)).current;
     const opacity = React.useRef(new reactNative.Animated.Value(0)).current;
     const progress = React.useRef(new reactNative.Animated.Value(1)).current;
@@ -284,9 +400,6 @@ var FlashMessage = React__default.default.forwardRef(
     const remainingTimeRef = React.useRef(0);
     const timerStartedAtRef = React.useRef(0);
     const safeInsets = getDefaultSafeAreaInsets();
-    const position = currentMessage?.position ?? defaultPosition;
-    const isTop = position === "top";
-    const isBottom = position === "bottom";
     const clearTimers = React.useCallback(() => {
       if (hideTimeoutRef.current) {
         clearTimeout(hideTimeoutRef.current);
@@ -300,7 +413,8 @@ var FlashMessage = React__default.default.forwardRef(
     const animateHide = React.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;
         reactNative.Animated.parallel([
           reactNative.Animated.timing(translateY, {
             toValue: targetY,
@@ -314,14 +428,16 @@ var FlashMessage = React__default.default.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 = React.useCallback(
       (durationMs) => {
@@ -334,7 +450,6 @@ var FlashMessage = React__default.default.forwardRef(
           toValue: 0,
           duration: durationMs,
           useNativeDriver: false
-          // width needs layout or scaleX
         });
         progressAnimationRef.current.start();
         hideTimeoutRef.current = setTimeout(() => {
@@ -362,6 +477,7 @@ var FlashMessage = React__default.default.forwardRef(
     const show = React.useCallback(
       (options) => {
         clearTimers();
+        currentMessageRef.current = options;
         setCurrentMessage(options);
         setIsVisible(true);
         const pos = options.position ?? defaultPosition;
@@ -387,55 +503,62 @@ var FlashMessage = React__default.default.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 = React.useRef(show);
+    const animateHideRef = React.useRef(animateHide);
+    showRef.current = show;
+    animateHideRef.current = animateHide;
     React.useImperativeHandle(
       ref,
       () => ({
-        showMessage: show,
-        hideMessage: () => animateHide()
+        showMessage: (options) => showRef.current(options),
+        hideMessage: () => animateHideRef.current()
       }),
-      [show, animateHide]
+      []
     );
     React.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 = React.useRef(
       reactNative.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 {
             reactNative.Animated.spring(translateY, {
@@ -444,7 +567,7 @@ var FlashMessage = React__default.default.forwardRef(
               friction: 8,
               useNativeDriver: true
             }).start();
-            if (currentMessage?.pauseOnPress ?? true) {
+            if (currentMessageRef.current?.pauseOnPress ?? true) {
               resumeTimer();
             }
           }
@@ -454,6 +577,9 @@ var FlashMessage = React__default.default.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;
@@ -465,13 +591,13 @@ var FlashMessage = React__default.default.forwardRef(
     const renderIcon = () => {
       if (currentMessage.icon === "none") return null;
       if (typeof currentMessage.icon === "function") {
-        return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles2.iconContainer, children: currentMessage.icon({ size: 22, color: textColor }) });
+        return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles2.iconContainer, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles2.iconBadge, children: currentMessage.icon({ size: 18, color: textColor }) }) });
       }
       if (React__default.default.isValidElement(currentMessage.icon)) {
-        return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles2.iconContainer, children: currentMessage.icon });
+        return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles2.iconContainer, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles2.iconBadge, children: currentMessage.icon }) });
       }
       const iconType = typeof currentMessage.icon === "string" ? currentMessage.icon : type;
-      return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles2.iconContainer, children: /* @__PURE__ */ jsxRuntime.jsx(BuiltInIcon, { type: iconType, color: textColor, size: 22 }) });
+      return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles2.iconContainer, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles2.iconBadge, children: /* @__PURE__ */ jsxRuntime.jsx(BuiltInIcon, { type: iconType, color: textColor, size: 18 }) }) });
     };
     const handlePress = () => {
       if (currentMessage.onPress) {
@@ -509,6 +635,16 @@ var FlashMessage = React__default.default.forwardRef(
                 reactNative.Pressable,
                 {
                   onPress: handlePress,
+                  onPressIn: () => {
+                    if (currentMessage.pauseOnPress ?? true) {
+                      pauseTimer();
+                    }
+                  },
+                  onPressOut: () => {
+                    if (currentMessage.pauseOnPress ?? true) {
+                      resumeTimer();
+                    }
+                  },
                   onLongPress: currentMessage.onLongPress,
                   style: styles2.contentWrapper,
                   children: [