Sets scroll index using handle scroll event

Update WheelPicker.tsx

Update WheelPicker.tsx

Adds type

Update WheelPicker.tsx

Update WheelPicker.tsx

Update WheelPicker.tsx

Update WheelPicker.tsx

Adds ability to snap to index.

Update package.json

Update package.json

Update WheelPicker.tsx

Update WheelPicker.tsx

Update package.json

Update WheelPicker.tsx

Ensures extra calculations only run for react-native for web.

Lints code.

Updates event type to use Animated event.

Modifies event and flat list ref types.

Allows Typsecript to compile without errors

Adds support for react-native-web.

Author: alexkendall

src/WheelPicker.tsx

@@ -10,6 +10,7 @@ import {
   ViewProps,
   FlatListProps,
   FlatList,
+  Platform
 } from 'react-native';
 import styles from './WheelPicker.styles';
 import WheelPickerItem from './WheelPickerItem';
@@ -50,7 +51,10 @@ const WheelPicker: React.FC<Props> = ({
   const flatListRef = useRef<FlatList>(null);
   const [scrollY] = useState(new Animated.Value(0));
 
+  const lastScrollTimestamp = useRef(new Date().getTime());
+
   const containerHeight = (1 + visibleRest * 2) * itemHeight;
+  const [scrollIndex, setScrollIndex] = useState(selectedIndex);
   const paddedOptions = useMemo(() => {
     const array: (string | null)[] = [...options];
     for (let i = 0; i < visibleRest; i++) {
@@ -94,6 +98,42 @@ const WheelPicker: React.FC<Props> = ({
     });
   }, [selectedIndex]);
 
+
+  useEffect(() => {
+    if (Platform.OS === 'web') {
+      const SCROLL_COOLDOWN_MILLISECONDS = 100;
+      const SCROLL_DID_STOP_TIMEOUT = 500;
+      const intervalID = setInterval(() => {
+        const time = new Date().getTime();
+        const difference = time - lastScrollTimestamp.current;
+        if (difference > SCROLL_DID_STOP_TIMEOUT) {
+          flatListRef.current?.scrollToIndex({
+            index: scrollIndex,
+            animated: true,
+          });
+        }
+      }, SCROLL_COOLDOWN_MILLISECONDS);
+      return () => {
+        clearInterval(intervalID);
+      };
+    }
+  }, [scrollIndex]);
+
+  useEffect(() => {
+    if (Platform.OS === 'web') {
+      onChange(scrollIndex);
+    }
+  }, [scrollIndex, onChange]);
+
+  const handleScroll = (event: NativeSyntheticEvent<any>) => {
+    if (Platform.OS === 'web') {
+      const positionY = event.nativeEvent.contentOffset.y;
+      const index = Math.round(positionY / itemHeight);
+      setScrollIndex(index);
+      lastScrollTimestamp.current = new Date().getTime();
+    }
+  };
+
   return (
     <View
       style={[styles.container, { height: containerHeight }, containerStyle]}
@@ -116,7 +156,11 @@ const WheelPicker: React.FC<Props> = ({
         showsVerticalScrollIndicator={false}
         onScroll={Animated.event(
           [{ nativeEvent: { contentOffset: { y: scrollY } } }],
-          { useNativeDriver: true },
+          {
+            useNativeDriver: true,
+            listener: (event: NativeSyntheticEvent<any>
+            ) => handleScroll(event),
+          },
         )}
         onMomentumScrollEnd={handleMomentumScrollEnd}
         snapToOffsets={offsets}
@@ -148,4 +192,4 @@ const WheelPicker: React.FC<Props> = ({
   );
 };
 
-export default WheelPicker;
+export default WheelPicker;

src/index.ts

@@ -1,3 +1,3 @@
 import WheelPicker from './WheelPicker';
 
-export default WheelPicker;
+export default WheelPicker;