Add RTL support to NativeScript VUE

Question

I tried to add RTL support to NativeScript-Vue js using the official plugin and other methods like this but still no luck due to poor documentation.
I fount a snippet that force the app to RTL in runtime but it seems just working on Andriod devices:

app.android.addEventListener(app.AndroidApplication.activityCreatedEvent, (event: app.AndroidActivityEventData) => {
event.activity.getWindow().getDecorView().setLayoutDirection(android.view.View.LAYOUT_DIRECTION_RTL);
});

How can we add this plugin to NativeScript-Vue for IOS and Android the easy way?

Mohammad Ghonchesefidi Mohammad Ghonchesefidi · Accepted Answer · 2020-07-05T08:38:36

After searching a little I achieved a solution:
To add RTL support for Vue package you need to import and register each layout in your main.app or main.ts file like so:

  Vue.registerElement('RGridLayout', () => require('@nativescript-rtl/ui').GridLayout);
  Vue.registerElement('RWrapLayout', () => require('@nativescript-rtl/ui').WrapLayout);
  Vue.registerElement('RAbsoluteLayout', () => require('@nativescript-rtl/ui').AbsoluteLayout);
  Vue.registerElement('RDockLayout', () => require('@nativescript-rtl/ui').DockLayout);
  Vue.registerElement('RStackLayout', () => require('@nativescript-rtl/ui').StackLayout);

Then for RTL layout, you need to add isRtl="true" to your element:

<Page>
  <RWrapLayout>
    <Label isRtl="true" text="Label 4" width="70" height="70" backgroundColor="yellow"/>
  </RWrapLayout>
</Page>

And consider that this plugin is not working in TNS preview mode and you need to add emulator and build your app because this plugin adds RTL layout on IOS and Android initial life cycle.

Add RTL support to NativeScript VUE

1 Answers