๐ A toolbox for your React Native app localization
A toolbox for your React Native app localization.
This library follows the React Native releases support policy.
It is supporting the latest version, and the two previous minor series.
$ npm install --save react-native-localize
# --- or ---
$ yarn add react-native-localize
Don't forget to run pod install
after thatย !
This package supports react-native-web
. Follow their official guide to configure webpack
.
As this library uses synchronous native methods, remote debugging (e.g. with Chrome) is no longer possible.
Instead, you should use Flipper ๐ฌ.
import { getCurrencies, getLocales } from "react-native-localize";
console.log(getLocales());
console.log(getCurrencies());
Returns the user preferred locales, in order.
type getLocales = () => Array<{
languageCode: string;
scriptCode?: string;
countryCode: string;
languageTag: string;
isRTL: boolean;
}>;
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 },
] */
Returns number formatting settings.
type getNumberFormatSettings = () => {
decimalSeparator: string;
groupingSeparator: string;
};
import { getNumberFormatSettings } from "react-native-localize";
console.log(getNumberFormatSettings());
/* -> {
decimalSeparator: ".",
groupingSeparator: ",",
} */
Returns the user preferred currency codes, in order.
type getCurrencies = () => string[];
import { getCurrencies } from "react-native-localize";
console.log(getCurrencies());
// -> ["EUR", "GBP", "USD"]
Returns the user current country code (based on its device locale, not on its position).
type getCountry = () => string;
import { getCountry } from "react-native-localize";
console.log(getCountry());
// -> "FR"
Devices using Latin American regional settings will return "UN" instead of "419", as the latter is not a standard country code.
Returns the user preferred calendar format.
type getCalendar = () =>
| "gregorian"
| "buddhist"
| "coptic"
| "ethiopic"
| "ethiopic-amete-alem"
| "hebrew"
| "indian"
| "islamic"
| "islamic-umm-al-qura"
| "islamic-civil"
| "islamic-tabular"
| "iso8601"
| "japanese"
| "persian";
import { getCalendar } from "react-native-localize";
console.log(getCalendar());
// -> "gregorian"
Returns the user preferred temperature unit.
type getTemperatureUnit = () => "celsius" | "fahrenheit";
import { getTemperatureUnit } from "react-native-localize";
console.log(getTemperatureUnit());
// -> "celsius"
Returns the user preferred timezone (based on its device settings, not on its position).
type getTimeZone = () => string;
import { getTimeZone } from "react-native-localize";
console.log(getTimeZone());
// -> "Europe/Paris"
Returns true
if the user prefers 24h clock format, false
if they prefer 12h clock format.
type uses24HourClock = () => boolean;
import { uses24HourClock } from "react-native-localize";
console.log(uses24HourClock());
// -> true
Returns true
if the user prefers metric measure system, false
if they prefer imperial.
type usesMetricSystem = () => boolean;
import { usesMetricSystem } from "react-native-localize";
console.log(usesMetricSystem());
// -> true
Tells if the automatic date & time setting is enabled on the phone. Android only
type usesAutoDateAndTime = () => boolean | undefined;
import { usesAutoDateAndTime } from "react-native-localize";
console.log(usesAutoDateAndTime()); // true or false
Tells if the automatic time zone setting is enabled on the phone. Android only
type usesAutoTimeZone = () => boolean | undefined;
import { usesAutoTimeZone } from "react-native-localize";
console.log(usesAutoTimeZone());
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.
type findBestLanguageTag = (
languageTags: string[],
) => { languageTag: string; isRTL: boolean } | void;
import { findBestLanguageTag } from "react-native-localize";
console.log(findBestLanguageTag(["en-US", "en", "fr"]));
// -> { languageTag: "en-US", isRTL: false }
Browse the files in the /example directory.
You can add / remove supported localizations in your Xcode project infos:
Because it's a native module, you need to mock this package.
The package provides a default mock you may import in your __mocks__
directory:
// __mocks__/react-native-localize.ts
export * from "react-native-localize/mock";
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.