Cannot scroll up/down in a scrollview on mobile web

[qwertychouskie]

Describe the bug Using the code at https://github.com/dohooo/react-native-reanimated-carousel/issues/465#issuecomment-2068240634 fixes the issue on iOS and Android, but the issue is still present on mobile web.

To Reproduce Steps to reproduce the behavior:

1. Go to https://app.carusosignature.com/ on mobile web browser (or responsive design mode on desktop with touch input simulation enabled)
2. Scroll down to the carousels
3. Attempt to scroll the page up/down

Versions (please complete the following information):

• react: 18.2.0
• react-native: 0.74.3
• react-native-reanimated: ~3.10.1
• react-native-reanimated-carousel: ^4.0.0-alpha.12
• react-native-gesture-handler: ~2.16.1

Smartphone (please complete the following information):

• Device: N/A
• OS: N/A
• Browser: Any

[dosubot[bot]]

Hey there, @qwertychouskie! 👋 I'm here to help you with bug fixes, answer your questions, and guide you on becoming a contributor. Let's squash those bugs together!

To fix the issue where vertical scrolling does not work on mobile web for the react-native-reanimated-carousel, you can use the fixedDirection prop that was introduced to address scroll direction issues.

Here is an example of how you can use the fixedDirection prop:

import Carousel from 'react-native-reanimated-carousel';

<Carousel
  data={data}
  renderItem={renderItem}
  width={width}
  height={height}
  fixedDirection="vertical" // or "horizontal" depending on your requirement
/>

By setting fixedDirection to "vertical", you should be able to fix the vertical scrolling issue on mobile web ^[1].

To continue talking to Dosu, mention @dosu.

[qwertychouskie]

That's not what fixedDirection does.

[JenkinsDev]

Had this issue and almost abandoned, but then found out that you can hook into pan gesture configuration, and adjust the activeOffsetX.

      <Carousel
        ...
        onConfigurePanGesture={(panGesture: PanGesture) => {
          panGesture.activeOffsetX([-20, 20]);
        }} />

[qwertychouskie]

Had this issue and almost abandoned, but then found out that you can hook into pan gesture configuration, and adjust the activeOffsetX.

      <Carousel
        ...
        onConfigurePanGesture={(panGesture: PanGesture) => {
          panGesture.activeOffsetX([-20, 20]);
        }} />

That's functionally identical to what I linked, it works on iOS and Android, but not web.

[andresouza-maple]

@JenkinsDev I confirmed it; it doesn't fix mobile web, unfortunately. @qwertychouskie have you found a solution for that?

[qwertychouskie]

@qwertychouskie have you found a solution for that?

Not yet, unfortunately.

[MarkKravchuk]

Had this issue and almost abandoned, but then found out that you can hook into pan gesture configuration, and adjust the activeOffsetX.

      <Carousel
        ...
        onConfigurePanGesture={(panGesture: PanGesture) => {
          panGesture.activeOffsetX([-20, 20]);
        }} />

Thanks buddy, for us this was the solution and resolved the problem!

Good job and thanks!!

[nmassey]

hey @qwertychouskie - This workaround seems to do the trick for me!

• https://github.com/software-mansion/react-native-gesture-handler/issues/3010#issuecomment-2255085361

I was able to implement this solution for my RNRC carousel inside of a ScrollView by:

1. upgrade react-native-gesture-handler to 2.16.0 (or higher) -- note that I don't know whether this might cause any other issues!! - I know specific Expo SDKs prefer certain versions of RNGH
2. add touchAction="pan-y" prop to the GestureDetector - https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/gesture-detector/#touchaction-web-only

For number 2, one could either patch RNRC ScrollViewGesture.tsx to include it as a property (probably the preferred route), e.g.

    <GestureDetector gesture={gesture} touchAction="pan-y">

but, as a hacky workaround, updating the onConfigurePanGesture callback worked well enough for me. Note that this works by updating the internal state of panGesture, which is, well, not recommended. Use at your own risk!! (See RNGH source code here and here for hints about why this works.)

    <Carousel
      ...
      onConfigurePanGesture={(panGesture: PanGesture) => {
        // fix panGesture so that the carousel works correctly
        // within a ScrollView
        panGesture.config.touchAction = 'pan-y' // for web

        // for iOS and Android
        panGesture.activeOffsetX([-5, 5]);
        panGesture.failOffsetY([-5, 5]);
      }}
    />

I hope this helps get you moving forward? 🙏

Also, this seems to work fine with react-native's ScrollView (so, you shouldn't need to import ScrollView from RNGH unless there's some other reason for it).

---

Perhaps we can huddle up sometime to discuss a good way to resolve this that'll be more resilient for the long-term.

[qwertychouskie]

That works perfectly, thanks! Ideally, the settings for both mobile and web would be set by default for the relevant carousel types, but setting it manually works fine for now.

[LunatiqueCoder]

    <Carousel
      ...
      onConfigurePanGesture={(panGesture: PanGesture) => {
        // fix panGesture so that the carousel works correctly
        // within a ScrollView
        panGesture.config.touchAction = 'pan-y' // for web

        // for iOS and Android
        panGesture.activeOffsetX([-5, 5]);
        panGesture.failOffsetY([-5, 5]);
      }}
    />

This worked for me for mobile web, however, pinch-to-zoom will not work :(

[mamicrose]

check this https://github.com/dohooo/react-native-reanimated-carousel/issues/712#issuecomment-2497342697

[dosubot[bot]]

Hi, @qwertychouskie. I'm Dosu, and I'm helping the react-native-reanimated-carousel team manage their backlog. I'm marking this issue as stale.

Issue Summary:

• The issue involves scrolling problems in a scrollview on mobile web browsers using react-native-reanimated-carousel.
• Initial suggestions, like using the fixedDirection prop, were ineffective.
• @nmassey's workaround using touchAction="pan-y" was successful for you but disables pinch-to-zoom functionality.
• The discussion indicates a need for a robust solution that works across mobile and web environments.

Next Steps:

• Please let us know if this issue is still relevant with the latest version of the library. If so, feel free to comment to keep the discussion open.
• If there is no further activity, this issue will be automatically closed in 7 days.

Thank you for your understanding and contribution!

[qwertychouskie]

The provided workaround works but the issue should still be resolved in the library itself, or at least the workaround should be clearly documented.

[dosubot[bot]]

Hi, @qwertychouskie. I'm Dosu, and I'm helping the react-native-reanimated-carousel team manage their backlog. I'm marking this issue as stale.

Issue Summary:

• You reported a scrolling problem on mobile web browsers using the carousel.
• Suggested use of fixedDirection prop was ineffective.
• @nmassey provided a workaround using touchAction="pan-y", resolving the issue but disabling pinch-to-zoom.
• You confirmed the workaround works but requested a library-level fix or documentation.

Next Steps:

• Please let me know if this issue is still relevant with the latest version of the library by commenting here.
• If no updates are provided, the issue will be automatically closed in 7 days.

Thank you for your understanding and contribution!

[imckain]

<Carousel
  ...
  onConfigurePanGesture={(panGesture: PanGesture) => {
    // fix panGesture so that the carousel works correctly
    // within a ScrollView
    panGesture.config.touchAction = 'pan-y' // for web

    // for iOS and Android
    panGesture.activeOffsetX([-5, 5]);
    panGesture.failOffsetY([-5, 5]);
  }}
/>

This great. Simple and works. Thanks!