meliorence / react-native-snap-carousel

Swiper/carousel component for React Native featuring previews, multiple layouts, parallax images, performant handling of huge numbers of items, and more. Compatible with Android & iOS.
BSD 3-Clause "New" or "Revised" License
10.36k stars 2.29k forks source link

Scrolling snaps opposite way at end of scroll #662

Open nickmccomb opened 4 years ago

nickmccomb commented 4 years ago

Is this a bug report, a feature request, or a question?

Bug report

Have you followed the required steps before opening a bug report?

Have you made sure that it wasn't a React Native bug?

yes

Is the bug specific to iOS or Android? Or can it be reproduced on both platforms?

iOS & Android - all versions

Is the bug reproductible in a production environment (not a debug one)?

yes

Environment

Environment: React: 16.12.0 React native: 0.61.5 react-native-snap-carousel: 3.8.4

Target Platform: Android (6.0) iOS (10.3)

Expected Behavior

The snap carousel should continue in the direction the user scrolls, then snap to an item in that direction once the carousel finishes scrolling (or close to finishing, e.g slowing down)

Actual Behavior

The snap carousel scrolls in the direction the user slides although, once it slows down, it starts sliding and snapping in the opposite direction.

Here is a screen recording showing the issue: https://imgur.com/gallery/dzpcrM8

Reproducible Demo

Unable to post a demo as this is a client project. Hopefully somone knows how to fix this issue by seeing the movie and description above.

Steps to Reproduce

<Carousel
    enableMomentum
    triggerRenderingHack
    ref={oddsRoll}
    data={ODDS}  // array of numbers [10, 11, 12, 13, ...]
    itemWidth={50}
    itemHeight={50}
    inactiveSlideOpacity={0.15}
    inactiveSlideScale={0.9}
    renderItem={renderCarouselItem} // a simple PureComponent with Text inside a View
    sliderWidth={sliderWidth} // this changes based on a few things.  Assume it's screen width
    onSnapToItem={index => setIndex(index)}
/>
  1. Load a array of numbers into Carousel
  2. Scroll left or right

Thanks for your help in advance. Hopefully it's something i'm doing wrong and not an issue with react-native-snap-carousel itself.

bd-arc commented 4 years ago

Can you try the shiny new beta version and let me know how it works for you?

Click here to learn everything about the upcoming v4!

mrarronz commented 4 years ago

@bd-arc nice work! The latest version 4.0.0-beta.5 seems work fine without going back when scrolling cards horizontally!

dohooo commented 3 years ago

Sorry, please allow me to advertise for my open source library! ~ I think this library react-native-reanimated-carousel will solve your problem. It is a high performance and very simple component, complete with React-Native reanimated 2