Visit the free getting started tutorials on nativescript.org for JavaScript or Angular.
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
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> <Label text="{{ 'I am %s' | L:'user name' }}"></Label>
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> <Label text="{{ L('I am %s', 'user name') }}"></Label>
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. There is no plan to implement this feature in the near future.
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: