React-native-snap-carousel: Layout is messed up with RTL devices

[dyaacov]

The example from google play doesn't work on LG G2

[bd-arc]

@dyaacov Hi! Thank you for letting us now. Could you be a bit more specific? Is the app crashing at startup? Are some parts of the app unavailable? Is it another kind of issue?

[dyaacov]

Hi,
Sorry for the late response.
The app doesn't crash, the carousel doesn't work nor doesn't look good.
See attached screenshots (this is from your demo app in Google Play
archriss)

carousel_1.png: this is how it looks when you open the app
carousel_2. png: when you click next/previous, all the images disappear

On Tue, Feb 21, 2017 at 11:01 AM, Benoît Delmaire [e-mail]
wrote:

@dyaacov https://github.com/dyaacov Hi! Thank you for letting us now.
Could you be a bit more specific? Is the app crashing at startup? Are some
parts of the app unavailable? Is it another kind of issue?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/archriss/react-native-snap-carousel/issues/38#issuecomment-281283691,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ADO2tAbb4dM-B_2orxL10WGvpTTTWGqVks5reqf9gaJpZM4MEFBS
.

[bd-arc]

@dyaacov Thank you for getting back to me!
It seems your screenshots didn't make it to GitHub ;) Would you mind hosting them online (on imgur for example)?

[dyaacov]

http://i.imgur.com/LPJaUbo.png

http://i.imgur.com/aGhzfAS.png

On Fri, Mar 10, 2017 at 4:30 PM, Benoît Delmaire [e-mail]
wrote:

@dyaacov https://github.com/dyaacov Thank you for getting back to me!
It seems your screenshots didn't make it to GitHub ;) Would you mind
hosting them online (on imgur http://imgur.com/ for example)?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/archriss/react-native-snap-carousel/issues/38#issuecomment-285682752,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ADO2tHjEHyRg7QsFka-6TG949Lmt3ufPks5rkV6ZgaJpZM4MEFBS
.

[bd-arc]

@dyaacov Thank you for taking the time to upload these screenshots. Now begins the painful journey of trying to reproduce the bug on our devices ;)

[dyaacov]

Thank you.
I tested LG g2 and g3, same results.
On Nexus 5x it works fine.
I hope you can provide a fix soon cause I really want to use this feature
in my new app.
Maybe a wrong calculation of sizes due to different resolutions. Let me
know if you need my assistance. I can test on several different devices.

May the force be with you!
Dekel

On Mar 13, 2017 10:53, "Benoît Delmaire" [e-mail] wrote:

@dyaacov https://github.com/dyaacov Thank you for taking the time to
upload these screenshots. Now begins the painful journey of trying to
reproduce the bug on our devices ;)

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/archriss/react-native-snap-carousel/issues/38#issuecomment-286047523,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ADO2tCODG5pNXa2sK4b4yq8t9GNQZUixks5rlQP6gaJpZM4MEFBS
.

[bd-arc]

@dyaacov We've tried the app on a LG G3 and weren't able to reproduce the issue. I fear a buggy React Native's ScrollView implementation on some Android versions :-( That's why we're currently considering implementing our own PanResponder (see #40), but this requires major developments.

Can you share the Android versions on which you've tried the app, and specify the ones that were buggy?

[dyaacov]

Android 5.0, core 3.4.0, software v20n-456-01
Android 4.4.2, core 3.4.0, software d80220a-isr-xx

On Mar 13, 2017 11:28, "Benoît Delmaire" [e-mail] wrote:

