Adds ability to snap to index.

Author: alexkendall

src/WheelPicker.tsx

@@ -49,6 +49,10 @@ const WheelPicker: React.FC<Props> = ({
 }) => {
   const flatListRef = useRef<FlatList>(null);
   const [scrollY] = useState(new Animated.Value(0));
+  const flatList = useRef(null)
+
+  const SCROLL_DID_STOP_TIMEOUT = 500
+  const lastScrollTimestamp = useRef(new Date().getTime())
 
   const containerHeight = (1 + visibleRest * 2) * itemHeight;
   const [scrollIndex, setScrollIndex] = useState(selectedIndex)
@@ -96,6 +100,19 @@ const WheelPicker: React.FC<Props> = ({
   }, [selectedIndex]);
 
 
+  useEffect(() => {
+    const intervalID = setInterval(() => {
+      const time = new Date().getTime()
+      const difference = time - lastScrollTimestamp.current
+      if (difference > SCROLL_DID_STOP_TIMEOUT) {
+        flatList.current?.scrollToIndex({ index: scrollIndex, animated: true })
+      }
+    }, 100)
+    return () => {
+      clearInterval(intervalID)
+    }
+  }, [])
+
   useEffect(() => {
     if (onChange) {
       onChange(scrollIndex)
@@ -113,6 +130,7 @@ const WheelPicker: React.FC<Props> = ({
     const positionY = event?.nativeEvent?.contentOffset?.y ?? 0;
     const index = Math.round(positionY / itemHeight)
     setScrollIndex(index)
+    lastScrollTimestamp.current = new Date().getTime()
   }
 
   return (