{"id":15018600,"url":"https://github.com/nativescript-rtl/ui","last_synced_at":"2025-10-23T19:31:11.355Z","repository":{"id":33973252,"uuid":"163919851","full_name":"nativescript-rtl/ui","owner":"nativescript-rtl","description":"Add right-to-left support to the NativeScript framework","archived":false,"fork":false,"pushed_at":"2022-04-03T01:29:12.000Z","size":18035,"stargazers_count":23,"open_issues_count":5,"forks_count":3,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-01-30T20:31:20.173Z","etag":null,"topics":["android","angular","core","ios","left-to-right","ltr","nativescript","nativescript-6","nativescript-plugin","right-to-left","rtl","support","vue"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nativescript-rtl.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-01-03T03:42:25.000Z","updated_at":"2024-12-22T17:18:49.000Z","dependencies_parsed_at":"2022-08-07T23:31:07.479Z","dependency_job_id":null,"html_url":"https://github.com/nativescript-rtl/ui","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativescript-rtl%2Fui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativescript-rtl%2Fui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativescript-rtl%2Fui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativescript-rtl%2Fui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nativescript-rtl","download_url":"https://codeload.github.com/nativescript-rtl/ui/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":237877021,"owners_count":19380344,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","angular","core","ios","left-to-right","ltr","nativescript","nativescript-6","nativescript-plugin","right-to-left","rtl","support","vue"],"created_at":"2024-09-24T19:52:10.189Z","updated_at":"2025-10-23T19:31:05.904Z","avatar_url":"https://github.com/nativescript-rtl.png","language":"TypeScript","readme":"# @nativescript-rtl/ui\nAdd right-to-left UI support to NativeScript framework\n\n## Installation\nto install plugin write:\n### NativeScript 7 and higher\n```bash\ntns plugin add @nativescript-rtl/ui\n```\n\n### Support NativeScript older then version 7\n```bash\ntns plugin add @nativescript-rtl/ui@0.1.7\n```\n\n## Preview\n| LTR | Layout | RTL |\n| :---         |     :---:      |          ---: |\n| \u003cimg alt=\"screenshot 1\" src=\"https://raw.githubusercontent.com/nativescript-rtl/ui/master/screenshots/screenshot-ltr-1.png\" width=\"170\"\u003e | `AbsoluteLayout` | \u003cimg alt=\"screenshot 1\" src=\"https://raw.githubusercontent.com/nativescript-rtl/ui/master/screenshots/screenshot-rtl-1.png\" width=\"170\"\u003e |\n| \u003cimg alt=\"screenshot 2\" src=\"https://raw.githubusercontent.com/nativescript-rtl/ui/master/screenshots/screenshot-ltr-2.png\" width=\"170\"\u003e | `DockLayout` | \u003cimg alt=\"screenshot 2\" src=\"https://raw.githubusercontent.com/nativescript-rtl/ui/master/screenshots/screenshot-rtl-2.png\" width=\"170\"\u003e |\n| \u003cimg alt=\"screenshot 3\" src=\"https://raw.githubusercontent.com/nativescript-rtl/ui/master/screenshots/screenshot-ltr-3.png\" width=\"170\"\u003e | `GridLayout` | \u003cimg alt=\"screenshot 3\" src=\"https://raw.githubusercontent.com/nativescript-rtl/ui/master/screenshots/screenshot-rtl-3.png\" width=\"170\"\u003e |\n| \u003cimg alt=\"screenshot 4\" src=\"https://raw.githubusercontent.com/nativescript-rtl/ui/master/screenshots/screenshot-ltr-4.png\" width=\"170\"\u003e | `StackLayout` | \u003cimg alt=\"screenshot 4\" src=\"https://raw.githubusercontent.com/nativescript-rtl/ui/master/screenshots/screenshot-rtl-4.png\" width=\"170\"\u003e |\n| \u003cimg alt=\"screenshot 5\" src=\"https://raw.githubusercontent.com/nativescript-rtl/ui/master/screenshots/screenshot-ltr-5.png\" width=\"170\"\u003e | `WrapLayout` | \u003cimg alt=\"screenshot 5\" src=\"https://raw.githubusercontent.com/nativescript-rtl/ui/master/screenshots/screenshot-rtl-5.png\" width=\"170\"\u003e |\n\n## Properties\n| Name | Default | Description |\n| :-- | :----- | :--------- |\n| isRtl | `true` | `isRtl` use to change layout direction by default is `true` that mean layout from right to left but you can change it to `false` that change layout direction from left to right |\n\n## CSS Properties\n| Name | Default | Description |\n| :-- | :----- | :--------- |\n| direction | `rtl` | use to change layout direction by default is `rtl` that mean layout from right to left but you can change it to `ltr` that change layout to direction from left to right |\n\n## How to use\ndeclare plugin in XML then use it.\n```xml\n\u003cPage xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:rtl=\"@nativescript-rtl/ui\"\u003e\n  \u003crtl:WrapLayout orientation=\"horizontal\" width=\"210\" height=\"210\" backgroundColor=\"lightgray\"\u003e\n    \u003cLabel text=\"Label 1\" width=\"70\" height=\"70\" backgroundColor=\"red\"/\u003e\n    \u003cLabel text=\"Label 2\" width=\"70\" height=\"70\" backgroundColor=\"green\"/\u003e\n    \u003cLabel text=\"Label 3\" width=\"70\" height=\"70\" backgroundColor=\"blue\"/\u003e\n    \u003cLabel text=\"Label 4\" width=\"70\" height=\"70\" backgroundColor=\"yellow\"/\u003e\n  \u003c/rtl:WrapLayout\u003e\n\u003c/Page\u003e\n```\n\nFor Angular/Vue 'registerElement` must be used to register each RTL element\n\nexample:\nregister elements in `app.module.ts`\n```ts\nimport { registerElement } from \"nativescript-angular/element-registry\";\nregisterElement(\n  \"RGridLayout\",\n  () =\u003e require(\"@nativescript-rtl/ui\").GridLayout\n);\nregisterElement(\n  \"RWrapLayout\",\n  () =\u003e require(\"@nativescript-rtl/ui\").WrapLayout\n);\nregisterElement(\n  \"RAbsoluteLayout\",\n  () =\u003e require(\"@nativescript-rtl/ui\").AbsoluteLayout\n);\nregisterElement(\n  \"RDockLayout\",\n  () =\u003e require(\"@nativescript-rtl/ui\").DockLayout\n);\nregisterElement(\n  \"RStackLayout\",\n  () =\u003e require(\"@nativescript-rtl/ui\").StackLayout\n);\n```\nnow you can use `RGridLayout`, `RWrapLayout`, `RAbsoluteLayout`, `RDockLayout` and `RStackLayout` in your angular project\n\nexample:\n```xml\n  \u003cRWrapLayout orientation=\"horizontal\" width=\"210\" height=\"210\" backgroundColor=\"lightgray\"\u003e\n    \u003cLabel text=\"Label 1\" width=\"70\" height=\"70\" backgroundColor=\"red\"\u003e\u003c/Label\u003e\n    \u003cLabel text=\"Label 2\" width=\"70\" height=\"70\" backgroundColor=\"green\"\u003e\u003c/Label\u003e\n    \u003cLabel text=\"Label 3\" width=\"70\" height=\"70\" backgroundColor=\"blue\"\u003e\u003c/Label\u003e\n    \u003cLabel text=\"Label 4\" width=\"70\" height=\"70\" backgroundColor=\"yellow\"\u003e\u003c/Label\u003e\n  \u003c/RWrapLayout\u003e\n```","funding_links":[],"categories":["Plugins"],"sub_categories":["UI Plugins"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnativescript-rtl%2Fui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnativescript-rtl%2Fui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnativescript-rtl%2Fui/lists"}