Carousel disappear on swipe/drag on Expo RN Web

[learncreateconquer]

Describe the bug Carousel work great on IOS and Android but when rendered on Web, a swipe or drag gesture is disappearing the carousel.

To Reproduce Steps to reproduce the behavior:

1. Go to 'Carousel'
2. Click and drag on 'View/Image'
3. See error (most likely this could be the error)
   • [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive.
   • [Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive.

Expected behavior Should work as it does on mobile platform

Screenshots

https://github.com/dohooo/react-native-reanimated-carousel/assets/125890786/3cc8bc5c-2cda-4435-a940-9c67f609237b

Versions (please complete the following information):

• react: "18.2.0"
• react-native: "0.72.4"
• react-native-reanimated: "~3.3.0"
• react-native-reanimated-carousel: "^3.5.1"
• react-native-gesture-handler: "~2.12.0"

Smartphone (please complete the following information):

• Device: MAC
• OS: Ventura 13.4
• Browser Chrome, Safari
• Version

Additional context

• RN animated and RN gesture handler additional installation steps are added.

Would love to see this seamlessly working on Web

[dosubot[bot]]

🤖

Hey there, @learncreateconquer! 🚀 It's great to see you again in the react-native-reanimated-carousel repository. We really appreciate your continuous support and contribution. 🦸‍♂️🙌

The issue you're experiencing might be due to the react-native-gesture-handler library, which is used in the react-native-reanimated-carousel component, having some known issues with the web platform.

In the code, the GestureHandlerRootView component from react-native-gesture-handler is used as a wrapper for the carousel. This component is designed to work with native platforms (iOS and Android) and might not behave as expected on the web.

To fix this issue, you could conditionally use a different wrapper for the web platform. For example, you could use a simple View component from react-native when the platform is web. Here's how you could implement this:

import { Platform, View } from 'react-native';

// ...

const Wrapper = Platform.OS === 'web' ? View : GestureHandlerRootView;

return (
  <Wrapper>
    ...
  </Wrapper>
);

This way, you're not using GestureHandlerRootView on the web, which might solve the issue with the carousel disappearing when swiped or dragged. However, please note that this might not be the only issue related to the web platform, and further adjustments might be needed to make the carousel work as expected on the web.

Please try this solution and let me know if it helps or if you need further assistance.

Sources

• 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.

[learncreateconquer]

bot response did not work

[dosubot[bot]]

🤖

It seems like this issue requires a deeper look, @dohooo could you please lend your expertise?

---

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.

[chanphiromsok]

on android device when scroll is not smooth at all whereas IOS is smooth but still stutter the scroll but for autoplay both are fine

[stoickeyboard]

+1

[xtyrrell]

~I'm also experiencing this on a non-expo project with~

  "react": "18.2.0",
  "react-native": "^0.72.4",
  "react-native-gesture-handler": "^2.12.1",
  "react-native-reanimated": "3.4.1",
  "react-native-reanimated-carousel": "4.0.0-alpha.9",

~After some trial and error, I determined that using the following makes the carousel work on web:~

  "react-native-reanimated": "3.3.0",

~I tried to reproduce this in examples/expo in this repo, by setting react-native-reanimated to 3.4.1, but it worked fine and I was not able to reproduce the carousel disappearing. Maybe this can't be reproduced in Expo projects?~

[xtyrrell]

I just tried to reproduce the issue again with the above dependencies on my machine and again on another machine and I can't. It looks like "react-native-reanimated-carousel": "4.0.0-alpha.9", does indeed work correctly with the above list of dependencies -- perhaps I forgot to reinstall my pods after trying 3.5.1.