npm - expo-horizontal-picker - Versions diffs - 0.1.0 → 0.1.2 - Mend

expo-horizontal-picker 0.1.0 → 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (15) hide show

package/README.md CHANGED Viewed

@@ -1,22 +1,126 @@
 # expo-horizontal-picker
-horizontal picker
+A performant horizontal picker component for React Native and Expo apps.
+- **Smooth Horizontal Scrolling**
+  Optimized with [`react-native-reanimated`](https://docs.expo.dev/versions/latest/sdk/reanimated/) for buttery-smooth, performant scroll animations.
-# API documentation
+- **Snapping Behavior**
+  Automatically snaps to the closest item to give users a precise and polished interaction.
-- [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/)
+- **Fully Customizable**
+  Style any part of the picker — container, text, selected item styles — to fit your design system.
-# Installation in managed Expo projects
+- **Initial Index Support**
+  Set the starting index to highlight a default item.
-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 &mdash; it is likely to be included in an upcoming Expo SDK release.
+- **Built-in Haptic Feedback Support**
+  Easily integrate with [`expo-haptics`](https://docs.expo.dev/versions/latest/sdk/haptics/) to give subtle tactile feedback when items change.
-# Installation in bare React Native projects
+- **TypeScript Support**
+  Fully typed API for a better developer experience.
-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.
+- **Works with Expo and Bare React Native**
+  Supports both managed and bare workflows out of the box.
-### Add the package to your npm dependencies
+## 📦 Installation
+#### 1. Install the package
+This package requires [`react-native-reanimated`](https://docs.expo.dev/versions/latest/sdk/reanimated/) to work:
+```bash
+npm install expo-horizontal-picker react-native-reanimated
+```
+Make sure to follow the additional setup instructions for Reanimated in the [official docs](https://docs.expo.dev/versions/latest/sdk/reanimated/#installation).
+#### 2. (Optional) Install `expo-haptics` for haptic feedback
+```bash
+npm install expo-haptics
+```
+If you want to enable haptic feedback on item change, pass the `onHapticFeedback` prop and handle it using Expo Haptics:
+## 🎬 Demo
+![Example](./example.gif)
+```ts
+import * as Haptics from 'expo-haptics';
+import { HorizontalPicker } from 'expo-horizontal-picker';
+import { SafeAreaView } from 'react-native';
+export default function App() {
+  return (
+    <SafeAreaView style={styles.container}>
+      <View>
+        <HorizontalPicker
+          data={Array.from({ length: 100 }, (_, i) => ({
+            label: `${i + 1}`,
+            value: i + 1,
+          }))}
+          initialIndex={49}
+          visibleItemCount={7}
+          onHapticFeedback={() => Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)}
+        />
+        <HorizontalPicker
+          data={Array.from({ length: 20 }, (_, i) => ({
+            label: `${i + 1}k`,
+            value: i + 1,
+          }))}
+          initialIndex={9}
+          visibleItemCount={5}
+          selectedItemTextStyle={{ color: 'orange', fontSize: 24 }}
+          onHapticFeedback={() => Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Rigid)}
+        />
+        <HorizontalPicker
+          data={Array.from({ length: 24 }, (_, i) => ({
+            label: `${i + 1}h`,
+            value: i + 1,
+          }))}
+          initialIndex={11}
+          visibleItemCount={3}
+          itemTextStyle={{ fontSize: 20 }}
+          selectedItemTextStyle={{ fontSize: 40 }}
+          onHapticFeedback={() => Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy)}
+        />
+        <HorizontalPicker
+          data={Array.from({ length: 5 }, (_, i) => ({
+            label: `${(i + 1) * 10000}`,
+            value: (i + 1) * 10000,
+          }))}
+          initialIndex={2}
+          visibleItemCount={1}
+          itemTextStyle={{ fontSize: 60 }}
+          selectedItemTextStyle={{ fontSize: 60 }}
+          onHapticFeedback={() => Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy)}
+        />
+      </View>
+    </SafeAreaView>
+  );
+}
+const styles = {
+  container: {
+    flex: 1,
+    backgroundColor: '#eee',
+  },
+};
 ```
-npm install expo-horizontal-picker
-```
+## 🧩 Props
+| Prop                    | Type                                                   | Default | Description                                                                     |
+|-------------------------|--------------------------------------------------------|---------|---------------------------------------------------------------------------------|
+| `data`                  | `PickerOption[]`                                       | –       | Array of options to display. Each option is an object with `label` and `value`. |
+| `initialIndex`          | `number`                                               | `0`     | Index of the item initially selected.                                           |
+| `visibleItemCount`      | `number`                                               | `7`     | Number of items visible on screen at once.                                      |
+| `onChange`              | `(value: string \| number, index: number) => void`     | –       | Callback triggered when the selected item changes.                              |
+| `onHapticFeedback`      | `() => void`                                           | –       | Optional callback for haptic feedback when selection changes.                   |
+| `containerStyle`        | `AnimatedScrollViewProps['style']`                     | –       | Style applied to the scroll container.                                          |
+| `itemContainerStyle`    | `StyleProp<ViewStyle>`                                 | –       | Style applied to each item container.                                           |
+| `itemTextStyle`         | `StyleProp<TextStyle>`                                 | –       | Style for unselected item text.                                                 |
+| `selectedItemTextStyle` | `StyleProp<TextStyle>`                                 | –       | Style for selected item text.                                                   |
+| ...props                | `AnimatedScrollViewProps`                              | –       | Additional props passed to `Animated.ScrollView`.                               |

package/build/index.d.ts CHANGED Viewed

@@ -4,7 +4,7 @@ interface PickerOption {
     label: string;
     value: string | number;
 }
-interface Props extends Omit<AnimatedScrollViewProps, 'style'> {
+interface HorizontalPickerProps extends Omit<AnimatedScrollViewProps, 'style'> {
     data: PickerOption[];
     initialIndex?: number;
     visibleItemCount?: number;
@@ -15,6 +15,6 @@ interface Props extends Omit<AnimatedScrollViewProps, 'style'> {
     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 declare function HorizontalPicker({ data, initialIndex, visibleItemCount, onChange, onHapticFeedback, containerStyle, itemContainerStyle, itemTextStyle, selectedItemTextStyle, ...props }: HorizontalPickerProps): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/build/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
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~~"}
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,qBAAsB,SAAQ,IAAI,CAAC,uBAAuB,EAAE,OAAO,CAAC;IAC5E,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,qBAAqB,+BAsHvB"}

package/build/index.js CHANGED Viewed

@@ -1,6 +1,6 @@
 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';
+import Animated, { runOnJS, useAnimatedReaction, useAnimatedScrollHandler, 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);
@@ -24,9 +24,9 @@ export function HorizontalPicker({ data, initialIndex = 0, visibleItemCount = 7,
         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);
+        requestAnimationFrame(() => {
+            scrollViewRef.current?.scrollTo({ x, y: 0, animated: false });
+        });
     }, [initialIndex, data.length, visibleItemCount]);
     const handleOnScroll = useAnimatedScrollHandler({
         onScroll: (event) => {
@@ -50,30 +50,31 @@ export function HorizontalPicker({ data, initialIndex = 0, visibleItemCount = 7,
             onHapticFeedback?.();
         }
     }, [data.length, onHapticFeedback]);
-    useDerivedValue(() => {
+    useAnimatedReaction(() => {
         if (scrollViewWidth === 0) {
-            return;
+            return null;
         }
         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;
+        currentIndex.value = safeIndex;
+        return safeIndex;
+    }, (safeIndex, prevIndex) => {
+        if (safeIndex !== null && safeIndex !== prevIndex) {
             runOnJS(handleOnChange)(safeIndex);
             runOnJS(handleOnHapticFeedback)(safeIndex);
         }
-    }, [itemWidth, data.length]);
+    }, [itemWidth, data.length, scrollViewWidth]);
     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) {
+    useAnimatedReaction(() => currentIndex.value === index, (shouldBeFocused, isCurrentFocused) => {
+        if (shouldBeFocused !== isCurrentFocused) {
             runOnJS(setIsFocused)(shouldBeFocused);
         }
-    });
+    }, [index]);
     return (<Pressable onPress={onPress}>
       <View style={[{ width: itemWidth }, styles.itemContainer, itemContainerStyle]}>
         <Text style={isFocused ? [styles.itemTextSelected, selectedItemTextStyle] : [styles.itemText, itemTextStyle]}>

package/build/index.js.map CHANGED Viewed

	@@ -1 +1 @@
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"]}
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 useAnimatedReaction,\n useAnimatedScrollHandler,\n useSharedValue,\n} from 'react-native-reanimated';\n\ninterface PickerOption {\n label: string;\n value: string \| number;\n}\n\ninterface HorizontalPickerProps 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}: HorizontalPickerProps) {\n const scrollViewRef = useRef<Animated.ScrollView>(null);\n const lastHapticIndexRef = useRef<number>(-1);\n const [scrollViewWidth, setScrollViewWidth] = useState<number>(0);\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 requestAnimationFrame(() => {\n scrollViewRef.current?.scrollTo({ x, y: 0, animated: false });\n });\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 useAnimatedReaction(\n () => {\n if (scrollViewWidth === 0) {\n return null;\n }\n const newIndex = Math.round(scrollX.value / itemWidth);\n const safeIndex = Math.max(0, Math.min(data.length - 1, newIndex));\n currentIndex.value = safeIndex;\n return safeIndex;\n },\n (safeIndex, prevIndex) => {\n if (safeIndex !== null && safeIndex !== prevIndex) {\n runOnJS(handleOnChange)(safeIndex);\n runOnJS(handleOnHapticFeedback)(safeIndex);\n }\n },\n [itemWidth, data.length, scrollViewWidth],\n );\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\ninterface PickerItemProps\n extends Pick<HorizontalPickerProps, 'itemContainerStyle' \| 'itemTextStyle' \| 'selectedItemTextStyle'> {\n label: PickerOption['label'];\n index: number;\n currentIndex: SharedValue<number>;\n itemWidth: number;\n onPress: () => void;\n}\n\nfunction PickerItem({\n label,\n index,\n currentIndex,\n itemWidth,\n onPress,\n itemContainerStyle,\n itemTextStyle,\n selectedItemTextStyle,\n}: PickerItemProps) {\n const [isFocused, setIsFocused] = useState(false);\n\n useAnimatedReaction(\n () => currentIndex.value === index,\n (shouldBeFocused, isCurrentFocused) => {\n if (shouldBeFocused !== isCurrentFocused) {\n runOnJS(setIsFocused)(shouldBeFocused);\n }\n },\n [index],\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/package.json CHANGED Viewed

@@ -1,14 +1,14 @@
 {
   "name": "expo-horizontal-picker",
-  "version": "0.1.0",
-  "description": "expo-horizontal-picker",
+  "version": "0.1.2",
+  "description": "A performant horizontal picker component for React Native and Expo apps",
   "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",
+    "changeset:version": "changeset version && yarn --lockfile-only",
     "clean": "expo-module clean",
     "lint": "expo-module lint",
     "test": "expo-module test",
@@ -49,6 +49,9 @@
     "typescript": "^5.8.3",
     "react-native-reanimated": "^3.18.0"
   },
+  "files": [
+    "/build"
+  ],
   "peerDependencies": {
     "expo": "*",
     "react": "*",

package/.lintstagedrc DELETED Viewed

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

package/.nvmrc DELETED Viewed

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

package/biome.json DELETED Viewed

@@ -1,77 +0,0 @@
-{
-  "$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/commitlint.config.cjs DELETED Viewed

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

package/expo-module.config.json DELETED Viewed

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

package/knip.json DELETED Viewed

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

package/packlint.config.mjs DELETED Viewed

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

package/src/index.tsx DELETED Viewed

@@ -1,227 +0,0 @@
-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 DELETED Viewed

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