RTL And LTR Support

Smartface has an external tool to automatize RTL generation process for you. Check it out on NPM:

https://www.npmjs.com/package/@smartface/generate-rtl-theme

RTL Supported SwipeView & Tabbar Controller. Checkout the NPM package @smartface/rtl.

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. For automatic generations, refer to the NPM package specified above.

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.

• On iOS with viewAppearanceSemanticContentAttribute property changes the direction of unreachable views like HeaderBar, BottomBar, Material Textbox, Searchview, SwipeView etc.
• On Android locale changes layout direction.

JavaScript

if (System.OS === System.OSType.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 NativeStackRouter On iOS

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

JavaScript

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

Forcing App To Use a 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.