A toolbox for your React Native app localization.
| 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 !
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:
👀 See manual linking instructions
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 =newFile(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:
importcom.reactcommunity.rnlocalize.RNLocalizePackage; // <- add the RNLocalizePackage importpublicclassMainApplicationextendsApplicationimplementsReactApplication {
// …@OverrideprotectedList<ReactPackage> getPackages() {
@SuppressWarnings("UnnecessaryLocalVariable")
List<ReactPackage> packages = newPackageList(this).getPackages();
// …packages.add(newRNLocalizePackage());
returnpackages;
}
// …
}This package supports react-native-web. Follow their official guide to configure webpack.
import*asRNLocalizefrom"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.
typegetLocales=()=>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.
typegetNumberFormatSettings=()=>{decimalSeparator: string;groupingSeparator: string;};console.log(RNLocalize.getNumberFormatSettings());/* -> { decimalSeparator: ".", groupingSeparator: ",",} */Returns the user preferred currency codes, in order.
typegetCurrencies=()=>Array<string>;console.log(RNLocalize.getCurrencies());// -> ["EUR", "GBP", "USD"]Returns the user current country code (based on its device locale, not on its position).
typegetCountry=()=>string;console.log(RNLocalize.getCountry());// -> "FR"Returns the user preferred calendar format.
typegetCalendar=()=>"gregorian"|"japanese"|"buddhist";console.log(RNLocalize.getCalendar());// -> "gregorian"Returns the user preferred temperature unit.
typegetTemperatureUnit=()=>"celsius"|"fahrenheit";console.log(RNLocalize.getTemperatureUnit());// -> "celsius"Returns the user preferred timezone (based on its device settings, not on its position).
typegetTimeZone=()=>string;console.log(RNLocalize.getTimeZone());// -> "Europe/Paris"Returns true if the user prefers 24h clock format, false if he prefers 12h clock format.
typeuses24HourClock=()=>boolean;console.log(RNLocalize.uses24HourClock());// -> trueReturns true if the user prefers metric measure system, false if he prefers imperial.
typeusesMetricSystem=()=>boolean;console.log(RNLocalize.usesMetricSystem());// -> trueTells if the automatic date & time setting is enabled on the phone. Android only
typeOption<T>=T|undefined;typeusesAutoDateAndTime=()=>Option<boolean>;console.log(RNLocalize.usesAutoDateAndTime());// true or falseTells if the automatic time zone setting is enabled on the phone. Android only
typeOption<T>=T|undefined;typeusesAutoTimeZone=()=>Option<boolean>;console.log(RNLocalize.usesAutoTimeZone());Allows you to listen for any localization change.
typeaddEventListener=(type: "change",handler: Function)=>void;typeremoveEventListener=(type: "change",handler: Function)=>void;functionhandleLocalizationChange(){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 (
typefindBestAvailableLanguage=(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.jsconstgetLocales=()=>[// 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 fallbackconstfindBestAvailableLanguage=()=>({languageTag: "en-US",isRTL: false,});constgetNumberFormatSettings=()=>({decimalSeparator: ".",groupingSeparator: ",",});constgetCalendar=()=>"gregorian";// or "japanese", "buddhist"constgetCountry=()=>"US";// the country code you wantconstgetCurrencies=()=>["USD","EUR"];// can be empty arrayconstgetTemperatureUnit=()=>"celsius";// or "fahrenheit"constgetTimeZone=()=>"Europe/Paris";// the timezone you wantconstuses24HourClock=()=>true;constusesMetricSystem=()=>true;constaddEventListener=jest.fn();constremoveEventListener=jest.fn();export{findBestAvailableLanguage,getLocales,getNumberFormatSettings,getCalendar,getCountry,getCurrencies,getTemperatureUnit,getTimeZone,uses24HourClock,usesMetricSystem,addEventListener,removeEventListener,};