Nativescript support for RTL / LTR layouts?


#1

I’m using Nativescript ( Angular) 3.4.1
My app suppose to support 2 languages where one is LTR and the other is RTL.

With HTML I could do direction:rtl and that would flip the markup. But after playing with playground , with both textAlignment and other properties , I didn’t mang to do that.

Here is a simple markup :

<GridLayout rows="*" columns="*,*,*"  textAlignment="left" >
 <Label   text="sd"   row="0" col="0" backgroundColor="red"></Label>
</GridLayout>
</Page>

Currently it is displayed as the left side image here :

enter image description here

Question:

But how can I mirror the layouts so that it will look as the right side image ?


#2

Google gave me this, does that help? https://www.nativescript.org/faq#does-nativescript-support-right-to-left-(rtl)-scripts-like-hebrew,-arabic-or-urdu?

Also, this issue: https://github.com/rkhayyat/SyrianForumFrance/issues/1


#3

@Eddy I saw this demo code ( couldn’t get it to work on device nor emulator)

But that’s not important. Ive walked throught every file and couldnt find where does the view get flipped.

or which code make it flipped.

also didnt find i18n refernces nor direction attribute.

Can you please enlighten me by showing me what am i missing? becuase I didnt find the source of layout flip.


#4

@Eddy After finally managed to run this code , there is no “switch language” feature in the app.

this is his app and I edited the image of how it should be,.

this is a NOT a multi lang app , and it doesn’t do that.


#5

What happens if you change the language setting of the phone from the Android settings?

Does the layout change at all if you switch from say English to Arabic?

In my application that needed to support both language formats, I had to build entirely separates views which mirrored the original UI for pages that were more than just forms. I started building the app beofre Flexbox was available in NS, which it is now and could help with this. The main issue is that NS doesn’t support the “start” and “end” view element params. So things like margin and padding are defined by left and right (rather than start and end) which causes problems when needing to support RTL.


#6

@sstratis

That’s what i’m saying. The app provided by NS docs is NOT(1) RTL LTR app.
BTW how flex would help you here ? say you have a grid view and you place some stuff , how would it be mirrored ?


#7

@Royi_Namir

In that case I agree with you, that shouldn’t be providing that as an example since it’s not “really” RTL support.

Flex may help since it has a reverse feature, but I have never personally used it myself. Like I said I supported both RTL and LTR by capturing the device language and presenting a separate mirrored view that I had to build out myself. The OS only flips the header bar for you automatically. This was quite a bit of work since I needed to rebuild views and copy/paste code behind files.

For views that were primarily forms certain text inputs would also automatically change to RTL based on the OS language setting.


#8

Thanks for response.

But I’m not talking about input fields which I believe would flip. but what about layouts in general. (mirror analogy. nothing more nothing less).


#9

Yeah for layouts, like GridLayout I needed to build a new xml page entirely. Example,

LTR View (measurements.xml)

RTL View (rtl-measurements.xml)

As you can see I still don’t have them perfectly mirrored. I just load the rtl version of the view xml depending on the phone language setting. It was not fun rebuilding the rtl views…


#10

I wonder how flex would’ve help here


#11

@Royi_Namir If you want to flip (re-arrange) items in GridLayout you may refer here.

It may be quite work for RTL using this. May be you can build a custom layout extends from GridLayout.


#12

Today I tried Arabic in one of my apps that runs with {N} 3.4.x. Both iOS (11.x) and Android (8.x) do flip things right to left automatically, I think especially GridLayout columns were flipped by default and text alignment become right too.