A toolbox for your React Native app localization.

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

If 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.

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

Don't forget to run pod install after that !

Because this package targets React Native 0.60.0+, you will probably don't need to link it manually. Otherwise if it's not the case, follow this additional instructions:

target 'YourAwesomeProject' do
  # …
  pod 'RNLocalize', :path => '../node_modules/react-native-localize'
end

include ':react-native-localize'
project(':react-native-localize').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-localize/android')

dependencies {
  // ...
  implementation project(':react-native-localize')
}

import com.zoontek.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;
  }

  // …
}

target 'YourAwesomeProject' do
  # …
  pod 'RNLocalize', :path => '../node_modules/react-native-localize'
end

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

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"

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" | "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 they prefer 12h clock format.

type uses24HourClock = () => boolean;

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

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

type usesMetricSystem = () => boolean;

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

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

type Option<T> = T | undefined;
type usesAutoDateAndTime = () => Option<boolean>;

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

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

type Option<T> = T | undefined;
type usesAutoTimeZone = () => Option<boolean>;

console.log(RNLocalize.usesAutoTimeZone());

Allows 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 (⚠️ it respects the user preferred languages list order, see explanations). Useful to pick the best translation available.

type findBestAvailableLanguage = (
  languageTags: Array<string>,
) => { languageTag: string; isRTL: boolean } | void;

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

Browse the files in the /example directory.

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 mockRNLocalize from "react-native-localize/mock";

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