top-bar-nav support RTL direction

[RanyHajYahia]

Hi,
I would like to thank you for this navigator, it's very useful and I am currently using it in my project.
I am opening this ticket since I have a translated application to RTL direction languages (Arabic / Hebrew) and the navigator is not supporting this direction.
It will be very helpful if "isRTL" boolean indicator will be added to this component in the next release.

• Attaching example for illustration:
  IssueScreenRecording.zip
• More information about force RTL direction can be found here:
  https://reactnative.dev/blog/2016/08/19/right-to-left-support-for-react-native-apps
• Please contact me if any information (or testing assistance) is needed.

Thanks

[mileung]

I don't have the time to update this package. Open to PRs though!. Although couldn't you solve your problem with the initialIndex prop?

[RanyHajYahia]

InitialIndex should be always 0, in RTL languages 0 start from the right and better not to do manipulations like initiating index from the last or reverse arrays. (because swiping left and right for changing tabs also should be opposite)
Please advise where I can report about the case if there is any support for this package.

[mileung]

You or someone else can make a PR for this feature and I'll probably approve and publish it in a new version.

[vaporwavie]

@RanyHajYahia if you only need to enable rtl within the HOC (top-bar-nav, that is), I think you can make it work by creating a prop like isRTL and thus applying the necessary styles. I can give you some insights if you want to!

[RanyHajYahia]

@vaporwavie anything can help before I start trying myself. especially how to increase index on swiping right (unlike English that swiping left).
Thanks

[vaporwavie]

@RanyHajYahia I suppose you don't necessarily need to increase the index? I was imagining a CSS approach. You shouldn't have to literally update an index position just to make RTL-ready.