RTL And LTR Support

It is possible to support LTR and RTL for apps of all languages. Views are created LTR those written from left to right (like English and most other languages) by default. Some languages of the world (Arabic, Hebrew etc.) are RTL, meaning they are read right-to-left, instead of left-to-right.

To support multiple language two different themes will be needed, one for LTR one for RTL.

LTR To RTL

To support RTL most of view's direction must be placed reverse horizontally(leaned right) when created. Some of views can be reverted RTL programmatically.

JavaScript
JavaScript
if(System.os == "Android"){
Application.android.locale = "ar"; //language code
}

ImageView ImageView can be symmetrical with autoMirrored property. [flipHorizontally] method can be used to flip right arrow to left arrow.

Slider Drawer Slider Drawer's pages must be added total opposite(start adding last one).

There is no need extra process to change BottomTabbar & Navbar.

RTL Searchview

Searchview CancelButton's direction can't be set RTL unless created custom.

Tips & Tricks

  • Icons that are symmetrical and that don’t point in a particular direction should not be flipped.

  • Icons that have characters or words from non-RTL languages don’t need to be mirrored. You should, however, localize them if necessary.

Using RTL With StackRouter On iOS.

To set direction correctly below code must be in onLoad function of first childController of StackRouter.

JavaScript
JavaScript
if (System.OS == "iOS") {
if (page.parentController && page.parentController.childControllers[0] == this){
var view = page.parentController.nativeObject.valueForKey("view");
view &&
view.setValueForKey(View.ios.viewAppearanceSemanticContentAttribute,"semanticContentAttribute");
}
}

Changing Theme In Runtime

To apply a new theme in runtime Application.restart must be triggered.

Forcing App To Specific Direction

When device language and app language is different from each other if app's direction is clear under any circumstances it is possible to set only one direction(RTL or LTR). This must be generated in app.js file which process out of the starting gate. Thus when view's are not created yet, directions of views can be set without restarting app.