react-native-directional-toggle 0.1.0 → 0.1.2

package/lib/typescript/commonjs/src/AnimatedSwitch.d.ts

@@ -0,0 +1,43 @@
+import { type StyleProp, type ViewStyle, type TextStyle } from 'react-native';
+import { type WithSpringConfig, type WithTimingConfig } from 'react-native-reanimated';
+type Option = {
+    label: string;
+    value: string | number;
+};
+export type AnimatedSwitchProps = {
+    options: Option[];
+    value: string | number;
+    onChange: (value: string | number) => void;
+    /**
+     * Direction of the switch.
+     * @default false (Horizontal)
+     */
+    vertical?: boolean;
+    /**
+     * Container style. Use this to set width/height.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Style for the moving thumb.
+     */
+    thumbStyle?: StyleProp<ViewStyle>;
+    /**
+     * Base style for option text.
+     */
+    textStyle?: StyleProp<TextStyle>;
+    /**
+     * Style for the text when active.
+     */
+    activeTextStyle?: StyleProp<TextStyle>;
+    /**
+     * Style for the text when inactive.
+     */
+    inactiveTextStyle?: StyleProp<TextStyle>;
+    /**
+     * Animation configuration.
+     */
+    animationConfig?: WithTimingConfig | WithSpringConfig;
+};
+export declare function AnimatedSwitch({ options, value, onChange, vertical, style, thumbStyle, textStyle, activeTextStyle, inactiveTextStyle, animationConfig, }: AnimatedSwitchProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=AnimatedSwitch.d.ts.map

package/lib/typescript/commonjs/src/AnimatedSwitch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnimatedSwitch.d.ts","sourceRoot":"","sources":["../../../../src/AnimatedSwitch.tsx"],"names":[],"mappings":"AACA,OAAO,EAKL,KAAK,SAAS,EACd,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAGtB,OAAiB,EAMf,KAAK,gBAAgB,EACrB,KAAK,gBAAgB,EAEtB,MAAM,yBAAyB,CAAC;AAEjC,KAAK,MAAM,GAAG;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IAC3C;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC;;OAEG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACvC;;OAEG;IACH,iBAAiB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACzC;;OAEG;IACH,eAAe,CAAC,EAAE,gBAAgB,GAAG,gBAAgB,CAAC;CACvD,CAAC;AAQF,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,KAAK,EACL,QAAQ,EACR,QAAgB,EAChB,KAAK,EACL,UAAU,EACV,SAAS,EACT,eAAe,EACf,iBAAiB,EACjB,eAAmC,GACpC,EAAE,mBAAmB,2CAiIrB"}

package/lib/typescript/commonjs/src/index.d.ts

@@ -0,0 +1,4 @@
+import { AnimatedSwitch, type AnimatedSwitchProps } from './AnimatedSwitch';
+export default AnimatedSwitch;
+export { AnimatedSwitch, type AnimatedSwitchProps };
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/commonjs/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAE5E,eAAe,cAAc,CAAC;AAC9B,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,CAAC"}

package/lib/typescript/module/src/AnimatedSwitch.d.ts

@@ -0,0 +1,43 @@
+import { type StyleProp, type ViewStyle, type TextStyle } from 'react-native';
+import { type WithSpringConfig, type WithTimingConfig } from 'react-native-reanimated';
+type Option = {
+    label: string;
+    value: string | number;
+};
+export type AnimatedSwitchProps = {
+    options: Option[];
+    value: string | number;
+    onChange: (value: string | number) => void;
+    /**
+     * Direction of the switch.
+     * @default false (Horizontal)
+     */
+    vertical?: boolean;
+    /**
+     * Container style. Use this to set width/height.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Style for the moving thumb.
+     */
+    thumbStyle?: StyleProp<ViewStyle>;
+    /**
+     * Base style for option text.
+     */
+    textStyle?: StyleProp<TextStyle>;
+    /**
+     * Style for the text when active.
+     */
+    activeTextStyle?: StyleProp<TextStyle>;
+    /**
+     * Style for the text when inactive.
+     */
+    inactiveTextStyle?: StyleProp<TextStyle>;
+    /**
+     * Animation configuration.
+     */
+    animationConfig?: WithTimingConfig | WithSpringConfig;
+};
+export declare function AnimatedSwitch({ options, value, onChange, vertical, style, thumbStyle, textStyle, activeTextStyle, inactiveTextStyle, animationConfig, }: AnimatedSwitchProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=AnimatedSwitch.d.ts.map

package/lib/typescript/module/src/AnimatedSwitch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnimatedSwitch.d.ts","sourceRoot":"","sources":["../../../../src/AnimatedSwitch.tsx"],"names":[],"mappings":"AACA,OAAO,EAKL,KAAK,SAAS,EACd,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAGtB,OAAiB,EAMf,KAAK,gBAAgB,EACrB,KAAK,gBAAgB,EAEtB,MAAM,yBAAyB,CAAC;AAEjC,KAAK,MAAM,GAAG;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IAC3C;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC;;OAEG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACvC;;OAEG;IACH,iBAAiB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACzC;;OAEG;IACH,eAAe,CAAC,EAAE,gBAAgB,GAAG,gBAAgB,CAAC;CACvD,CAAC;AAQF,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,KAAK,EACL,QAAQ,EACR,QAAgB,EAChB,KAAK,EACL,UAAU,EACV,SAAS,EACT,eAAe,EACf,iBAAiB,EACjB,eAAmC,GACpC,EAAE,mBAAmB,2CAiIrB"}

package/lib/typescript/module/src/index.d.ts

@@ -0,0 +1,4 @@
+import { AnimatedSwitch, type AnimatedSwitchProps } from './AnimatedSwitch';
+export default AnimatedSwitch;
+export { AnimatedSwitch, type AnimatedSwitchProps };
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAE5E,eAAe,cAAc,CAAC;AAC9B,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,CAAC"}

package/package.json

@@ -1,31 +1,32 @@
 {
   "name": "react-native-directional-toggle",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Multi-element toggle component for React Native and Expo with support for vertical and horizontal layouts and animations.",
-  "main": "./lib/module/index.js",
-  "types": "./lib/typescript/src/index.d.ts",
+  "source": "./src/index.tsx",
+  "main": "./lib/commonjs/index.js",
+  "module": "./lib/module/index.js",
+  "types": "./lib/typescript/module/src/index.d.ts",
+  "react-native": "./src/index.tsx",
   "exports": {
     ".": {
-      "source": "./src/index.tsx",
-      "types": "./lib/typescript/src/index.d.ts",
-      "default": "./lib/module/index.js"
+      "import": {
+        "types": "./lib/typescript/module/src/index.d.ts",
+        "default": "./lib/module/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/src/index.d.ts",
+        "default": "./lib/commonjs/index.js"
+      }
     },
     "./package.json": "./package.json"
   },
+  "sideEffects": false,
+  "engines": {
+    "node": ">=18"
+  },
   "files": [
     "src",
     "lib",
-    "android",
-    "ios",
-    "cpp",
-    "*.podspec",
-    "react-native.config.js",
-    "!ios/build",
-    "!android/build",
-    "!android/gradle",
-    "!android/gradlew",
-    "!android/gradlew.bat",
-    "!android/local.properties",
     "!**/__tests__",
     "!**/__fixtures__",
     "!**/__mocks__",
@@ -33,8 +34,19 @@
   ],
   "keywords": [
     "react-native",
+    "expo",
+    "toggle",
+    "switch",
+    "animated",
+    "gesture",
     "ios",
-    "android"
+    "android",
+    "segmented-control",
+    "multi-switch",
+    "animated-switch",
+    "react-native-component",
+    "ui-component",
+    "typescript"
   ],
   "repository": {
     "type": "git",
@@ -69,6 +81,9 @@
     "prettier": "^2.8.8",
     "react": "19.1.0",
     "react-native": "0.81.5",
+    "react-native-gesture-handler": "^2.30.0",
+    "react-native-reanimated": "^4.2.1",
+    "react-native-worklets": "0.7.1",
     "react-native-builder-bob": "^0.40.17",
     "release-it": "^19.0.4",
     "typescript": "^5.9.2"
@@ -87,6 +102,9 @@
     "source": "src",
     "output": "lib",
     "targets": [
+      [
+        "commonjs"
+      ],
       [
         "module",
         {
@@ -113,6 +131,9 @@
     "modulePathIgnorePatterns": [
       "<rootDir>/example/node_modules",
       "<rootDir>/lib/"
+    ],
+    "transformIgnorePatterns": [
+      "node_modules/(?!(\\.pnpm/.*)?(react-native|@react-native|@react-navigation)/)"
     ]
   },
   "commitlint": {
@@ -150,12 +171,15 @@
     ],
     "version": "0.56.1"
   },
+  "dependencies": {},
   "scripts": {
     "example": "pnpm --filter react-native-directional-toggle-example run start",
     "clean": "del-cli lib",
     "typecheck": "tsc",
     "lint": "eslint \"**/*.{js,ts,tsx}\"",
     "test": "jest",
-    "release": "release-it --only-version"
+    "release": "release-it --only-version",
+    "android": "expo run:android",
+    "ios": "expo run:ios"
   }
 }

package/src/AnimatedSwitch.tsx

@@ -1,172 +1,181 @@
-import { useCallback, useEffect } from "react";
-import { type LayoutChangeEvent, Pressable, StyleSheet, View } from "react-native";
-import { Gesture, GestureDetector } from "react-native-gesture-handler";
+import { useCallback, useEffect } from 'react';
+import {
+  type LayoutChangeEvent,
+  Pressable,
+  StyleSheet,
+  View,
+  type StyleProp,
+  type ViewStyle,
+  type TextStyle,
+} from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import { scheduleOnRN } from 'react-native-worklets';
 import Animated, {
   interpolateColor,
-  runOnJS,
   useAnimatedStyle,
   useSharedValue,
   withSpring,
   withTiming,
-} from "react-native-reanimated";
+  type WithSpringConfig,
+  type WithTimingConfig,
+  type SharedValue,
+} from 'react-native-reanimated';
 
 type Option = {
   label: string;
   value: string | number;
 };
 
-type Props = {
+export type AnimatedSwitchProps = {
   options: Option[];
   value: string | number;
   onChange: (value: string | number) => void;
-  height?: number;
+  /**
+   * Direction of the switch.
+   * @default false (Horizontal)
+   */
   vertical?: boolean;
-  colors?: {
-    activeText: string;
-    inactiveText: string;
-    bgFront: string;
-    bgBack: string;
-  };
-  animationConfig?: {
-    duration?: number;
-    damping?: number;
-    stiffness?: number;
-  };
+  /**
+   * Container style. Use this to set width/height.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Style for the moving thumb.
+   */
+  thumbStyle?: StyleProp<ViewStyle>;
+  /**
+   * Base style for option text.
+   */
+  textStyle?: StyleProp<TextStyle>;
+  /**
+   * Style for the text when active.
+   */
+  activeTextStyle?: StyleProp<TextStyle>;
+  /**
+   * Style for the text when inactive.
+   */
+  inactiveTextStyle?: StyleProp<TextStyle>;
+  /**
+   * Animation configuration.
+   */
+  animationConfig?: WithTimingConfig | WithSpringConfig;
 };
 
-const THUMB_INSET = 4;
-const VERTICAL_WIDTH = 128;
+const DEFAULT_ANIMATION = {
+  duration: 150,
+  damping: 5,
+  stiffness: 100,
+};
 
 export function AnimatedSwitch({
   options,
   value,
   onChange,
-  height = 40,
   vertical = false,
-  colors = {
-    activeText: "#373737",
-    inactiveText: "#dededeff",
-    bgFront: "#d4d4d4",
-    bgBack: "#798393ff",
-  },
-  animationConfig = {
-    duration: 100,
-    damping: 50,
-    stiffness: 200,
-  },
-}: Props) {
-
-  /** ===== SharedValues ===== */
+  style,
+  thumbStyle,
+  textStyle,
+  activeTextStyle,
+  inactiveTextStyle,
+  animationConfig = DEFAULT_ANIMATION,
+}: AnimatedSwitchProps) {
   const itemSizeSV = useSharedValue(0);
   const translate = useSharedValue(0);
   const indexSV = useSharedValue(0);
 
   const currentIndex = options.findIndex((o) => o.value === value);
 
-  /** * 1. 监听外部 value 变化
-   * 当外部修改 value 时，滑块应动画移动到新位置
-   */
+  // Measure container layout
+  const onLayout = useCallback(
+    (e: LayoutChangeEvent) => {
+      const { width, height } = e.nativeEvent.layout;
+
+      const totalSize = vertical ? height - 4 : width - 4;
+      const itemSize = totalSize / options.length;
+      itemSizeSV.value = itemSize;
+
+      // Fix initial position on layout
+      if (currentIndex >= 0 && itemSize > 0) {
+        translate.value = currentIndex * itemSize;
+      }
+    },
+    [vertical, options.length, currentIndex, itemSizeSV, translate]
+  );
+
+  // Sync with external value changes
   useEffect(() => {
-    if (currentIndex >= 0) {
+    if (currentIndex >= 0 && itemSizeSV.value > 0) {
       indexSV.value = currentIndex;
-      // 只有当 itemSizeSV 已经有值（即 Layout 已完成）时才执行动画
-      if (itemSizeSV.value > 0) {
-        translate.value = withTiming(currentIndex * itemSizeSV.value, {
-          duration: animationConfig.duration,
-        });
-      }
+      translate.value = withTiming(
+        currentIndex * itemSizeSV.value,
+        animationConfig as WithTimingConfig
+      );
     }
-  }, [currentIndex, animationConfig.duration]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentIndex, animationConfig]);
 
-  /** ===== JS 回调 ===== */
   const emitChange = useCallback(
     (index: number) => {
-      if (options.length > 0 && index >= 0 && index < options.length) {
-        onChange(options[index]?.value || "");
+      // Clamp index to safe bounds
+      const safeIndex = Math.max(0, Math.min(index, options.length - 1));
+      if (options[safeIndex]) {
+        onChange(options[safeIndex].value);
       }
     },
-    [onChange, options],
+    [onChange, options]
   );
 
-  /** ===== Tap 点击切换 ===== */
   const handlePress = (index: number) => {
+    if (itemSizeSV.value === 0) return;
     indexSV.value = index;
-    translate.value = withTiming(index * itemSizeSV.value, {
-      duration: animationConfig.duration ?? 150
-    });
+    translate.value = withTiming(
+      index * itemSizeSV.value,
+      animationConfig as WithTimingConfig
+    );
     emitChange(index);
   };
 
-  /** ===== Drag 手势 ===== */
   const panGesture = Gesture.Pan()
     .onUpdate((e) => {
-      const delta = vertical ? e.translationY : e.translationX;
-      // 基于手势开始时的位置进行偏移计算
-      const pos = delta + indexSV.value * itemSizeSV.value;
+      if (itemSizeSV.value === 0) return;
+      const term = vertical ? e.translationY : e.translationX;
+      const startPos = indexSV.value * itemSizeSV.value;
+      const pos = startPos + term;
       const max = (options.length - 1) * itemSizeSV.value;
-
       translate.value = Math.min(Math.max(0, pos), max);
     })
     .onEnd(() => {
+      if (itemSizeSV.value === 0) return;
       const index = Math.round(translate.value / itemSizeSV.value);
       indexSV.value = index;
-
-      translate.value = withSpring(index * itemSizeSV.value, {
-        damping: animationConfig.damping ?? 20,
-        stiffness: animationConfig.stiffness ?? 200,
-      });
-
-      runOnJS(emitChange)(index);
+      translate.value = withSpring(
+        index * itemSizeSV.value,
+        animationConfig as WithSpringConfig
+      );
+      scheduleOnRN(emitChange, index);
     });
 
-  /** ===== Thumb 动画样式 ===== */
   const animatedThumbStyle = useAnimatedStyle(() => {
-    if (vertical) {
-      return {
-        height: itemSizeSV.value - THUMB_INSET * 2,
-        top: THUMB_INSET,
-        left: THUMB_INSET,
-        right: THUMB_INSET,
-        transform: [{ translateY: translate.value }],
-      };
-    }
-    return {
-      width: itemSizeSV.value - THUMB_INSET * 2,
-      left: THUMB_INSET,
-      top: THUMB_INSET,
-      bottom: THUMB_INSET,
-      transform: [{ translateX: translate.value }],
-    };
-  });
+    // If layout not ready, hide thumb or show nothing
+    if (itemSizeSV.value === 0) return { opacity: 0 };
 
-  /** ===== Label 动画样式 ===== */
-  const getLabelAnimatedStyle = (index: number) =>
-    useAnimatedStyle(() => {
-      const center = index * itemSizeSV.value;
-      const color = interpolateColor(
-        translate.value,
-        [center - itemSizeSV.value, center, center + itemSizeSV.value],
-        [colors.inactiveText, colors.activeText, colors.inactiveText],
-      );
-      return { color };
-    });
+    const transform = vertical
+      ? [{ translateY: translate.value }]
+      : [{ translateX: translate.value }];
 
-  /** * 2. Layout 初始化
-   * 这是修复初始显示问题的关键
-   */
-  const onLayout = (e: LayoutChangeEvent) => {
-    const size = vertical
-      ? e.nativeEvent.layout.height
-      : e.nativeEvent.layout.width;
+    const sizeStyle = vertical
+      ? { height: itemSizeSV.value, width: '100%' }
+      : { width: itemSizeSV.value, height: '100%' };
 
-    const newItemSize = size / options.length;
-    itemSizeSV.value = newItemSize;
-
-    // 核心修复：在获取到尺寸的第一时间，根据 currentIndex 强行同步 translate 的值
-    if (currentIndex >= 0) {
-      translate.value = currentIndex * newItemSize;
-    }
-  };
+    return {
+      position: 'absolute',
+      left: 2,
+      top: 2,
+      ...sizeStyle,
+      transform,
+      opacity: 1,
+    };
+  });
 
   return (
     <GestureDetector gesture={panGesture}>
@@ -174,35 +183,25 @@ export function AnimatedSwitch({
         onLayout={onLayout}
         style={[
           styles.container,
-          { backgroundColor: colors.bgBack },
-          vertical
-            ? {
-              height: height * options.length,
-              width: VERTICAL_WIDTH,
-              flexDirection: "column",
-            }
-            : { height, flexDirection: "row" },
+          vertical ? styles.vertical : styles.horizontal,
+          style, // User override
         ]}
       >
-        {/* 滑块背景 */}
-        <Animated.View
-          pointerEvents="none"
-          style={[styles.thumbBase, { backgroundColor: colors.bgFront }, animatedThumbStyle]}
-        />
+        <Animated.View style={[styles.thumb, thumbStyle, animatedThumbStyle]} />
 
-        {/* 选项列表 */}
         {options.map((opt, index) => {
-          const labelStyle = getLabelAnimatedStyle(index);
           return (
-            <Pressable
+            <OptionItem
               key={opt.value}
-              style={styles.item}
+              label={opt.label}
               onPress={() => handlePress(index)}
-            >
-              <Animated.Text style={[styles.label, labelStyle]}>
-                {opt.label}
-              </Animated.Text>
-            </Pressable>
+              index={index}
+              translate={translate}
+              itemSizeSV={itemSizeSV}
+              textStyle={textStyle}
+              activeTextStyle={activeTextStyle}
+              inactiveTextStyle={inactiveTextStyle}
+            />
           );
         })}
       </View>
@@ -210,29 +209,84 @@ export function AnimatedSwitch({
   );
 }
 
+// Sub-component for individual options to isolate animated styles
+const OptionItem = ({
+  label,
+  onPress,
+  index,
+  translate,
+  itemSizeSV,
+  textStyle,
+  activeTextStyle,
+  inactiveTextStyle,
+}: {
+  label: string;
+  onPress: () => void;
+  index: number;
+  translate: SharedValue<number>;
+  itemSizeSV: SharedValue<number>;
+  textStyle?: StyleProp<TextStyle>;
+  activeTextStyle?: StyleProp<TextStyle>;
+  inactiveTextStyle?: StyleProp<TextStyle>;
+}) => {
+  const activeColor =
+    (StyleSheet.flatten(activeTextStyle)?.color as string) ?? '#000';
+  const inactiveColor =
+    (StyleSheet.flatten(inactiveTextStyle)?.color as string) ?? '#999';
+
+  const textAnimatedStyle = useAnimatedStyle(() => {
+    const center = index * itemSizeSV.value;
+    const color = interpolateColor(
+      translate.value,
+      [center - itemSizeSV.value, center, center + itemSizeSV.value],
+      [inactiveColor, activeColor, inactiveColor]
+    );
+    return { color };
+  });
+
+  return (
+    <Pressable style={styles.option} onPress={onPress}>
+      <Animated.Text
+        style={[styles.text, textStyle, textAnimatedStyle]}
+        numberOfLines={1}
+      >
+        {label}
+      </Animated.Text>
+    </Pressable>
+  );
+};
+
 const styles = StyleSheet.create({
   container: {
+    // backgroundColor: '#f0f0f0',
     borderRadius: 16,
-    overflow: "hidden",
-    flex: 1,
+    overflow: 'hidden',
+    padding: 2,
+    // position: 'relative',
   },
-  thumbBase: {
-    position: "absolute",
-    borderRadius: 12,
+  horizontal: {
+    flexDirection: 'row',
+  },
+  vertical: {
+    flexDirection: 'column',
+  },
+  thumb: {
+    // backgroundColor: '#fff',
+    borderRadius: 16,
     shadowColor: '#000',
-    shadowOpacity: 0.3,
     shadowOffset: { width: 0, height: 1 },
-    shadowRadius: 2,
-    elevation: 2,
+    shadowOpacity: 0.1,
+    shadowRadius: 1,
+    elevation: 1,
   },
-  item: {
+  option: {
     flex: 1,
-    alignItems: "center",
-    justifyContent: "center",
-    zIndex: 1, // 确保文字在滑块上方
+    alignItems: 'center',
+    justifyContent: 'center',
+    // zIndex: 1
   },
-  label: {
+  text: {
     fontSize: 14,
-    fontWeight: "600",
+    fontWeight: '500',
   },
 });

package/src/index.tsx

@@ -1,3 +1,4 @@
-import { AnimatedSwitch } from "./AnimatedSwitch";
+import { AnimatedSwitch, type AnimatedSwitchProps } from './AnimatedSwitch';
 
 export default AnimatedSwitch;
+export { AnimatedSwitch, type AnimatedSwitchProps };