react-native-video-controls icon indicating copy to clipboard operation
react-native-video-controls copied to clipboard

allow to disable RTL behaivour

Open YogiHa opened this issue 3 years ago • 8 comments

currently, there is no good support for RTL cases.

Mostly, there's no need to change the way of displaying the bars or the way seek behavior will affect video volume or position' due to the fact that rtl users used to look on video's as ltr users.

currently, I added manulay:

const position = evt.nativeEvent[I18nManager.isRTL ? 'pageX' : 'locationX']

for a quick fix (and not perfect) of pan behavior,

and

 flexDirection: I18nManager.isRTL ? 'row-reverse' : 'row',

for keep normal shape of bars

Blocking specific view from being rtl seems as a bigger issue with RN https://stackoverflow.com/questions/58144342/react-native-is-there-a-way-disable-rtl-in-a-specific-view-or-maintain-the-same

YogiHa avatar Apr 17 '21 08:04 YogiHa

Hi @YogiHa I replied to the StackOverflow question you linked. Below is a probable solution

Import like so: import { I18nManager } from 'react-native';

To force RTL use: I18nManager.forceRTL(true); and use textAlign : "right" for RTL OR textAlign : "left" for LTR on your textInput.

In case you don't want RTL then use: I18nManager.allowRTL(false);

Here is the RN Official Blog Link where you will get detailed use cases.

subhayughosh avatar Apr 17 '21 13:04 subhayughosh

@subhayughosh I spoke on cases which the whole app is indeed RTL, so the solution of

I18nManager.allowRTL(false)

Less relevant

YogiHa avatar Apr 17 '21 13:04 YogiHa

@YogiHa Yes agree. The GH issue you raise is relevant and the hack you have is a good workaround.

I was answering the SO question which was more about text and not about graphs.

subhayughosh avatar Apr 17 '21 14:04 subhayughosh

Hello @YogiHa I have same issue here. My whole app is RTL so the video player controls are reversed. Could you please provide more info about how you fixed this issue? How should I create position variable and where to set it?

Also I set flexDirection: row but the pan behavior didn't fixed.

theMasix avatar Apr 21 '21 08:04 theMasix

Hey @theMasix,

I will try to create PR later with the option to pass the prop disallowRTL, in case it will accepted...

YogiHa avatar Apr 21 '21 09:04 YogiHa

@YogiHa Thanks for your future PR. But I have to fix this issue now, I would be happy if you can tell me about the quick fix before the PR

theMasix avatar Apr 21 '21 09:04 theMasix

my app use I18nManager.forceRTL(true);

@YogiHa i am waiting for your PR did

ferasabufares avatar Jun 23 '21 13:06 ferasabufares

@ferasabufares totally forgot about it,

here is the PR - https://github.com/itsnubix/react-native-video-controls/pull/222

YogiHa avatar Jun 24 '21 05:06 YogiHa