expo-horizontal-picker 0.1.0

package/.lintstagedrc

@@ -0,0 +1,3 @@
+{
+  "*.{js,ts,jsx,tsx}": ["biome format", "biome lint"]
+}

package/.nvmrc

@@ -0,0 +1 @@
+v22.11.0

package/README.md

@@ -0,0 +1,22 @@
+# expo-horizontal-picker
+
+horizontal picker
+
+# API documentation
+
+- [Documentation for the latest stable release](https://docs.expo.dev/versions/latest/sdk/horizontal-picker/)
+- [Documentation for the main branch](https://docs.expo.dev/versions/unversioned/sdk/horizontal-picker/)
+
+# Installation in managed Expo projects
+
+For [managed](https://docs.expo.dev/archive/managed-vs-bare/) Expo projects, please follow the installation instructions in the [API documentation for the latest stable release](#api-documentation). If you follow the link and there is no documentation available then this library is not yet usable within managed projects — it is likely to be included in an upcoming Expo SDK release.
+
+# Installation in bare React Native projects
+
+For bare React Native projects, you must ensure that you have [installed and configured the `expo` package](https://docs.expo.dev/bare/installing-expo-modules/) before continuing.
+
+### Add the package to your npm dependencies
+
+```
+npm install expo-horizontal-picker
+```

package/biome.json

@@ -0,0 +1,77 @@
+{
+  "$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
+  "formatter": {
+    "indentWidth": 2,
+    "lineWidth": 120,
+    "indentStyle": "space",
+    "enabled": true,
+    "bracketSpacing": true,
+    "formatWithErrors": false
+  },
+  "javascript": {
+    "formatter": {
+      "quoteStyle": "single",
+      "trailingCommas": "all",
+      "semicolons": "always",
+      "bracketSameLine": false
+    }
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true,
+      "a11y": {
+        "useButtonType": "off"
+      },
+      "complexity": {
+        "noVoid": "error",
+        "noBannedTypes": "error",
+        "noExtraBooleanCast": "error",
+        "noExcessiveCognitiveComplexity": "error"
+      },
+      "correctness": {
+        "noUnusedImports": "error",
+        "noUnusedVariables": "error",
+        "useHookAtTopLevel": "error"
+      },
+      "performance": {
+        "noBarrelFile": "error",
+        "noReExportAll": "error",
+        "noDelete": "error"
+      },
+      "security": {
+        "noDangerouslySetInnerHtml": "error"
+      },
+      "style": {
+        "noUselessElse": "error",
+        "useCollapsedElseIf": "error",
+        "noNonNullAssertion": "error",
+        "useBlockStatements": "error",
+        "noNamespace": "error",
+        "noYodaExpression": "error",
+        "useConsistentBuiltinInstantiation": "error",
+        "useDefaultSwitchClause": "error",
+        "useFragmentSyntax": "error",
+        "useThrowNewError": "error",
+        "useThrowOnlyError": "error",
+        "useFilenamingConvention": {
+          "level": "error",
+          "options": {
+            "filenameCases": ["camelCase", "PascalCase"]
+          }
+        }
+      },
+      "suspicious": {
+        "noArrayIndexKey": "error",
+        "noAssignInExpressions": "error",
+        "noConfusingVoidType": "error",
+        "noConsole": "error",
+        "noDebugger": "error",
+        "noExplicitAny": "error",
+        "noRedeclare": "error",
+        "noEvolvingTypes": "error",
+        "useNumberToFixedDigitsArgument": "error"
+      }
+    }
+  }
+}

package/build/index.d.ts

@@ -0,0 +1,20 @@
+import { type StyleProp, type TextStyle, type ViewStyle } from 'react-native';
+import { type AnimatedScrollViewProps } from 'react-native-reanimated';
+interface PickerOption {
+    label: string;
+    value: string | number;
+}
+interface Props extends Omit<AnimatedScrollViewProps, 'style'> {
+    data: PickerOption[];
+    initialIndex?: number;
+    visibleItemCount?: number;
+    onChange?: (value: PickerOption['value'], index: number) => void;
+    onHapticFeedback?: () => void;
+    containerStyle?: AnimatedScrollViewProps['style'];
+    itemContainerStyle?: StyleProp<ViewStyle>;
+    itemTextStyle?: StyleProp<TextStyle>;
+    selectedItemTextStyle?: StyleProp<TextStyle>;
+}
+export declare function HorizontalPicker({ data, initialIndex, visibleItemCount, onChange, onHapticFeedback, containerStyle, itemContainerStyle, itemTextStyle, selectedItemTextStyle, ...props }: Props): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/build/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAKL,KAAK,SAAS,EAGd,KAAK,SAAS,EAEd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AACtB,OAAiB,EACf,KAAK,uBAAuB,EAM7B,MAAM,yBAAyB,CAAC;AAEjC,UAAU,YAAY;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB;AAED,UAAU,KAAM,SAAQ,IAAI,CAAC,uBAAuB,EAAE,OAAO,CAAC;IAC5D,IAAI,EAAE,YAAY,EAAE,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjE,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,cAAc,CAAC,EAAE,uBAAuB,CAAC,OAAO,CAAC,CAAC;IAClD,kBAAkB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC1C,aAAa,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACrC,qBAAqB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9C;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,YAAgB,EAChB,gBAAoB,EACpB,QAAQ,EACR,gBAAgB,EAChB,cAAc,EACd,kBAAkB,EAClB,aAAa,EACb,qBAAqB,EACrB,GAAG,KAAK,EACT,EAAE,KAAK,+BAoHP"}

package/build/index.js

@@ -0,0 +1,105 @@
+import { useCallback, useMemo, useRef, useState } from 'react';
+import { PixelRatio, Platform, Pressable, StyleSheet, Text, View, } from 'react-native';
+import Animated, { runOnJS, useAnimatedScrollHandler, useDerivedValue, useSharedValue, } from 'react-native-reanimated';
+export function HorizontalPicker({ data, initialIndex = 0, visibleItemCount = 7, onChange, onHapticFeedback, containerStyle, itemContainerStyle, itemTextStyle, selectedItemTextStyle, ...props }) {
+    const scrollViewRef = useRef(null);
+    const lastHapticIndexRef = useRef(-1);
+    const [scrollViewWidth, setScrollViewWidth] = useState(0);
+    const scrollX = useSharedValue(0);
+    const currentIndex = useSharedValue(initialIndex);
+    const { itemWidth, paddingSide } = useMemo(() => {
+        const width = PixelRatio.roundToNearestPixel(scrollViewWidth / visibleItemCount);
+        const padding = PixelRatio.roundToNearestPixel(scrollViewWidth / 2 - width / 2);
+        return {
+            itemWidth: width,
+            paddingSide: padding,
+        };
+    }, [scrollViewWidth, visibleItemCount]);
+    const snapOffsets = useMemo(() => {
+        return data.map((_, index) => PixelRatio.roundToNearestPixel(index * itemWidth));
+    }, [data, itemWidth]);
+    const handleOnLayout = useCallback((e) => {
+        const layoutWidth = e.nativeEvent.layout.width;
+        setScrollViewWidth(layoutWidth);
+        const safeIndex = Math.max(0, Math.min(data.length - 1, initialIndex));
+        const rawItemWidth = layoutWidth / visibleItemCount;
+        const x = PixelRatio.roundToNearestPixel(safeIndex * rawItemWidth);
+        setTimeout(() => {
+            scrollViewRef.current?.scrollTo({ x, y: 0, animated: true });
+        }, 0);
+    }, [initialIndex, data.length, visibleItemCount]);
+    const handleOnScroll = useAnimatedScrollHandler({
+        onScroll: (event) => {
+            scrollX.value = event.contentOffset.x;
+        },
+    });
+    const handleOnPress = useCallback((newIndex) => {
+        const safeIndex = Math.max(0, Math.min(data.length - 1, newIndex));
+        const x = PixelRatio.roundToNearestPixel(safeIndex * itemWidth);
+        scrollViewRef.current?.scrollTo({ x, y: 0, animated: true });
+    }, [data.length, itemWidth]);
+    const handleOnChange = useCallback((index) => {
+        const item = data[index];
+        if (item) {
+            onChange?.(item.value, index);
+        }
+    }, [onChange, data]);
+    const handleOnHapticFeedback = useCallback((index) => {
+        if (index !== lastHapticIndexRef.current && index >= 0 && index < data.length) {
+            lastHapticIndexRef.current = index;
+            onHapticFeedback?.();
+        }
+    }, [data.length, onHapticFeedback]);
+    useDerivedValue(() => {
+        if (scrollViewWidth === 0) {
+            return;
+        }
+        const newIndex = Math.round(scrollX.value / itemWidth);
+        const safeIndex = Math.max(0, Math.min(data.length - 1, newIndex));
+        if (safeIndex !== currentIndex.value) {
+            currentIndex.value = safeIndex;
+            runOnJS(handleOnChange)(safeIndex);
+            runOnJS(handleOnHapticFeedback)(safeIndex);
+        }
+    }, [itemWidth, data.length]);
+    return (<Animated.ScrollView ref={scrollViewRef} horizontal onLayout={handleOnLayout} onScroll={handleOnScroll} showsHorizontalScrollIndicator={false} scrollEventThrottle={Platform.select({ ios: 16, android: 2 })} decelerationRate={Platform.select({ ios: undefined, android: 'fast' })} snapToOffsets={snapOffsets} contentContainerStyle={{ paddingHorizontal: paddingSide }} style={[styles.container, containerStyle]} {...props}>
+      {data.map((item, index) => (<PickerItem key={`picker-item-${item.value}`} label={item.label} index={index} currentIndex={currentIndex} itemWidth={itemWidth} onPress={() => handleOnPress(index)} itemContainerStyle={itemContainerStyle} itemTextStyle={itemTextStyle} selectedItemTextStyle={selectedItemTextStyle}/>))}
+    </Animated.ScrollView>);
+}
+function PickerItem({ label, index, currentIndex, itemWidth, onPress, itemContainerStyle, itemTextStyle, selectedItemTextStyle, }) {
+    const [isFocused, setIsFocused] = useState(false);
+    useDerivedValue(() => {
+        const shouldBeFocused = currentIndex.value === index;
+        if (shouldBeFocused !== isFocused) {
+            runOnJS(setIsFocused)(shouldBeFocused);
+        }
+    });
+    return (<Pressable onPress={onPress}>
+      <View style={[{ width: itemWidth }, styles.itemContainer, itemContainerStyle]}>
+        <Text style={isFocused ? [styles.itemTextSelected, selectedItemTextStyle] : [styles.itemText, itemTextStyle]}>
+          {label}
+        </Text>
+      </View>
+    </Pressable>);
+}
+const styles = StyleSheet.create({
+    container: {
+        width: '100%',
+    },
+    itemContainer: {
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: 60,
+    },
+    itemText: {
+        fontSize: 13,
+        fontWeight: '700',
+        color: '#C9CED9',
+    },
+    itemTextSelected: {
+        fontSize: 15,
+        fontWeight: '800',
+        color: '#000000',
+    },
+});
+//# sourceMappingURL=index.js.map

package/build/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, useMemo, useRef, useState } from 'react';\nimport {\n  type LayoutChangeEvent,\n  PixelRatio,\n  Platform,\n  Pressable,\n  type StyleProp,\n  StyleSheet,\n  Text,\n  type TextStyle,\n  View,\n  type ViewStyle,\n} from 'react-native';\nimport Animated, {\n  type AnimatedScrollViewProps,\n  runOnJS,\n  type SharedValue,\n  useAnimatedScrollHandler,\n  useDerivedValue,\n  useSharedValue,\n} from 'react-native-reanimated';\n\ninterface PickerOption {\n  label: string;\n  value: string | number;\n}\n\ninterface Props extends Omit<AnimatedScrollViewProps, 'style'> {\n  data: PickerOption[];\n  initialIndex?: number;\n  visibleItemCount?: number;\n  onChange?: (value: PickerOption['value'], index: number) => void;\n  onHapticFeedback?: () => void;\n  containerStyle?: AnimatedScrollViewProps['style'];\n  itemContainerStyle?: StyleProp<ViewStyle>;\n  itemTextStyle?: StyleProp<TextStyle>;\n  selectedItemTextStyle?: StyleProp<TextStyle>;\n}\n\nexport function HorizontalPicker({\n  data,\n  initialIndex = 0,\n  visibleItemCount = 7,\n  onChange,\n  onHapticFeedback,\n  containerStyle,\n  itemContainerStyle,\n  itemTextStyle,\n  selectedItemTextStyle,\n  ...props\n}: Props) {\n  const scrollViewRef = useRef<Animated.ScrollView>(null);\n  const lastHapticIndexRef = useRef<number>(-1);\n  const [scrollViewWidth, setScrollViewWidth] = useState<number>(0);\n\n  const scrollX = useSharedValue<number>(0);\n  const currentIndex = useSharedValue<number>(initialIndex);\n\n  const { itemWidth, paddingSide } = useMemo(() => {\n    const width = PixelRatio.roundToNearestPixel(scrollViewWidth / visibleItemCount);\n    const padding = PixelRatio.roundToNearestPixel(scrollViewWidth / 2 - width / 2);\n    return {\n      itemWidth: width,\n      paddingSide: padding,\n    };\n  }, [scrollViewWidth, visibleItemCount]);\n\n  const snapOffsets = useMemo(() => {\n    return data.map((_, index) => PixelRatio.roundToNearestPixel(index * itemWidth));\n  }, [data, itemWidth]);\n\n  const handleOnLayout = useCallback(\n    (e: LayoutChangeEvent) => {\n      const layoutWidth = e.nativeEvent.layout.width;\n      setScrollViewWidth(layoutWidth);\n\n      const safeIndex = Math.max(0, Math.min(data.length - 1, initialIndex));\n      const rawItemWidth = layoutWidth / visibleItemCount;\n      const x = PixelRatio.roundToNearestPixel(safeIndex * rawItemWidth);\n\n      setTimeout(() => {\n        scrollViewRef.current?.scrollTo({ x, y: 0, animated: true });\n      }, 0);\n    },\n    [initialIndex, data.length, visibleItemCount],\n  );\n\n  const handleOnScroll = useAnimatedScrollHandler({\n    onScroll: (event) => {\n      scrollX.value = event.contentOffset.x;\n    },\n  });\n\n  const handleOnPress = useCallback(\n    (newIndex: number) => {\n      const safeIndex = Math.max(0, Math.min(data.length - 1, newIndex));\n      const x = PixelRatio.roundToNearestPixel(safeIndex * itemWidth);\n      scrollViewRef.current?.scrollTo({ x, y: 0, animated: true });\n    },\n    [data.length, itemWidth],\n  );\n\n  const handleOnChange = useCallback(\n    (index: number) => {\n      const item = data[index];\n      if (item) {\n        onChange?.(item.value, index);\n      }\n    },\n    [onChange, data],\n  );\n\n  const handleOnHapticFeedback = useCallback(\n    (index: number) => {\n      if (index !== lastHapticIndexRef.current && index >= 0 && index < data.length) {\n        lastHapticIndexRef.current = index;\n        onHapticFeedback?.();\n      }\n    },\n    [data.length, onHapticFeedback],\n  );\n\n  useDerivedValue(() => {\n    if (scrollViewWidth === 0) {\n      return;\n    }\n\n    const newIndex = Math.round(scrollX.value / itemWidth);\n    const safeIndex = Math.max(0, Math.min(data.length - 1, newIndex));\n\n    if (safeIndex !== currentIndex.value) {\n      currentIndex.value = safeIndex;\n      runOnJS(handleOnChange)(safeIndex);\n      runOnJS(handleOnHapticFeedback)(safeIndex);\n    }\n  }, [itemWidth, data.length]);\n\n  return (\n    <Animated.ScrollView\n      ref={scrollViewRef}\n      horizontal\n      onLayout={handleOnLayout}\n      onScroll={handleOnScroll}\n      showsHorizontalScrollIndicator={false}\n      scrollEventThrottle={Platform.select({ ios: 16, android: 2 })}\n      decelerationRate={Platform.select({ ios: undefined, android: 'fast' })}\n      snapToOffsets={snapOffsets}\n      contentContainerStyle={{ paddingHorizontal: paddingSide }}\n      style={[styles.container, containerStyle]}\n      {...props}\n    >\n      {data.map((item, index) => (\n        <PickerItem\n          key={`picker-item-${item.value}`}\n          label={item.label}\n          index={index}\n          currentIndex={currentIndex}\n          itemWidth={itemWidth}\n          onPress={() => handleOnPress(index)}\n          itemContainerStyle={itemContainerStyle}\n          itemTextStyle={itemTextStyle}\n          selectedItemTextStyle={selectedItemTextStyle}\n        />\n      ))}\n    </Animated.ScrollView>\n  );\n}\n\nfunction PickerItem({\n  label,\n  index,\n  currentIndex,\n  itemWidth,\n  onPress,\n  itemContainerStyle,\n  itemTextStyle,\n  selectedItemTextStyle,\n}: {\n  label: PickerOption['label'];\n  index: number;\n  currentIndex: SharedValue<number>;\n  itemWidth: number;\n  onPress: () => void;\n  itemContainerStyle?: StyleProp<ViewStyle>;\n  itemTextStyle?: StyleProp<TextStyle>;\n  selectedItemTextStyle?: StyleProp<TextStyle>;\n}) {\n  const [isFocused, setIsFocused] = useState(false);\n\n  useDerivedValue(() => {\n    const shouldBeFocused = currentIndex.value === index;\n    if (shouldBeFocused !== isFocused) {\n      runOnJS(setIsFocused)(shouldBeFocused);\n    }\n  });\n\n  return (\n    <Pressable onPress={onPress}>\n      <View style={[{ width: itemWidth }, styles.itemContainer, itemContainerStyle]}>\n        <Text style={isFocused ? [styles.itemTextSelected, selectedItemTextStyle] : [styles.itemText, itemTextStyle]}>\n          {label}\n        </Text>\n      </View>\n    </Pressable>\n  );\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    width: '100%',\n  },\n  itemContainer: {\n    justifyContent: 'center',\n    alignItems: 'center',\n    height: 60,\n  },\n  itemText: {\n    fontSize: 13,\n    fontWeight: '700',\n    color: '#C9CED9',\n  },\n  itemTextSelected: {\n    fontSize: 15,\n    fontWeight: '800',\n    color: '#000000',\n  },\n});\n"]}

