search

nativescript-rtl / ui

Add right-to-left support to the NativeScript framework
MIT License
24 stars 3 forks source link

How to use with NativeScript Angular? #2

Closed theunreal closed 5 years ago

theunreal commented 5 years ago

Do I need to add <Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:rtl="@nativescript-rtl/ui"> in every component in order to have RTL app?

Or I'm missing something?

xlmnxp commented 5 years ago

For Angular 'registerElement` must be used to register each RTL element

example: register elements in app.module.ts

import { registerElement } from "nativescript-angular/element-registry";
registerElement(
  "RGridLayout",
  () => require("@nativescript-rtl/ui").GridLayout
);
registerElement(
  "RWrapLayout",
  () => require("@nativescript-rtl/ui").WrapLayout
);
registerElement(
  "RAbsoluteLayout",
  () => require("@nativescript-rtl/ui").AbsoluteLayout
);
registerElement(
  "RDockLayout",
  () => require("@nativescript-rtl/ui").DockLayout
);
registerElement(
  "RStackLayout",
  () => require("@nativescript-rtl/ui").StackLayout
);

now you can use RGridLayout, RWrapLayout, RAbsoluteLayout, RDockLayout and RStackLayout in your angular project

example:

  <RWrapLayout orientation="horizontal" width="210" height="210" backgroundColor="lightgray">
    <Label text="Label 1" width="70" height="70" backgroundColor="red"></Label>
    <Label text="Label 2" width="70" height="70" backgroundColor="green"></Label>
    <Label text="Label 3" width="70" height="70" backgroundColor="blue"></Label>
    <Label text="Label 4" width="70" height="70" backgroundColor="yellow"></Label>
  </RWrapLayout>
theunreal commented 5 years ago

Thanks, What happens if NativeScript decide to change those widgets (e.g GridLayout)? does it requires changes in this library as well? (the rtl widgets are not synced with the latest version of the official nativescript widgets)

xlmnxp commented 5 years ago

@theunreal this library use the same layout widgets in your NativeScript project ( the project that you install this library in it) if you upgrade tns-core-modules in your project will use it without any change in plugin base code

mohamnag commented 5 years ago

Hi, I tried to register those elements as you mentioned above, but as soon as I include those lines I get following error:

TypeError: Could not load view for: RStackLayout.Error: com.tns.NativeScriptException: Failed to find module: "@nativescript-rtl/ui", relative to: app/tns_modules/
    com.tns.Module.resolvePathHelper(Module.java:146)
    com.tns.Module.resolvePath(Module.java:55)
    com.tns.Runtime.callJSMethodNative(Native Method)
    com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1203)

I have installed the plugin by issuing tns plugin add @nativescript-rtl/ui

any idea what could be the reason?

xlmnxp commented 5 years ago

@mohamnag make sure you was install @nativescript-rtl/ui module in your project 

tns plugin add @nativescript-rtl/ui

then clean your platforms and rebuild

rm -rf platforms
tns build ios/android
mohamnag commented 5 years ago

thanks, I tried that but it didn't fix the problem. Can it be that tns preview does not support this plugin?

xlmnxp commented 5 years ago

tns preview not support many of plugins because it use same directory as modules directory

mohamnag commented 5 years ago

yes you are right, using tns run android I could deploy and run the app successfully. thanks again for answers.