meliorence / react-native-snap-carousel

Swiper/carousel component for React Native featuring previews, multiple layouts, parallax images, performant handling of huge numbers of items, and more. Compatible with Android & iOS.
BSD 3-Clause "New" or "Revised" License
10.37k stars 2.29k forks source link

horizontal snap does not work in react-native version 0.64, 0.65 #859

Open heekyu-pu opened 3 years ago

heekyu-pu commented 3 years ago

Is this a bug report, a feature request, or a question?

Bug report

Have you followed the required steps before opening a bug report?

(Check the step you've followed - put an x character between the square brackets ([]).)

Have you made sure that it wasn't a React Native bug?

Yes, It worked in react-native version 0.63.2 but does not work in 0.64.0, 0.65.0

Is the bug specific to iOS or Android? Or can it be reproduced on both platforms?

Android only

Is the bug reproductible in a production environment (not a debug one)?

Yes, it's production build

Environment

Environment: React: 17.0.2 React native: 0.65.1 react-native-snap-carousel: 3.9.1

Expected Behavior

Horizontal snap work

Actual Behavior

Horizontal snap does not work

Reproducible Demo

This problem only occurs in latest react-native versions. skip demo

Steps to Reproduce

  1. problem occurs always in android devices
kyo504 commented 3 years ago

@heekyu-pu This also may be related to this issue. Internally, scrollTo is called inside onScrollDragEnd but it does not work on Android since 0.64.x.

jbolter commented 3 years ago

We're currently running into this on RN 0.64. The scrollTo bug that was linked seems to only affect Android but I am seeing this on iOS also.

dohooo commented 3 years ago

@heekyu-pu Sorry, please allow me to advertise for my open source library! ~ I think this library react-native-reanimated-carousel will solve your problem. It is a high performance and very simple component, complete with React-Native reanimated 2

27leaves commented 3 years ago

I'm facing the problem right now that I updated Xcode and need react-native > 0.64 for the new tooling (0.63 uses deprecated Xcode tools that won't work with the new Xcode version), but as my app heavily relies on this library I can't use it. So this is pretty high-priority for me. Did anyone already do some research on that? Does this really rely on the onScrollDragEnd like @kyo504 suggested?

Edit: Oh now that I see your comment @jbolter I guess it's not related to the issue above. I'm also facing this on iOS as well.

27leaves commented 3 years ago

OK guys I have some news. For me it worked now after updating the lib from 0.65.0 to 0.65.1. So I'm sorry but that probably won't help you @heekyu-pu. What could help is that I debugged a bit and discovered that - at least in my case - it stopped in the function Carousel._getWrappedRef.

If you change this

    _getWrappedRef () {
        if (this._carouselRef && (
            (this._needsScrollView() && this._carouselRef.scrollTo) ||
            (!this._needsScrollView() && this._carouselRef.scrollToOffset)
        )) {
            return this._carouselRef;
        }
        // https://github.com/facebook/react-native/issues/10635
        // https://stackoverflow.com/a/48786374/8412141
        return this._carouselRef && this._carouselRef.getNode && this._carouselRef.getNode();
    }

to just

    _getWrappedRef () {
        return this._carouselRef;
    }

it worked for me. Not sure though if you can safely do that for all cases.

jonathanm-tkf commented 3 years ago

Same here, thanks

penumbra23 commented 2 years ago

Issue confirmed also on 0.66

poulou0 commented 2 years ago

Setting the decelerationRate={2} (any value >=2) makes the behavior a bit more predictable. Still not ideal but at least it always snaps in place, in my case.