{"id":19220085,"url":"https://github.com/nativescript-community/l","last_synced_at":"2025-07-16T19:34:01.390Z","repository":{"id":56009279,"uuid":"241360823","full_name":"nativescript-community/l","owner":"nativescript-community","description":"Internationalization plugin for NativeScript using native capabilities of each platform","archived":false,"fork":false,"pushed_at":"2024-06-24T09:42:59.000Z","size":3372,"stargazers_count":4,"open_issues_count":5,"forks_count":2,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-05-13T01:11:24.789Z","etag":null,"topics":[],"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-community.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-02-18T12:55:09.000Z","updated_at":"2024-06-24T09:43:03.000Z","dependencies_parsed_at":"2024-02-27T21:30:29.197Z","dependency_job_id":"8b5cbbba-1ccf-42ae-8c87-fcec0f85c687","html_url":"https://github.com/nativescript-community/l","commit_stats":null,"previous_names":[],"tags_count":77,"template":false,"template_full_name":null,"purl":"pkg:github/nativescript-community/l","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativescript-community%2Fl","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativescript-community%2Fl/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativescript-community%2Fl/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativescript-community%2Fl/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nativescript-community","download_url":"https://codeload.github.com/nativescript-community/l/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativescript-community%2Fl/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265534740,"owners_count":23783881,"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":[],"created_at":"2024-11-09T14:33:55.254Z","updated_at":"2025-07-16T19:34:01.376Z","avatar_url":"https://github.com/nativescript-community.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @nativescript-community/l\n[![npm](https://img.shields.io/npm/v/@nativescript-community/l.svg)](https://www.npmjs.com/package/@nativescript-community/l)\n[![npm](https://img.shields.io/npm/dm/@nativescript-community/l.svg)](https://www.npmjs.com/package/@nativescript-community/l)\n\nThis is a plugin for NativeScript that implements internationalization (i18n) using the native capabilities\nof each platform. It is a direct fork of [nativescript-localize](https://github.com/EddyVerbruggen/nativescript-localize).\n\n## Differences\nThis plugin was created to have a different behavior from [nativescript-localize](https://github.com/EddyVerbruggen/nativescript-localize):\n* the default `localize` method was renamed to `l`\n* the default `l` method tries to load from a local JSON object\n* you can load such a JSON object with `loadLocalJSON` passing either the JSON or the path to it\n* if no local JSON, `l` load natively\n* keys are not encoded anymore, meaning keys are the same in native/js worlds.\n* the locale JSON must now be a trully nested object (no `.` in keys names)\n* special characters support has been dropped in keys names.\n\n\n## Credits\nA lot of thanks goes out to  [Eddy Verbruggen](https://github.com/EddyVerbruggen) and [Ludovic Fabrèges (@lfabreges)](https://github.com/lfabreges) for developing and maintaining [nativescript-localize](https://github.com/EddyVerbruggen/nativescript-localize).\n\n## Table of contents\n* [Installation](#installation)\n* [Usage](#usage)\n  * [Angular](#angular)\n  * [Javascript](#javascript)\n  * [Vue](#vue)\n* [File format](#file-format)\n* [Frequently asked questions](#frequently-asked-questions)\n  * [How to set the default language?](#how-to-set-the-default-language)\n  * [How to localize the application name?](#how-to-localize-the-application-name)\n  * [How to localize iOS properties?](#how-to-localize-ios-properties)\n  * [How to change the language dynamically at runtime?](#how-to-change-the-language-dynamically-at-runtime)\n* [Troubleshooting](#troubleshooting)\n  * [The angular localization pipe does not work when in a modal context](#the-angular-localization-pipe-does-not-work-when-in-a-modal-context)\n\n## Installation\n```shell\ntns plugin add @nativescript-community/l\n```\n\n## Usage\nCreate a folder `i18n` in the `app` folder with the following structure:\n```\napp\n  | i18n\n      | en.json           \u003c-- english language\n      | fr.default.json   \u003c-- french language (default)\n      | es.js\n```\n\nYou need to [set the default langage](#how-to-set-the-default-language) and make sure it contains\nthe [application name](#how-to-localize-the-application-name) to avoid any error.\n\n### Angular\n#### app.module.ts\n```ts\nimport { NgModule, NO_ERRORS_SCHEMA } from \"@angular/core\";\nimport { NativeScriptLocalizeModule } from \"@nativescript-community/l/angular\";\nimport { NativeScriptModule } from \"nativescript-angular/nativescript.module\";\n\nimport { AppComponent } from \"./app.component\";\n\n@NgModule({\n  declarations: [AppComponent],\n  bootstrap: [AppComponent],\n  imports: [\n    NativeScriptModule,\n    NativeScriptLocalizeModule\n  ],\n  schemas: [NO_ERRORS_SCHEMA]\n})\nexport class AppModule { }\n```\n\n#### Template\n```xml\n\u003cLabel text=\"{{ 'Hello world !' | L }}\"/\u003e\n\u003cLabel text=\"{{ 'I am %s' | L:'user name' }}\"/\u003e\n```\n\n#### Script\n```ts\nimport { localize } from \"@nativescript-community/l\";\n\nconsole.log(localize(\"Hello world !\"));\n```\n\n### Javascript / XML\n\n#### app.js\n```js\nconst application = require(\"application\");\nconst localize = require(\"@nativescript-community/l\");\napplication.setResources({ L: localize.l });\n```\n\n#### Template\n```xml\n\u003cLabel text=\"{{ L('Hello world !') }}\"/\u003e\n\u003cLabel text=\"{{ L('I am %s', 'user name') }}\"/\u003e\n```\n\n#### Script\n```js\nconst localize = require(\"@nativescript-community/l\");\n\nconsole.log(localize(\"Hello world !\"));\n```\n\n#### Quirks\n⚠️ If you notice translations work on your main XML page, but don't work on a page you\nnavigate to, then add this little hack to the 'page loaded' function of that new page:\n\n```js\n  const page = args.object;\n  page.bindingContext = new Observable();\n````\n\n### Vue\n#### app.js\n```js\nimport { l } from \"@nativescript-community/l\";\n\nVue.filter(\"L\", l);\n```\n\n#### Template\n```html\n\u003cLabel :text=\"'Hello world !'|L\"\u003e\u003c/Label\u003e\n\u003cLabel :text=\"'I am %s'|L('user name')\"\u003e\u003c/Label\u003e\n```\n\n## File format\nEach file is imported using `require`, use the file format of your choice:\n\n#### JSON\n```json\n{\n  \"app.name\": \"My app\",\n  \"ios.info.plist\": {\n    \"NSLocationWhenInUseUsageDescription\": \"This will be added to InfoPlist.strings\"\n  },\n  \"user\": {\n    \"name\": \"user.name\",\n    \"email\": \"user.email\"\n  },\n  \"array\": [\n    \"split the translation into \",\n    \"multiples lines\"\n  ],\n  \"sprintf\": \"format me %s\",\n  \"sprintf with numbered placeholders\": \"format me %2$s one more time %1$s\"\n}\n```\n\n#### Javascript\n```js\nconst i18n = {\n  \"app.name\": \"My app\"\n};\n\nmodule.exports = i18n;\n```\n\n## Frequently asked questions\n### How to set the default language?\nAdd the `.default` extension to the default language file to set it as the fallback language:\n```\nfr.default.json\n```\n\n### How to localize the application name?\nThe `app.name` key is used to localize the application name:\n```json\n{\n  \"app.name\": \"My app\"\n}\n```\n\n### How to localize iOS properties?\nKeys starting with `ios.info.plist.` are used to localize iOS properties:\n```json\n{\n  \"ios.info.plist.NSLocationWhenInUseUsageDescription\": \"This will be added to InfoPlist.strings\"\n}\n```\n\n### How to change the language dynamically at runtime?\n\nSeeing this module now uses JSON objects. Overriding consist of 3 steps:\n* overriding native language, done with `overrideLocaleNative`\n* overriding json language, done with `loadLocalJSON`\n* updating all labels, buttons.... your job!\n\n\n```typescript\nimport { overrideLocaleNative } from \"@nativescript-community/l/localize\";\nconst localeOverriddenSuccessfully = overrideLocaleNative(\"en-GB\"); // or \"nl-NL\", etc (or even just the part before the hyphen)\n```\n\n\n\u003e **Important:** In case you are using [Android app bundle](https://docs.nativescript.org/tooling/publishing/android-app-bundle) to release your android app, add this to\n\u003e App_Resources/Android/app.gradle to make sure all lanugages are bundled in the split apks\n\n```groovy\nandroid {\n\n  // there maybe other code here //\n\n  bundle {\n    language {\n      enableSplit = false\n    }\n  }\n}\n```\n\n\u003e **Tip:** you can get the default language on user's phone by using this\n\n```ts\nimport { device } from '@nativescript/core/platform';\n\nconsole.log(\"user's language is\", device.language.split('-')[0]);\n```\n\n\u003e **Tip:** overrideLocaleNative method stores the language in a special key in app-settings,\n\u003e you can access it like this,\n\n```ts\nimport { getString } from '@nativescript/core/application-settings'; \n\nconsole.log(getString('__app__language__')); // only available after the first time you use overrideLocaleNative(langName);\n```\n\n## Troubleshooting\n### The angular localization pipe does not work when in a modal context\nAs a workaround, you can trigger a change detection from within your component constructor:\n```ts\nconstructor(\n  private readonly params: ModalDialogParams,\n  private readonly changeDetectorRef: ChangeDetectorRef,\n) {\n  setTimeout(() =\u003e this.changeDetectorRef.detectChanges(), 0);\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnativescript-community%2Fl","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnativescript-community%2Fl","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnativescript-community%2Fl/lists"}