Skip to content

Internationalization plugin for NativeScript using native capabilities of each platform

License

Notifications You must be signed in to change notification settings

kefahB/nativescript-localize

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

nativescript-localize

npm npm

This is a plugin for NativeScript that implements internationalization (i18n) using the native capabilities of each platform. It is inspired from nativescript-i18n

Credits

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.

Table of contents

Installation

tns plugin add nativescript-localize

Usage

Create a folder i18n in the app folder with the following structure:

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.

Angular

app.module.ts

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 { }

Template

<Label text="{{ 'Hello world !' | L }}"/>
<Label text="{{ 'I am %s' | L:'user name' }}"/>

Script

import { localize } from "nativescript-localize";

console.log(localize("Hello world !"));

Javascript

app.js

const application = require("application");
const localize = require("nativescript-localize");
application.setResources({ L: localize });

Template

<Label text="{{ L('Hello world !') }}"/>
<Label text="{{ L('I am %s', 'user name') }}"/>

Script

const localize = require("nativescript-localize");

console.log(localize("Hello world !"));

Vue

app.js

import { localize } from "nativescript-localize";

Vue.filter("L", localize);

Template

<Label :text="'Hello world !'|L"></Label>
<Label :text="'I am %s'|L('user name')"></Label>

File format

Each file is imported using require, use the file format of your choice:

JSON

{
  "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"
}

Javascript

const i18n = {
  "app.name": "My app"
};

module.exports = i18n;

Frequently asked questions

How to set the default language?

Add the .default extension to the default language file to set it as the fallback language:

fr.default.json

How to localize the application name?

The app.name key is used to localize the application name:

{
  "app.name": "My app"
}

How to localize iOS properties?

Keys starting with ios.info.plist. are used to localize iOS properties:

{
  "ios.info.plist.NSLocationWhenInUseUsageDescription": "This will be added to InfoPlist.strings"
}

How to change the language dynamically at runtime?

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

Troubleshooting

The angular localization pipe does not work when in a modal context

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);
}

About

Internationalization plugin for NativeScript using native capabilities of each platform

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 45.4%
  • JavaScript 44.4%
  • Vue 3.4%
  • Shell 3.3%
  • HTML 3.1%
  • CSS 0.3%
  • SCSS 0.1%