@hero-design/rn 8.78.0-alpha.1 → 8.78.0-alpha.3

package/es/index.js

@@ -9718,17 +9718,25 @@ var BottomSheet = function BottomSheet(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     internalShowDivider = _useState4[0],
     setInternalShowDivider = _useState4[1];
-  var canCallOnDismiss = useRef(false);
   useEffect(function () {
-    // Prevent calling onDismiss when the component has not yet opened
-    if (open && !canCallOnDismiss.current) {
-      canCallOnDismiss.current = true;
-    }
     // Show the modal before the open animation start
     if (open && !visible) {
       setVisibility(open);
     }
-  }, [open, visible]);
+    // Delay closing the modal until after the closing animation end
+    animatedValue.current.removeAllListeners();
+    animatedValue.current.addListener(function (_ref2) {
+      var value = _ref2.value;
+      var endValueOfTransition = open ? 1 : 0;
+      if (endValueOfTransition === 0 && value === endValueOfTransition) {
+        setVisibility(false);
+        onDismiss === null || onDismiss === void 0 || onDismiss();
+      }
+    });
+    return function () {
+      return animatedValue.current.removeAllListeners();
+    };
+  }, [open]);
   // Animation
   useEffect(function () {
     var animation = Animated.timing(animatedValue.current, {
@@ -9736,17 +9744,11 @@ var BottomSheet = function BottomSheet(_ref) {
       easing: Easing.inOut(Easing.cubic),
       useNativeDriver: true
     });
-    animation.start(function () {
-      if (!open && canCallOnDismiss.current) {
-        setVisibility(false);
-        onDismiss === null || onDismiss === void 0 || onDismiss();
-      }
-      onAnimationEnd === null || onAnimationEnd === void 0 || onAnimationEnd();
-    });
+    animation.start(onAnimationEnd);
     return function () {
       return animation.stop();
     };
-  }, [open, onDismiss, onAnimationEnd]);
+  }, [open]);
   var interpolateY = animatedValue.current.interpolate({
     inputRange: [0, 1],
     outputRange: [height, 0]

package/lib/index.js

@@ -9745,17 +9745,25 @@ var BottomSheet = function BottomSheet(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     internalShowDivider = _useState4[0],
     setInternalShowDivider = _useState4[1];
-  var canCallOnDismiss = React.useRef(false);
   React.useEffect(function () {
-    // Prevent calling onDismiss when the component has not yet opened
-    if (open && !canCallOnDismiss.current) {
-      canCallOnDismiss.current = true;
-    }
     // Show the modal before the open animation start
     if (open && !visible) {
       setVisibility(open);
     }
-  }, [open, visible]);
+    // Delay closing the modal until after the closing animation end
+    animatedValue.current.removeAllListeners();
+    animatedValue.current.addListener(function (_ref2) {
+      var value = _ref2.value;
+      var endValueOfTransition = open ? 1 : 0;
+      if (endValueOfTransition === 0 && value === endValueOfTransition) {
+        setVisibility(false);
+        onDismiss === null || onDismiss === void 0 || onDismiss();
+      }
+    });
+    return function () {
+      return animatedValue.current.removeAllListeners();
+    };
+  }, [open]);
   // Animation
   React.useEffect(function () {
     var animation = reactNative.Animated.timing(animatedValue.current, {
@@ -9763,17 +9771,11 @@ var BottomSheet = function BottomSheet(_ref) {
       easing: reactNative.Easing.inOut(reactNative.Easing.cubic),
       useNativeDriver: true
     });
-    animation.start(function () {
-      if (!open && canCallOnDismiss.current) {
-        setVisibility(false);
-        onDismiss === null || onDismiss === void 0 || onDismiss();
-      }
-      onAnimationEnd === null || onAnimationEnd === void 0 || onAnimationEnd();
-    });
+    animation.start(onAnimationEnd);
     return function () {
       return animation.stop();
     };
-  }, [open, onDismiss, onAnimationEnd]);
+  }, [open]);
   var interpolateY = animatedValue.current.interpolate({
     inputRange: [0, 1],
     outputRange: [height, 0]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.78.0-alpha.1",
+  "version": "8.78.0-alpha.3",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -93,6 +93,5 @@
     "ts-jest": "^29.1.1",
     "typescript": "4.8.4"
   },
-  "prettier": "prettier-config-hd",
-  "react-native": "src/index.ts"
+  "prettier": "prettier-config-hd"
 }

package/src/components/BottomSheet/index.tsx

@@ -115,19 +115,25 @@ const BottomSheet = ({
   const animatedValue = useRef(new Animated.Value(open ? 0 : 1));
   const [internalShowDivider, setInternalShowDivider] =
     useState<boolean>(showDivider);
-  const canCallOnDismiss = useRef(false);
 
   useEffect(() => {
-    // Prevent calling onDismiss when the component has not yet opened
-    if (open && !canCallOnDismiss.current) {
-      canCallOnDismiss.current = true;
-    }
-
     // Show the modal before the open animation start
     if (open && !visible) {
       setVisibility(open);
     }
-  }, [open, visible]);
+
+    // Delay closing the modal until after the closing animation end
+    animatedValue.current.removeAllListeners();
+    animatedValue.current.addListener(({ value }) => {
+      const endValueOfTransition = open ? 1 : 0;
+      if (endValueOfTransition === 0 && value === endValueOfTransition) {
+        setVisibility(false);
+        onDismiss?.();
+      }
+    });
+
+    return () => animatedValue.current.removeAllListeners();
+  }, [open]);
 
   // Animation
   useEffect(() => {
@@ -137,17 +143,10 @@ const BottomSheet = ({
       useNativeDriver: true,
     });
 
-    animation.start(() => {
-      if (!open && canCallOnDismiss.current) {
-        setVisibility(false);
-        onDismiss?.();
-      }
-
-      onAnimationEnd?.();
-    });
+    animation.start(onAnimationEnd);
 
     return () => animation.stop();
-  }, [open, onDismiss, onAnimationEnd]);
+  }, [open]);
 
   const interpolateY = animatedValue.current.interpolate({
     inputRange: [0, 1],