@dyaacov https://github.com/dyaacov We've tried the app on a LG G3 and
weren't able to reproduce the issue. I fear a buggy React Native's
ScrollView implementation on some Android versions :-( That's why we're
currently considering implementing our own PanResponder (see #40
https://github.com/archriss/react-native-snap-carousel/issues/40), but
this requires major developments.

Can you share the Android versions on which you've tried the app, and
specify the ones that were buggy?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/archriss/react-native-snap-carousel/issues/38#issuecomment-286055313,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ADO2tO8j9KMLD7Tktei9poxnqaszCF3zks5rlQxMgaJpZM4MEFBS
.

[bd-arc]

@dyaacov Just a quick update: I wasn't able to reproduce the issue, either on a simulator or a real device. Still investigating though ;)

[dyaacov]

Have you tried on LG devices?
It doesn't work on 3 different LG devices.

On Mar 16, 2017 12:53, "Benoît Delmaire" [e-mail] wrote:

@dyaacov https://github.com/dyaacov Just a quick update: I wasn't able
to reproduce the issue, either on a simulator or a real device. Still
investigating though ;)

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/archriss/react-native-snap-carousel/issues/38#issuecomment-287022497,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ADO2tG2q9JoVNsWDgRPvbB4aqwkCTtxJks5rmRS5gaJpZM4MEFBS
.

[bd-arc]

@dyaacov I've tried on the only one that was around, a LG G3, without seeing any issue. My guess is that there is something wrong with ScrollView implementation on some specific Android devices, but I need to be able to reproduce the bug to investigate further.

I'll look around for other LG devices.

[dyaacov]

You can send me apk with a lot of debug logs and I will reproduce and send
you the logs

On Mar 16, 2017 16:16, "Benoît Delmaire" [e-mail] wrote:

@dyaacov https://github.com/dyaacov I've tried on the only one that was
around, a LG G3, without seeing any issue. My guess is that there is
something wrong with ScrollView implementation on some specific Android
devices, but I need to be able to reproduce the bug to investigate further.

I'll look around for other LG devices.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/archriss/react-native-snap-carousel/issues/38#issuecomment-287070435,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ADO2tC1HgZvzFLySEtze7C6EhvRNSZfjks5rmUQfgaJpZM4MEFBS
.

[bd-arc]

@dyaacov That's an idea, thanks! I'll prepare a debug apk as soon as I can (not before a few days I'm afraid).

In the meantime, and if this is not too much trouble, a short video of the issue might help figuring out what's happening.

[bd-arc]

@dyaacov Would you mind building the latest version of the example and tell me if you can still reproduce the issue on your devices?

I've made a few bug fixes in the latest release and also bumped the RN version of the example to the latest stable one; that might have helped ;)

[dyaacov]

Sorry, same issues. when you first open it, the first slide is adjusted to left and when you try to swipe everything disappears.

See video:
https://drive.google.com/open?id=0B0KCjjvaqpcsaDlXSXF0Zm04Rm8

[bd-arc]

@dyaacov Thank you very much for the video! Thanks to it, I've finally understood the root of the issue. This has to do with right-to-left UI. If you change your settings to left-to-right, you'll see the issue vanish.

You can see that items are rendered left-to-right (that's the default behavior of RN's ScrollView with RTL languages) but that our snap calculations are applied right-to-left. I'll look into a fix as soon as possible.

[yaronlevi]

It is a known issue. ScrollView + RTL = bug.
https://github.com/facebook/react-native/issues/10852

[bd-arc]

@dyaacov @yaronlevi Good news! I've just published a new version of the plugin that adds RTL support and should resolve your issue.

As @yaronlevi stated, the issue had to do with React Native's RTL handling. I had to tweak a few things, so make sure to read the notes about this feature.

Can you both confirm that this solves the issue for you?

[dyaacov]

Hi,
I still see the same issue as in my previous video.
I verified I got the latest Git changes.

:(

[bd-arc]

@dyaacov This is strange...

Two days ago, I was finally able to reproduce the issue with I18nManager.forceRTL(true), and I've worked around it thanks to some heavy head-scratching.

I'm positive that this works since I've tested the fix on iOS and Android, on both emulators and real devices. Anyway, I'll triple-check tomorrow.

In the meantime, can you locally change this line to "react-native-snap-carousel": "2.1.0", run npm install in the /example folder and rebuild the example app? I myself had issues with npm's cache earlier and this helped.

[dyaacov]

YES!!!

1. I changed to "react-native-snap-carousel": "2.1.0"
2. removed node_modules and ran npm install again

Well done!
I'll do more testing in the next 2 days.

[bd-arc]

@dyaacov Good to hear! I'm closing the issue, but do not hesitate to keep me posted with the results of your tests ;)

[dyaacov]

Found another bug in RTL only.
First time you load the carousel, the first image is not in focus (gray color and same size as the other images)

[bd-arc]

@dyaacov I have faced this issue while implementing RTL support, but I got rid of it and haven't been able to reproduce it since then.

Are you talking about the first slide to the left or to the right?

[dyaacov]

The first active slide, I don't now what you mean by the first to the right
or to the left.
Another small bug, the slides are reversed order in RTL, I fixed locally it
by calling this.state.items.reverese if I'm in RTL

On Mon, Apr 3, 2017 at 10:43 AM, Benoît Delmaire [e-mail]
wrote:

Reopened #38
https://github.com/archriss/react-native-snap-carousel/issues/38.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/archriss/react-native-snap-carousel/issues/38#event-1025982256,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ADO2tHfOn8-M1M3Ka-TcHdUWtqZlb2N_ks5rsKMKgaJpZM4MEFBS
.

[bd-arc]

@dyaacov The reversed order is by design. I was assuming that, if you have an array of [1, 2, 3], you would expect slides to be rendered [3, 2, 1] so that they can be read from right to left in the same order as they would in a LTR layout. Was that a mistake?

[dyaacov]

In my design, the slides have timestamp so I want to present them order by
creation date, regardless RTL

On Mon, Apr 3, 2017 at 12:47 PM, Benoît Delmaire [e-mail]
wrote:

@dyaacov https://github.com/dyaacov The reversed order is by design. I
was assuming that, if you have an array of [1, 2, 3], you would expect
slides to be rendered [3, 2, 1] so that they can be read from right to left
in the same order as they would in a LTR layout. Was that a mistake?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/archriss/react-native-snap-carousel/issues/38#issuecomment-291096911,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ADO2tLn9ntYltcHI6tiFfA2Vs7LAtGeWks5rsMAegaJpZM4MEFBS
.

[dyaacov]

I think you should not interfere in the slides order, each implementer
should order it according to his logic.

On Mon, Apr 3, 2017 at 12:50 PM, dekel yaacov [e-mail]
wrote:

In my design, the slides have timestamp so I want to present them order by
creation date, regardless RTL

On Mon, Apr 3, 2017 at 12:47 PM, Benoît Delmaire <[email protected]

wrote:

@dyaacov https://github.com/dyaacov The reversed order is by design. I
was assuming that, if you have an array of [1, 2, 3], you would expect
slides to be rendered [3, 2, 1] so that they can be read from right to left
in the same order as they would in a LTR layout. Was that a mistake?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/archriss/react-native-snap-carousel/issues/38#issuecomment-291096911,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ADO2tLn9ntYltcHI6tiFfA2Vs7LAtGeWks5rsMAegaJpZM4MEFBS
.

[bd-arc]

@dyaacov Well, I'm not used to RTL interfaces but I'm trying to foresee what would seem more "natural" to every user of this plugin. My understanding was that everything was reversed between LTR and RTL layouts.

You mentioned slides with timestamp. In a LTR layout, I would render the following ('X' marks the first active slide):

[1st of March] [1st of April] [1st of May]

Shouldn't it be the following with a RTL layout?

[1st of May] [1st of April] [1st of March]

[bd-arc]

Closing as no further feedback was provided.
Feel free to continue discussion if needed.

[malashkevich]

Hi @bd-arc
Big thanks for this lib man!
I want to reopen this one. I have the same issue as described on video above.
The bug appears only for android.
Seems like it's related to https://github.com/facebook/react-native/issues/11960
I was able to 'fix' it by adding following contentContainerCustomStyle to carousel:

 Platform.OS === 'android' ? {flexDirection: I18nManager.isRTL ? 'row-reverse' : 'row'} : {};

Probably you can take a look on this?

lib version: 3.2.3
rn: 0.47

[bd-arc]

Hi @malashkevich,

I'm quite surprised because if you take a look at line 765 of the source code, you'll see that I'm already using such a fix (along with a few others that you can find in this commit)...

Would you mind testing with RN 0.48 and letting me know the outcome?

[bd-arc]

@malashkevich Also, can you try the provided example and let me know if everything is properly displayed for you?

It was working properly on the miscellaneous RTL devices I've tested it on, but I might have overlooked something...

[amitassaraf]

I am just going to add the it took me a while to figure out this is related to RTL. So for SEO reasons Im gonna add that if you encounter flickering or snap flickering in the carousel then it is related to this issue. The solution by @malashkevich works.

[ducpt2]

i using "react-native-snap-carousel": "3.8.0" and the issue still appear, i am using @malashkevich solution to fix it. Maybe i miss something? Any help?