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 :(