package/commitlint.config.cjs

@@ -0,0 +1 @@
+module.exports = { extends: ['@commitlint/config-conventional'] };

package/expo-module.config.json

@@ -0,0 +1,9 @@
+{
+  "platforms": ["apple", "android", "web"],
+  "apple": {
+    "modules": ["ExpoHorizontalPickerModule"]
+  },
+  "android": {
+    "modules": ["expo.modules.horizontalpicker.ExpoHorizontalPickerModule"]
+  }
+}

package/knip.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "https://unpkg.com/knip@5/schema.json",
+  "workspaces": {
+    ".": {
+      "ignore": ["packlint.config.mjs"]
+    }
+  }
+}

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "expo-horizontal-picker",
+  "version": "0.1.0",
+  "description": "expo-horizontal-picker",
+  "main": "build/index.js",
+  "types": "build/index.d.ts",
+  "scripts": {
+    "build": "expo-module build",
+    "changeset": "changeset",
+    "changeset:publish": "yarn build && changeset publish",
+    "changeset:version": "changeset version && pnpm i --lockfile-only",
+    "clean": "expo-module clean",
+    "lint": "expo-module lint",
+    "test": "expo-module test",
+    "prepublishOnly": "expo-module prepublishOnly",
+    "expo-module": "expo-module",
+    "open:ios": "xed example/ios",
+    "open:android": "open -a \"Android Studio\" example/android"
+  },
+  "keywords": [
+    "react-native",
+    "expo",
+    "expo-horizontal-picker",
+    "ExpoHorizontalPicker",
+    "react-native-horizontal-picker"
+  ],
+  "repository": "https://github.com/fe-dudu/expo-horizontal-picker",
+  "bugs": {
+    "url": "https://github.com/fe-dudu/expo-horizontal-picker/issues"
+  },
+  "author": "fe-dudu <ehehwhdwhd@naver.com> (https://github.com/fe-dudu)",
+  "license": "MIT",
+  "homepage": "https://github.com/fe-dudu/expo-horizontal-picker#readme",
+  "devDependencies": {
+    "@biomejs/biome": "^2.0.6",
+    "@changesets/changelog-github": "^0.5.1",
+    "@changesets/cli": "^2.29.5",
+    "@commitlint/cli": "^19.8.1",
+    "@commitlint/config-conventional": "^19.8.1",
+    "@types/react": "~19.0.0",
+    "expo": "~53.0.0",
+    "expo-module-scripts": "^4.1.6",
+    "husky": "^9.1.7",
+    "knip": "^5.61.3",
+    "lint-staged": "^16.1.2",
+    "packlint": "^0.2.4",
+    "react": "^19.1.0",
+    "react-native": "0.79.1",
+    "typescript": "^5.8.3",
+    "react-native-reanimated": "^3.18.0"
+  },
+  "peerDependencies": {
+    "expo": "*",
+    "react": "*",
+    "react-native": "*",
+    "react-native-reanimated": ">=2.10.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "packageManager": "yarn@1.22.22"
+}

