Adding expo haptics to the WheelPicker

package.json

@@ -21,20 +21,25 @@
   "scripts": {
     "build": "tsc --skipLibCheck",
     "lint": "eslint ./src --ext .js,.ts,.tsx",
-    "prepare": "yarn build"
+    "prepare": "npm run build"
   },
   "devDependencies": {
     "@types/react": "^17.0.40",
     "@types/react-native": "^0.67.3",
     "@typescript-eslint/eslint-plugin": "^5.15.0",
     "@typescript-eslint/parser": "^5.15.0",
-    "eslint": "^8.11.0",
     "eslint-plugin-react": "^7.29.4",
     "eslint-plugin-react-hooks": "^4.3.0",
     "eslint-plugin-react-native": "^4.0.0",
     "prettier": "^2.6.0",
-    "react": "^17.0.2",
-    "react-native": "^0.67.3",
+    "react": "^18.2.0",
     "typescript": "^4.6.2"
+  },
+  "dependencies": {
+    "@gorhom/bottom-sheet": "^5.0.0-alpha.11",
+    "expo": "^51.0.32",
+    "expo-haptics": "~13.0.1",
+    "react-native-gesture-handler": "^2.20.0",
+    "react-native-reanimated": "^3.15.3"
   }
 }

src/WheelPicker.tsx

@@ -9,10 +9,13 @@ import {
   View,
   ViewProps,
   FlatListProps,
-  FlatList,
 } from 'react-native';
+import { FlatList } from 'react-native-gesture-handler';
 import styles from './WheelPicker.styles';
 import WheelPickerItem from './WheelPickerItem';
+import * as Haptics from 'expo-haptics';
+import { BottomSheetFlatList } from "@gorhom/bottom-sheet";
+import { GestureHandlerRootView, NativeViewGestureHandler } from 'react-native-gesture-handler';
 
 interface Props {
   selectedIndex: number;
@@ -30,6 +33,7 @@ interface Props {
   visibleRest?: number;
   decelerationRate?: 'normal' | 'fast' | number;
   flatListProps?: Omit<FlatListProps<string | null>, 'data' | 'renderItem'>;
+  enableHaptics?: boolean;
 }
 
 const WheelPicker: React.FC<Props> = ({
@@ -48,8 +52,9 @@ const WheelPicker: React.FC<Props> = ({
   decelerationRate = 'fast',
   containerProps = {},
   flatListProps = {},
+  enableHaptics = false,
 }) => {
-  const flatListRef = useRef<FlatList>(null);
+  const flatListRef = useRef<any>(null);
   const [scrollY] = useState(new Animated.Value(0));
 
   const containerHeight = (1 + visibleRest * 2) * itemHeight;
@@ -95,8 +100,7 @@ const WheelPicker: React.FC<Props> = ({
   useEffect(() => {
     if (selectedIndex < 0 || selectedIndex >= options.length) {
       throw new Error(
-        `Selected index ${selectedIndex} is out of bounds [0, ${
-          options.length - 1
+        `Selected index ${selectedIndex} is out of bounds [0, ${options.length - 1
         }]`,
       );
     }
@@ -114,57 +118,61 @@ const WheelPicker: React.FC<Props> = ({
   }, [selectedIndex]);
 
   return (
-    <View
-      style={[styles.container, { height: containerHeight }, containerStyle]}
-      {...containerProps}
-    >
+    <GestureHandlerRootView>
       <View
-        style={[
-          styles.selectedIndicator,
-          selectedIndicatorStyle,
-          {
-            transform: [{ translateY: -itemHeight / 2 }],
-            height: itemHeight,
-          },
-        ]}
-      />
-      <Animated.FlatList<string | null>
-        {...flatListProps}
-        ref={flatListRef}
-        style={styles.scrollView}
-        showsVerticalScrollIndicator={false}
-        onScroll={Animated.event(
-          [{ nativeEvent: { contentOffset: { y: scrollY } } }],
-          { useNativeDriver: true },
-        )}
-        onMomentumScrollEnd={handleMomentumScrollEnd}
-        snapToOffsets={offsets}
-        decelerationRate={decelerationRate}
-        initialScrollIndex={selectedIndex}
-        getItemLayout={(data, index) => ({
-          length: itemHeight,
-          offset: itemHeight * index,
-          index,
-        })}
-        data={paddedOptions}
-        keyExtractor={(item, index) => index.toString()}
-        renderItem={({ item: option, index }) => (
-          <WheelPickerItem
-            key={`option-${index}`}
-            index={index}
-            option={option}
-            style={itemStyle}
-            textStyle={itemTextStyle}
-            height={itemHeight}
-            currentScrollIndex={currentScrollIndex}
-            scaleFunction={scaleFunction}
-            rotationFunction={rotationFunction}
-            opacityFunction={opacityFunction}
-            visibleRest={visibleRest}
-          />
-        )}
-      />
-    </View>
+        style={[styles.container, { height: containerHeight }, containerStyle]}
+        {...containerProps}
+      >
+        <View
+          style={[
+            styles.selectedIndicator,
+            selectedIndicatorStyle,
+            {
+              transform: [{ translateY: -itemHeight / 2 }],
+              height: itemHeight,
+            },
+          ]}
+        />
+        <FlatList
+          {...flatListProps}
+          ref={flatListRef}
+          style={styles.scrollView}
+          showsVerticalScrollIndicator={false}
+          onScrollBeginDrag={Animated.event(
+            [{ nativeEvent: { contentOffset: { y: scrollY } } }],
+            {
+              useNativeDriver: true,
+              listener: () => { if (enableHaptics) Haptics.selectionAsync(); },
+            },
+          )}
+          onMomentumScrollEnd={handleMomentumScrollEnd}
+          snapToOffsets={offsets}
+          initialScrollIndex={selectedIndex}
+          getItemLayout={(data, index) => ({
+            length: itemHeight,
+            offset: itemHeight * index,
+            index,
+          })}
+          data={paddedOptions}
+          keyExtractor={(item, index) => index.toString()}
+          renderItem={({ item: option, index }) => (
+            <WheelPickerItem
+              key={`option-${index}`}
+              index={index}
+              option={option}
+              style={itemStyle}
+              textStyle={itemTextStyle}
+              height={itemHeight}
+              currentScrollIndex={currentScrollIndex}
+              scaleFunction={scaleFunction}
+              rotationFunction={rotationFunction}
+              opacityFunction={opacityFunction}
+              visibleRest={visibleRest}
+            />
+          )}
+        />
+      </View>
+    </GestureHandlerRootView>
   );
 };