meliorence / meliorence/react-native-snap-carousel

Scrolling snaps opposite way at end of scroll

Open
#662 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
10.5k
Forks
2.3k
PR merge metrics
No merged PRs in 30d

Description

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.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the Carousel configuration in the issue and reproduce the behavior on both Android and iOS using enableMomentum and triggerRenderingHack. Investigate how scrolling direction is handled as momentum slows and how the carousel chooses the snap item. Done means the carousel continues and snaps in the direction of the user's swipe without reversing.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react-native
Domain
frontend, mobile
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.