@xhsreds/reds-rn-next 0.2.7 → 0.2.8

package/src/components/Popover/demo/index.tsx

@@ -1,6 +1,6 @@
-import React, { useEffect, useState } from "react";
-import { View, StyleSheet, Text, InteractionManager } from "react-native";
-import { Popover, Button, PopoverType, Icon } from "@xhs/reds-rn-next";
+import React, { useEffect, useState, useRef } from "react";
+import { View, StyleSheet, Text, ScrollView } from "react-native";
+import { Popover, Button, Icon, PortalProvider } from "@xhs/reds-rn-next";
 
 const styles = StyleSheet.create({
   container: {
@@ -8,6 +8,7 @@ const styles = StyleSheet.create({
     justifyContent: "center",
     paddingTop: 100,
     paddingBottom: 100,
+    backgroundColor: "lightgreen",
   },
   center: {
     display: "flex",
@@ -32,117 +33,129 @@ export default function App() {
 
   const [visible, setVisible] = useState(false);
 
-  const [visible2, setVisible2] = useState(false);
+  const [scrollHeight, setScrollHeight] = useState(0);
+
+  const handleScroll = (e: any) => {
+    const offset = e.nativeEvent.contentOffset.y;
+    setScrollHeight(offset);
+  };
   return (
     <View style={styles.container}>
-      <View
-        onLayout={(e) => {
-          console.log("View", e.nativeEvent.layout);
-        }}
-      >
-        <Popover content={content} placement="top-start" opacity={0.4}>
-          <Button>{"点击触发，无遮罩，再次点击关闭"}</Button>
-        </Popover>
-      </View>
-      <Br />
-      <Popover mode={"dark"} content={content} placement={"top"} opacity={0.4}>
-        <Button>{"暗黑模式"}</Button>
-      </Popover>
-
-      <Br />
-
-      <View
-        style={{
-          display: "flex",
-          flexDirection: "row",
-          justifyContent: "center",
-          alignItems: "center",
-          height: 50,
-        }}
-        onLayout={(e) => {
-          console.log("View", e.nativeEvent.layout);
-        }}
+      <ScrollView
+        onScroll={(e) => handleScroll(e)}
+        scrollEventThrottle={16}
+        contentContainerStyle={{ backgroundColor: "pink" }}
       >
-        <Text>嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻</Text>
-        <Popover content={content} placement={"top-start"} opacity={0.4}>
-          <Button>{"flex包裹的popover"}</Button>
-        </Popover>
-      </View>
-      <Br />
-
-      <View style={styles.center}>
-        <Popover content={content} placement={"bottom-start"} opacity={0.4}>
-          <Icon
-            icon={"https://picasso-static.xiaohongshu.com/fe-platform/3dabf74f0207cdb78ddc35730921d77c9d9bc99c.png"}
-            size={16}
-          />
+        <View
+          onLayout={(e) => {
+            console.log("View", e.nativeEvent.layout);
+          }}
+        >
+          <Popover content={content} placement="top-start" opacity={0.4}>
+            <Button>{"点击触发，无遮罩，再次点击关闭"}</Button>
+          </Popover>
+        </View>
+        <Br />
+        <Popover mode={"dark"} content={content} placement={"top"} opacity={0.4}>
+          <Button>{"暗黑模式"}</Button>
         </Popover>
-      </View>
-
-      <View style={styles.center}>
-        <Popover content={content} placement={"bottom"}>
-          <Icon
-            icon={"https://picasso-static.xiaohongshu.com/fe-platform/3dabf74f0207cdb78ddc35730921d77c9d9bc99c.png"}
-            size={40}
-          />
+
+        <Br />
+
+        <View
+          style={{
+            display: "flex",
+            flexDirection: "row",
+            justifyContent: "center",
+            alignItems: "center",
+            height: 50,
+          }}
+          onLayout={(e) => {
+            console.log("View", e.nativeEvent.layout);
+          }}
+        >
+          <Text>嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻</Text>
+          <Popover content={content} placement={"top-end"} opacity={0.4}>
+            <Button>{"flex包裹的popover"}</Button>
+          </Popover>
+        </View>
+        <Br />
+
+        <View style={styles.center}>
+          <Popover content={content} placement={"bottom-start"} opacity={0.4}>
+            <Icon
+              icon={"https://picasso-static.xiaohongshu.com/fe-platform/3dabf74f0207cdb78ddc35730921d77c9d9bc99c.png"}
+              size={16}
+            />
+          </Popover>
+        </View>
+
+        <View style={styles.center}>
+          <Popover content={content} placement={"bottom"}>
+            <Icon
+              icon={"https://picasso-static.xiaohongshu.com/fe-platform/3dabf74f0207cdb78ddc35730921d77c9d9bc99c.png"}
+              size={40}
+            />
+          </Popover>
+        </View>
+        <Br />
+
+        <Popover opacity={0.3} content={content}>
+          <Button>{"有遮罩"}</Button>
         </Popover>
-      </View>
-      <Br />
 
-      <Popover opacity={0.3} content={content}>
-        <Button>{"有遮罩"}</Button>
-      </Popover>
+        <Br />
 
-      <Br />
+        <Popover trigger={"touch"} content={content}>
+          <Button>{"触摸触发"}</Button>
+        </Popover>
 
-      <Popover trigger={"touch"} content={content}>
-        <Button>{"触摸触发"}</Button>
-      </Popover>
+        <Br />
 
-      <Br />
+        <Popover content={content} popContainerStyle={{ backgroundColor: "#123fe1" }}>
+          <Button>{"自定义容器样式"}</Button>
+        </Popover>
+        <Br />
 
-      <Popover
-        content={content}
-        popContainerStyle={{ backgroundColor: "#123fe1" }}
-        arrowStyles={{ borderBottomColor: "#123fe1" }}
-      >
-        <Button>{"自定义容器样式"}</Button>
-      </Popover>
-      <Br />
-
-      <Popover
-        visible={visible}
-        isControl={true}
-        opacity={0}
-        onClickMask={() => setVisible(false)}
-        content={() => (
-          <View style={{}}>
-            <Button
-              onClick={() => {
-                setVisible(false);
-              }}
-            >
-              {"AAA"}
-            </Button>
-            <Button
-              onClick={() => {
-                setVisible(false);
-              }}
-            >
-              {"BBB"}
-            </Button>
-          </View>
-        )}
-      >
-        <Button
-          onClick={() => {
-            setVisible(true);
-          }}
+        <Popover
+          visible={visible}
+          isControl={true}
+          opacity={0}
+          onClickMask={() => setVisible(false)}
+          content={() => (
+            <View style={{}}>
+              <Button
+                onClick={() => {
+                  setVisible(false);
+                }}
+              >
+                {"AAA"}
+              </Button>
+              <Button
+                onClick={() => {
+                  setVisible(false);
+                }}
+              >
+                {"BBB"}
+              </Button>
+            </View>
+          )}
         >
-          {"自定义组件,受控模式"}
-        </Button>
-      </Popover>
-      <Br height={100} />
+          <Button
+            onClick={() => {
+              setVisible(true);
+            }}
+          >
+            {"自定义组件,受控模式"}
+          </Button>
+        </Popover>
+        <Br />
+
+        <Popover offset={{ x: 0, y: scrollHeight }} content={content} placement="top" opacity={0.4}>
+          <Button>{"传入偏离offset"}</Button>
+        </Popover>
+        <Br height={800} />
+      </ScrollView>
     </View>
   );
 }

package/src/components/Popover/doc/index.mdx

@@ -8,22 +8,23 @@ import BaseDemo from "!!raw-loader!../demo/index.tsx";
 
 ### Props
 
-| 属性              | 描述                   | 类型                                                                                                | 默认值    |
-| ----------------- | ---------------------- | --------------------------------------------------------------------------------------------------- | --------- |
-| visible           | 是否显示气泡           | boolean                                                                                             | undefined |
-| placement         | 气泡方向               | "top-start" | "top" | "top-end" | "bottom-start" | "bottom" | "bottom-end" | top       |
-| content           | 弹出内容               | ReactNode | (() => ReactNode)                                                                  |           |
-| opacity           | 遮罩透明度             | number                                                                                              | 0         |
-| mode              | 主题色                 | "light" | "dark"                                                                               |           |
-| trigger           | 触发方式               | "click" | "touch"                                                                              | click     |
-| zIndex            | 层级                   | number                                                                                              | 1000      |
-| floatingPadding   | 气泡最小边距           | number                                                                                              | 20        |
-| popContainerStyle | 气泡框的样式           | ViewStyle                                                                                           | `{}`      |
-| closeOnClickAgain | 再次点击关闭           | boolean                                                                                             | true      |
-| children          | popover 作用的目标节点 | ReactNode                                                                                           |           |
-| floatingStyles    | floating style         | ViewStyle                                                                                           | `{}`      |
-| arrowStyles       | arrow style            | ViewStyle                                                                                           | `{}`      |
-| isControl         | 是否受控               | boolean                                                                                             | false     |
+| 属性              | 描述                                    | 类型                                                                                                | 默认值          |
+| ----------------- | --------------------------------------- | --------------------------------------------------------------------------------------------------- | --------------- |
+| visible           | 是否显示气泡                            | boolean                                                                                             | undefined       |
+| placement         | 气泡方向                                | "top-start" | "top" | "top-end" | "bottom-start" | "bottom" | "bottom-end" | top             |
+| content           | 弹出内容                                | ReactNode | (() => ReactNode)                                                                  |                 |
+| opacity           | 遮罩透明度                              | number                                                                                              | 0               |
+| mode              | 主题色                                  | "light" | "dark"                                                                               |                 |
+| trigger           | 触发方式                                | "click" | "touch"                                                                              | click           |
+| zIndex            | 层级                                    | number                                                                                              | 1000            |
+| floatingPadding   | 气泡最小边距                            | number                                                                                              | 20              |
+| popContainerStyle | 气泡框的样式                            | ViewStyle                                                                                           | `{}`            |
+| closeOnClickAgain | 再次点击关闭                            | boolean                                                                                             | true            |
+| children          | popover 作用的目标节点                  | ReactNode                                                                                           |                 |
+| floatingStyles    | floating style                          | ViewStyle                                                                                           | `{}`            |
+| arrowStyles       | arrow style                             | ImageStyle                                                                                          | `{}`            |
+| isControl         | 是否受控                                | boolean                                                                                             | false           |
+| offset            | 气泡偏移位置 提供给页面滚动后偏移量计算 | Offset                                                                                              | `{"x":0,"y":0}` |
 
 ### Events
 

package/src/components/Popover/interface/index.ts

@@ -1,5 +1,9 @@
 import { ReactNode } from "react";
-import { GestureResponderEvent, RegisteredStyle, ViewStyle } from "react-native";
+import { GestureResponderEvent, ImageStyle, ViewStyle } from "react-native";
+interface Offset {
+  x: number;
+  y: number;
+}
 export interface RedsPopover {
   visible?: boolean;
   placement?: "top-start" | "top" | "top-end" | "bottom-start" | "bottom" | "bottom-end";
@@ -15,8 +19,9 @@ export interface RedsPopover {
   onClickMask?: (evnet: GestureResponderEvent) => void;
   onVisibleChange?: (value: boolean) => void;
   floatingStyles?: ViewStyle;
-  arrowStyles?: ViewStyle;
+  arrowStyles?: ImageStyle;
   isControl?: boolean;
+  offset?: Offset;
 }
 
 export interface RedsPopoverEvent {}
@@ -33,4 +38,5 @@ export const PopoverDefaultProps = {
   floatingStyles: {},
   arrowStyles: {},
   isControl: false,
+  offset: { x: 0, y: 0 },
 };

package/src/components/Portal/demo/usePortal.Demo.tsx

@@ -43,6 +43,20 @@ const Demo = () => {
         }}
       >
         <Text style={{ color: "white" }}>这是一个测试组件2</Text>
+        <Button
+          onClick={() => {
+            addPortal(
+              "组件2",
+              <View style={{ height: 100, width: 100, backgroundColor: "lightgreen", position: "absolute" }}>
+                <Text style={{ color: "white" }}>
+                  这是一个测试组件2，函数式调用必须在 PortalProvider 的子组件中使用 usePortal
+                </Text>
+              </View>,
+            );
+          }}
+        >
+          添加modal
+        </Button>
       </View>
     </View>
   );

package/src/components/ProgressIndicator/ProgressIndicator.tsx

@@ -87,18 +87,18 @@ const ProgressIndicator = (props: RedsProgressIndicator) => {
       return (
         <>
           {showPercent && <Text style={[{ color: themeColor.Title }, textStyle]}>{formatText(percent)}</Text>}
-          <Lottie style={{ flex: 1 }} progress={progress} source={lottieSource} />
+          <Lottie style={{ flex: 1 }} progress={progress} source={props.lottieSource || lottieSource} />
         </>
       );
     }
     if (colorMode === "light") {
       return (
         <>
-          <Lottie style={{ flex: 1 }} useNativeLooping autoPlay loop source={lottieSource} />
+          <Lottie style={{ flex: 1 }} useNativeLooping autoPlay loop source={props.lottieSource || lottieSource} />
         </>
       );
     }
-    return <Lottie style={{ flex: 1 }} useNativeLooping autoPlay loop source={lottieSource} />;
+    return <Lottie style={{ flex: 1 }} useNativeLooping autoPlay loop source={props.lottieSource || lottieSource} />;
   }, [type, colorMode, percent, strokeColor]);
 
   return (

package/src/components/ProgressIndicator/doc/index.mdx

@@ -25,15 +25,16 @@ import ProgressDemo from "!!raw-loader!../demo/progress.tsx";
 
 ### Props
 
-| 属性        | 描述           | 类型                        | 默认值                                                        |
-| ----------- | -------------- | --------------------------- | ------------------------------------------------------------- |
-| percent     | 当前进度       | number                      | 0                                                             |
-| showPercent | 展示文字       | boolean                     | true                                                          |
-| textStyle   | 字体样式       | any                         |                                                               |
-| formatText  | 进度条文字函数 | (percent: number) => string | (percent: number) => (percent > 100 ? "100%" : percent + "%") |
-| size        | 进度条尺寸     | number                      |                                                               |
-| type        | 类型           | string                      | default                                                       |
-| strokeColor | 边框颜色       | string                      |                                                               |
-| strokeWidth | 边框宽度       | number                      |                                                               |
+| 属性         | 描述           | 类型                        | 默认值                                                        |
+| ------------ | -------------- | --------------------------- | ------------------------------------------------------------- |
+| percent      | 当前进度       | number                      | 0                                                             |
+| showPercent  | 展示文字       | boolean                     | true                                                          |
+| textStyle    | 字体样式       | any                         |                                                               |
+| formatText   | 进度条文字函数 | (percent: number) => string | (percent: number) => (percent > 100 ? "100%" : percent + "%") |
+| size         | 进度条尺寸     | number                      |                                                               |
+| type         | 类型           | string                      | default                                                       |
+| strokeColor  | 边框颜色       | string                      |                                                               |
+| strokeWidth  | 边框宽度       | number                      |                                                               |
+| lottieSource | lottie自定义   | string                      |                                                               |
 
 ### Events

package/src/components/ProgressIndicator/interface/index.ts

@@ -9,6 +9,7 @@ export interface RedsProgressIndicator {
   type?: string;
   strokeColor?: string;
   strokeWidth?: number;
+  lottieSource?: string;
 }
 
 export interface RedsProgressIndicatorEvent {}

package/src/components/Radio/Radio.tsx

@@ -1,4 +1,4 @@
-import React, { memo, forwardRef, useCallback, useContext, useState, useEffect } from "react";
+import React, { memo, useCallback, useContext, useState, useEffect } from "react";
 import { View, Text, TouchableWithoutFeedback } from "react-native";
 import { RedsRadio, RadioDefaultProps } from "./interface";
 import { RadioGroupContext } from "./RadioGroup";
@@ -15,7 +15,7 @@ import { useThemeColor } from "../ConfigProvider";
 import { Icon, IconType } from "../../index";
 import useMounted from "../../pvCount/useUnmountedProcess";
 
-const Radio = forwardRef<View, RedsRadio>((props, ref) => {
+const Radio = (props: RedsRadio) => {
   useMounted("Radio");
   const finalProps = { ...(RadioDefaultProps as RedsRadio), ...props, isControl: props.isControl ?? true };
   // @ts-ignore
@@ -71,7 +71,7 @@ const Radio = forwardRef<View, RedsRadio>((props, ref) => {
               <Icon
                 icon={
                   props.customIcon ||
-                  "https://picasso-static.xiaohongshu.com/fe-platform/8f401b554b1f9a8be17dc1e8696254b41ab5a439.png"
+                  "https://picasso-static.xiaohongshu.com/fe-platform/48c06b6e09bcf1516a6ad071bacab6da505a2980.png"
                 }
                 size={iconSizeMap[size]}
                 styles={props.customIconStyle}
@@ -104,6 +104,6 @@ const Radio = forwardRef<View, RedsRadio>((props, ref) => {
       </TouchableWithoutFeedback>
     </>
   );
-});
+};
 
 export default memo(Radio);

package/src/components/Radio/demo/index.tsx

@@ -69,6 +69,13 @@ const App = () => {
           <Radio name="C">选项 C</Radio>
         </RadioGroup>
 
+        <Text style={[styles.title, { color: themeColor.Title }]}> line样式 </Text>
+        <RadioGroup value={value} size="large" onChange={handleChange} type={"line"}>
+          <Radio name="A">选项 A</Radio>
+          <Radio name="B">选项 B</Radio>
+          <Radio name="C">选项 C</Radio>
+        </RadioGroup>
+
         <Text style={[styles.title, { color: themeColor.Title }]}>排列方向 direction</Text>
         <RadioGroup value={directionValue} direction="vertical" onChange={setDirectionValue}>
           <Radio name="A">选项 A</Radio>

package/src/components/Rate/Rate.tsx

@@ -108,7 +108,7 @@ const Rate = (props: RedsRate) => {
     props.isControl && setRate(props.value || 0);
   }, []);
   return (
-    <View style={styles.container}>
+    <View style={[styles.container, props.disabled && styles.disabled]}>
       {props.pattern === RatePattern.Star ? (
         <>
           <View ref={rateWrapper} {...panResponder.panHandlers} style={styles.container}>

package/src/components/Rate/styles.ts

@@ -11,6 +11,9 @@ const styles = StyleSheet.create({
   rate: {
     marginRight: 10,
   },
+  disabled: {
+    opacity: 0.2,
+  },
 });
 
 export const getRateDescStyle = (themeColor: any) => {

package/src/components/Sheets/AnimatedSheets.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useMemo, useEffect } from "react";
+import React, { useState, useRef, useMemo, useEffect, useCallback } from "react";
 import { alwaysColor } from "@xhs/reds-token-next";
 import {
   View,
@@ -55,6 +55,13 @@ const Sheets = (props: RedsSheets) => {
    */
   const [sheetsHeight] = useState(new Animated.Value(0));
 
+  const [isDragging, setIsDragging] = useState(false);
+
+  /**
+   * Sheets容器位置动画
+   */
+  const [translateY] = useState(new Animated.Value(Dimensions.get("window").height));
+
   /**
    * Sheets容器child内容高度
    */
@@ -118,6 +125,7 @@ const Sheets = (props: RedsSheets) => {
    * @param evt LayoutChangeEvent
    */
   const handleLayout = (evt: LayoutChangeEvent) => {
+    if (isDragging) return;
     const { height } = evt.nativeEvent.layout;
     setChildHeight(height);
   };
@@ -140,39 +148,63 @@ const Sheets = (props: RedsSheets) => {
     setLabelHeight(height);
   };
 
+  // 添加动画显示和隐藏的函数
+  const animateIn = (height: number) => {
+    Animated.timing(translateY, {
+      toValue: height, // 移动到目标位置（顶部）
+      useNativeDriver: false,
+    }).start();
+  };
+
+  const animateOut = () => {
+    Animated.timing(translateY, {
+      toValue: Dimensions.get("window").height, // 移动到屏幕底部
+      useNativeDriver: false,
+    }).start((data) => {
+      if (data.finished) {
+        sheetsHeight.setValue(0);
+      }
+    });
+  };
+
   /**
    * 外层容器高度变化
    */
   useEffect(() => {
-    const factHeight = actionHeight + labelHeight + childHeight + 34;
-    const fullScreenHeight = Dimensions.get("screen").height - 34;
-    const halfScreenHeight = Math.floor(fullScreenHeight / 2) - 34;
-    const threeQuaterScreenHeight = Math.floor(fullScreenHeight * 0.75) - 34;
+    if (isDragging) return;
+    const factHeight = actionHeight + labelHeight + childHeight;
+    const fullScreenHeight = Dimensions.get("screen").height;
+    const halfScreenHeight = Math.floor(fullScreenHeight / 2);
+    const threeQuaterScreenHeight = Math.floor(fullScreenHeight * 0.75);
     const calculateHeight =
       sheetsType !== SheetsType.dragable
         ? size === SheetsSize.auto
-          ? factHeight
+          ? Math.min(fullScreenHeight, factHeight)
           : size === SheetsSize.half
-            ? halfScreenHeight
+            ? Math.min(halfScreenHeight, factHeight)
             : size === SheetsSize.threeQuater
-              ? threeQuaterScreenHeight
-              : fullScreenHeight
+              ? Math.min(threeQuaterScreenHeight, factHeight)
+              : Math.min(fullScreenHeight, factHeight)
         : factHeight;
     childHeightRef.current = calculateHeight;
     Animated.timing(sheetsHeight, {
-      toValue: calculateHeight,
+      toValue: calculateHeight || 34, // 初始触发子元素onLayout事件需要一个起始值
       duration: 100, // 动画持续时间 (毫秒)
       useNativeDriver: false, // `height` 不支持 useNativeDriver
     }).start();
-  }, [actionHeight, labelHeight, childHeight]);
+    if (visible) {
+      animateIn(0);
+    }
+  }, [actionHeight, labelHeight, childHeight, visible]);
 
   /**
    * 关闭容器取消动画
    * @param evt LayoutChangeEvent
    */
   const handleClose = () => {
-    Animated.timing(sheetsHeight, { toValue: 0, useNativeDriver: false }).start();
+    animateOut();
     sheetsHeight.setValue(0);
+    translateY.setValue(Dimensions.get("window").height);
   };
 
   /**
@@ -180,25 +212,43 @@ const Sheets = (props: RedsSheets) => {
    */
   const panResponder = useRef(
     PanResponder.create({
-      onMoveShouldSetPanResponder: () => true,
-      onPanResponderMove: (event, gestureState) => {
-        if (sheetsType !== SheetsType.dragable) return;
-        const fullScreenHeight = Dimensions.get("screen").height - 34;
-        const halfScreenHeight = Math.floor(fullScreenHeight / 2) - 34;
-        const threeQuaterScreenHeight = Math.floor(fullScreenHeight * 0.75) - 34;
-        const maxHeight =
-          size === SheetsSize.auto
-            ? fullScreenHeight
-            : size === SheetsSize.half
-              ? halfScreenHeight
-              : size === SheetsSize.threeQuater
-                ? threeQuaterScreenHeight
-                : fullScreenHeight;
-        const newHeight = Math.min(
-          maxHeight,
-          Math.max(childHeightRef.current, childHeightRef.current - gestureState.dy),
-        );
-        sheetsHeight.setValue(newHeight);
+      onStartShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponder: () => sheetsType === SheetsType.dragable,
+      onPanResponderGrant: () => {
+        // Set dragging to true when drag starts
+        setIsDragging(true);
+      },
+      onPanResponderMove: useCallback(
+        (_: any, gestureState: any) => {
+          const fullScreenHeight = Dimensions.get("screen").height;
+          const halfScreenHeight = Math.floor(fullScreenHeight / 2);
+          const threeQuaterScreenHeight = Math.floor(fullScreenHeight * 0.75);
+          const maxHeight =
+            size === SheetsSize.auto
+              ? fullScreenHeight
+              : size === SheetsSize.half
+                ? halfScreenHeight
+                : size === SheetsSize.threeQuater
+                  ? threeQuaterScreenHeight
+                  : fullScreenHeight;
+          const newHeight = Math.min(
+            maxHeight,
+            Math.max(childHeightRef.current, childHeightRef.current - gestureState.dy),
+          );
+          Animated.spring(sheetsHeight, {
+            toValue: newHeight,
+            friction: 10, // Smoother movement
+            tension: 40, // More responsive
+            useNativeDriver: false,
+          }).start(() => {
+            sheetsHeight.setValue(newHeight);
+          });
+        },
+        [size, childHeightRef.current],
+      ),
+      onPanResponderRelease: () => {
+        // Set dragging to false when drag ends
+        setIsDragging(false);
       },
     }),
   ).current;
@@ -258,7 +308,13 @@ const Sheets = (props: RedsSheets) => {
       ) : (
         <></>
       )}
-      <Animated.View style={[styles.picker, { backgroundColor: themeColor.Bg2 }, { height: sheetsHeight }]}>
+      <Animated.View
+        style={[
+          styles.picker,
+          { backgroundColor: themeColor.Bg2 },
+          { height: sheetsHeight, transform: [{ translateY }] },
+        ]}
+      >
         {/** normal */}
         {showLabel ? (
           <View style={[styles.labelContainer, { backgroundColor: themeColor.Bg2 }]} onLayout={handleLabelLayout}>