onScrollBegin is firing when scrolling down inside a ScrollView and then onScrollEnd does not fire.

[YoucefBen47]

Describe the bug We have a default Horizontal Carousel inside of a ScrollView. We use onScrollEnd and onScrollBegin to animate a text on swipe. When scrolling down away from the Carousel the onScrollBegin fires but onScrollEnd doesn't. To Reproduce Steps to reproduce the behavior:

1. Put a default Carousel inside a scroll view.
2. Scroll down.

Expected behavior onScrollBegin should not fire because the items are not being swiped horizontally.

Versions (please complete the following information):

• react: v18.2.0
• react-native: v0.73.6
• react-native-reanimated: v^3.8.1
• react-native-reanimated-carousel: v^3.5.1
• react-native-gesture-handler: v^2.15.0

Smartphone (please complete the following information):

• Device: Xiaomi Mi 9t
• OS: Android 11
  • Device: iPhone simulators
• OS: iOS 17

[dosubot[bot]]

To address the issue where onScrollBegin fires on vertical scrolls within a ScrollView, you'll need to differentiate between horizontal and vertical gestures. This can be achieved by modifying the gesture handling logic to only trigger onScrollBegin for horizontal movements. Here's a conceptual approach:

const onGestureUpdate = useCallback((e: PanGestureHandlerEventPayload) => {
  "worklet";
  const { translationX, translationY } = e;
  let isVerticalScroll = Math.abs(translationY) > Math.abs(translationX);

  if (!isVerticalScroll) {
    // Trigger onScrollBegin for horizontal scrolls
  }
}, []);

For the onScrollEnd not firing, a workaround involves using the onProgressChange event to manage a scrolling state, which then determines when scrolling starts and ends. This approach replaces the direct use of onScrollBegin and onScrollEnd:

const [scrolling, setScrolling] = useState(false);

useEffect(() => {
  if (scrolling) {
    // Handle onScrollBegin actions
  } else {
    // Handle onScrollEnd actions
  }
}, [scrolling]);

const onProgressChange = (_: number, absoluteProgress: number) => {
  setScrolling(absoluteProgress % 1 !== 0);
};

This solution should help manage the scroll events more accurately for your carousel within a ScrollView, ensuring that onScrollBegin is only triggered for relevant horizontal gestures and providing a mechanism to detect the end of scrolling.

#### Details

**Sources** - [Horizontal Carousel scrolling conflicts with vertical ScrollView scrolling](https://github.com/dohooo/react-native-reanimated-carousel/discussions/588) - [this library not providing native scroll events onScrollBeing or onScrollEnd](https://github.com/dohooo/react-native-reanimated-carousel/issues/602) - [onScrollBegin triggers on single tap but onScrollEnd does not](https://github.com/dohooo/react-native-reanimated-carousel/issues/244) - [Carousel in ScrollView layout](https://github.com/dohooo/react-native-reanimated-carousel/issues/383) - [Some kind of onScroll prop needed](https://github.com/dohooo/react-native-reanimated-carousel/issues/227) - [Hi](https://github.com/dohooo/react-native-reanimated-carousel/issues/218) - [src/components/Carousel.tsx](https://github.com/dohooo/react-native-reanimated-carousel/blob/main/src/components/Carousel.tsx) - [src/components/ScrollViewGesture.tsx](https://github.com/dohooo/react-native-reanimated-carousel/blob/main/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.

To continue the conversation, mention @dosu.

[YoucefBen47]

I ended up using this: https://github.com/dohooo/react-native-reanimated-carousel/issues/244#issuecomment-1253386041

 onProgressChange={(_, absoluteProgress) => {
          if (absoluteProgress % 1 !== 0) {
            fadeOut();
          } else {
            fadeIn();
          }
        }}

[talhabinkhalil]

To address the issue where onScrollBegin fires on vertical scrolls within a ScrollView, you'll need to differentiate between horizontal and vertical gestures. This can be achieved by modifying the gesture handling logic to only trigger onScrollBegin for horizontal movements. Here's a conceptual approach:

const onGestureUpdate = useCallback((e: PanGestureHandlerEventPayload) => {
  "worklet";
  const { translationX, translationY } = e;
  let isVerticalScroll = Math.abs(translationY) > Math.abs(translationX);

  if (!isVerticalScroll) {
    // Trigger onScrollBegin for horizontal scrolls
  }
}, []);

For the onScrollEnd not firing, a workaround involves using the onProgressChange event to manage a scrolling state, which then determines when scrolling starts and ends. This approach replaces the direct use of onScrollBegin and onScrollEnd:

const [scrolling, setScrolling] = useState(false);

useEffect(() => {
  if (scrolling) {
    // Handle onScrollBegin actions
  } else {
    // Handle onScrollEnd actions
  }
}, [scrolling]);

const onProgressChange = (_: number, absoluteProgress: number) => {
  setScrolling(absoluteProgress % 1 !== 0);
};

This solution should help manage the scroll events more accurately for your carousel within a ScrollView, ensuring that onScrollBegin is only triggered for relevant horizontal gestures and providing a mechanism to detect the end of scrolling.

Details

To continue the conversation, mention @dosu.

This is not working, when loop is false and we are on the last item of carousel. When we scroll to left absoluteProgress is 1 so setScroll will not set to True