Short scroll moves to the next index when pagingEnabled = true

[davidrestrepo07]

I'm using react-native-reanimated-carousel in the default horizontal mode but when I do a very short scroll and have pagingEnabled = true and snapEnabled = true, it moves to the next item no matter how far away it is. Is there any way to make it move to the nearest item (whether it is the current item or the next one). The operation is similar to when you have pagingEnabled = false and snapEnabled = true, but if you make a long/fast scroll it skips several items, what I want is that it is only one item at a time, as with pagingEnabled = true.

I tried

<Carousel
 	panGestureHandlerProps={{
          activeOffsetX: [-(page_width/2), page_width],
     }}
	... 
/>

but it cancels the animation I triying to get an animation like this one https://imgur.com/c1BhjZm

[dosubot]

To adjust the carousel's behavior to move to the nearest item with a smooth transition, ensuring only one item moves at a time, you can configure the pagingEnabled, snapEnabled, maxScrollDistancePerSwipe, and minScrollDistancePerSwipe properties in your TCarouselProps. Here's how you might set it up:

<Carousel
  data={data}
  renderItem={renderItem}
  pagingEnabled={false}
  snapEnabled={true}
  maxScrollDistancePerSwipe={itemWidth} // Assuming `itemWidth` is the width of your carousel item
  minScrollDistancePerSwipe={10} // Adjust based on your preference for the minimum swipe sensitivity
  // Other props as needed
/>

In this setup, pagingEnabled is set to false to disable the default paging behavior that moves a full page/item on a swipe. snapEnabled is set to true to enable snapping to the nearest item after a scroll gesture. The maxScrollDistancePerSwipe and minScrollDistancePerSwipe properties are adjusted to control the sensitivity and distance of the swipe required to move to the next item. Setting maxScrollDistancePerSwipe to a value that represents the width (or height for vertical carousels) of an item ensures that only one item is moved at a time, regardless of the swipe's velocity or distance.

This approach differs from simply setting pagingEnabled to true, as it allows for more granular control over the swipe behavior, enabling the carousel to "snap" to the nearest item based on the final velocity and direction of the swipe, rather than moving a full item/page based on the swipe direction alone.

If you have any further questions or need more clarification, feel free to ask.

Sources

• Scroll distance too much important
• Add ability to remove/control velocity influence on scroll when pagingEnabled=false and snapEnabled=true
• Only allow swiping one item at a time?
• swipe one item at a time
• src/types.ts
• src/components/ScrollViewGesture.tsx

About Dosu

This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

If you want to continue the conversation, start your reply with @dosu-bot.

[davidrestrepo07]

From which version is available minScrollDistancePerSwipe? But that minScrollDistancePerSwipe if you can see the scrolling animation?

[Nitrammets]

Did you manage to solve this @davidrestrepo07