React Native Localize

🌍 A toolbox for your React Native app localization
Alternatives To React Native Localize
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Formatjs13,7297,9802,9845 days ago293September 06, 202237TypeScript
The monorepo home to all of the FormatJS related libraries, most notably react-intl.
Js Lingui3,75647693 days ago73June 22, 202223mitTypeScript
🌍 📖 A readable, automated, and optimized (3 kb) internationalization for JavaScript
Twinkle Tray3,299
3 days ago229mitJavaScript
Easily manage the brightness of your monitors in Windows from the system tray
Nodejs.org2,713
11 hours ago4May 05, 202240otherJavaScript
The Node.js® Website
React Native I18n2,176705296 days ago27July 18, 201875mitObjective-C
React Native + i18n.js
Next Translate2,175114a day ago208September 21, 2022102mitJavaScript
Next.js plugin + i18n API for Next.js 🌍 - Load page translations and use them in an easy way!
React Native Localize2,03558674 days ago40September 27, 20222mitJava
🌍 A toolbox for your React Native app localization
Typesafe I18n1,611
12 days ago219July 16, 20222mitTypeScript
A fully type-safe and lightweight internationalization library for all your TypeScript and JavaScript projects.
Reactnativelocalization87511914a year ago60February 21, 202264mitJavaScript
Class to localize the ReactNative interface
Fluent.js82981514 days ago9December 21, 202191apache-2.0JavaScript
JavaScript implementation of Project Fluent
Alternatives To React Native Localize
Select To Compare


Alternative Project Comparisons
Readme

🌍  react-native-localize

A toolbox for your React Native app localization.

mit licence npm version npm downloads
platform - android platform - ios platform - macos platform - web

Support

package version react-native version
3.0.0+ 0.70.0+
2.0.0+ 0.60.0+

Setup

$ npm install --save react-native-localize
# --- or ---
$ yarn add react-native-localize

Don't forget to run pod install after that !

Web support

This package supports react-native-web. Follow their official guide to configure webpack.

Debugging

As this library uses synchronous native methods, remote debugging (e.g. with Chrome) is no longer possible.
Instead, you should use Flipper 🐬.

Basic usage example

import { getCurrencies, getLocales } from "react-native-localize";

console.log(getLocales());
console.log(getCurrencies());

API

getLocales()

Returns the user preferred locales, in order.

Method type

type getLocales = () => Array<{
  languageCode: string;
  scriptCode?: string;
  countryCode: string;
  languageTag: string;
  isRTL: boolean;
}>;

Usage example

import { getLocales } from "react-native-localize";

console.log(getLocales());
/* -> [
  { countryCode: "GB", languageTag: "en-GB", languageCode: "en", isRTL: false },
  { countryCode: "US", languageTag: "en-US", languageCode: "en", isRTL: false },
  { countryCode: "FR", languageTag: "fr-FR", languageCode: "fr", isRTL: false },
] */

getNumberFormatSettings()

Returns number formatting settings.

Method type

type getNumberFormatSettings = () => {
  decimalSeparator: string;
  groupingSeparator: string;
};

Usage example

import { getNumberFormatSettings } from "react-native-localize";

console.log(getNumberFormatSettings());
/* -> {
  decimalSeparator: ".",
  groupingSeparator: ",",
} */

getCurrencies()

Returns the user preferred currency codes, in order.

Method type

type getCurrencies = () => string[];

Usage example

import { getCurrencies } from "react-native-localize";

console.log(getCurrencies());
// -> ["EUR", "GBP", "USD"]

getCountry()

Returns the user current country code (based on its device locale, not on its position).

Method type

type getCountry = () => string;

Usage example

import { getCountry } from "react-native-localize";

console.log(getCountry());
// -> "FR"

Note

Devices using Latin American regional settings will return "UN" instead of "419", as the latter is not a standard country code.


getCalendar()

Returns the user preferred calendar format.

Method type

type getCalendar = () =>
  | "gregorian"
  | "buddhist"
  | "coptic"
  | "ethiopic"
  | "ethiopic-amete-alem"
  | "hebrew"
  | "indian"
  | "islamic"
  | "islamic-umm-al-qura"
  | "islamic-civil"
  | "islamic-tabular"
  | "iso8601"
  | "japanese"
  | "persian";

Usage example

import { getCalendar } from "react-native-localize";

console.log(getCalendar());
// -> "gregorian"

getTemperatureUnit()

Returns the user preferred temperature unit.

Method type

type getTemperatureUnit = () => "celsius" | "fahrenheit";

Usage example

import { getTemperatureUnit } from "react-native-localize";

console.log(getTemperatureUnit());
// -> "celsius"

getTimeZone()

Returns the user preferred timezone (based on its device settings, not on its position).

Method type

type getTimeZone = () => string;

Usage example

import { getTimeZone } from "react-native-localize";

console.log(getTimeZone());
// -> "Europe/Paris"

uses24HourClock()

Returns true if the user prefers 24h clock format, false if they prefer 12h clock format.

Method type

type uses24HourClock = () => boolean;

Usage example

import { uses24HourClock } from "react-native-localize";

console.log(uses24HourClock());
// -> true

usesMetricSystem()

Returns true if the user prefers metric measure system, false if they prefer imperial.

Method type

type usesMetricSystem = () => boolean;

Usage example

import { usesMetricSystem } from "react-native-localize";

console.log(usesMetricSystem());
// -> true

usesAutoDateAndTime()

Tells if the automatic date & time setting is enabled on the phone. Android only

Method type

type usesAutoDateAndTime = () => boolean | undefined;

Usage example

import { usesAutoDateAndTime } from "react-native-localize";

console.log(usesAutoDateAndTime()); // true or false

usesAutoTimeZone()

Tells if the automatic time zone setting is enabled on the phone. Android only

Method type

type usesAutoTimeZone = () => boolean | undefined;

Usage example

import { usesAutoTimeZone } from "react-native-localize";

console.log(usesAutoTimeZone());

findBestLanguageTag()

Returns the best language tag possible and its reading direction (⚠️ it respects the user preferred languages list order, see explanations). Useful to pick the best translation available.

Method type

type findBestLanguageTag = (
  languageTags: string[],
) => { languageTag: string; isRTL: boolean } | void;

Usage example

import { findBestLanguageTag } from "react-native-localize";

console.log(findBestLanguageTag(["en-US", "en", "fr"]));
// -> { languageTag: "en-US", isRTL: false }

Examples with @formatjs/intl

Browse the files in the /example directory.

How to update supported localizations (iOS)

You can add / remove supported localizations in your Xcode project infos:

How to test your code

Because it's a native module, you need to mock this package.
The package provides a default mock you may use in your __mocks__/react-native-localize.js or jest.setup.js.

import localizeMock from "react-native-localize/mock";

jest.mock("react-native-localize", () => localizeMock);

Sponsors

This module is provided as is, I work on it in my free time.

If you or your company uses it in a production app, consider sponsoring this project 💰. You also can contact me for premium enterprise support: help with issues, prioritize bugfixes, feature requests, etc.

Sponsors list

Popular Localization Projects
Popular Reactjs Projects
Popular Text Processing Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Java
Reactjs
Types
Localization
I18n
Internationalization
Language Detection
Globalization