package/packlint.config.mjs

@@ -0,0 +1,3 @@
+export default {
+  files: ['./package.json'],
+};

package/src/index.tsx

@@ -0,0 +1,227 @@
+import { useCallback, useMemo, useRef, useState } from 'react';
+import {
+  type LayoutChangeEvent,
+  PixelRatio,
+  Platform,
+  Pressable,
+  type StyleProp,
+  StyleSheet,
+  Text,
+  type TextStyle,
+  View,
+  type ViewStyle,
+} from 'react-native';
+import Animated, {
+  type AnimatedScrollViewProps,
+  runOnJS,
+  type SharedValue,
+  useAnimatedScrollHandler,
+  useDerivedValue,
+  useSharedValue,
+} from 'react-native-reanimated';
+
+interface PickerOption {
+  label: string;
+  value: string | number;
+}
+
+interface Props extends Omit<AnimatedScrollViewProps, 'style'> {
+  data: PickerOption[];
+  initialIndex?: number;
+  visibleItemCount?: number;
+  onChange?: (value: PickerOption['value'], index: number) => void;
+  onHapticFeedback?: () => void;
+  containerStyle?: AnimatedScrollViewProps['style'];
+  itemContainerStyle?: StyleProp<ViewStyle>;
+  itemTextStyle?: StyleProp<TextStyle>;
+  selectedItemTextStyle?: StyleProp<TextStyle>;
+}
+
+export function HorizontalPicker({
+  data,
+  initialIndex = 0,
+  visibleItemCount = 7,
+  onChange,
+  onHapticFeedback,
+  containerStyle,
+  itemContainerStyle,
+  itemTextStyle,
+  selectedItemTextStyle,
+  ...props
+}: Props) {
+  const scrollViewRef = useRef<Animated.ScrollView>(null);
+  const lastHapticIndexRef = useRef<number>(-1);
+  const [scrollViewWidth, setScrollViewWidth] = useState<number>(0);
+
+  const scrollX = useSharedValue<number>(0);
+  const currentIndex = useSharedValue<number>(initialIndex);
+
+  const { itemWidth, paddingSide } = useMemo(() => {
+    const width = PixelRatio.roundToNearestPixel(scrollViewWidth / visibleItemCount);
+    const padding = PixelRatio.roundToNearestPixel(scrollViewWidth / 2 - width / 2);
+    return {
+      itemWidth: width,
+      paddingSide: padding,
+    };
+  }, [scrollViewWidth, visibleItemCount]);
+
+  const snapOffsets = useMemo(() => {
+    return data.map((_, index) => PixelRatio.roundToNearestPixel(index * itemWidth));
+  }, [data, itemWidth]);
+
+  const handleOnLayout = useCallback(
+    (e: LayoutChangeEvent) => {
+      const layoutWidth = e.nativeEvent.layout.width;
+      setScrollViewWidth(layoutWidth);
+
+      const safeIndex = Math.max(0, Math.min(data.length - 1, initialIndex));
+      const rawItemWidth = layoutWidth / visibleItemCount;
+      const x = PixelRatio.roundToNearestPixel(safeIndex * rawItemWidth);
+
+      setTimeout(() => {
+        scrollViewRef.current?.scrollTo({ x, y: 0, animated: true });
+      }, 0);
+    },
+    [initialIndex, data.length, visibleItemCount],
+  );
+
+  const handleOnScroll = useAnimatedScrollHandler({
+    onScroll: (event) => {
+      scrollX.value = event.contentOffset.x;
+    },
+  });
+
+  const handleOnPress = useCallback(
+    (newIndex: number) => {
+      const safeIndex = Math.max(0, Math.min(data.length - 1, newIndex));
+      const x = PixelRatio.roundToNearestPixel(safeIndex * itemWidth);
+      scrollViewRef.current?.scrollTo({ x, y: 0, animated: true });
+    },
+    [data.length, itemWidth],
+  );
+
+  const handleOnChange = useCallback(
+    (index: number) => {
+      const item = data[index];
+      if (item) {
+        onChange?.(item.value, index);
+      }
+    },
+    [onChange, data],
+  );
+
+  const handleOnHapticFeedback = useCallback(
+    (index: number) => {
+      if (index !== lastHapticIndexRef.current && index >= 0 && index < data.length) {
+        lastHapticIndexRef.current = index;
+        onHapticFeedback?.();
+      }
+    },
+    [data.length, onHapticFeedback],
+  );
+
+  useDerivedValue(() => {
+    if (scrollViewWidth === 0) {
+      return;
+    }
+
+    const newIndex = Math.round(scrollX.value / itemWidth);
+    const safeIndex = Math.max(0, Math.min(data.length - 1, newIndex));
+
+    if (safeIndex !== currentIndex.value) {
+      currentIndex.value = safeIndex;
+      runOnJS(handleOnChange)(safeIndex);
+      runOnJS(handleOnHapticFeedback)(safeIndex);
+    }
+  }, [itemWidth, data.length]);
+
+  return (
+    <Animated.ScrollView
+      ref={scrollViewRef}
+      horizontal
+      onLayout={handleOnLayout}
+      onScroll={handleOnScroll}
+      showsHorizontalScrollIndicator={false}
+      scrollEventThrottle={Platform.select({ ios: 16, android: 2 })}
+      decelerationRate={Platform.select({ ios: undefined, android: 'fast' })}
+      snapToOffsets={snapOffsets}
+      contentContainerStyle={{ paddingHorizontal: paddingSide }}
+      style={[styles.container, containerStyle]}
+      {...props}
+    >
+      {data.map((item, index) => (
+        <PickerItem
+          key={`picker-item-${item.value}`}
+          label={item.label}
+          index={index}
+          currentIndex={currentIndex}
+          itemWidth={itemWidth}
+          onPress={() => handleOnPress(index)}
+          itemContainerStyle={itemContainerStyle}
+          itemTextStyle={itemTextStyle}
+          selectedItemTextStyle={selectedItemTextStyle}
+        />
+      ))}
+    </Animated.ScrollView>
+  );
+}
+
+function PickerItem({
+  label,
+  index,
+  currentIndex,
+  itemWidth,
+  onPress,
+  itemContainerStyle,
+  itemTextStyle,
+  selectedItemTextStyle,
+}: {
+  label: PickerOption['label'];
+  index: number;
+  currentIndex: SharedValue<number>;
+  itemWidth: number;
+  onPress: () => void;
+  itemContainerStyle?: StyleProp<ViewStyle>;
+  itemTextStyle?: StyleProp<TextStyle>;
+  selectedItemTextStyle?: StyleProp<TextStyle>;
+}) {
+  const [isFocused, setIsFocused] = useState(false);
+
+  useDerivedValue(() => {
+    const shouldBeFocused = currentIndex.value === index;
+    if (shouldBeFocused !== isFocused) {
+      runOnJS(setIsFocused)(shouldBeFocused);
+    }
+  });
+
+  return (
+    <Pressable onPress={onPress}>
+      <View style={[{ width: itemWidth }, styles.itemContainer, itemContainerStyle]}>
+        <Text style={isFocused ? [styles.itemTextSelected, selectedItemTextStyle] : [styles.itemText, itemTextStyle]}>
+          {label}
+        </Text>
+      </View>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+  },
+  itemContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: 60,
+  },
+  itemText: {
+    fontSize: 13,
+    fontWeight: '700',
+    color: '#C9CED9',
+  },
+  itemTextSelected: {
+    fontSize: 15,
+    fontWeight: '800',
+    color: '#000000',
+  },
+});

package/tsconfig.json

@@ -0,0 +1,9 @@
+// @generated by expo-module-scripts
+{
+  "extends": "expo-module-scripts/tsconfig.base",
+  "compilerOptions": {
+    "outDir": "./build"
+  },
+  "include": ["./src"],
+  "exclude": ["**/__mocks__/*", "**/__tests__/*", "**/__rsc_tests__/*"]
+}