diff --git a/.changeset/large-bulldogs-pull.md b/.changeset/large-bulldogs-pull.md
new file mode 100644
index 0000000000..b89be44992
--- /dev/null
+++ b/.changeset/large-bulldogs-pull.md
@@ -0,0 +1,6 @@
+---
+'@td-design/react-native-picker': patch
+'@td-design/react-native': patch
+---
+
+修复一些bug
diff --git a/packages/react-native-picker/src/components/DatePicker/index.tsx b/packages/react-native-picker/src/components/DatePicker/index.tsx
index 630c9f4c54..4ce8d1c054 100644
--- a/packages/react-native-picker/src/components/DatePicker/index.tsx
+++ b/packages/react-native-picker/src/components/DatePicker/index.tsx
@@ -23,22 +23,21 @@ const DatePicker: FC<
 
   const { values, cols } = getValueCols();
 
-  /** 生成日期picker */
-  const renderDateTimePicker = () => {
-    return cols.map((col, index) => {
-      return (
-        <WheelPicker
-          key={index}
-          {...restProps}
-          data={col}
-          value={values[index]}
-          onChange={itemValue => onValueChange(itemValue, index)}
-        />
-      );
-    });
-  };
-
-  return <Flex>{renderDateTimePicker()}</Flex>;
+  return (
+    <Flex>
+      {cols.map((col, index) => {
+        return (
+          <WheelPicker
+            key={index}
+            {...restProps}
+            data={col}
+            value={values[index]}
+            onChange={itemValue => onValueChange(itemValue, index)}
+          />
+        );
+      })}
+    </Flex>
+  );
 };
 
 export default React.memo(DatePicker, (p, n) => {
diff --git a/packages/react-native-picker/src/components/WheelPicker/WheelPickerItem.tsx b/packages/react-native-picker/src/components/WheelPicker/WheelPickerItem.tsx
index 2c92c397df..d562361d6c 100644
--- a/packages/react-native-picker/src/components/WheelPicker/WheelPickerItem.tsx
+++ b/packages/react-native-picker/src/components/WheelPicker/WheelPickerItem.tsx
@@ -1,13 +1,13 @@
 import React, { memo } from 'react';
 import { Animated, StyleSheet } from 'react-native';
 
-import { WhellPickerItemProps } from './type';
+import { WheelPickerItemProps } from './type';
 
 const opacityFunction = (val: number) => 1 / (1 + Math.abs(val));
 const scaleFunction = (val: number) => 1 - 0.1 * Math.abs(val);
 const rotationFunction = (val: number) => 20 * val;
 
-function WheelPickerItem({ textStyle, style, visibleRest, height, option, index, currentIndex }: WhellPickerItemProps) {
+function WheelPickerItem({ textStyle, style, visibleRest, height, option, index, currentIndex }: WheelPickerItemProps) {
   const relativeScrollIndex = Animated.subtract(index, currentIndex);
 
   const inputRange = [0];
diff --git a/packages/react-native-picker/src/components/WheelPicker/index.tsx b/packages/react-native-picker/src/components/WheelPicker/index.tsx
index ff0b52877a..564c727fa2 100644
--- a/packages/react-native-picker/src/components/WheelPicker/index.tsx
+++ b/packages/react-native-picker/src/components/WheelPicker/index.tsx
@@ -94,6 +94,21 @@ export default function WheelPicker({
     },
   });
 
+  const renderItem = useCallback(
+    ({ item: option, index }) => (
+      <WheelPickerItem
+        index={index}
+        option={option}
+        style={itemStyle}
+        textStyle={itemTextStyle}
+        height={itemHeight}
+        currentIndex={currentScrollIndex}
+        visibleRest={2}
+      />
+    ),
+    [itemStyle, itemTextStyle, itemHeight, currentScrollIndex]
+  );
+
   return (
     <View style={[styles.container, containerStyle]}>
       <View style={styles.selectedIndicator} />
@@ -116,17 +131,7 @@ export default function WheelPicker({
         })}
         data={paddedOptions}
         keyExtractor={(_, index) => index.toString()}
-        renderItem={({ item: option, index }) => (
-          <WheelPickerItem
-            index={index}
-            option={option}
-            style={itemStyle}
-            textStyle={itemTextStyle}
-            height={itemHeight}
-            currentIndex={currentScrollIndex}
-            visibleRest={2}
-          />
-        )}
+        renderItem={renderItem}
       />
     </View>
   );
diff --git a/packages/react-native-picker/src/components/WheelPicker/type.ts b/packages/react-native-picker/src/components/WheelPicker/type.ts
index bde2f4d214..9239513b6d 100644
--- a/packages/react-native-picker/src/components/WheelPicker/type.ts
+++ b/packages/react-native-picker/src/components/WheelPicker/type.ts
@@ -34,7 +34,7 @@ export interface WheelPickerProps extends WheelPickerPropsBase {
 }
 
 /** 滚轮选择器子项的属性 */
-export interface WhellPickerItemProps {
+export interface WheelPickerItemProps {
   textStyle: StyleProp<TextStyle>;
   style: StyleProp<ViewStyle>;
   option: OptionItem | null;
diff --git a/packages/react-native-picker/src/date-period-input/index.tsx b/packages/react-native-picker/src/date-period-input/index.tsx
index a0731e2755..afd04ef29e 100644
--- a/packages/react-native-picker/src/date-period-input/index.tsx
+++ b/packages/react-native-picker/src/date-period-input/index.tsx
@@ -1,6 +1,5 @@
 import React, { FC, ReactNode } from 'react';
 import { StyleSheet } from 'react-native';
-import Animated, { FadeInRight, FadeOutRight } from 'react-native-reanimated';
 
 import { Box, Flex, helpers, Pressable, SvgIcon, Text, useTheme } from '@td-design/react-native';
 import { useSafeState } from '@td-design/rn-hooks';
@@ -25,7 +24,6 @@ export interface DatePeriodInputProps
   disabled?: boolean;
 }
 
-const AnimatedTouchableIcon = Animated.createAnimatedComponent(Pressable);
 const { ONE_PIXEL } = helpers;
 
 /** 适用于筛选条件下的日期区间选择 */
@@ -70,23 +68,7 @@ const DatePeriodInput: FC<DatePeriodInputProps> = ({
     icon: { alignItems: 'flex-end' },
   });
 
-  const renderLabel = () => {
-    if (!!label)
-      return (
-        <Flex marginRight="x2" marginBottom="x1" alignItems="center">
-          {typeof label === 'string' ? (
-            <Text variant="p1" color="text">
-              {label}
-            </Text>
-          ) : (
-            label
-          )}
-        </Flex>
-      );
-    return null;
-  };
-
-  const renderContent1 = () => (
+  const BaseContent1 = (
     <>
       <Flex>
         <SvgIcon name="date" color={theme.colors.icon} />
@@ -95,20 +77,14 @@ const DatePeriodInput: FC<DatePeriodInputProps> = ({
         </Text>
       </Flex>
       {!disabled && allowClear && dates[0] && (
-        <AnimatedTouchableIcon
-          entering={FadeInRight}
-          exiting={FadeOutRight}
-          activeOpacity={1}
-          onPress={handleInputClear1}
-          style={styles.icon}
-        >
+        <Pressable activeOpacity={1} onPress={handleInputClear1} style={styles.icon}>
           <SvgIcon name="closecircleo" color={theme.colors.icon} />
-        </AnimatedTouchableIcon>
+        </Pressable>
       )}
     </>
   );
 
-  const renderContent2 = () => (
+  const BaseContent2 = (
     <>
       <Flex>
         <SvgIcon name="date" color={theme.colors.icon} />
@@ -117,38 +93,32 @@ const DatePeriodInput: FC<DatePeriodInputProps> = ({
         </Text>
       </Flex>
       {!disabled && allowClear && dates[1] && (
-        <AnimatedTouchableIcon
-          entering={FadeInRight}
-          exiting={FadeOutRight}
-          activeOpacity={1}
-          onPress={handleInputClear2}
-          style={styles.icon}
-        >
+        <Pressable activeOpacity={1} onPress={handleInputClear2} style={styles.icon}>
           <SvgIcon name="closecircleo" color={theme.colors.icon} />
-        </AnimatedTouchableIcon>
+        </Pressable>
       )}
     </>
   );
 
   const Content1 = disabled ? (
-    <Box style={styles.content}>{renderContent1()}</Box>
+    <Box style={styles.content}>{BaseContent1}</Box>
   ) : (
     <Pressable onPress={handleStartPress} activeOpacity={activeOpacity} style={styles.content}>
-      {renderContent1()}
+      {BaseContent1}
     </Pressable>
   );
 
   const Content2 = disabled ? (
-    <Box style={styles.content}>{renderContent2()}</Box>
+    <Box style={styles.content}>{BaseContent2}</Box>
   ) : (
     <Pressable onPress={handleEndPress} activeOpacity={activeOpacity} style={styles.content}>
-      {renderContent2()}
+      {BaseContent2}
     </Pressable>
   );
 
   return (
     <Box>
-      {renderLabel()}
+      <Label label={label} />
       <Flex
         justifyContent="space-between"
         alignItems="center"
@@ -182,3 +152,19 @@ const DatePeriodInput: FC<DatePeriodInputProps> = ({
 };
 
 export default DatePeriodInput;
+
+const Label = ({ label }: Pick<DatePeriodInputProps, 'label'>) => {
+  if (!!label)
+    return (
+      <Flex marginRight="x2" marginBottom="x1" alignItems="center">
+        {typeof label === 'string' ? (
+          <Text variant="p1" color="text">
+            {label}
+          </Text>
+        ) : (
+          label
+        )}
+      </Flex>
+    );
+  return null;
+};
diff --git a/packages/react-native-picker/src/date-picker-input/index.tsx b/packages/react-native-picker/src/date-picker-input/index.tsx
index 5015f87b4e..479edfaa67 100644
--- a/packages/react-native-picker/src/date-picker-input/index.tsx
+++ b/packages/react-native-picker/src/date-picker-input/index.tsx
@@ -1,6 +1,5 @@
 import React, { forwardRef, ReactNode } from 'react';
 import { StyleProp, StyleSheet, ViewStyle } from 'react-native';
-import Animated, { FadeInRight, FadeOutRight } from 'react-native-reanimated';
 
 import { Box, Flex, helpers, Pressable, SvgIcon, Text, useTheme } from '@td-design/react-native';
 
@@ -30,7 +29,6 @@ export interface DatePickerInputProps extends DatePickerPropsBase, Omit<ModalPic
   style?: StyleProp<ViewStyle>;
 }
 
-const AnimatedTouchableIcon = Animated.createAnimatedComponent(Pressable);
 const { ONE_PIXEL } = helpers;
 
 /** 适用于筛选条件下的日期选择 */
@@ -78,61 +76,51 @@ const DatePickerInput = forwardRef<PickerRef, DatePickerInputProps>(
       icon: { alignItems: 'flex-end' },
     });
 
-    const renderContent = () => {
-      if (!disabled)
-        return (
-          <Pressable
-            onPress={handlePress}
-            activeOpacity={activeOpacity}
-            style={[styles.content, style, labelPosition === 'top' ? styles.top : styles.left]}
-          >
-            <Flex flex={1}>
-              <SvgIcon name="date" color={theme.colors.icon} />
-              <Text variant="p1" color={'text'} marginLeft="x2">
-                {currentText}
-              </Text>
-            </Flex>
-            <Flex>
-              {allowClear && !!currentText && currentText !== placeholder && (
-                <AnimatedTouchableIcon
-                  entering={FadeInRight}
-                  exiting={FadeOutRight}
-                  activeOpacity={1}
-                  onPress={handleInputClear}
-                  style={styles.icon}
-                >
-                  <SvgIcon name="closecircleo" color={theme.colors.icon} />
-                </AnimatedTouchableIcon>
-              )}
-              <SvgIcon name="right" color={theme.colors.icon} />
-            </Flex>
-          </Pressable>
-        );
-      return (
-        <Box style={[styles.content, style, labelPosition === 'top' ? styles.top : styles.left]}>
-          <Flex flex={1}>
-            <SvgIcon name="date" color={theme.colors.icon} />
-            <Text variant="p1" color={'disabled'} marginLeft="x2">
-              {currentText}
-            </Text>
-          </Flex>
-        </Box>
-      );
-    };
+    const Content = !disabled ? (
+      <Pressable
+        onPress={handlePress}
+        activeOpacity={activeOpacity}
+        style={[styles.content, style, labelPosition === 'top' ? styles.top : styles.left]}
+      >
+        <Flex flex={1}>
+          <SvgIcon name="date" color={theme.colors.icon} />
+          <Text variant="p1" color={'text'} marginLeft="x2">
+            {currentText}
+          </Text>
+        </Flex>
+        <Flex>
+          {allowClear && !!currentText && currentText !== placeholder && (
+            <Pressable activeOpacity={1} onPress={handleInputClear} style={styles.icon}>
+              <SvgIcon name="closecircleo" color={theme.colors.icon} />
+            </Pressable>
+          )}
+          <SvgIcon name="right" color={theme.colors.icon} />
+        </Flex>
+      </Pressable>
+    ) : (
+      <Box style={[styles.content, style, labelPosition === 'top' ? styles.top : styles.left]}>
+        <Flex flex={1}>
+          <SvgIcon name="date" color={theme.colors.icon} />
+          <Text variant="p1" color={'disabled'} marginLeft="x2">
+            {currentText}
+          </Text>
+        </Flex>
+      </Box>
+    );
 
     return (
       <>
         {labelPosition === 'top' ? (
           <Box>
             <Label {...{ label, required }} />
-            {renderContent()}
+            {Content}
             <Brief brief={brief} />
           </Box>
         ) : (
           <Box>
             <Flex>
               <Label {...{ label, required }} />
-              {renderContent()}
+              {Content}
             </Flex>
             <Brief brief={brief} />
           </Box>
diff --git a/packages/react-native-picker/src/date-picker-item/index.tsx b/packages/react-native-picker/src/date-picker-item/index.tsx
index 1ab1b3c48d..91e70147dd 100644
--- a/packages/react-native-picker/src/date-picker-item/index.tsx
+++ b/packages/react-native-picker/src/date-picker-item/index.tsx
@@ -1,6 +1,5 @@
 import React, { forwardRef } from 'react';
 import { StyleProp, StyleSheet, ViewStyle } from 'react-native';
-import Animated, { FadeInRight, FadeOutRight } from 'react-native-reanimated';
 
 import { Box, Pressable, SvgIcon, Text, Theme, useTheme } from '@td-design/react-native';
 
@@ -19,7 +18,6 @@ interface PickerItemProps extends DatePickerPropsBase, Omit<ModalPickerProps, 'v
   style?: StyleProp<ViewStyle>;
 }
 
-const AnimatedTouchableIcon = Animated.createAnimatedComponent(Pressable);
 const DatePickerItem = forwardRef<PickerRef, PickerItemProps>(
   (
     {
@@ -54,21 +52,15 @@ const DatePickerItem = forwardRef<PickerRef, PickerItemProps>(
       icon: { alignItems: 'flex-end' },
     });
 
-    const renderContent = () => (
+    const Content = (
       <>
         <Text variant="p1" color={disabled ? 'disabled' : 'text'}>
           {currentText}
         </Text>
         {!disabled && allowClear && !!currentText && currentText !== placeholder && (
-          <AnimatedTouchableIcon
-            entering={FadeInRight}
-            exiting={FadeOutRight}
-            activeOpacity={1}
-            onPress={handleInputClear}
-            style={styles.icon}
-          >
+          <Pressable activeOpacity={1} onPress={handleInputClear} style={styles.icon}>
             <SvgIcon name="closecircleo" color={theme.colors.icon} />
-          </AnimatedTouchableIcon>
+          </Pressable>
         )}
       </>
     );
@@ -77,12 +69,12 @@ const DatePickerItem = forwardRef<PickerRef, PickerItemProps>(
       return (
         <>
           <Pressable onPress={handlePress} activeOpacity={activeOpacity} style={[styles.content, style]}>
-            {renderContent()}
+            {Content}
           </Pressable>
           <DatePicker {...restProps} {...{ value: date, visible, format, onChange: handleChange, onClose: setFalse }} />
         </>
       );
-    return <Box style={[styles.content, style]}>{renderContent()}</Box>;
+    return <Box style={[styles.content, style]}>{Content}</Box>;
   }
 );
 
diff --git a/packages/react-native-picker/src/picker-input/index.tsx b/packages/react-native-picker/src/picker-input/index.tsx
index c9734d9c89..c9aab9c649 100644
--- a/packages/react-native-picker/src/picker-input/index.tsx
+++ b/packages/react-native-picker/src/picker-input/index.tsx
@@ -1,6 +1,5 @@
 import React, { forwardRef, ReactNode } from 'react';
 import { StyleProp, StyleSheet, ViewStyle } from 'react-native';
-import Animated, { FadeInRight, FadeOutRight } from 'react-native-reanimated';
 
 import { Box, Flex, helpers, Pressable, SvgIcon, Text, useTheme } from '@td-design/react-native';
 
@@ -30,7 +29,6 @@ interface PickerInputProps extends PickerProps, Omit<ModalPickerProps, 'visible'
   style?: StyleProp<ViewStyle>;
 }
 
-const AnimatedTouchableIcon = Animated.createAnimatedComponent(Pressable);
 const { ONE_PIXEL } = helpers;
 const PickerInput = forwardRef<PickerRef, PickerInputProps>(
   (
@@ -78,57 +76,49 @@ const PickerInput = forwardRef<PickerRef, PickerInputProps>(
       icon: { alignItems: 'flex-end' },
     });
 
-    const renderContent = () => {
-      const Content = (
-        <>
-          <Box flex={1}>
-            <Text variant="p1" color={disabled ? 'disabled' : 'text'} marginLeft="x2">
-              {currentText}
-            </Text>
-          </Box>
-          <Flex>
-            {!disabled && allowClear && !!currentText && currentText !== placeholder && (
-              <AnimatedTouchableIcon
-                entering={FadeInRight}
-                exiting={FadeOutRight}
-                activeOpacity={1}
-                onPress={handleInputClear}
-                style={styles.icon}
-              >
-                <SvgIcon name="closecircleo" color={theme.colors.icon} />
-              </AnimatedTouchableIcon>
-            )}
-            <SvgIcon name="down" color={theme.colors.icon} />
-          </Flex>
-        </>
-      );
-      if (!disabled)
-        return (
-          <Pressable
-            onPress={handlePress}
-            activeOpacity={activeOpacity}
-            style={[styles.content, style, labelPosition === 'top' ? styles.top : styles.left]}
-          >
-            {Content}
-          </Pressable>
-        );
+    const BaseContent = (
+      <>
+        <Box flex={1}>
+          <Text variant="p1" color={disabled ? 'disabled' : 'text'} marginLeft="x2">
+            {currentText}
+          </Text>
+        </Box>
+        <Flex>
+          {!disabled && allowClear && !!currentText && currentText !== placeholder && (
+            <Pressable activeOpacity={1} onPress={handleInputClear} style={styles.icon}>
+              <SvgIcon name="closecircleo" color={theme.colors.icon} />
+            </Pressable>
+          )}
+          <SvgIcon name="down" color={theme.colors.icon} />
+        </Flex>
+      </>
+    );
 
-      return <Box style={[styles.content, style, labelPosition === 'top' ? styles.top : styles.left]}>{Content}</Box>;
-    };
+    const Content = !disabled ? (
+      <Pressable
+        onPress={handlePress}
+        activeOpacity={activeOpacity}
+        style={[styles.content, style, labelPosition === 'top' ? styles.top : styles.left]}
+      >
+        {BaseContent}
+      </Pressable>
+    ) : (
+      <Box style={[styles.content, style, labelPosition === 'top' ? styles.top : styles.left]}>{BaseContent}</Box>
+    );
 
     return (
       <>
         {labelPosition === 'top' ? (
           <Box>
             <Label {...{ label, required }} />
-            {renderContent()}
+            {Content}
             <Brief brief={brief} />
           </Box>
         ) : (
           <Box>
             <Flex>
               <Label {...{ label, required }} />
-              {renderContent()}
+              {Content}
             </Flex>
             <Brief brief={brief} />
           </Box>
diff --git a/packages/react-native-picker/src/picker-item/index.tsx b/packages/react-native-picker/src/picker-item/index.tsx
index bdddb4dd28..7f3e92f687 100644
--- a/packages/react-native-picker/src/picker-item/index.tsx
+++ b/packages/react-native-picker/src/picker-item/index.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { forwardRef } from 'react';
 import { StyleProp, StyleSheet, ViewStyle } from 'react-native';
-import Animated, { FadeInRight, FadeOutRight } from 'react-native-reanimated';
 
 import { Box, Pressable, SvgIcon, Text, Theme, useTheme } from '@td-design/react-native';
 
@@ -20,7 +19,6 @@ interface PickerItemProps extends PickerProps, Omit<ModalPickerProps, 'visible'
   style?: StyleProp<ViewStyle>;
 }
 
-const AnimatedTouchableIcon = Animated.createAnimatedComponent(Pressable);
 const PickerItem = forwardRef<PickerRef, PickerItemProps>(
   (
     {
@@ -58,7 +56,7 @@ const PickerItem = forwardRef<PickerRef, PickerItemProps>(
       icon: { alignItems: 'flex-end' },
     });
 
-    const renderContent = () => (
+    const Content = (
       <>
         <Text
           variant="p1"
@@ -70,15 +68,9 @@ const PickerItem = forwardRef<PickerRef, PickerItemProps>(
           {currentText}
         </Text>
         {!disabled && allowClear && !!currentText && currentText !== placeholder && (
-          <AnimatedTouchableIcon
-            entering={FadeInRight}
-            exiting={FadeOutRight}
-            activeOpacity={1}
-            onPress={handleInputClear}
-            style={styles.icon}
-          >
+          <Pressable activeOpacity={1} onPress={handleInputClear} style={styles.icon}>
             <SvgIcon name="closecircleo" color={theme.colors.icon} />
-          </AnimatedTouchableIcon>
+          </Pressable>
         )}
       </>
     );
@@ -87,7 +79,7 @@ const PickerItem = forwardRef<PickerRef, PickerItemProps>(
       return (
         <>
           <Pressable onPress={handlePress} activeOpacity={activeOpacity} style={[styles.content, style]}>
-            {renderContent()}
+            {Content}
           </Pressable>
           <Picker
             {...restProps}
@@ -96,7 +88,7 @@ const PickerItem = forwardRef<PickerRef, PickerItemProps>(
         </>
       );
 
-    return <Box style={[styles.content, style]}>{renderContent()}</Box>;
+    return <Box style={[styles.content, style]}>{Content}</Box>;
   }
 );
 
diff --git a/packages/react-native-picker/src/picker/components/Cascade/index.tsx b/packages/react-native-picker/src/picker/components/Cascade/index.tsx
index d48759cf84..d0507258a1 100644
--- a/packages/react-native-picker/src/picker/components/Cascade/index.tsx
+++ b/packages/react-native-picker/src/picker/components/Cascade/index.tsx
@@ -32,15 +32,17 @@ const Cascader = ({
     onClose,
   });
 
-  const Cols = childrenTree.map((item: CascadePickerItemProps[] = [], level) => (
-    <WheelPicker
-      key={level}
-      {...{ data: item.map(el => ({ ...el, value: `${el.value}` })), value: `${stateValue[level]}` }}
-      onChange={val => handleValueChange(val, level)}
-    />
-  ));
-
-  const PickerComp = <Flex backgroundColor="white">{Cols}</Flex>;
+  const PickerComp = (
+    <Flex backgroundColor="white">
+      {childrenTree.map((item: CascadePickerItemProps[] = [], level) => (
+        <WheelPicker
+          key={level}
+          {...{ data: item.map(el => ({ ...el, value: `${el.value}` })), value: `${stateValue[level]}` }}
+          onChange={val => handleValueChange(val, level)}
+        />
+      ))}
+    </Flex>
+  );
 
   if (displayType === 'modal') {
     return (
diff --git a/packages/react-native/src/input/InputItem.tsx b/packages/react-native/src/input/InputItem.tsx
index 053e8aeb44..bd53c46e5c 100644
--- a/packages/react-native/src/input/InputItem.tsx
+++ b/packages/react-native/src/input/InputItem.tsx
@@ -1,6 +1,5 @@
 import React, { forwardRef, memo, ReactNode } from 'react';
 import { StyleProp, StyleSheet, TextInput, TextInputProps, TextStyle, ViewStyle } from 'react-native';
-import Animated, { FadeInRight, FadeOutRight } from 'react-native-reanimated';
 
 import { useTheme } from '@shopify/restyle';
 
@@ -13,7 +12,6 @@ import Text from '../text';
 import { Theme } from '../theme';
 import useInputItem from './useInputItem';
 
-const AnimatedTouchableIcon = Animated.createAnimatedComponent(Pressable);
 const { ONE_PIXEL, px } = helpers;
 export interface InputItemProps
   extends Omit<TextInputProps, 'placeholderTextColor' | 'onChange' | 'onChangeText' | 'style'> {
@@ -116,15 +114,9 @@ const InputItem = forwardRef<TextInput, InputItemProps>(
           />
         </Box>
         {allowClear && editable && !!inputValue && (
-          <AnimatedTouchableIcon
-            entering={FadeInRight}
-            exiting={FadeOutRight}
-            activeOpacity={1}
-            onPress={handleInputClear}
-            style={styles.clearIcon}
-          >
+          <Pressable activeOpacity={1} onPress={handleInputClear} style={styles.clearIcon}>
             <SvgIcon name="closecircleo" color={theme.colors.icon} />
-          </AnimatedTouchableIcon>
+          </Pressable>
         )}
         {inputType === 'password' && (
           <Pressable activeOpacity={1} onPress={triggerPasswordType} style={styles.password}>
diff --git a/packages/react-native/src/input/index.tsx b/packages/react-native/src/input/index.tsx
index 1b92586340..c7ae3d6703 100644
--- a/packages/react-native/src/input/index.tsx
+++ b/packages/react-native/src/input/index.tsx
@@ -1,6 +1,5 @@
 import React, { forwardRef, memo, ReactNode } from 'react';
 import { StyleProp, StyleSheet, TextInput, TextInputProps, TextStyle } from 'react-native';
-import Animated, { FadeInRight, FadeOutRight } from 'react-native-reanimated';
 
 import { useTheme } from '@shopify/restyle';
 
@@ -15,7 +14,6 @@ import InputItem from './InputItem';
 import TextArea from './TextArea';
 import useInput from './useInput';
 
-const AnimatedTouchableIcon = Animated.createAnimatedComponent(Pressable);
 const { ONE_PIXEL, px } = helpers;
 export interface InputProps extends Omit<TextInputProps, 'placeholderTextColor' | 'onChange' | 'onChangeText'> {
   /** 标签 */
@@ -124,15 +122,9 @@ const Input = forwardRef<TextInput, InputProps>(
           />
         </Box>
         {allowClear && !disabled && !!inputValue && (
-          <AnimatedTouchableIcon
-            entering={FadeInRight}
-            exiting={FadeOutRight}
-            activeOpacity={1}
-            onPress={handleInputClear}
-            style={styles.clearIcon}
-          >
+          <Pressable activeOpacity={1} onPress={handleInputClear} style={styles.clearIcon}>
             <SvgIcon name="closecircleo" color={theme.colors.icon} />
-          </AnimatedTouchableIcon>
+          </Pressable>
         )}
         {inputType === 'password' && (
           <Pressable activeOpacity={1} onPress={triggerPasswordType} style={styles.password}>
@@ -175,7 +167,7 @@ const Label = memo(({ colon, label, required }: Pick<InputProps, 'colon' | 'labe
       <Flex marginRight="x2" alignItems="center">
         {required && <Text color="func600">*</Text>}
         <Text variant="p1" color="text">
-          <Label {...{ colon, label, required }} />
+          {label}
         </Text>
         <Text color="text">{colon ? ':' : ''}</Text>
       </Flex>
@@ -184,7 +176,7 @@ const Label = memo(({ colon, label, required }: Pick<InputProps, 'colon' | 'labe
   return (
     <Flex marginRight="x2">
       {required && <Text color="func600">*</Text>}
-      <Label {...{ colon, label, required }} />
+      {label}
       <Text color="text">{colon ? ':' : ''}</Text>
     </Flex>
   );
diff --git a/packages/react-native/src/number-keyboard/NumberKeyboardInput.tsx b/packages/react-native/src/number-keyboard/NumberKeyboardInput.tsx
index c20ac7c34b..ee17794fe0 100644
--- a/packages/react-native/src/number-keyboard/NumberKeyboardInput.tsx
+++ b/packages/react-native/src/number-keyboard/NumberKeyboardInput.tsx
@@ -1,6 +1,5 @@
 import React, { forwardRef } from 'react';
 import { Keyboard, StyleSheet } from 'react-native';
-import Animated, { FadeInRight, FadeOutRight } from 'react-native-reanimated';
 
 import { useTheme } from '@shopify/restyle';
 
@@ -16,7 +15,6 @@ import { NumberKeyboardInputProps, NumberKeyboardRef } from './type';
 import useNumberKeyboard from './useNumberKeyboard';
 
 const { px, ONE_PIXEL } = helpers;
-const AnimatedTouchableIcon = Animated.createAnimatedComponent(Pressable);
 const NumberKeyboardInput = forwardRef<NumberKeyboardRef, NumberKeyboardInputProps>(
   (
     {
@@ -87,15 +85,9 @@ const NumberKeyboardInput = forwardRef<NumberKeyboardRef, NumberKeyboardInputPro
             </Text>
           </Pressable>
           {allowClear && !disabled && !!currentText && currentText !== placeholder && (
-            <AnimatedTouchableIcon
-              entering={FadeInRight}
-              exiting={FadeOutRight}
-              activeOpacity={1}
-              onPress={handleInputClear}
-              style={styles.clearIcon}
-            >
+            <Pressable activeOpacity={1} onPress={handleInputClear} style={styles.clearIcon}>
               <SvgIcon name="closecircleo" color={theme.colors.icon} />
-            </AnimatedTouchableIcon>
+            </Pressable>
           )}
           {!!extra && (
             <Box>
diff --git a/packages/react-native/src/number-keyboard/NumberKeyboardItem.tsx b/packages/react-native/src/number-keyboard/NumberKeyboardItem.tsx
index bc270f8097..682e93a8c5 100644
--- a/packages/react-native/src/number-keyboard/NumberKeyboardItem.tsx
+++ b/packages/react-native/src/number-keyboard/NumberKeyboardItem.tsx
@@ -1,6 +1,5 @@
 import React, { forwardRef } from 'react';
 import { Keyboard, StyleSheet } from 'react-native';
-import Animated, { FadeInRight, FadeOutRight } from 'react-native-reanimated';
 
 import { useTheme } from '@shopify/restyle';
 
@@ -15,7 +14,6 @@ import NumberKeyboardModal from './NumberKeyboardModal';
 import { NumberKeyboardItemProps, NumberKeyboardRef } from './type';
 import useNumberKeyboard from './useNumberKeyboard';
 
-const AnimatedTouchableIcon = Animated.createAnimatedComponent(Pressable);
 const { px } = helpers;
 const NumberKeyboardItem = forwardRef<NumberKeyboardRef, NumberKeyboardItemProps>(
   (
@@ -80,15 +78,9 @@ const NumberKeyboardItem = forwardRef<NumberKeyboardRef, NumberKeyboardItemProps
             </Text>
           </Pressable>
           {allowClear && !disabled && !!currentText && currentText !== placeholder && (
-            <AnimatedTouchableIcon
-              entering={FadeInRight}
-              exiting={FadeOutRight}
-              activeOpacity={1}
-              onPress={handleInputClear}
-              style={styles.clearIcon}
-            >
+            <Pressable activeOpacity={1} onPress={handleInputClear} style={styles.clearIcon}>
               <SvgIcon name="closecircleo" color={theme.colors.icon} />
-            </AnimatedTouchableIcon>
+            </Pressable>
           )}
           {!!extra && (
             <Box>
diff --git a/packages/react-native/src/search-bar/index.tsx b/packages/react-native/src/search-bar/index.tsx
index 5dada4c5d9..54b489e1ff 100644
--- a/packages/react-native/src/search-bar/index.tsx
+++ b/packages/react-native/src/search-bar/index.tsx
@@ -1,6 +1,5 @@
 import React, { FC, PropsWithChildren, useMemo } from 'react';
 import { KeyboardTypeOptions, ReturnKeyTypeOptions, StyleProp, StyleSheet, TextStyle, ViewStyle } from 'react-native';
-import Animated, { FadeInRight, FadeOutRight } from 'react-native-reanimated';
 
 import { useTheme } from '@shopify/restyle';
 
@@ -48,8 +47,6 @@ export type SearchBarProps = PropsWithChildren<{
   activeOpacity?: number;
 }>;
 
-const AnimatedTouchable = Animated.createAnimatedComponent(Pressable);
-
 const SearchBar: FC<SearchBarProps> = props => {
   const {
     placeholder = '搜索',
@@ -92,17 +89,11 @@ const SearchBar: FC<SearchBarProps> = props => {
   const CancelBtn = useMemo(() => {
     if (!showCancelButton || !focused) return null;
     return (
-      <AnimatedTouchable
-        entering={FadeInRight}
-        exiting={FadeOutRight}
-        onPress={onCancel}
-        activeOpacity={activeOpacity}
-        style={{ marginHorizontal: theme.spacing.x2 }}
-      >
+      <Pressable onPress={onCancel} activeOpacity={activeOpacity} style={{ marginHorizontal: theme.spacing.x2 }}>
         <Text variant="p0" color="primary200">
           {cancelText}
         </Text>
-      </AnimatedTouchable>
+      </Pressable>
     );
   }, [showCancelButton, focused, activeOpacity, theme.spacing.x2, cancelText, onCancel]);
 
diff --git a/packages/react-native/src/swipe-row/index.tsx b/packages/react-native/src/swipe-row/index.tsx
index 96cc09eb70..e9ea344513 100644
--- a/packages/react-native/src/swipe-row/index.tsx
+++ b/packages/react-native/src/swipe-row/index.tsx
@@ -2,7 +2,7 @@ import React, { FC, PropsWithChildren } from 'react';
 import { Animated as RNAnimated, StyleProp, StyleSheet, TextStyle, ViewStyle } from 'react-native';
 import { RectButton } from 'react-native-gesture-handler';
 import Swipeable from 'react-native-gesture-handler/Swipeable';
-import Animated, { FadeOutRight, LightSpeedInLeft } from 'react-native-reanimated';
+import Animated from 'react-native-reanimated';
 
 import { useTheme } from '@shopify/restyle';
 
@@ -54,7 +54,7 @@ const SwipeRow: FC<SwipeRowProps> = ({
   contentContainerStyle,
 }) => {
   const theme = useTheme<Theme>();
-  const { swipeableRef, changeState, handleRemove, visible } = useSwipeRow({ anchor, onRemove });
+  const { swipeableRef, animatedStyle, changeState, handleLayout, handleRemove } = useSwipeRow({ anchor, onRemove });
 
   const renderRightAction = (
     props: SwipeAction & { x: number; progress: RNAnimated.AnimatedInterpolation<number> }
@@ -123,11 +123,9 @@ const SwipeRow: FC<SwipeRowProps> = ({
       onSwipeableWillOpen={() => changeState(anchor)}
       containerStyle={containerStyle}
     >
-      {visible && (
-        <Animated.View entering={LightSpeedInLeft} exiting={FadeOutRight} style={contentContainerStyle}>
-          {children}
-        </Animated.View>
-      )}
+      <Animated.View style={[contentContainerStyle, animatedStyle]} onLayout={handleLayout}>
+        {children}
+      </Animated.View>
     </Swipeable>
   );
 };
diff --git a/packages/react-native/src/swipe-row/useSwipeRow.ts b/packages/react-native/src/swipe-row/useSwipeRow.ts
index 5d67af2754..a09d4bec23 100644
--- a/packages/react-native/src/swipe-row/useSwipeRow.ts
+++ b/packages/react-native/src/swipe-row/useSwipeRow.ts
@@ -1,5 +1,7 @@
 import { useContext, useEffect, useRef } from 'react';
+import { LayoutChangeEvent } from 'react-native';
 import { Swipeable } from 'react-native-gesture-handler';
+import { interpolate, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
 
 import { useMemoizedFn, useSafeState } from '@td-design/rn-hooks';
 
@@ -8,10 +10,10 @@ import { SwipeRowContext } from './context';
 
 export default function useSwipeRow({ anchor, onRemove }: Pick<SwipeRowProps, 'onRemove' | 'anchor'>) {
   const swipeableRef = useRef<Swipeable>(null);
+  const isRemoving = useSharedValue(0);
+  const [height, setHeight] = useSafeState(0);
   const { changeState, id, multiple } = useContext(SwipeRowContext);
 
-  const [visible, setVisible] = useSafeState(true);
-
   useEffect(() => {
     if (anchor === id && !multiple) {
       swipeableRef.current?.close();
@@ -20,15 +22,30 @@ export default function useSwipeRow({ anchor, onRemove }: Pick<SwipeRowProps, 'o
 
   const handleRemove = async () => {
     await onRemove?.();
+    isRemoving.value = withTiming(1, { duration: 200 });
     swipeableRef.current?.close();
-    setVisible(false);
   };
 
+  const handleLayout = (e: LayoutChangeEvent) => {
+    setHeight(e.nativeEvent.layout.height);
+  };
+
+  const animatedStyle = useAnimatedStyle(() => {
+    if (isRemoving.value) {
+      return {
+        height: interpolate(isRemoving.value, [0, 1], [height, 0]),
+      };
+    }
+
+    return {};
+  });
+
   return {
     swipeableRef,
-    visible,
+    animatedStyle,
 
     changeState,
+    handleLayout: useMemoizedFn(handleLayout),
     handleRemove: useMemoizedFn(handleRemove),
   };
 }
diff --git a/packages/react-native/src/vehicle-keyboard/VehicleKeyboardInput.tsx b/packages/react-native/src/vehicle-keyboard/VehicleKeyboardInput.tsx
index 8958732fe8..6421bf68b9 100644
--- a/packages/react-native/src/vehicle-keyboard/VehicleKeyboardInput.tsx
+++ b/packages/react-native/src/vehicle-keyboard/VehicleKeyboardInput.tsx
@@ -1,6 +1,5 @@
 import React, { forwardRef } from 'react';
 import { Keyboard } from 'react-native';
-import Animated, { FadeInRight, FadeOutRight } from 'react-native-reanimated';
 
 import { useTheme } from '@shopify/restyle';
 
@@ -16,7 +15,6 @@ import useVehicleKeyboard from './useVehicleKeyboard';
 import VehicleKeyboardModal from './VehicleKeyboardModal';
 
 const { ONE_PIXEL } = helpers;
-const AnimatedTouchableIcon = Animated.createAnimatedComponent(Pressable);
 const VehicleKeyboardInput = forwardRef<VehicleKeyboardRef, VehicleKeyboardInputProps>(
   (
     {
@@ -79,15 +77,9 @@ const VehicleKeyboardInput = forwardRef<VehicleKeyboardRef, VehicleKeyboardInput
             </Text>
           </Pressable>
           {allowClear && !disabled && !!currentText && currentText !== placeholder && (
-            <AnimatedTouchableIcon
-              entering={FadeInRight}
-              exiting={FadeOutRight}
-              activeOpacity={1}
-              onPress={handleInputClear}
-              style={{ alignItems: 'center' }}
-            >
+            <Pressable activeOpacity={1} onPress={handleInputClear} style={{ alignItems: 'center' }}>
               <SvgIcon name="closecircleo" color={theme.colors.icon} />
-            </AnimatedTouchableIcon>
+            </Pressable>
           )}
           {!!extra && (
             <Box>
diff --git a/packages/react-native/src/vehicle-keyboard/VehicleKeyboardItem.tsx b/packages/react-native/src/vehicle-keyboard/VehicleKeyboardItem.tsx
index 9829a91571..a9f0197e78 100644
--- a/packages/react-native/src/vehicle-keyboard/VehicleKeyboardItem.tsx
+++ b/packages/react-native/src/vehicle-keyboard/VehicleKeyboardItem.tsx
@@ -1,6 +1,5 @@
 import React, { forwardRef } from 'react';
 import { Keyboard } from 'react-native';
-import Animated, { FadeInRight, FadeOutRight } from 'react-native-reanimated';
 
 import { useTheme } from '@shopify/restyle';
 
@@ -14,7 +13,6 @@ import { VehicleKeyboardItemProps, VehicleKeyboardRef } from './type';
 import useVehicleKeyboard from './useVehicleKeyboard';
 import VehicleKeyboardModal from './VehicleKeyboardModal';
 
-const AnimatedTouchableIcon = Animated.createAnimatedComponent(Pressable);
 const VehicleKeyboardItem = forwardRef<VehicleKeyboardRef, VehicleKeyboardItemProps>(
   (
     {
@@ -69,15 +67,9 @@ const VehicleKeyboardItem = forwardRef<VehicleKeyboardRef, VehicleKeyboardItemPr
             </Text>
           </Pressable>
           {allowClear && !disabled && !!currentText && currentText !== placeholder && (
-            <AnimatedTouchableIcon
-              entering={FadeInRight}
-              exiting={FadeOutRight}
-              activeOpacity={1}
-              onPress={handleInputClear}
-              style={{ alignItems: 'center' }}
-            >
+            <Pressable activeOpacity={1} onPress={handleInputClear} style={{ alignItems: 'center' }}>
               <SvgIcon name="closecircleo" color={theme.colors.icon} />
-            </AnimatedTouchableIcon>
+            </Pressable>
           )}
           {!!extra && (
             <Box>
diff --git a/packages/svgicon-cli/package.json b/packages/svgicon-cli/package.json
index f9a5b40ca8..fd1db6c714 100644
--- a/packages/svgicon-cli/package.json
+++ b/packages/svgicon-cli/package.json
@@ -27,6 +27,10 @@
     "lodash": "^4.17.21",
     "mkdirp": "^3.0.1"
   },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
   "devDependencies": {
     "@types/glob": "^8.1.0",
     "@types/lodash": "^4.14.195",
@@ -38,4 +42,4 @@
     "gulp-typescript": "^6.0.0-alpha.1",
     "typescript": "^5.1.6"
   }
-}
+}
\ No newline at end of file