search

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

Snapping get stuck when RTL forced. (with video) #437

Open 592da opened 5 years ago

592da commented 5 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 - replace the space character between the square brackets ([]) by an x.)

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

yes

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

IOS Only.

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

reproductible

Environment

Environment: React: 16.5.0 React native: 0.31.01 react-native-snap-carousel: 3.7.5

Target Platform: Android (6.0) iOS (10.3)

Expected Behavior

snapping between items after i18manager.forceRTL(true) should work as expected

Actual Behavior

after RTL is forced, around snapping item on index 8, is flickering and not allowing to snap to the next item. no console errors, no logs, no-re render. working great on non RTL environment.

Demo Video

Steps to Reproduce

(Write your steps so that anyone can reproduce the issue in the Snack demo you provided.)

  1. i18manager.forceRTL(true);
  2. call carousel with list larger than 10 items
  3. try to snap after item 7
bd-arc commented 5 years ago

Hey @592da,

I know that currently there are a lot of issues with the RTL feature. There was some huge logic updates a few months ago, and I haven't been able to find the time to modify the RTL part accordingly. If you want to dive in, you're more than welcome ;-)

By the way, does the issue persists if you set prop loop to either true or false?

592da commented 5 years ago

@bd-arc confirmed that loop false/true still has the issue any possibility to deactivate the RTL feature maybe?

bd-arc commented 5 years ago

@592da Unfortunately I made a built-in detection.

Can you try PR #414 and tell me if it solves your issues?

592da commented 5 years ago

@bd-arc tried, dosen't solved the issue...

pitchourou commented 5 years ago

RTL is still ann issue, even with the latest version 3.8.0

592da commented 5 years ago

almost year passed, nothing happened :( many issues in this repo indicating that RTL is broken, and yet this is part of the repo description, which confusing and consumes lots of time for developers struggling with that. please help us get a solution regarding, and rest assured that we really appreciate this amazing lib, and the hard work made to make it work. @bd-arc

414

598

132

bd-arc commented 5 years ago

@592da Unfortunately, the FlatList component has always been (and still is) buggy with RTL layouts (see #11960, #13100, #19150, #21595...). On top of that, our team never actually had the need to handle RTL layouts for any of our apps.

We've implemented this hack to make it work originally, but it's probable that the most recent RN versions broke it.

If anyone wants to jump in and tackle this issue, PR are definitely welcome!

hichemBAALI commented 4 years ago

Try this: this._carousel.snapToItem(I18nManager.isRTL ? this.props.data.length - 1 - index : index); when clicking on carousel item for example.

dohooo commented 3 years ago

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