In this lesson, you will learn how to design your React Native application to support multiple languages and regional formats so your app feels native to users around the globe.
The Foundation: i18n vs. l10n
Internationalization (i18n) is the process of preparing your code so it can support multiple languages, while Localization (l10n) is the actual act of adapting your app to a specific locale. In a professional workflow, you never want to hardcode strings like "Hello World" directly into your UI components.
Abstracting Your Strings
To scale your app, you should move all text into external JSON files. Instead of writing Text components with literal strings, you create a translation map. Your directory structure should look something like this:
/locales
/en
common.json // {"greeting": "Hello"}
/es
common.json // {"greeting": "Hola"}
By abstracting these, you separate the content from the logic. When your app needs to display a greeting, it looks up the greeting key based on the user's device settings. If you decide to add a third language, like French, you simply drop in a new JSON file without touching your component source code.
Handling Assets and Formatting
Scaling isn't just about text. You must also account for:
- Directionality: Some languages, like Arabic or Hebrew, are Right-to-Left (RTL). Ensure your layout logic uses flexbox defaults so the UI mirrors correctly.
- Number/Date Formats: "1,000.00" in the US is "1.000,00" in parts of Europe. Use built-in JavaScript tools like
Intl.NumberFormatto handle these regional display differences automatically. - Asset Swapping: If you have images containing text, define them in a manifest file so the app loads the correct version for the user’s region.
By treating strings as data rather than hardcoded UI elements, you ensure your app is modular and ready for a global audience from day one.
Key Takeaway: Never hardcode strings directly in your components; externalize all text into locale-specific JSON files to decouple your UI logic from your content.