Visit the free getting started tutorials on nativescript.org for JavaScript, Angular, or Vue.js.
Kindly note that we filter out plugins that:
package.json
$ tns plugin add nativescript-localize
This is a plugin for NativeScript that implements internationalization (i18n) using the native capabilities of each platform. It is inspired from nativescript-i18n
A lot of thanks goes out to Ludovic Fabrèges (@lfabreges) for developing and maintaining this plugin in the past. When he had to abandon it due to shifted priorities, he was kind enough to move the repo to me.
tns plugin add nativescript-localize
Create a folder i18n in the app folder with the following structure:
i18n
app
app | i18n | en.json <-- english language | fr.default.json <-- french language (default) Â Â | es.js
You need to set the default langage and make sure it contains the application name to avoid any error.
import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core"; import { NativeScriptLocalizeModule } from "nativescript-localize/angular"; import { NativeScriptModule } from "nativescript-angular/nativescript.module"; import { AppComponent } from "./app.component"; @NgModule({ declarations: [AppComponent], bootstrap: [AppComponent], imports: [ NativeScriptModule, NativeScriptLocalizeModule ], schemas: [NO_ERRORS_SCHEMA] }) export class AppModule { }
<Label text="{{ 'Hello world !' | L }}"/> <Label text="{{ 'I am %s' | L:'user name' }}"/>
import { localize } from "nativescript-localize"; console.log(localize("Hello world !"));
const application = require("application"); const localize = require("nativescript-localize"); application.setResources({ L: localize });
<Label text="{{ L('Hello world !') }}"/> <Label text="{{ L('I am %s', 'user name') }}"/>
const localize = require("nativescript-localize"); console.log(localize("Hello world !"));
import { localize } from "nativescript-localize"; Vue.filter("L", localize);
<Label :text="'Hello world !'|L"></Label> <Label :text="'I am %s'|L('user name')"></Label>
Each file is imported using require, use the file format of your choice:
require
{ "app.name": "My app", "ios.info.plist": { "NSLocationWhenInUseUsageDescription": "This will be added to InfoPlist.strings" }, "user": { "name": "user.name", "email": "user.email" }, "array": [ "split the translation into ", "multiples lines" ], "sprintf": "format me %s", "sprintf with numbered placeholders": "format me %2$s one more time %1$s" }
const i18n = { "app.name": "My app" }; module.exports = i18n;
Add the .default extension to the default language file to set it as the fallback language:
.default
fr.default.json
The app.name key is used to localize the application name:
app.name
{ "app.name": "My app" }
Keys starting with ios.info.plist. are used to localize iOS properties:
ios.info.plist.
{ "ios.info.plist.NSLocationWhenInUseUsageDescription": "This will be added to InfoPlist.strings" }
This plugin uses the native capabilities of each platform, language selection is therefore made by the OS.
On iOS you can programmatically override this language since plugin version 4.2.0 by doing this:
import { overrideLocale } from "nativescript-localize/localize"; const localeOverriddenSuccessfully = overrideLocale("en-GB"); // or "nl-NL", etc
As a workaround, you can trigger a change detection from within your component constructor:
constructor( private readonly params: ModalDialogParams, private readonly changeDetectorRef: ChangeDetectorRef, ) { setTimeout(() => this.changeDetectorRef.detectChanges(), 0); }
Popularity metric based on:
Quality metric based on:
Maintenance metric based on: