RTL Support

[davidgarsan]

Provide support for CSS direction since currently is only working for LTR direction.

[bvaughn]

What have you tried?

For example, lists already support RTL via the style param:
https://codesandbox.io/s/52pqpq57wn

Grids are trickier, but if your cell renderer takes into account that columns are reverse ordered, you can kind of accomplish an RTL layout using transform: rotateY: https://codesandbox.io/s/ql1jqxm3m6

I'm not an expert. Maybe these solutions aren't adequate, in which case– more than a single sentence description on what you've tried and what's not supported full would be appreciated.

I'm going to close this issue for now under the assumption that it's supported via the means I mentioned above but I'm happy to reopen it if you provide some more info! 😄

[davidgarsan]

I'm working in a carousel case, which involves a List component with horizontal direction.
As you can see, in that scenario, the component is broken in two ways:

1. The initial render shows the list item in a LTR layout.
2. When attempting to scroll, the items disappear, apparently the container is rendered RTL while the items are positioned as it was LTR (left positioning instead of right).

https://codesandbox.io/s/rj0y67qlvq

[bvaughn]

https://codesandbox.io/s/lpy128v1yq

[davidgarsan]

Thanks @bvaughn!
That's an interesting trick I can stick with by now.
However, being honest, I don't think we can state that RTL is really supported, albeit the work done here is awesome.
In this case the swipe gesture is inverted which is a bit odd.
Also, the Grid scenario is a bit more tricky.
So, while I use this now I'll try a different approach in my own fork.
I don't think is a big deal after reviewing the parts I need to change.
I'll back!

[bvaughn]

In this case the swipe gesture is inverted which is a bit odd.

Isn't it supposed to be?

Also, the Grid scenario is a bit more tricky.

But still doable, without much code. I'm not sure I see the problem persay?

[NiiMER]

As a RTL guy came from middle east, i suppose any library should have a way to handle RTL you know generally speaking all of the Libraries should have this ability to flag LTR/RTL and for the trick above maybe it'll work but IMO all the libraries should consider the RTL layout, for me i prefer to apply the above PR on such a good library like this, for me as a developer i don't like to fork the libraries in my repos, i would like to use it from the source, in order to update it in sync with the source, again the above trick is a hack, but the changes in the PR above is the ideal solution, thanks for understanding.

[davidgarsan]

In this case the swipe gesture is inverted which is a bit odd.

Isn't it supposed to be?

Well, call me crazy, but IMO the point is to change the direction, not the physics.

[bvaughn]

Well, call me crazy, but IMO the point is to change the direction, not the physics.

@davidgarsan My question was sincere. I don't think sarcasm is necessary.

Can you point me at some reference RLT grids examples? I have not been able to find any from my own searches, so I don't know how scrolling/swiping is supposed to be behave.

I did try asking on TWitter for people with RTL expertise to look at the Code Sandboxes I created and let me know if anything looked wrong about them. Although I didn't get much feedback, The feedback I got was that they looked right.

I am not opposed to adding proper RTL support to this library. I just don't feel confident that I understand how the components should behave. And while I appreciate the PR that was opened– it's incomplete. (It only updates lists, not grids, and it does not include any test or documentation changes.)

[bvaughn]

Based on this (maybe stupid?) test sandbox, I think you're right that the swipe in my previous example was wrong:
https://qzqylo21zq.codesandbox.io/

[davidgarsan]

Well, call me crazy, but IMO the point is to change the direction, not the physics.

@davidgarsan My question was sincere. I don't think sarcasm is necessary.

@bvaughn I guess got lost in translation, I was simply surprised, since I work in an arabic oriented product, and for me was obvious.
But in the end I prefer take this not too serious. 😄
The main think is that you've done a great job here that we all really appreciate and I just want it to keep the high standards while being open to other cultural approaches.
And apparently that's happening, thanks!

Can you point me at some reference RLT grids examples? I have not been able to find any from my own searches, so I don't know how scrolling/swiping is supposed to be behave.

Also, I missed the WIP tag in my previous PR, you're right.
I was intended firstly to create this carousel so I just focused in List with a proper RTL support as noted in the PR title, but of course this should be done sound in the whole components as a general feature.

[bvaughn]

Thanks for the kind words. I hope to land the larger RTL PR soon. I appreciate your help verifying the expected behavior.