react-native-directional-toggle 0.1.0

package/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2026 Alan Suhe
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.en.md

@@ -0,0 +1,65 @@
+# Description
+
+This is a React Native / Expo component library.
+
+For Chinese version, please click: [中文](README.md).
+
+## Installation
+
+```bash
+pnpm add react-native-directional-toggle
+
+yarn add react-native-directional-toggle
+```
+
+## Peer Dependencies
+
+```bash
+pnpm add react-native-gesture-handler react-native-reanimated react-native-worklets --save-peer
+```
+
+Dependencies required:
+- react-native-gesture-handler
+- react-native-reanimated
+- react-native-worklets
+
+Note: Only works with `expo run` after prebuild, not supported by `expo go`.
+
+## Usage
+
+> Refer to the [example project](example/).
+
+### Import and use
+
+```tsx
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import Switcher from 'react-native-directional-toggle';
+
+const options = [
+  {
+    label: 'Option 1',
+    value: 'Option 1',
+  },
+  {
+    label: 'Option 2',
+    value: 'Option 2',
+  },
+  {
+    label: 'Option 3',
+    value: 'Option 3',
+  },
+];
+
+...
+
+<GestureHandlerRootView>
+    <Switcher
+            options={options}
+            value={'Option 2'}
+            height={36}
+            onChange={value => console.log(value)}
+    />
+</GestureHandlerRootView>
+
+```
+Note: You need to wrap the outer layer of your App (such as _layout.tsx, etc.) with `GestureHandlerRootView`.

package/README.md

@@ -0,0 +1,65 @@
+# 说明
+
+这是一个 React Native / Expo 组件库。
+
+For English version, please click: [English](README.en.md)。
+
+## 安装
+
+```bash
+pnpm add react-native-directional-toggle
+
+yarn add react-native-directional-toggle
+```
+
+## 依赖包
+
+```bash
+pnpm add react-native-gesture-handler react-native-reanimated react-native-worklets --save-peer
+```
+
+需要安装的依赖包：
+- react-native-gesture-handler
+- react-native-reanimated
+- react-native-worklets
+
+注意：只能在prebuild后正常用`expo run`的方式运行，不支持expo go。
+
+## 使用
+
+> 参考[示例项目](example/)。
+
+###  导入组件使用
+
+```tsx
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import Switcher from 'react-native-directional-toggle';
+
+const options = [
+  {
+    label: 'Option 1',
+    value: 'Option 1',
+  },
+  {
+    label: 'Option 2',
+    value: 'Option 2',
+  },
+  {
+    label: 'Option 3',
+    value: 'Option 3',
+  },
+];
+
+...
+
+<GestureHandlerRootView>
+    <Switcher
+            options={options}
+            value={'Option 2'}
+            height={36}
+            onChange={value => console.log(value)}
+    />
+</GestureHandlerRootView>
+
+```
+注意: App中需要在外层（如_layout.tsx等）包裹GestureHandlerRootView。

package/lib/module/AnimatedSwitch.js

