onScrollEnd not triggering when swiping to the beginning or end with mode="parallax" and loop={false}

[dohooo]

re #158

          I'm still having this issue with `onScrollEnd` not triggering when swiping to the beginning or end with `mode="parallax" `and `loop={false}`

react-native version: 0.72.6
react-native-reanimated version: 3.6.1
react-native-reanimated-carousel version: 3.5.1

Originally posted by @Boubaker93 in #158 (comment)

[dosubot]

🤖

Hello @dohooo! 👋

I'm Dosu, a friendly bot assistant. I'm here to help you with bugs, answer your questions, and guide you on your journey to becoming a contributor, while we wait for the human maintainers. Let's decode and debug together! 🚀😄

I see that you're experiencing an issue with the onScrollEnd event not triggering when swiping to the beginning or end with mode="parallax" and loop={false}. This seems to be similar to a previously resolved issue #158, where onSnapToItem was not triggering and onProgressChange was returning an absoluteProgress of greater than 1 when swiping past the beginning or end of a carousel with the same settings. This issue was resolved with a commit on May 02, 2022.

The expected behavior of the onScrollEnd event in this context is to trigger when the scrolling action ends. It should call the onScrollEnd prop with the real index of the item that is currently in view. This is handled by the _onScrollEnd function within the scrollViewGestureOnScrollEnd function in the Carousel.tsx file. Here's the relevant code:

const _onScrollEnd = React.useCallback(() => {
  const _sharedIndex = Math.round(getSharedIndex());

  const realIndex = computedRealIndexWithAutoFillData({
    index: _sharedIndex,
    dataLength: rawDataLength,
    loop,
    autoFillData,
  });

  if (onSnapToItem)
    onSnapToItem(realIndex);

  if (onScrollEnd)
    onScrollEnd(realIndex);
}, [
  loop,
  autoFillData,
  rawDataLength,
  getSharedIndex,
  onSnapToItem,
  onScrollEnd,
]);

const scrollViewGestureOnScrollEnd = React.useCallback(() => {
  startAutoPlay();
  _onScrollEnd();
}, [_onScrollEnd, startAutoPlay]);

The mode="parallax" setting should not affect the behavior of the onScrollEnd event. However, when loop={false}, the carousel will not loop back to the start when it reaches the end, and vice versa.

If you're still experiencing this issue, it would be helpful if you could provide more details about your implementation. Specifically, how you're using the onScrollEnd prop in your component, and any other relevant code or error messages. This will help in identifying the cause of the issue.

Sources

• When swiping past the beginning (left) or end (right) of a carousel with mode="parallax" and loop={false}, onSnapToItem is not triggering, and onProgressChange returns an absoluteProgress of greater than 1
• src/components/Carousel.tsx

---

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.