dhre-ui-kit 0.0.210 → 0.0.212

package/lib/index.mjs

@@ -2222,7 +2222,7 @@ const styles$j = StyleSheet.create({
     flexDirection: "row",
     justifyContent: "space-between",
     paddingHorizontal: horizontalScale(16),
-    paddingTop: verticalScale(74),
+    paddingTop: Platform.OS === "ios" ? verticalScale(60) : verticalScale(44),
     paddingBottom: verticalScale(16),
     borderBottomWidth: 1
   },
@@ -4252,17 +4252,20 @@ const CustomSlideButton = React.forwardRef(
   }, ref) => {
     const value = useRef(0);
     const cardRef = useRef(null);
-    const pan = useRef(new Animated.Value(0)).current;
+    const [translateX] = useState(new Animated.Value(0));
     const slideTailCardRef = useRef(null);
     slideTailCardRef?.current?.setNativeProps({
       style: { width: 0 }
     });
     React.useImperativeHandle(ref, () => ({
       reset() {
-        Animated.spring(pan, {
+        Animated.spring(translateX, {
           toValue: 0,
           useNativeDriver: false
         }).start();
+        slideTailCardRef?.current?.setNativeProps({
+          style: { width: 0 }
+        });
       }
     }));
     const handleLayout = (event) => {
@@ -4275,44 +4278,40 @@ const CustomSlideButton = React.forwardRef(
         value.current = width;
       }
     };
-    const panResponder = useRef(
-      PanResponder.create({
-        onMoveShouldSetPanResponder: (evt, gestureState) => {
-          return gestureState.dx > 0;
-        },
-        onPanResponderGrant: () => {
-        },
-        onPanResponderMove: (evt, gestureState) => {
-          if (gestureState.dx < value.current - BUTTON_WIDTH) {
-            pan.setValue(gestureState.dx);
-            slideTailCardRef?.current?.setNativeProps({
-              style: { width: gestureState.dx + BUTTON_WIDTH / 2 }
-            });
-          }
-        },
-        onPanResponderRelease: (evt, gestureState) => {
-          if (gestureState.dx > value.current - BUTTON_WIDTH - 100) {
-            onComplete && onComplete();
-            Animated.spring(pan, {
-              toValue: value.current - BUTTON_WIDTH - 10,
-              useNativeDriver: false
-            }).start();
-            slideTailCardRef?.current?.setNativeProps({
-              style: { width: value.current + BUTTON_WIDTH }
-              // Change the width here
-            });
-          } else {
-            Animated.spring(pan, {
-              toValue: 0,
-              useNativeDriver: false
-            }).start();
-            slideTailCardRef?.current?.setNativeProps({
-              style: { width: 0 }
-            });
-          }
+    const panResponder = PanResponder.create({
+      onMoveShouldSetPanResponder: (e, gestureState) => {
+        return Math.abs(gestureState.dx) > Math.abs(gestureState.dy);
+      },
+      onPanResponderMove: (evt, gestureState) => {
+        translateX.setValue(gestureState.dx);
+        slideTailCardRef?.current?.setNativeProps({
+          style: { width: gestureState.dx + BUTTON_WIDTH / 2 }
+        });
+      },
+      onPanResponderRelease: (e, gestureState) => {
+        if (gestureState.dx >= value.current * 0.7) {
+          onComplete?.();
+          Animated.timing(translateX, {
+            toValue: value.current - BUTTON_WIDTH,
+            // Slide to the end
+            duration: 300,
+            useNativeDriver: false
+          }).start();
+          slideTailCardRef?.current?.setNativeProps({
+            style: { width: value.current + BUTTON_WIDTH }
+            // Change the width here
+          });
+        } else {
+          Animated.spring(translateX, {
+            toValue: 0,
+            useNativeDriver: false
+          }).start();
+          slideTailCardRef?.current?.setNativeProps({
+            style: { width: 0 }
+          });
         }
-      })
-    ).current;
+      }
+    });
     const { theme } = useTheme();
     return /* @__PURE__ */ React.createElement(View, { style: {
       ...styles$3.sliderContainer,
@@ -4322,7 +4321,7 @@ const CustomSlideButton = React.forwardRef(
       Animated.View,
       {
         ref: slideTailCardRef,
-        style: [{ height: "100%", backgroundColor: slideButtonTailColor }]
+        style: [{ height: "100%", width: 0, backgroundColor: slideButtonTailColor }]
       }
     ), /* @__PURE__ */ React.createElement(View, { style: styles$3.buttonTextContainer }, /* @__PURE__ */ React.createElement(
       CustomTypography,
@@ -4338,7 +4337,7 @@ const CustomSlideButton = React.forwardRef(
     )), /* @__PURE__ */ React.createElement(
       Animated.View,
       {
-        style: [styles$3.slider, { transform: [{ translateX: pan }] }],
+        style: [styles$3.slider, { transform: [{ translateX }] }],
         ...panResponder.panHandlers
       },
       /* @__PURE__ */ React.createElement(