@@ -0,0 +1,190 @@
+"use strict";
+
+import { useCallback, useEffect } from "react";
+import { Pressable, StyleSheet, View } from "react-native";
+import { Gesture, GestureDetector } from "react-native-gesture-handler";
+import Animated, { interpolateColor, runOnJS, useAnimatedStyle, useSharedValue, withSpring, withTiming } from "react-native-reanimated";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const THUMB_INSET = 4;
+const VERTICAL_WIDTH = 128;
+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
+  }
+}) {
+  /** ===== SharedValues ===== */
+  const itemSizeSV = useSharedValue(0);
+  const translate = useSharedValue(0);
+  const indexSV = useSharedValue(0);
+  const currentIndex = options.findIndex(o => o.value === value);
+
+  /** * 1. 监听外部 value 变化
+   * 当外部修改 value 时，滑块应动画移动到新位置
+   */
+  useEffect(() => {
+    if (currentIndex >= 0) {
+      indexSV.value = currentIndex;
+      // 只有当 itemSizeSV 已经有值（即 Layout 已完成）时才执行动画
+      if (itemSizeSV.value > 0) {
+        translate.value = withTiming(currentIndex * itemSizeSV.value, {
+          duration: animationConfig.duration
+        });
+      }
+    }
+  }, [currentIndex, animationConfig.duration]);
+
+  /** ===== JS 回调 ===== */
+  const emitChange = useCallback(index => {
+    if (options.length > 0 && index >= 0 && index < options.length) {
+      onChange(options[index]?.value || "");
+    }
+  }, [onChange, options]);
+
+  /** ===== Tap 点击切换 ===== */
+  const handlePress = index => {
+    indexSV.value = index;
+    translate.value = withTiming(index * itemSizeSV.value, {
+      duration: animationConfig.duration ?? 150
+    });
+    emitChange(index);
+  };
+
+  /** ===== Drag 手势 ===== */
+  const panGesture = Gesture.Pan().onUpdate(e => {
+    const delta = vertical ? e.translationY : e.translationX;
+    // 基于手势开始时的位置进行偏移计算
+    const pos = delta + indexSV.value * itemSizeSV.value;
+    const max = (options.length - 1) * itemSizeSV.value;
+    translate.value = Math.min(Math.max(0, pos), max);
+  }).onEnd(() => {
+    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);
+  });
+
+  /** ===== 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
+      }]
+    };
+  });
+
+  /** ===== Label 动画样式 ===== */
+  const getLabelAnimatedStyle = index => 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
+    };
+  });
+
+  /** * 2. Layout 初始化
+   * 这是修复初始显示问题的关键
+   */
+  const onLayout = e => {
+    const size = vertical ? e.nativeEvent.layout.height : e.nativeEvent.layout.width;
+    const newItemSize = size / options.length;
+    itemSizeSV.value = newItemSize;
+
+    // 核心修复：在获取到尺寸的第一时间，根据 currentIndex 强行同步 translate 的值
+    if (currentIndex >= 0) {
+      translate.value = currentIndex * newItemSize;
+    }
+  };
+  return /*#__PURE__*/_jsx(GestureDetector, {
+    gesture: panGesture,
+    children: /*#__PURE__*/_jsxs(View, {
+      onLayout: onLayout,
+      style: [styles.container, {
+        backgroundColor: colors.bgBack
+      }, vertical ? {
+        height: height * options.length,
+        width: VERTICAL_WIDTH,
+        flexDirection: "column"
+      } : {
+        height,
+        flexDirection: "row"
+      }],
+      children: [/*#__PURE__*/_jsx(Animated.View, {
+        pointerEvents: "none",
+        style: [styles.thumbBase, {
+          backgroundColor: colors.bgFront
+        }, animatedThumbStyle]
+      }), options.map((opt, index) => {
+        const labelStyle = getLabelAnimatedStyle(index);
+        return /*#__PURE__*/_jsx(Pressable, {
+          style: styles.item,
+          onPress: () => handlePress(index),
+          children: /*#__PURE__*/_jsx(Animated.Text, {
+            style: [styles.label, labelStyle],
+            children: opt.label
+          })
+        }, opt.value);
+      })]
+    })
+  });
+}
+const styles = StyleSheet.create({
+  container: {
+    borderRadius: 16,
+    overflow: "hidden",
+    flex: 1
+  },
+  thumbBase: {
+    position: "absolute",
+    borderRadius: 12,
+    shadowColor: '#000',
+    shadowOpacity: 0.3,
+    shadowOffset: {
+      width: 0,
+      height: 1
+    },
+    shadowRadius: 2,
+    elevation: 2
+  },
+  item: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 1 // 确保文字在滑块上方
+  },
+  label: {
+    fontSize: 14,
+    fontWeight: "600"
+  }
+});
+//# sourceMappingURL=AnimatedSwitch.js.map

