dohooo / react-native-reanimated-carousel

🎠 React Native swiper/carousel component, fully implemented using reanimated v2, support to iOS/Android/Web. (Swiper/Carousel)
https://react-native-reanimated-carousel.vercel.app
MIT License
2.83k stars 328 forks source link

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

Open stomataln opened 1 year ago

stomataln commented 1 year ago

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):

Smartphone (please complete the following information):

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,
blackazaru commented 7 months ago

Hi, @dohooo

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