A toolbox for your React Native app localization.
This project was known as react-native-languages and has been renamed to reflect new APIs possibilities.
Find more informations about this change here.
| package name | version | react-native version |
|---|---|---|
| react-native-localize | 1.0.0+ | 0.56.0+ |
| react-native-languages | 2.0.1 | 0.48.0 - 0.55.4 |
$ npm install --save react-native-localize
# --- or ---
$ yarn add react-native-localizeDon't forget to run pod install after that !
0.60.0, you can follow the linking instructions here.
If you use this package with React Native 0.60.0or superior, you will probably don't need to link it. Otherwise if it still cannot be found, follow this steps to link it manually :
Add this line to your ios/Podfile file, then run pod install.
target 'YourAwesomeProject' do
# …
pod 'RNLocalize', :path => '../node_modules/react-native-localize'
end- Add the following lines to
android/settings.gradle:
include ':react-native-localize'
project(':react-native-localize').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-localize/android')- Add the implementation line to the dependencies in
android/app/build.gradle:
dependencies {
// ...
implementation project(':react-native-localize')
}- Add the import and link the package in
MainApplication.java:
import com.reactcommunity.rnlocalize.RNLocalizePackage; // <- add the RNLocalizePackage import
public class MainApplication extends Application implements ReactApplication {
// …
@Override
protected List<ReactPackage> getPackages() {
@SuppressWarnings("UnnecessaryLocalVariable")
List<ReactPackage> packages = new PackageList(this).getPackages();
// …
packages.add(new RNLocalizePackage());
return packages;
}
// …
}import * as RNLocalize from "react-native-localize";
console.log(RNLocalize.getLocales());
console.log(RNLocalize.getCurrencies());
RNLocalize.addEventListener("change", () => {
// do localization related stuff…
});Returns the user preferred locales, in order.
type getLocales = () => Array<{
languageCode: string;
scriptCode?: string;
countryCode: string;
languageTag: string;
isRTL: boolean;
}>;console.log(RNLocalize.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;
};console.log(RNLocalize.getNumberFormatSettings());
/* -> {
decimalSeparator: ".",
groupingSeparator: ",",
} */Returns the user preferred currency codes, in order.
type getCurrencies = () => Array<string>;console.log(RNLocalize.getCurrencies());
// -> ["EUR", "GBP", "USD"]Returns the user current country code (based on its device locale, not on its position).
type getCountry = () => string;console.log(RNLocalize.getCountry());
// -> "FR"Returns the user preferred calendar format.
type getCalendar = () => "gregorian" | "japanese" | "buddhist";console.log(RNLocalize.getCalendar());
// -> "gregorian"Returns the user preferred temperature unit.
type getTemperatureUnit = () => "celsius" | "fahrenheit";console.log(RNLocalize.getTemperatureUnit());
// -> "celsius"Returns the user preferred timezone (based on its device settings, not on its position).
type getTimeZone = () => string;console.log(RNLocalize.getTimeZone());
// -> "Europe/Paris"Returns true if the user prefers 24h clock format, false if he prefers 12h clock format.
type uses24HourClock = () => boolean;console.log(RNLocalize.uses24HourClock());
// -> trueReturns true if the user prefers metric measure system, false if he prefers imperial.
type usesMetricSystem = () => boolean;console.log(RNLocalize.usesMetricSystem());
// -> trueAllows you to listen for any localization change.
type addEventListener = (type: "change", handler: Function) => void;
type removeEventListener = (type: "change", handler: Function) => void;function handleLocalizationChange() {
console.log(RNLocalize.getLocales());
}
RNLocalize.addEventListener("change", handleLocalizationChange);
// …later (ex: component unmount)
RNLocalize.removeEventListener("change", handleLocalizationChange);Returns the best language tag possible and its reading direction (
type findBestAvailableLanguage = (
languageTags: Array<string>,
) => { languageTag: string; isRTL: boolean } | void;console.log(RNLocalize.findBestAvailableLanguage(["en-US", "en", "fr"]));
// -> { languageTag: "en-US", isRTL: false }Examples with i18n-js
Browse the files in the /example directory.
Because it's a native module, you might need to mock this package to run your tests flawlessly.
Here is an example for Jest, adapt it to your needs :
// __mocks__/react-native-localize.js
const getLocales = () => [
// you can choose / add the locales you want
{ countryCode: "US", languageTag: "en-US", languageCode: "en", isRTL: false },
{ countryCode: "FR", languageTag: "fr-FR", languageCode: "fr", isRTL: false },
];
// use a provided translation, or return undefined to test your fallback
const findBestAvailableLanguage = () => ({
languageTag: "en-US",
isRTL: false,
});
const getNumberFormatSettings = () => ({
decimalSeparator: ".",
groupingSeparator: ",",
});
const getCalendar = () => "gregorian"; // or "japanese", "buddhist"
const getCountry = () => "US"; // the country code you want
const getCurrencies = () => ["USD", "EUR"]; // can be empty array
const getTemperatureUnit = () => "celsius"; // or "fahrenheit"
const getTimeZone = () => "Europe/Paris"; // the timezone you want
const uses24HourClock = () => true;
const usesMetricSystem = () => true;
const addEventListener = jest.fn();
const removeEventListener = jest.fn();
export {
findBestAvailableLanguage,
getLocales,
getNumberFormatSettings,
getCalendar,
getCountry,
getCurrencies,
getTemperatureUnit,
getTimeZone,
uses24HourClock,
usesMetricSystem,
addEventListener,
removeEventListener,
};