fix scroll speed issues & always trigger onchange when first initial

1997roylee · Jan 4, 2022 · cfc14cd · cfc14cd
1 parent ec09898
commit cfc14cd
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 32 deletions.
diff --git a/src/WheelPicker.tsx b/src/WheelPicker.tsx
@@ -1,12 +1,6 @@
 // src/WheelPicker.tsx
-import React, {
-  useCallback,
-  useRef,
-  useMemo,
-  useEffect,
-  useState,
-} from 'react';
-import { View, FlatList, Platform, Dimensions, ViewStyle } from 'react-native';
+import React, { useCallback, useRef, useMemo, useEffect } from 'react';
+import { View, FlatList, Dimensions, ViewStyle } from 'react-native';
 import Animated, {
   useSharedValue,
   useAnimatedScrollHandler,
@@ -39,7 +33,7 @@ function WheelPicker(props: IWheelPickerProps) {
     offset.value = e.contentOffset.y;
   });
 
-  const [currentIndex, setCurrentIndex] = useState(0);
+  // const [currentIndex, setCurrentIndex] = useState(0);
 
   const {
     items: propItems,
@@ -51,13 +45,14 @@ function WheelPicker(props: IWheelPickerProps) {
     debug = false,
   } = props;
 
-  const { items, defaultIndex, height } = usePresenter({
-    initialValue: value,
-    items: propItems,
-    valueAttribute,
-    labelAttribute,
-    numberOfVisibleRows,
-  });
+  const { items, defaultIndex, height, currentIndex, onValueChange } =
+    usePresenter({
+      initialValue: value,
+      items: propItems,
+      valueAttribute,
+      labelAttribute,
+      numberOfVisibleRows,
+    });
 
   if (debug)
     console.log('WheelPicker', {
@@ -124,14 +119,6 @@ function WheelPicker(props: IWheelPickerProps) {
     [height]
   );
 
-  const onValueChange = useCallback(
-    (event) =>
-      setCurrentIndex(
-        Math.floor(event.nativeEvent.contentOffset.y / itemHeight)
-      ),
-    []
-  );
-
   useEffect(() => {
     setTimeout(() => {
       scrollToOffset(defaultIndex, true);
@@ -160,7 +147,6 @@ function WheelPicker(props: IWheelPickerProps) {
         ref={scrollView}
         height={height}
         data={items}
-        // onLayout={getLayout}
         showsVerticalScrollIndicator={false}
         scrollEventThrottle={100}
         initialNumToRender={8}
@@ -169,10 +155,10 @@ function WheelPicker(props: IWheelPickerProps) {
         renderItem={renderItem}
         snapToOffsets={snapToOffsets}
         keyExtractor={(_, index) => `Item_${index}`}
-        // initialScrollIndex={10}
         contentContainerStyle={contentContainerStyle}
         snapToInterval={itemHeight}
-        decelerationRate={Platform.OS === 'ios' ? 'normal' : 0.98}
+        decelerationRate={'fast'}
+        // decelerationRate={Platform.OS === 'ios' ? 'normal' : 0.98}
         onMomentumScrollEnd={onValueChange}
       />
       {/* <LinearGradient

diff --git a/src/usePresenter.ts b/src/usePresenter.ts
@@ -1,4 +1,5 @@
 // src/usePresenter.ts
+import { useCallback, useState } from 'react';
 import findIndex from 'lodash/findIndex';
 import isUndefined from 'lodash/isUndefined';
 import { itemHeight } from './constant';
@@ -18,24 +19,36 @@ export default function usePresenter({
   labelAttribute,
   numberOfVisibleRows,
 }: IProps) {
-  // const value = isUndefined(selectedValue) ? initialValue : selectedValue;
-
   const items = propItems.map((item: any) => {
     return {
       value: item[valueAttribute],
       label: item[labelAttribute],
     };
   });
 
+  const defaultIndex = isUndefined(initialValue)
+    ? 0
+    : findIndex(items, { value: initialValue });
+
+  const [currentIndex, setCurrentIndex] = useState(defaultIndex);
+
+  const onValueChange = useCallback(
+    (event) =>
+      setCurrentIndex(
+        Math.floor(event.nativeEvent.contentOffset.y / itemHeight)
+      ),
+    []
+  );
+
   const getRowItemByIndex = (index: number) => {
     return items[index];
   };
 
   return {
     items,
-    defaultIndex: isUndefined(initialValue)
-      ? 0
-      : findIndex(items, { value: initialValue }),
+    onValueChange,
+    currentIndex,
+    defaultIndex,
     getRowItemByIndex,
     height: numberOfVisibleRows * itemHeight,
   };