How to make it work for RTL?

[mehulgecg]

Really very good component, I've used this component in one of my apps but don't know how to make it work for RTL? any reference and help would be highly appreciated. Thank you so much.

[tsdmrfth]

Hi. I'll have a look for what we can do to add rtl support

[mehulgecg]

@tsdmrfth thanks for your consideration.

[tsdmrfth]

Fixed in https://github.com/tsdmrfth/react-native-steve/pull/14

[tsdmrfth]

@mehulgecg New version released now. Let me know if that works now

[tsdmrfth]

This feature available now

[rajc-hkis]

@tsdmrfth Great work with RTL but unfortunately it doesn't work as expected.

1. In RTL, all things should be reversed and starting from right side. In your component list starts from left side even when I set isRTL to true.
2. When we swipe from left to right, whole list goes out of screen.
3. In RTL mode, list item is showed in new line if there is not enough space available in the screen, which is not what this component is made for right? It should show horizontal scrolling.

[tsdmrfth]

Hi @rajc-hkis. Which version of react-native-steve component are you using?

[rajc-hkis]

@tsdmrfth I am on latest 0.4.1

[tsdmrfth]

This is from current version. Seems work correctly. What is the wrong about that?

https://user-images.githubusercontent.com/27639087/114720022-51c0f500-9d40-11eb-962c-e7f45a57a947.mov

[rajc-hkis]

@tsdmrfth Looks like it works for you which is good sign.

I use forceRTL(true) in my app, you think that can cause issue? Since you use row-reverse when isRTL is set to true, I think that could be it. I attached video, so you can have better idea of the issue I am facing. :)

https://user-images.githubusercontent.com/75483781/114976388-84373300-9ea3-11eb-858c-b0c8d0e8af9e.mov

[tsdmrfth]

Hi @rajc-hkis can you also provide some code about you issue?

[rajc-hkis]

@tsdmrfth Code is same as provided in README file of this repo. There is only one difference and that is I use I18nManager.forceRTL(true); to make my whole app in RTL layout.

[tsdmrfth]

I think that is the reason for the issue. forceRTL function call makes row reversed twice. RTL layout check should be done in component instead of expecting prop.

[rajc-hkis]

@tsdmrfth Yes, agreed.

You can check whether app is RTL or not by I18nManager.isRTL property. Plus, I think you should keep the prop there in case someone wants to have RTL layout without forceRTL. What do you think? ;)

[tsdmrfth]

@rajc-hkis That makes sense 👊🏿