@minkyumdev/react-native-switch 1.0.0

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2024 minkyumdev
+
+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.md

@@ -0,0 +1,209 @@
+# @minkyumdev/react-native-switch
+
+A customizable and animated switch component for React Native built with `react-native-reanimated`.
+
+## Features
+
+- 🎨 Fully customizable colors and sizes
+- ✨ Smooth animations powered by react-native-reanimated
+- 🎯 Customizable thumb scale animation
+- 📳 Haptic feedback support (optional)
+- ♿ Accessible and disabled state support
+- 📱 Works on both iOS and Android
+- 💪 Written in TypeScript with full type definitions
+
+## Installation
+
+```bash
+npm install @minkyumdev/react-native-switch
+# or
+yarn add @minkyumdev/react-native-switch
+```
+
+### Peer Dependencies
+
+This library requires the following peer dependencies:
+
+- `react` (>=16.8.0)
+- `react-native` (>=0.60.0)
+- `react-native-reanimated` (>=2.0.0)
+- `@mhpdev/react-native-haptics` (optional, for haptic feedback)
+
+Make sure to install these dependencies in your project:
+
+```bash
+npm install react-native-reanimated
+npm install @mhpdev/react-native-haptics
+```
+
+### iOS Setup
+
+For iOS, you need to install pods:
+
+```bash
+cd ios && pod install
+```
+
+### Android Setup
+
+No additional setup required for Android.
+
+## Usage
+
+```tsx
+import React, { useState } from 'react';
+import { View } from 'react-native';
+import Switch from '@minkyumdev/react-native-switch';
+
+function App() {
+  const [isEnabled, setIsEnabled] = useState(false);
+
+  return (
+    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+      <Switch
+        value={isEnabled}
+        onValueChange={setIsEnabled}
+        activeColor="#34C759"
+        inactiveColor="#E5E5EA"
+      />
+    </View>
+  );
+}
+```
+
+## Props
+
+| Prop                 | Type                             | Default     | Description                                                    |
+| -------------------- | -------------------------------- | ----------- | -------------------------------------------------------------- |
+| `value`              | `boolean`                        | `false`     | Current state of the switch (on/off)                           |
+| `onValueChange`      | `(value: boolean) => void`       | -           | Callback function called when the switch value changes         |
+| `disabled`           | `boolean`                        | `false`     | Whether the switch is disabled                                 |
+| `activeColor`        | `string`                         | `'#34C759'` | Color of the switch when active (on)                           |
+| `inactiveColor`      | `string`                         | `'#F6F6F6'` | Color of the switch when inactive (off)                        |
+| `thumbColor`         | `string`                         | `'#FFFFFF'` | Color of the thumb (the circular element)                      |
+| `size`               | `'small' \| 'medium' \| 'large'` | `'small'`   | Predefined size of the switch (used when width/height not set) |
+| `width`              | `number`                         | -           | Custom width of the switch (takes priority over size)          |
+| `height`             | `number`                         | -           | Custom height of the switch (takes priority over size)         |
+| `thumbSize`          | `number`                         | -           | Custom size of the thumb (auto-calculated if not provided)     |
+| `thumbScaleInactive` | `number`                         | `0.8`       | Scale value of the thumb when inactive (off state)             |
+| `enableHaptics`      | `boolean`                        | `true`      | Whether to enable haptic feedback on toggle                    |
+| `style`              | `StyleProp<ViewStyle>`           | -           | Additional style for the switch container                      |
+| `testID`             | `string`                         | -           | Test ID for testing purposes                                   |
+
+## Examples
+
+### Basic Usage
+
+```tsx
+<Switch value={isEnabled} onValueChange={setIsEnabled} />
+```
+
+### Custom Colors
+
+```tsx
+<Switch
+  value={isEnabled}
+  onValueChange={setIsEnabled}
+  activeColor="#FF3B30"
+  inactiveColor="#C7C7CC"
+  thumbColor="#FFFFFF"
+/>
+```
+
+### Custom Size
+
+```tsx
+// Using predefined sizes
+<Switch value={isEnabled} onValueChange={setIsEnabled} size="large" />
+
+// Using custom width and height
+<Switch
+  value={isEnabled}
+  onValueChange={setIsEnabled}
+  width={80}
+  height={40}
+/>
+
+// Custom width, height, and thumbSize
+<Switch
+  value={isEnabled}
+  onValueChange={setIsEnabled}
+  width={100}
+  height={50}
+  thumbSize={35}
+/>
+```
+
+### Disabled State
+
+```tsx
+<Switch value={isEnabled} onValueChange={setIsEnabled} disabled={true} />
+```
+
+### Disable Haptics
+
+```tsx
+<Switch value={isEnabled} onValueChange={setIsEnabled} enableHaptics={false} />
+```
+
+### Custom Thumb Scale
+
+```tsx
+// Custom scale for inactive state (default is 0.8)
+<Switch
+  value={isEnabled}
+  onValueChange={setIsEnabled}
+  thumbScaleInactive={0.7} // Thumb will be smaller when off
+/>
+```
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Build the library
+npm run build
+
+# Watch mode for development
+npm run build:watch
+```
+
+## API Reference
+
+### Switch Component
+
+The main component exported from this library.
+
+#### Props
+
+See the [Props](#props) table above for detailed information.
+
+#### Example
+
+```tsx
+import Switch from '@minkyumdev/react-native-switch';
+
+function MyComponent() {
+  const [enabled, setEnabled] = useState(false);
+
+  return (
+    <Switch
+      value={enabled}
+      onValueChange={setEnabled}
+      size="medium"
+      activeColor="#34C759"
+      inactiveColor="#E5E5EA"
+    />
+  );
+}
+```
+
+## License
+
+MIT
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.

package/dist/index.d.ts

@@ -0,0 +1,93 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+export interface SwitchProps {
+    /**
+     * Current state of the switch (on/off)
+     */
+    value: boolean;
+    /**
+     * Callback function called when the switch value changes
+     */
+    onValueChange?: (value: boolean) => void;
+    /**
+     * Whether the switch is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Color of the switch when active (on)
+     * @default '#34C759'
+     */
+    activeColor?: string;
+    /**
+     * Color of the switch when inactive (off)
+     * @default '#F6F6F6'
+     */
+    inactiveColor?: string;
+    /**
+     * Color of the thumb (the circular element)
+     * @default '#FFFFFF'
+     */
+    thumbColor?: string;
+    /**
+     * Predefined size of the switch (used when width/height not set)
+     * @default 'small'
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Custom width of the switch (takes priority over size)
+     */
+    width?: number;
+    /**
+     * Custom height of the switch (takes priority over size)
+     */
+    height?: number;
+    /**
+     * Custom size of the thumb (auto-calculated if not provided)
+     */
+    thumbSize?: number;
+    /**
+     * Additional style for the switch container
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Test ID for testing purposes
+     */
+    testID?: string;
+    /**
+     * Whether to enable haptic feedback on toggle
+     * @default true
+     */
+    enableHaptics?: boolean;
+    /**
+     * Scale value of the thumb when inactive (off state)
+     * @default 0.8
+     */
+    thumbScaleInactive?: number;
+}
+export declare const SWITCH_ANIMATION_DURATION = 150;
+/**
+ * React Native용 커스텀 Switch 컴포넌트
+ * react-native-reanimated를 사용한 부드러운 애니메이션과 햅틱 피드백을 제공합니다.
+ *
+ * @example
+ * ```tsx
+ * import Switch from 'react-native-switch';
+ *
+ * function App() {
+ *   const [isEnabled, setIsEnabled] = useState(false);
+ *
+ *   return (
+ *     <Switch
+ *       value={isEnabled}
+ *       onValueChange={setIsEnabled}
+ *       size="medium"
+ *       activeColor="#20A2F9"
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export declare const Switch: React.FC<SwitchProps>;
+export default Switch;
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAa,SAAS,EAAE,SAAS,EAAc,MAAM,cAAc,CAAC;AAe3E,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,KAAK,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAYD,eAAO,MAAM,yBAAyB,MAAM,CAAC;AAY7C;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAwJxC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/index.js

@@ -0,0 +1,138 @@
+import React, { useCallback, useEffect, useMemo } from 'react';
+import { Pressable, PixelRatio } from 'react-native';
+import Animated, { interpolateColor, useAnimatedStyle, useSharedValue, withTiming, } from 'react-native-reanimated';
+import Haptics from '@mhpdev/react-native-haptics';
+import { styles } from './style';
+// Helper function for pixel ratio
+var pixelRatio = function (value) {
+    return PixelRatio.roundToNearestPixel(value);
+};
+var SWITCH_CONFIG = {
+    small: { width: 40, height: 24, thumbSize: 14 },
+    medium: { width: 50, height: 32, thumbSize: 20 },
+    large: { width: 60, height: 36, thumbSize: 26 },
+};
+// Thumb scale constants
+var THUMB_SCALE_ACTIVE = 1.0;
+// Animation constants
+export var SWITCH_ANIMATION_DURATION = 150;
+var ANIMATION_CONFIG = {
+    duration: SWITCH_ANIMATION_DURATION,
+};
+// Track padding
+var TRACK_PADDING = 4;
+// TranslateX values
+var TRANSLATE_X_INACTIVE = 0;
+var TRANSLATE_X_ACTIVE = 1;
+/**
+ * React Native용 커스텀 Switch 컴포넌트
+ * react-native-reanimated를 사용한 부드러운 애니메이션과 햅틱 피드백을 제공합니다.
+ *
+ * @example
+ * ```tsx
+ * import Switch from 'react-native-switch';
+ *
+ * function App() {
+ *   const [isEnabled, setIsEnabled] = useState(false);
+ *
+ *   return (
+ *     <Switch
+ *       value={isEnabled}
+ *       onValueChange={setIsEnabled}
+ *       size="medium"
+ *       activeColor="#20A2F9"
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export var Switch = React.memo(function (_a) {
+    var value = _a.value, onValueChange = _a.onValueChange, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.activeColor, activeColor = _c === void 0 ? '#34C759' : _c, _d = _a.inactiveColor, inactiveColor = _d === void 0 ? '#F6F6F6' : _d, _e = _a.thumbColor, thumbColor = _e === void 0 ? '#FFFFFF' : _e, _f = _a.size, size = _f === void 0 ? 'small' : _f, width = _a.width, height = _a.height, thumbSize = _a.thumbSize, style = _a.style, testID = _a.testID, _g = _a.enableHaptics, enableHaptics = _g === void 0 ? true : _g, _h = _a.thumbScaleInactive, thumbScaleInactive = _h === void 0 ? 0.8 : _h;
+    var translateX = useSharedValue(value ? TRANSLATE_X_ACTIVE : TRANSLATE_X_INACTIVE);
+    var switchConfig = useMemo(function () {
+        if (width !== undefined || height !== undefined) {
+            var configWidth = width !== null && width !== void 0 ? width : SWITCH_CONFIG[size].width;
+            var configHeight = height !== null && height !== void 0 ? height : SWITCH_CONFIG[size].height;
+            var calculatedThumbSize_1 = thumbSize !== null && thumbSize !== void 0 ? thumbSize : configHeight * 0.7;
+            return {
+                width: configWidth,
+                height: configHeight,
+                thumbSize: calculatedThumbSize_1,
+            };
+        }
+        return SWITCH_CONFIG[size];
+    }, [size, width, height, thumbSize]);
+    var thumbScaleActive = THUMB_SCALE_ACTIVE;
+    var thumbScaleDiff = thumbScaleActive - thumbScaleInactive;
+    var scaleOffsetPadding = useMemo(function () { return (switchConfig.thumbSize * (1 - thumbScaleInactive)) / 2; }, [switchConfig.thumbSize, thumbScaleInactive]);
+    var maxTranslate = useMemo(function () {
+        return switchConfig.width - switchConfig.thumbSize - TRACK_PADDING * 2;
+    }, [switchConfig.width, switchConfig.thumbSize]);
+    useEffect(function () {
+        translateX.value = withTiming(value ? TRANSLATE_X_ACTIVE : TRANSLATE_X_INACTIVE, ANIMATION_CONFIG);
+    }, [value, translateX]);
+    var handlePress = useCallback(function () {
+        if (disabled)
+            return;
+        if (enableHaptics) {
+            Haptics.impact('soft');
+        }
+        var newValue = !value;
+        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(newValue);
+    }, [disabled, value, onValueChange, enableHaptics]);
+    var trackAnimatedStyle = useAnimatedStyle(function () {
+        var backgroundColor = interpolateColor(translateX.value, [0, 1], [inactiveColor, activeColor]);
+        return {
+            backgroundColor: backgroundColor,
+        };
+    }, [inactiveColor, activeColor]);
+    var thumbAnimatedStyle = useAnimatedStyle(function () {
+        var scale = thumbScaleInactive + translateX.value * thumbScaleDiff;
+        var currentScaleOffset = scaleOffsetPadding * (1 - translateX.value);
+        var baseTranslateX = TRACK_PADDING + translateX.value * maxTranslate;
+        var translateXValue = baseTranslateX - currentScaleOffset;
+        return {
+            transform: [
+                {
+                    translateX: translateXValue,
+                },
+                {
+                    scale: scale,
+                },
+            ],
+        };
+    }, [maxTranslate, scaleOffsetPadding, thumbScaleInactive, thumbScaleDiff]);
+    var trackStyle = useMemo(function () { return ({
+        width: switchConfig.width,
+        height: switchConfig.height,
+        borderRadius: switchConfig.height / 2,
+        opacity: disabled ? 0.5 : 1,
+    }); }, [switchConfig.width, switchConfig.height, disabled]);
+    var calculatedThumbSize = useMemo(function () { return pixelRatio(switchConfig.thumbSize); }, [switchConfig.thumbSize]);
+    var thumbStyle = useMemo(function () { return ({
+        width: calculatedThumbSize,
+        height: calculatedThumbSize,
+        borderRadius: pixelRatio(switchConfig.thumbSize / 2),
+        backgroundColor: thumbColor,
+    }); }, [calculatedThumbSize, switchConfig.thumbSize, thumbColor]);
+    return (<Pressable onPress={handlePress} disabled={disabled} style={[style]} testID={testID}>
+        <Animated.View style={[styles.track, trackAnimatedStyle, trackStyle]}>
+          <Animated.View style={[styles.thumb, thumbAnimatedStyle, thumbStyle]}/>
+        </Animated.View>
+      </Pressable>);
+}, function (prevProps, nextProps) {
+    // Custom comparison for React.memo - prevent unnecessary re-renders
+    return (prevProps.value === nextProps.value &&
+        prevProps.disabled === nextProps.disabled &&
+        prevProps.activeColor === nextProps.activeColor &&
+        prevProps.inactiveColor === nextProps.inactiveColor &&
+        prevProps.thumbColor === nextProps.thumbColor &&
+        prevProps.size === nextProps.size &&
+        prevProps.width === nextProps.width &&
+        prevProps.height === nextProps.height &&
+        prevProps.thumbSize === nextProps.thumbSize &&
+        prevProps.enableHaptics === nextProps.enableHaptics &&
+        prevProps.onValueChange === nextProps.onValueChange);
+});
+export default Switch;
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"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"}

package/dist/style.d.ts

@@ -0,0 +1,16 @@
+export declare const styles: {
+    track: {
+        justifyContent: "center";
+    };
+    thumb: {
+        shadowColor: string;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
+        elevation: number;
+    };
+};
+//# sourceMappingURL=style.d.ts.map

package/dist/style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../src/style.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;CAejB,CAAC"}

package/dist/style.js

@@ -0,0 +1,18 @@
+import { StyleSheet } from 'react-native';
+export var styles = StyleSheet.create({
+    track: {
+        justifyContent: 'center',
+        // padding: 2,
+    },
+    thumb: {
+        shadowColor: '#000',
+        shadowOffset: {
+            width: 0,
+            height: 2,
+        },
+        shadowOpacity: 0.1,
+        shadowRadius: 2,
+        elevation: 2,
+    },
+});
+//# sourceMappingURL=style.js.map

package/dist/style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.js","sourceRoot":"","sources":["../src/style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,MAAM,CAAC,IAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IACtC,KAAK,EAAE;QACL,cAAc,EAAE,QAAQ;QACxB,cAAc;KACf;IACD,KAAK,EAAE;QACL,WAAW,EAAE,MAAM;QACnB,YAAY,EAAE;YACZ,KAAK,EAAE,CAAC;YACR,MAAM,EAAE,CAAC;SACV;QACD,aAAa,EAAE,GAAG;QAClB,YAAY,EAAE,CAAC;QACf,SAAS,EAAE,CAAC;KACb;CACF,CAAC,CAAC"}

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@minkyumdev/react-native-switch",
+  "version": "1.0.0",
+  "description": "A customizable switch component for React Native",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "src",
+    "README.md",
+    "LICENSE"
+  ],
+  "keywords": [
+    "react-native",
+    "switch",
+    "toggle",
+    "component",
+    "ui"
+  ],
+  "author": "",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/minkyumdev/react-native-switch.git"
+  },
+  "scripts": {
+    "build": "rm -rf dist && tsc",
+    "build:watch": "rm -rf dist && tsc -w",
+    "prepublishOnly": "npm run build",
+    "android": "react-native run-android",
+    "ios": "react-native run-ios",
+    "lint": "eslint .",
+    "start": "react-native start",
+    "test": "jest"
+  },
+  "peerDependencies": {
+    "@mhpdev/react-native-haptics": "*",
+    "react": ">=16.8.0",
+    "react-native": ">=0.60.0",
+    "react-native-reanimated": ">=2.0.0"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@babel/core": "^7.25.2",
+    "@babel/preset-env": "^7.25.3",
+    "@babel/runtime": "^7.25.0",
+    "@mhpdev/react-native-haptics": "1.0.1",
+    "@react-native-community/cli": "20.0.0",
+    "@react-native-community/cli-platform-android": "20.0.0",
+    "@react-native-community/cli-platform-ios": "20.0.0",
+    "@react-native/babel-preset": "0.82.1",
+    "@react-native/eslint-config": "0.82.1",
+    "@react-native/metro-config": "0.82.1",
+    "@react-native/typescript-config": "0.82.1",
+    "@types/jest": "^29.5.13",
+    "@types/react": "^19.1.1",
+    "@types/react-test-renderer": "^19.1.0",
+    "eslint": "^8.19.0",
+    "jest": "^29.6.3",
+    "prettier": "2.8.8",
+    "react-native-reanimated": "4.1.3",
+    "react-native-worklets": "0.6.1",
+    "react-test-renderer": "19.1.1",
+    "typescript": "^5.8.3"
+  },
+  "engines": {
+    "node": ">=20"
+  }
+}

package/src/index.tsx

@@ -0,0 +1,281 @@
+import React, { useCallback, useEffect, useMemo } from 'react';
+import { Pressable, StyleProp, ViewStyle, PixelRatio } from 'react-native';
+import Animated, {
+  interpolateColor,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import Haptics from '@mhpdev/react-native-haptics';
+import { styles } from './style';
+
+// Helper function for pixel ratio
+const pixelRatio = (value: number): number => {
+  return PixelRatio.roundToNearestPixel(value);
+};
+
+export interface SwitchProps {
+  /**
+   * Current state of the switch (on/off)
+   */
+  value: boolean;
+  /**
+   * Callback function called when the switch value changes
+   */
+  onValueChange?: (value: boolean) => void;
+  /**
+   * Whether the switch is disabled
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Color of the switch when active (on)
+   * @default '#34C759'
+   */
+  activeColor?: string;
+  /**
+   * Color of the switch when inactive (off)
+   * @default '#F6F6F6'
+   */
+  inactiveColor?: string;
+  /**
+   * Color of the thumb (the circular element)
+   * @default '#FFFFFF'
+   */
+  thumbColor?: string;
+  /**
+   * Predefined size of the switch (used when width/height not set)
+   * @default 'small'
+   */
+  size?: 'small' | 'medium' | 'large';
+  /**
+   * Custom width of the switch (takes priority over size)
+   */
+  width?: number;
+  /**
+   * Custom height of the switch (takes priority over size)
+   */
+  height?: number;
+  /**
+   * Custom size of the thumb (auto-calculated if not provided)
+   */
+  thumbSize?: number;
+  /**
+   * Additional style for the switch container
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Test ID for testing purposes
+   */
+  testID?: string;
+  /**
+   * Whether to enable haptic feedback on toggle
+   * @default true
+   */
+  enableHaptics?: boolean;
+  /**
+   * Scale value of the thumb when inactive (off state)
+   * @default 0.8
+   */
+  thumbScaleInactive?: number;
+}
+
+const SWITCH_CONFIG = {
+  small: { width: 40, height: 24, thumbSize: 14 },
+  medium: { width: 50, height: 32, thumbSize: 20 },
+  large: { width: 60, height: 36, thumbSize: 26 },
+};
+
+// Thumb scale constants
+const THUMB_SCALE_ACTIVE = 1.0;
+
+// Animation constants
+export const SWITCH_ANIMATION_DURATION = 150;
+const ANIMATION_CONFIG = {
+  duration: SWITCH_ANIMATION_DURATION,
+};
+
+// Track padding
+const TRACK_PADDING = 4;
+
+// TranslateX values
+const TRANSLATE_X_INACTIVE = 0;
+const TRANSLATE_X_ACTIVE = 1;
+
+/**
+ * React Native용 커스텀 Switch 컴포넌트
+ * react-native-reanimated를 사용한 부드러운 애니메이션과 햅틱 피드백을 제공합니다.
+ *
+ * @example
+ * ```tsx
+ * import Switch from 'react-native-switch';
+ *
+ * function App() {
+ *   const [isEnabled, setIsEnabled] = useState(false);
+ *
+ *   return (
+ *     <Switch
+ *       value={isEnabled}
+ *       onValueChange={setIsEnabled}
+ *       size="medium"
+ *       activeColor="#20A2F9"
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export const Switch: React.FC<SwitchProps> = React.memo<SwitchProps>(
+  ({
+    value,
+    onValueChange,
+    disabled = false,
+    activeColor = '#34C759',
+    inactiveColor = '#F6F6F6',
+    thumbColor = '#FFFFFF',
+    size = 'small',
+    width,
+    height,
+    thumbSize,
+    style,
+    testID,
+    enableHaptics = true,
+    thumbScaleInactive = 0.8,
+  }) => {
+    const translateX = useSharedValue(
+      value ? TRANSLATE_X_ACTIVE : TRANSLATE_X_INACTIVE,
+    );
+
+    const switchConfig = useMemo(() => {
+      if (width !== undefined || height !== undefined) {
+        const configWidth = width ?? SWITCH_CONFIG[size].width;
+        const configHeight = height ?? SWITCH_CONFIG[size].height;
+        const calculatedThumbSize = thumbSize ?? configHeight * 0.7;
+        return {
+          width: configWidth,
+          height: configHeight,
+          thumbSize: calculatedThumbSize,
+        };
+      }
+      return SWITCH_CONFIG[size];
+    }, [size, width, height, thumbSize]);
+
+    const thumbScaleActive = THUMB_SCALE_ACTIVE;
+    const thumbScaleDiff = thumbScaleActive - thumbScaleInactive;
+
+    const scaleOffsetPadding = useMemo(
+      () => (switchConfig.thumbSize * (1 - thumbScaleInactive)) / 2,
+      [switchConfig.thumbSize, thumbScaleInactive],
+    );
+
+    const maxTranslate = useMemo(() => {
+      return switchConfig.width - switchConfig.thumbSize - TRACK_PADDING * 2;
+    }, [switchConfig.width, switchConfig.thumbSize]);
+
+    useEffect(() => {
+      translateX.value = withTiming(
+        value ? TRANSLATE_X_ACTIVE : TRANSLATE_X_INACTIVE,
+        ANIMATION_CONFIG,
+      );
+    }, [value, translateX]);
+
+    const handlePress = useCallback(() => {
+      if (disabled) return;
+      if (enableHaptics) {
+        Haptics.impact('soft');
+      }
+      const newValue = !value;
+      onValueChange?.(newValue);
+    }, [disabled, value, onValueChange, enableHaptics]);
+
+    const trackAnimatedStyle = useAnimatedStyle(() => {
+      const backgroundColor = interpolateColor(
+        translateX.value,
+        [0, 1],
+        [inactiveColor, activeColor],
+      );
+
+      return {
+        backgroundColor,
+      };
+    }, [inactiveColor, activeColor]);
+
+    const thumbAnimatedStyle = useAnimatedStyle(() => {
+      const scale = thumbScaleInactive + translateX.value * thumbScaleDiff;
+
+      const currentScaleOffset = scaleOffsetPadding * (1 - translateX.value);
+
+      const baseTranslateX = TRACK_PADDING + translateX.value * maxTranslate;
+
+      const translateXValue = baseTranslateX - currentScaleOffset;
+
+      return {
+        transform: [
+          {
+            translateX: translateXValue,
+          },
+          {
+            scale,
+          },
+        ],
+      };
+    }, [maxTranslate, scaleOffsetPadding, thumbScaleInactive, thumbScaleDiff]);
+
+    const trackStyle = useMemo(
+      () => ({
+        width: switchConfig.width,
+        height: switchConfig.height,
+        borderRadius: switchConfig.height / 2,
+        opacity: disabled ? 0.5 : 1,
+      }),
+      [switchConfig.width, switchConfig.height, disabled],
+    );
+
+    const calculatedThumbSize = useMemo(
+      () => pixelRatio(switchConfig.thumbSize),
+      [switchConfig.thumbSize],
+    );
+
+    const thumbStyle = useMemo(
+      () => ({
+        width: calculatedThumbSize,
+        height: calculatedThumbSize,
+        borderRadius: pixelRatio(switchConfig.thumbSize / 2),
+        backgroundColor: thumbColor,
+      }),
+      [calculatedThumbSize, switchConfig.thumbSize, thumbColor],
+    );
+
+    return (
+      <Pressable
+        onPress={handlePress}
+        disabled={disabled}
+        style={[style]}
+        testID={testID}
+      >
+        <Animated.View style={[styles.track, trackAnimatedStyle, trackStyle]}>
+          <Animated.View
+            style={[styles.thumb, thumbAnimatedStyle, thumbStyle]}
+          />
+        </Animated.View>
+      </Pressable>
+    );
+  },
+  (prevProps, nextProps) => {
+    // Custom comparison for React.memo - prevent unnecessary re-renders
+    return (
+      prevProps.value === nextProps.value &&
+      prevProps.disabled === nextProps.disabled &&
+      prevProps.activeColor === nextProps.activeColor &&
+      prevProps.inactiveColor === nextProps.inactiveColor &&
+      prevProps.thumbColor === nextProps.thumbColor &&
+      prevProps.size === nextProps.size &&
+      prevProps.width === nextProps.width &&
+      prevProps.height === nextProps.height &&
+      prevProps.thumbSize === nextProps.thumbSize &&
+      prevProps.enableHaptics === nextProps.enableHaptics &&
+      prevProps.onValueChange === nextProps.onValueChange
+    );
+  },
+);
+
+export default Switch;

package/src/style.ts

@@ -0,0 +1,18 @@
+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({
+  track: {
+    justifyContent: 'center',
+    // padding: 2,
+  },
+  thumb: {
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 2,
+    elevation: 2,
+  },
+});