Added the ability to tap an item outside of the selected index and scroll to it

src/WheelPicker.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import React, { useMemo, useRef, useState } from 'react';
 import {
   StyleProp,
   TextStyle,
@@ -53,6 +53,8 @@ const WheelPicker: React.FC<Props> = ({
   removeClippedSubviews = false,
   containerProps = {},
 }) => {
+  const listRef = useRef<any>(null);
+
   const [scrollY] = useState(new Animated.Value(0));
 
   const containerHeight = (1 + visibleRest * 2) * itemHeight;
@@ -81,13 +83,21 @@ const WheelPicker: React.FC<Props> = ({
     const offsetY = event.nativeEvent.contentOffset.y;
     let index = Math.floor(Math.floor(offsetY) / itemHeight);
     const last = Math.floor(offsetY % itemHeight);
+
     if (last > itemHeight / 2) index++;
 
     if (index !== selectedIndex) {
       onChange(index);
     }
   };
 
+  const handleItemPress = (index: number) => {
+    if (listRef.current) {
+      const adjustedIndex = Math.max(index - visibleRest, 0);
+      listRef.current.scrollToIndex({ index: adjustedIndex });
+    }
+  };
+
   return (
     <View
       style={[styles.container, { height: containerHeight }, containerStyle]}
@@ -104,6 +114,7 @@ const WheelPicker: React.FC<Props> = ({
         ]}
       />
       <Animated.FlatList<string | null>
+        ref={listRef}
         style={styles.scrollView}
         showsVerticalScrollIndicator={false}
         scrollEventThrottle={scrollEventThrottle}
@@ -138,6 +149,7 @@ const WheelPicker: React.FC<Props> = ({
             rotationFunction={rotationFunction}
             opacityFunction={opacityFunction}
             visibleRest={visibleRest}
+            onItemPress={() => handleItemPress(index)}
           />
         )}
       />

src/WheelPickerItem.tsx

@@ -1,5 +1,14 @@
 import React from 'react';
-import { StyleProp, TextStyle, Animated, Text, ViewStyle } from 'react-native';
+import {
+  NativeSyntheticEvent,
+  NativeTouchEvent,
+  StyleProp,
+  TextStyle,
+  Animated,
+  Text,
+  TouchableOpacity,
+  ViewStyle,
+} from 'react-native';
 import styles from './WheelPicker.styles';
 
 interface ItemProps {
@@ -12,6 +21,7 @@ interface ItemProps {
   visibleRest: number;
   rotationFunction: (x: number) => number;
   opacityFunction: (x: number) => number;
+  onItemPress: (event: NativeSyntheticEvent<NativeTouchEvent>) => void;
 }
 
 const WheelPickerItem: React.FC<ItemProps> = ({
@@ -24,6 +34,7 @@ const WheelPickerItem: React.FC<ItemProps> = ({
   currentScrollIndex,
   opacityFunction,
   rotationFunction,
+  onItemPress,
 }) => {
   const relativeScrollIndex = Animated.subtract(index, currentScrollIndex);
 
@@ -99,7 +110,9 @@ const WheelPickerItem: React.FC<ItemProps> = ({
         { height, opacity, transform: [{ translateY }, { rotateX }] },
       ]}
     >
-      <Text style={textStyle}>{option}</Text>
+      <TouchableOpacity activeOpacity={1} onPress={onItemPress}>
+        <Text style={textStyle}>{option}</Text>
+      </TouchableOpacity>
     </Animated.View>
   );
 };