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

calling scrollTo multiple times with animation causes the scroll to overshoot and get out of sync

Open CapsAdmin opened this issue 3 years ago • 4 comments

I'm using Carousel and some buttons calling carousel.scrollTo({index, animated: true}) to manually go to a specific item in the carousel.

If I press a button to scroll to a specific index while it's already animating to some other index, the container view seems to go out of sync. It's fixed if I manually scroll the view again with my fingers.

CapsAdmin avatar Jul 15 '22 09:07 CapsAdmin

A workaround I found just now is doing this instead:

carousel.scrollTo({
	count: index - carousel.getCurrentIndex(),
	animated: true,
})

as opposed to just using the index field

CapsAdmin avatar Jul 15 '22 09:07 CapsAdmin

Hi @CapsAdmin, In the API count is used to move with a specific fixed parameter. index value is also used as first scroll action and overrides count direct parameter. And is possible to know how you are changing the state of index values?

oliverloops avatar Jul 16 '22 19:07 oliverloops

Any solution? I met the same issue, and it is not related to passed count or index

wqcstrong avatar Jul 29 '22 07:07 wqcstrong

Hi @CapsAdmin, In the API count is used to move with a specific fixed parameter. index value is also used as first scroll action and overrides count direct parameter. And is possible to know how you are changing the state of index values?

I think I understand the differences, but the problem seems to be using index while it's already animating.

This looks suspicious

https://github.com/dohooo/react-native-reanimated-carousel/blob/ce2ee4993e34608adb176ef5f6e4fb46439884a0/src/hooks/useCarouselController.tsx#L234

Maybe it should be using currentFixedPage() as prev and next above uses?

CapsAdmin avatar Jul 29 '22 08:07 CapsAdmin

Thx for your issue. fixed in v3.0.4.

dohooo avatar Aug 12 '22 04:08 dohooo