package/lib/module/AnimatedSwitch.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useCallback","useEffect","Pressable","StyleSheet","View","Gesture","GestureDetector","Animated","interpolateColor","runOnJS","useAnimatedStyle","useSharedValue","withSpring","withTiming","jsx","_jsx","jsxs","_jsxs","THUMB_INSET","VERTICAL_WIDTH","AnimatedSwitch","options","value","onChange","height","vertical","colors","activeText","inactiveText","bgFront","bgBack","animationConfig","duration","damping","stiffness","itemSizeSV","translate","indexSV","currentIndex","findIndex","o","emitChange","index","length","handlePress","panGesture","Pan","onUpdate","e","delta","translationY","translationX","pos","max","Math","min","onEnd","round","animatedThumbStyle","top","left","right","transform","translateY","width","bottom","translateX","getLabelAnimatedStyle","center","color","onLayout","size","nativeEvent","layout","newItemSize","gesture","children","style","styles","container","backgroundColor","flexDirection","pointerEvents","thumbBase","map","opt","labelStyle","item","onPress","Text","label","create","borderRadius","overflow","flex","position","shadowColor","shadowOpacity","shadowOffset","shadowRadius","elevation","alignItems","justifyContent","zIndex","fontSize","fontWeight"],"sourceRoot":"../../src","sources":["AnimatedSwitch.tsx"],"mappings":";;AAAA,SAASA,WAAW,EAAEC,SAAS,QAAQ,OAAO;AAC9C,SAAiCC,SAAS,EAAEC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAClF,SAASC,OAAO,EAAEC,eAAe,QAAQ,8BAA8B;AACvE,OAAOC,QAAQ,IACbC,gBAAgB,EAChBC,OAAO,EACPC,gBAAgB,EAChBC,cAAc,EACdC,UAAU,EACVC,UAAU,QACL,yBAAyB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AA0BjC,MAAMC,WAAW,GAAG,CAAC;AACrB,MAAMC,cAAc,GAAG,GAAG;AAE1B,OAAO,SAASC,cAAcA,CAAC;EAC7BC,OAAO;EACPC,KAAK;EACLC,QAAQ;EACRC,MAAM,GAAG,EAAE;EACXC,QAAQ,GAAG,KAAK;EAChBC,MAAM,GAAG;IACPC,UAAU,EAAE,SAAS;IACrBC,YAAY,EAAE,WAAW;IACzBC,OAAO,EAAE,SAAS;IAClBC,MAAM,EAAE;EACV,CAAC;EACDC,eAAe,GAAG;IAChBC,QAAQ,EAAE,GAAG;IACbC,OAAO,EAAE,EAAE;IACXC,SAAS,EAAE;EACb;AACK,CAAC,EAAE;EAER;EACA,MAAMC,UAAU,GAAGxB,cAAc,CAAC,CAAC,CAAC;EACpC,MAAMyB,SAAS,GAAGzB,cAAc,CAAC,CAAC,CAAC;EACnC,MAAM0B,OAAO,GAAG1B,cAAc,CAAC,CAAC,CAAC;EAEjC,MAAM2B,YAAY,GAAGjB,OAAO,CAACkB,SAAS,CAAEC,CAAC,IAAKA,CAAC,CAAClB,KAAK,KAAKA,KAAK,CAAC;;EAEhE;AACF;AACA;EACErB,SAAS,CAAC,MAAM;IACd,IAAIqC,YAAY,IAAI,CAAC,EAAE;MACrBD,OAAO,CAACf,KAAK,GAAGgB,YAAY;MAC5B;MACA,IAAIH,UAAU,CAACb,KAAK,GAAG,CAAC,EAAE;QACxBc,SAAS,CAACd,KAAK,GAAGT,UAAU,CAACyB,YAAY,GAAGH,UAAU,CAACb,KAAK,EAAE;UAC5DU,QAAQ,EAAED,eAAe,CAACC;QAC5B,CAAC,CAAC;MACJ;IACF;EACF,CAAC,EAAE,CAACM,YAAY,EAAEP,eAAe,CAACC,QAAQ,CAAC,CAAC;;EAE5C;EACA,MAAMS,UAAU,GAAGzC,WAAW,CAC3B0C,KAAa,IAAK;IACjB,IAAIrB,OAAO,CAACsB,MAAM,GAAG,CAAC,IAAID,KAAK,IAAI,CAAC,IAAIA,KAAK,GAAGrB,OAAO,CAACsB,MAAM,EAAE;MAC9DpB,QAAQ,CAACF,OAAO,CAACqB,KAAK,CAAC,EAAEpB,KAAK,IAAI,EAAE,CAAC;IACvC;EACF,CAAC,EACD,CAACC,QAAQ,EAAEF,OAAO,CACpB,CAAC;;EAED;EACA,MAAMuB,WAAW,GAAIF,KAAa,IAAK;IACrCL,OAAO,CAACf,KAAK,GAAGoB,KAAK;IACrBN,SAAS,CAACd,KAAK,GAAGT,UAAU,CAAC6B,KAAK,GAAGP,UAAU,CAACb,KAAK,EAAE;MACrDU,QAAQ,EAAED,eAAe,CAACC,QAAQ,IAAI;IACxC,CAAC,CAAC;IACFS,UAAU,CAACC,KAAK,CAAC;EACnB,CAAC;;EAED;EACA,MAAMG,UAAU,GAAGxC,OAAO,CAACyC,GAAG,CAAC,CAAC,CAC7BC,QAAQ,CAAEC,CAAC,IAAK;IACf,MAAMC,KAAK,GAAGxB,QAAQ,GAAGuB,CAAC,CAACE,YAAY,GAAGF,CAAC,CAACG,YAAY;IACxD;IACA,MAAMC,GAAG,GAAGH,KAAK,GAAGZ,OAAO,CAACf,KAAK,GAAGa,UAAU,CAACb,KAAK;IACpD,MAAM+B,GAAG,GAAG,CAAChC,OAAO,CAACsB,MAAM,GAAG,CAAC,IAAIR,UAAU,CAACb,KAAK;IAEnDc,SAAS,CAACd,KAAK,GAAGgC,IAAI,CAACC,GAAG,CAACD,IAAI,CAACD,GAAG,CAAC,CAAC,EAAED,GAAG,CAAC,EAAEC,GAAG,CAAC;EACnD,CAAC,CAAC,CACDG,KAAK,CAAC,MAAM;IACX,MAAMd,KAAK,GAAGY,IAAI,CAACG,KAAK,CAACrB,SAAS,CAACd,KAAK,GAAGa,UAAU,CAACb,KAAK,CAAC;IAC5De,OAAO,CAACf,KAAK,GAAGoB,KAAK;IAErBN,SAAS,CAACd,KAAK,GAAGV,UAAU,CAAC8B,KAAK,GAAGP,UAAU,CAACb,KAAK,EAAE;MACrDW,OAAO,EAAEF,eAAe,CAACE,OAAO,IAAI,EAAE;MACtCC,SAAS,EAAEH,eAAe,CAACG,SAAS,IAAI;IAC1C,CAAC,CAAC;IAEFzB,OAAO,CAACgC,UAAU,CAAC,CAACC,KAAK,CAAC;EAC5B,CAAC,CAAC;;EAEJ;EACA,MAAMgB,kBAAkB,GAAGhD,gBAAgB,CAAC,MAAM;IAChD,IAAIe,QAAQ,EAAE;MACZ,OAAO;QACLD,MAAM,EAAEW,UAAU,CAACb,KAAK,GAAGJ,WAAW,GAAG,CAAC;QAC1CyC,GAAG,EAAEzC,WAAW;QAChB0C,IAAI,EAAE1C,WAAW;QACjB2C,KAAK,EAAE3C,WAAW;QAClB4C,SAAS,EAAE,CAAC;UAAEC,UAAU,EAAE3B,SAAS,CAACd;QAAM,CAAC;MAC7C,CAAC;IACH;IACA,OAAO;MACL0C,KAAK,EAAE7B,UAAU,CAACb,KAAK,GAAGJ,WAAW,GAAG,CAAC;MACzC0C,IAAI,EAAE1C,WAAW;MACjByC,GAAG,EAAEzC,WAAW;MAChB+C,MAAM,EAAE/C,WAAW;MACnB4C,SAAS,EAAE,CAAC;QAAEI,UAAU,EAAE9B,SAAS,CAACd;MAAM,CAAC;IAC7C,CAAC;EACH,CAAC,CAAC;;EAEF;EACA,MAAM6C,qBAAqB,GAAIzB,KAAa,IAC1ChC,gBAAgB,CAAC,MAAM;IACrB,MAAM0D,MAAM,GAAG1B,KAAK,GAAGP,UAAU,CAACb,KAAK;IACvC,MAAM+C,KAAK,GAAG7D,gBAAgB,CAC5B4B,SAAS,CAACd,KAAK,EACf,CAAC8C,MAAM,GAAGjC,UAAU,CAACb,KAAK,EAAE8C,MAAM,EAAEA,MAAM,GAAGjC,UAAU,CAACb,KAAK,CAAC,EAC9D,CAACI,MAAM,CAACE,YAAY,EAAEF,MAAM,CAACC,UAAU,EAAED,MAAM,CAACE,YAAY,CAC9D,CAAC;IACD,OAAO;MAAEyC;IAAM,CAAC;EAClB,CAAC,CAAC;;EAEJ;AACF;AACA;EACE,MAAMC,QAAQ,GAAItB,CAAoB,IAAK;IACzC,MAAMuB,IAAI,GAAG9C,QAAQ,GACjBuB,CAAC,CAACwB,WAAW,CAACC,MAAM,CAACjD,MAAM,GAC3BwB,CAAC,CAACwB,WAAW,CAACC,MAAM,CAACT,KAAK;IAE9B,MAAMU,WAAW,GAAGH,IAAI,GAAGlD,OAAO,CAACsB,MAAM;IACzCR,UAAU,CAACb,KAAK,GAAGoD,WAAW;;IAE9B;IACA,IAAIpC,YAAY,IAAI,CAAC,EAAE;MACrBF,SAAS,CAACd,KAAK,GAAGgB,YAAY,GAAGoC,WAAW;IAC9C;EACF,CAAC;EAED,oBACE3D,IAAA,CAACT,eAAe;IAACqE,OAAO,EAAE9B,UAAW;IAAA+B,QAAA,eACnC3D,KAAA,CAACb,IAAI;MACHkE,QAAQ,EAAEA,QAAS;MACnBO,KAAK,EAAE,CACLC,MAAM,CAACC,SAAS,EAChB;QAAEC,eAAe,EAAEtD,MAAM,CAACI;MAAO,CAAC,EAClCL,QAAQ,GACJ;QACAD,MAAM,EAAEA,MAAM,GAAGH,OAAO,CAACsB,MAAM;QAC/BqB,KAAK,EAAE7C,cAAc;QACrB8D,aAAa,EAAE;MACjB,CAAC,GACC;QAAEzD,MAAM;QAAEyD,aAAa,EAAE;MAAM,CAAC,CACpC;MAAAL,QAAA,gBAGF7D,IAAA,CAACR,QAAQ,CAACH,IAAI;QACZ8E,aAAa,EAAC,MAAM;QACpBL,KAAK,EAAE,CAACC,MAAM,CAACK,SAAS,EAAE;UAAEH,eAAe,EAAEtD,MAAM,CAACG;QAAQ,CAAC,EAAE6B,kBAAkB;MAAE,CACpF,CAAC,EAGDrC,OAAO,CAAC+D,GAAG,CAAC,CAACC,GAAG,EAAE3C,KAAK,KAAK;QAC3B,MAAM4C,UAAU,GAAGnB,qBAAqB,CAACzB,KAAK,CAAC;QAC/C,oBACE3B,IAAA,CAACb,SAAS;UAER2E,KAAK,EAAEC,MAAM,CAACS,IAAK;UACnBC,OAAO,EAAEA,CAAA,KAAM5C,WAAW,CAACF,KAAK,CAAE;UAAAkC,QAAA,eAElC7D,IAAA,CAACR,QAAQ,CAACkF,IAAI;YAACZ,KAAK,EAAE,CAACC,MAAM,CAACY,KAAK,EAAEJ,UAAU,CAAE;YAAAV,QAAA,EAC9CS,GAAG,CAACK;UAAK,CACG;QAAC,GANXL,GAAG,CAAC/D,KAOA,CAAC;MAEhB,CAAC,CAAC;IAAA,CACE;EAAC,CACQ,CAAC;AAEtB;AAEA,MAAMwD,MAAM,GAAG3E,UAAU,CAACwF,MAAM,CAAC;EAC/BZ,SAAS,EAAE;IACTa,YAAY,EAAE,EAAE;IAChBC,QAAQ,EAAE,QAAQ;IAClBC,IAAI,EAAE;EACR,CAAC;EACDX,SAAS,EAAE;IACTY,QAAQ,EAAE,UAAU;IACpBH,YAAY,EAAE,EAAE;IAChBI,WAAW,EAAE,MAAM;IACnBC,aAAa,EAAE,GAAG;IAClBC,YAAY,EAAE;MAAElC,KAAK,EAAE,CAAC;MAAExC,MAAM,EAAE;IAAE,CAAC;IACrC2E,YAAY,EAAE,CAAC;IACfC,SAAS,EAAE;EACb,CAAC;EACDb,IAAI,EAAE;IACJO,IAAI,EAAE,CAAC;IACPO,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE,QAAQ;IACxBC,MAAM,EAAE,CAAC,CAAE;EACb,CAAC;EACDb,KAAK,EAAE;IACLc,QAAQ,EAAE,EAAE;IACZC,UAAU,EAAE;EACd;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/module/index.js

