React Native localization means detecting the device language, loading the matching translation file, and displaying text, dates and numbers in the user's locale on both iOS and Android. The usual stack is expo-localization (or react-native-localize) to read device settings, plus i18next with react-i18next or a similar library to manage JSON translations. Add plural rules, right-to-left support and store listing translations to finish the job.
This guide explains a clean React Native localization setup, compares popular libraries, and covers the parts teams forget, such as app store metadata and layout testing.
How Localization Works in React Native
React Native has no built-in i18n system, so you combine two parts. A device locale detector tells you which language and region the user prefers. A translation library then maps keys to messages in that language and handles variables, plurals and fallbacks. Because React Native renders native components, you also need to consider platform behavior such as right-to-left layouts and system fonts. If you are new to the topic, review internationalization vs localization first.
Libraries for React Native Localization
| Library | Purpose | Notes |
|---|---|---|
| expo-localization | Reads device locale, calendar, currency and text direction | Works in Expo and in bare projects with the Expo modules; see the Expo localization guide |
| react-native-localize | Reads device locale and settings | Popular option for projects without Expo |
| i18next + react-i18next | Translation management in JS | Large ecosystem, namespaces, plurals and interpolation |
| react-intl (FormatJS) | ICU message formatting | Good if you already use ICU syntax |
| Lingui | Extraction-based i18n | Compiled messages and a smaller runtime |
If you already use i18next on the web, the same translation files can often be shared with your mobile app. Our guide to React i18n with react-i18next covers the patterns that carry over.
Step-by-Step Setup
1. Install detection and translation libraries
Add expo-localization (or react-native-localize), i18next and react-i18next to your project.
2. Create translation files
Make one JSON file per language, such as en.json, es.json and de.json. Group keys by screen or feature, and keep each message a full sentence with placeholders.
3. Initialize i18next
Configure the default language, the fallback language and the resources. Read the device locale at startup and pass it as the initial language.
4. Use translations in components
Call the useTranslation hook and render t('profile.title'). For counts, use plural keys instead of building text in code.
5. Let users change language
Offer an in-app language setting and store the choice with AsyncStorage. Many users prefer a language that differs from their device language.
Native Settings You Should Not Forget
| Area | iOS | Android |
|---|---|---|
| Declare supported languages | Add localizations in the app configuration | Declare supported locales in the app configuration |
| System permission texts | Translate usage descriptions in InfoPlist strings | Translate string resources for permissions and notifications |
| App name and store listing | Localize in App Store Connect | Localize in Google Play Console |
| Right-to-left support | Enable RTL and test mirroring | Enable RTL support and test mirroring |
The native side has its own rules, so it helps to read our guides to iOS localization and Android localization. Store listing text is also part of app localization and strongly affects downloads in new markets.
Plurals, Dates and Numbers
Different languages have different plural categories. English has two forms, while Polish and Arabic have several. Use the plural support in your library, or ICU MessageFormat, and format dates, currencies and numbers with the Intl APIs rather than manual string code. Test with real data in several locales, because decimal separators and date order change what users expect to see.
Testing a Localized React Native App
- Switch the device language on a simulator and a real phone and check that the app starts in the right language.
- Use pseudo-localization to expose truncation and hard-coded text. See pseudo-localization.
- Test right-to-left with Arabic or Hebrew, including icons, swipe directions and animations.
- Check long languages such as German and Finnish on small screens.
- Review screenshots per language before submitting to the stores.
For a full checklist, see our guide to localization testing.
Automate Translation Updates in Your Release Flow
Mobile teams release often, so translations must keep up with every sprint. Keep the English JSON file as the source, sync it with a translation platform, pre-translate with AI, and merge approved translations by pull request before each release. This removes the last-minute spreadsheet scramble and means new strings never ship untranslated. A software localization workflow with repository sync and branches handles the sync for you, and term base and glossary support keeps feature names consistent in every language.
Frequently Asked Questions
What is the best library for React Native localization?
Most teams combine expo-localization or react-native-localize for detection with i18next and react-i18next for translations.
Does React Native support right-to-left languages?
Yes. React Native can mirror layouts when RTL is enabled, but you must test icons, gestures and custom components yourself.
How do I translate my app store listing?
Localize the name, subtitle, description and screenshots in App Store Connect and Google Play Console, ideally from the same glossary as the app.
Localize Your Mobile App With WordBeam
WordBeam syncs JSON, ARB, XLIFF and string files, translates with AI engines and shows translators each string in context. See UI translations or start a free trial with 14 days and 10,000 words.