react-native-reanimated-carousel icon indicating copy to clipboard operation
react-native-reanimated-carousel copied to clipboard

onSnapToItem doesn't get called when fast swiping to the beginning or the end of the scroller when pagingEnabled = false

Open stomataln opened this issue 2 years ago • 1 comments

Describe the bug A clear and concise description of what the bug is. If you intend to submit a PR for this issue, tell us in the description. Thanks!

To Reproduce Steps to reproduce the behavior:

  1. Use repo https://github.com/stomataln/TestReanimatedCarousel/
  2. key is to have pagingEnabled = false;
  3. the top pink text box will show the current index of the carousel
  4. fast scroll to the end or beginning of the scroller
  5. text box number doesn't get updated.

Expected behavior Text box number should be updated when fast scroll to the end or beginning.

Screenshots If applicable, add screenshots to help explain your problem.

Versions (please complete the following information):

  • react: v18.2.0
  • react-native: v0.72.3
  • react-native-reanimated: v3.4.1
  • react-native-reanimated-carousel: v3.5.1
  • react-native-gesture-handler: v2.8.0

Smartphone (please complete the following information):

  • Device: [e.g. iPhone14pro]
  • OS: [e.g. iOS16]
  • just use iOS simulator in Xcode 11

Additional context I actually have found a fix for this, in ScrollViewGesture.tsx, line 214 & 225. You forgot to put the onFinish call back in the withSpring function call, so this issue can be fixed by doing the following:

diff --git a/node_modules/react-native-reanimated-carousel/src/ScrollViewGesture.tsx b/node_modules/react-native-reanimated-carousel/src/ScrollViewGesture.tsx
index ae2a123..166bf5b 100644
--- a/node_modules/react-native-reanimated-carousel/src/ScrollViewGesture.tsx
+++ b/node_modules/react-native-reanimated-carousel/src/ScrollViewGesture.tsx
@@ -214,7 +214,7 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
         return;
       }
       if (!infinite) {
-        translation.value = withSpring(0);
+        translation.value = withSpring(0, onScrollEnd);
         return;
       }
     }
@@ -225,7 +225,7 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
         return;
       }
       if (!infinite)
-        translation.value = withSpring(-((maxPage - 1) * size));
+        translation.value = withSpring(-((maxPage - 1) * size), onScrollEnd);
     }
   }, [
     touching.value,

stomataln avatar Aug 15 '23 18:08 stomataln

Hi, @dohooo

What do you think about this fix? It's really help's to avoid strange renders during fast scrolling.

blackazaru avatar Mar 14 '24 08:03 blackazaru