@@ -0,0 +1,5 @@
+"use strict";
+
+import { AnimatedSwitch } from "./AnimatedSwitch.js";
+export default AnimatedSwitch;
+//# sourceMappingURL=index.js.map

package/lib/module/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["AnimatedSwitch"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;AAAA,SAASA,cAAc,QAAQ,qBAAkB;AAEjD,eAAeA,cAAc","ignoreList":[]}

package/lib/module/package.json

@@ -0,0 +1 @@
+{"type":"module"}

package/lib/typescript/package.json

@@ -0,0 +1 @@
+{"type":"module"}

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

@@ -0,0 +1,25 @@
+type Option = {
+    label: string;
+    value: string | number;
+};
+type Props = {
+    options: Option[];
+    value: string | number;
+    onChange: (value: string | number) => void;
+    height?: number;
+    vertical?: boolean;
+    colors?: {
+        activeText: string;
+        inactiveText: string;
+        bgFront: string;
+        bgBack: string;
+    };
+    animationConfig?: {
+        duration?: number;
+        damping?: number;
+        stiffness?: number;
+    };
+};
+export declare function AnimatedSwitch({ options, value, onChange, height, vertical, colors, animationConfig, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=AnimatedSwitch.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AnimatedSwitch.d.ts","sourceRoot":"","sources":["../../../src/AnimatedSwitch.tsx"],"names":[],"mappings":"AAYA,KAAK,MAAM,GAAG;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB,CAAC;AAEF,KAAK,KAAK,GAAG;IACX,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,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE;QACP,UAAU,EAAE,MAAM,CAAC;QACnB,YAAY,EAAE,MAAM,CAAC;QACrB,OAAO,EAAE,MAAM,CAAC;QAChB,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,eAAe,CAAC,EAAE;QAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;CACH,CAAC;AAKF,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,KAAK,EACL,QAAQ,EACR,MAAW,EACX,QAAgB,EAChB,MAKC,EACD,eAIC,GACF,EAAE,KAAK,2CA0JP"}

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

@@ -0,0 +1,3 @@
+import { AnimatedSwitch } from "./AnimatedSwitch";
+export default AnimatedSwitch;
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/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,MAAM,kBAAkB,CAAC;AAElD,eAAe,cAAc,CAAC"}

package/package.json

@@ -0,0 +1,161 @@
+{
+  "name": "react-native-directional-toggle",
+  "version": "0.1.0",
+  "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",
+  "exports": {
+    ".": {
+      "source": "./src/index.tsx",
+      "types": "./lib/typescript/src/index.d.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "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__",
+    "!**/.*"
+  ],
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/alansuhe/react-native-directional-toggle.git"
+  },
+  "author": "Alan Suhe <tosuhe@gmail.com> (https://github.com/alansuhe)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/alansuhe/react-native-directional-toggle/issues"
+  },
+  "homepage": "https://github.com/alansuhe/react-native-directional-toggle#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@commitlint/config-conventional": "^19.8.1",
+    "@eslint/compat": "^1.3.2",
+    "@eslint/eslintrc": "^3.3.1",
+    "@eslint/js": "^9.35.0",
+    "@react-native/babel-preset": "0.83.0",
+    "@react-native/eslint-config": "0.83.0",
+    "@release-it/conventional-changelog": "^10.0.1",
+    "@types/jest": "^29.5.14",
+    "@types/react": "^19.1.12",
+    "commitlint": "^19.8.1",
+    "del-cli": "^6.0.0",
+    "eslint": "^9.35.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.4",
+    "jest": "^29.7.0",
+    "lefthook": "^2.0.3",
+    "prettier": "^2.8.8",
+    "react": "19.1.0",
+    "react-native": "0.81.5",
+    "react-native-builder-bob": "^0.40.17",
+    "release-it": "^19.0.4",
+    "typescript": "^5.9.2"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "react-native-gesture-handler": "^2.30.0",
+    "react-native-reanimated": "^4.2.1",
+    "react-native-worklets": "0.7.1"
+  },
+  "workspaces": [
+    "example"
+  ],
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ]
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true
+    },
+    "github": {
+      "release": true
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": {
+          "name": "angular"
+        }
+      }
+    }
+  },
+  "create-react-native-library": {
+    "type": "library",
+    "languages": "js",
+    "tools": [
+      "eslint",
+      "jest",
+      "lefthook",
+      "release-it"
+    ],
+    "version": "0.56.1"
+  },
+  "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"
+  }
+}

