-
-
Notifications
You must be signed in to change notification settings - Fork 333
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Cannot scroll up/down in a scrollview on mobile web #658
Comments
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 Here is an example of how you can use the 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 |
That's not what |
Had this issue and almost abandoned, but then found out that you can hook into pan gesture configuration, and adjust the
|
That's functionally identical to what I linked, it works on iOS and Android, but not web. |
@JenkinsDev I confirmed it; it doesn't fix mobile web, unfortunately. |
Not yet, unfortunately. |
Thanks buddy, for us this was the solution and resolved the problem! Good job and thanks!! |
hey @qwertychouskie - This workaround seems to do the trick for me! I was able to implement this solution for my RNRC carousel inside of a
For number 2, one could either patch RNRC <GestureDetector gesture={gesture} touchAction="pan-y"> but, as a hacky workaround, updating the <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 Perhaps we can huddle up sometime to discuss a good way to resolve this that'll be more resilient for the long-term. |
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. |
<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 :( |
check this #712 (comment) |
Describe the bug
Using the code at #465 (comment) fixes the issue on iOS and Android, but the issue is still present on mobile web.
To Reproduce
Steps to reproduce the behavior:
Versions (please complete the following information):
18.2.0
0.74.3
~3.10.1
^4.0.0-alpha.12
~2.16.1
Smartphone (please complete the following information):
The text was updated successfully, but these errors were encountered: