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 !

If you're using Expo, you can specify the supported locales in your app.json or app.config.js using the config plugin. This enables Android 13+ and iOS to display the available locales in the system settings, allowing users to select their preferred language for your app.

{ "expo": { "plugins": [["react-native-localize", { "locales": ["en", "fr"] }]] } }

Alternatively, if you want to define different locales for iOS and Android, you can use:

{ "expo": { "plugins": [ [ "react-native-localize", { "locales": { "android": ["en"], "ios": ["en", "fr"] } } ] ] } }

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

import { getCurrencies, getLocales } from "react-native-localize"; console.log(getLocales()); console.log(getCurrencies());

Prismy (a proud sponsor of this library ♥️) helps teams ship localized apps faster with an AI-driven, GitHub-native workflow. Want to supercharge your react-native-localize setup? Here's how Prismy makes localization seamless:

• Customize tone (formal, informal, playful) per language.
• Automatically reuse existing translations.
• Use glossaries to keep terminology consistent (Prismy even generates them the initial one for you!)

No setup headaches. Just clean, context-aware translations, out of the box.

1. Keep editing your source locale files like you always do.
2. When you open a PR, Prismy:
   • Detects missing translations
   • (Optionally) adds a "Missing Translations" CI check
   • Comments with a link to generate them in one click
3. Kick off translations from the PR comment itself.
4. Let PMs, designers, or translators tweak the wording via Prismy's web UI.

👉 Learn more at prismy.io

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 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 currency codes, in order.

type getCurrencies = () => string[];

import { getCurrencies } from "react-native-localize"; console.log(getCurrencies()); // -> ["EUR", "GBP", "USD"]

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 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. Useful to pick the best translation available.

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

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

Opens the app language settings.

type openAppLanguageSettings = () => Promise<void>;

import { openAppLanguageSettings } from "react-native-localize"; openAppLanguageSettings("application").catch((error) => { console.warn("Cannot open app language settings", error); });

On the client, react-native-localize uses navigator.languages. During SSR, it gets language preferences from the server via the parsed Accept-Language header.

On the server, wrap your app with ServerLanguagesProvider and pass the user's languages:

import accepts from "accepts"; import { ServerLanguagesProvider } from "react-native-localize"; // parse the Accept-Language header; any approach returning string[] is fine const languages = accepts(request).languages(); const html = renderToString( <ServerLanguagesProvider value={languages}> <App /> </ServerLanguagesProvider>, );

In your components, use the useLocalize hook instead of calling the API methods directly:

import { useLocalize } from "react-native-localize"; const App = () => { const { getCountry } = useLocalize(); return <Text>Country: {getCountry()}</Text>; };

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"; // or "react-native-localize/mock/jest"

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.