package/src/AnimatedSwitch.tsx

@@ -0,0 +1,238 @@
+import { useCallback, useEffect } from "react";
+import { type LayoutChangeEvent, Pressable, StyleSheet, View } from "react-native";
+import { Gesture, GestureDetector } from "react-native-gesture-handler";
+import Animated, {
+  interpolateColor,
+  runOnJS,
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+  withTiming,
+} from "react-native-reanimated";
+
+type Option = {
+  label: string;
+  value: string | number;
+};
+
+type Props = {
+  options: Option[];
+  value: string | number;
+  onChange: (value: string | number) => void;
+  height?: number;
+  vertical?: boolean;
+  colors?: {
+    activeText: string;
+    inactiveText: string;
+    bgFront: string;
+    bgBack: string;
+  };
+  animationConfig?: {
+    duration?: number;
+    damping?: number;
+    stiffness?: number;
+  };
+};
+
+const THUMB_INSET = 4;
+const VERTICAL_WIDTH = 128;
+
+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 ===== */
+  const itemSizeSV = useSharedValue(0);
+  const translate = useSharedValue(0);
+  const indexSV = useSharedValue(0);
+
+  const currentIndex = options.findIndex((o) => o.value === value);
+
+  /** * 1. 监听外部 value 变化
+   * 当外部修改 value 时，滑块应动画移动到新位置
+   */
+  useEffect(() => {
+    if (currentIndex >= 0) {
+      indexSV.value = currentIndex;
+      // 只有当 itemSizeSV 已经有值（即 Layout 已完成）时才执行动画
+      if (itemSizeSV.value > 0) {
+        translate.value = withTiming(currentIndex * itemSizeSV.value, {
+          duration: animationConfig.duration,
+        });
+      }
+    }
+  }, [currentIndex, animationConfig.duration]);
+
+  /** ===== JS 回调 ===== */
+  const emitChange = useCallback(
+    (index: number) => {
+      if (options.length > 0 && index >= 0 && index < options.length) {
+        onChange(options[index]?.value || "");
+      }
+    },
+    [onChange, options],
+  );
+
+  /** ===== Tap 点击切换 ===== */
+  const handlePress = (index: number) => {
+    indexSV.value = index;
+    translate.value = withTiming(index * itemSizeSV.value, {
+      duration: animationConfig.duration ?? 150
+    });
+    emitChange(index);
+  };
+
+  /** ===== Drag 手势 ===== */
+  const panGesture = Gesture.Pan()
+    .onUpdate((e) => {
+      const delta = vertical ? e.translationY : e.translationX;
+      // 基于手势开始时的位置进行偏移计算
+      const pos = delta + indexSV.value * itemSizeSV.value;
+      const max = (options.length - 1) * itemSizeSV.value;
+
+      translate.value = Math.min(Math.max(0, pos), max);
+    })
+    .onEnd(() => {
+      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);
+    });
+
+  /** ===== 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 }],
+    };
+  });
+
+  /** ===== 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 };
+    });
+
+  /** * 2. Layout 初始化
+   * 这是修复初始显示问题的关键
+   */
+  const onLayout = (e: LayoutChangeEvent) => {
+    const size = vertical
+      ? e.nativeEvent.layout.height
+      : e.nativeEvent.layout.width;
+
+    const newItemSize = size / options.length;
+    itemSizeSV.value = newItemSize;
+
+    // 核心修复：在获取到尺寸的第一时间，根据 currentIndex 强行同步 translate 的值
+    if (currentIndex >= 0) {
+      translate.value = currentIndex * newItemSize;
+    }
+  };
+
+  return (
+    <GestureDetector gesture={panGesture}>
+      <View
+        onLayout={onLayout}
+        style={[
+          styles.container,
+          { backgroundColor: colors.bgBack },
+          vertical
+            ? {
+              height: height * options.length,
+              width: VERTICAL_WIDTH,
+              flexDirection: "column",
+            }
+            : { height, flexDirection: "row" },
+        ]}
+      >
+        {/* 滑块背景 */}
+        <Animated.View
+          pointerEvents="none"
+          style={[styles.thumbBase, { backgroundColor: colors.bgFront }, animatedThumbStyle]}
+        />
+
+        {/* 选项列表 */}
+        {options.map((opt, index) => {
+          const labelStyle = getLabelAnimatedStyle(index);
+          return (
+            <Pressable
+              key={opt.value}
+              style={styles.item}
+              onPress={() => handlePress(index)}
+            >
+              <Animated.Text style={[styles.label, labelStyle]}>
+                {opt.label}
+              </Animated.Text>
+            </Pressable>
+          );
+        })}
+      </View>
+    </GestureDetector>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    borderRadius: 16,
+    overflow: "hidden",
+    flex: 1,
+  },
+  thumbBase: {
+    position: "absolute",
+    borderRadius: 12,
+    shadowColor: '#000',
+    shadowOpacity: 0.3,
+    shadowOffset: { width: 0, height: 1 },
+    shadowRadius: 2,
+    elevation: 2,
+  },
+  item: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 1, // 确保文字在滑块上方
+  },
+  label: {
+    fontSize: 14,
+    fontWeight: "600",
+  },
+});

package/src/index.tsx

@@ -0,0 +1,3 @@
+import { AnimatedSwitch } from "./AnimatedSwitch";
+
+export default AnimatedSwitch;