RTL support

[vahidreza]

Hi Im in the phase of starting to learn react native and also use nativebase as its template. My main question here is the support of RTL layouts for multi culture apps. Does nativeBase support RTL and is there any guide regarding this matter?

[sanketsahu]

We don't have RTL at the moment but that's on our roadmap.

[vahidreza]

Can you give me an approximate date for the feature to be shipped?

On Feb 15, 2017 15:12, "Kumar Sanket (aka Sanket Sahu)" < notifications@github.com> wrote:

We don't have RTL at the moment but that's on our roadmap.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/GeekyAnts/NativeBase/issues/518#issuecomment-279989594, or mute the thread https://github.com/notifications/unsubscribe-auth/ADkHzzJF2ibNV6tSnRmhdUc-ew6MgkrDks5rcuSygaJpZM4MBl0A .

[sanketsahu]

Not any time soon. It will take at least 4 to 6 weeks. We have a lot of things on our list but we are trying our level best to push forward as soon as possible.

[vahidreza]

Tnx kumar for your prompt reply. Actually im intending to learn react native and it takes at least 2 months. Im planning to recode one of my products using react since then. So, I need the RTL feature for at least 3 months from now. I know giving an answer is not easy for this question but i only need a probability. Tnx

On Feb 15, 2017 16:03, "Kumar Sanket (aka Sanket Sahu)" < notifications@github.com> wrote:

Not any time soon. It will take at least 4 to 6 weeks. We have a lot of things on our list but we are trying our level best to push forward as soon as possible.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/GeekyAnts/NativeBase/issues/518#issuecomment-279999258, or mute the thread https://github.com/notifications/unsubscribe-auth/ADkHz5hh1CtjSV-rCP5Xa8dJmGt36FZuks5rcvCpgaJpZM4MBl0A .

[BlackStarGr8]

https://checkout.stripe.com/v3/ZQdHTgQQb08RG01SxL4MA.html?distinct_id=da

[cyclops24]

@sanketsahusoft are you any news about RTL support?

[Aleksandern]

Hello. Any chance about RTL support? Thanks.

[ramyareye]

Any chance to contribute ? Maybe the only way works for now...

[sankhadeeproy007]

Yes, we'll be happy to accept PR's for RTL support.

[MahdiMajidzadeh]

+1

[MohamedHedar]

any updates about the RTL support ?

[eyadfarra]

Any RTL updates ?

[roysG]

any update?

[mimalef70]

+1

[basir]

+1

[yoavprat]

+1

[habibi-dev]

+1

[devaloreLtd]

+1

[eldadcaspi]

+1

[mohammad-goldast]

+1

[mrfarhadir]

+1

[n1arash]

+1

[MoKhajavi75]

+1

[p3ym4n]

+2 😄

[mahshadalishahi]

+1

[habibi-dev]

low priority :|

[sijav]

I'm putting some of the RTL issues with this UI Toolkit, for those who are interested

One of the issues I've been encounter was icons, arrow-back is pointing forward in case of RTL, it can be easily fixed by setting another pack of NBIcons.json with every forward to back and vice versa, every right to left and vice versa, and then in src/icon/index put something like this:

...
import { Platform, I18nManager } from "react-native";
...
import icLTR from "./NBIcons.json";
import icRTL from "./NBIcons-rtl.json";
...
class Icon extends Component {
    ...
    getName() {
        const ic = I18nManager.isRTL ? icRTL : icLTR;
        ...
    }

    getIconName() {
        const ic = I18nManager.isRTL ? icRTL : icLTR;
        ...
    }
    ...
}

and that's it, now in case of rtl all icons will read their true icon names through NBIcons-rtl.json instead of NBIcons.json ... I'll create a PR for it later.

Another issue I've been encountered so far is with tabs, it seems that in normal and advanced tab cases both tab indicator and tab's text active highlight are wrong and instead of showing active for the first tab they're showing the last tab(wrong) ... why? I have no idea yet, in case of Scrollable tabs things are much funnier, the tab indicator is at it's right place and will show the first tab (correct) but the tab highlight is at the last tab (wrong) and the scroll goes to the last tab(wrong)! the buttons are acting exactly vice versa clicking on the last tab will show the first page and clicking on the first tab will show the last page. Tab issue 1 Tab issue 2 Tab issue 3

The other issue is the drawer at first it comes from the left to right but then it correct itself and animate it from right to left, however randomly it might encounter some issue in which the drawer button won't show the drawer ... you can open the drawer by swiping from right to left but it won't close itself when clicking a menu

Another issue which is the most funny of all is segments ... I'm putting some screenshots for you so you can understand it Segment issue 1 Segment issue 2

Another issue is picker, well maybe just a style issue? perhaps? Picker issue

Radio button like the image are always off Radio issue

Deck swiper have issues as well ... if you swipe the first card the third card will suddenly appear for a sec then it will disappear and second card will appear ...

Style issues in List Separator (probably padding or margin) List Separator issue

Style issues in check boxes... CheckBox issue

Everything else seems to work just fine ... Sorry for the long message and my bad English

[hemeda3]

+1

[alihesari]

any update?

[HosseinRashno]

any updates about the RTL support ?

[alihatam]

+1 for RTL support

[mamged]

+1

[MahdiMajidzadeh]

+1

[mohsensaremi]

+1

[ehsanmajd]

+1

[ShonP]

+1

[mamged]

@SupriyaKalghatgi you may need to change the priority now 💯

[AliRadmanesh]

I really need RTL support. please add this feature in the new update.

[dadkhah-dev]

+1

[FadiAboMsalam]

+1

[ramyareye]

As I did in my project I included an rtl file beside my main style, playin with flex easily makes it RTL. I just don't know how to do it the best way and contribute

[Shtibel]

+1

[bepehr]

+1

[mohamedsalehamin]

1+

[suvenduchhatoi]

NativeBase components are supporting RTL feature, although with a few behavioral exceptions like but title & text position issues from the exceptions listed above in components such as Typography(H1,H2,H3),Icon,Text,Label,List, searchBar,Card,Anatomy support RTL when the style prop writingDirection='rtl' is applied...(except Input, FloatingLabel Item & Toast) in ios...

[FadiAboMsalam]

i am still facing the tab issue in RTL any workaround for it ?

[AliRadmanesh]

@FadiAboMsalam As a workaround you can use react-native-tab-view. Aslo it has some issue in reversing swipe, but it works and usable. (better than native base tabs)

[HinnHabib]

+1

[RatebSeirawan]

still no rtl support! I got hit in the face after developing an app when I changed the layout to rtl, thought it was mandatory to be supported in such library

[iraniamir]

waiting for it !