{"id":452698,"date":"2025-03-22T03:00:12","date_gmt":"2025-03-22T03:00:12","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=452698"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=452698","title":{"rendered":"A React Native & Lynx i18n solution that keeps your translations organized<\/span>"},"content":{"rendered":"
<\/div>\n
\n
\n
\n
\n

If you\u2019re building a multilingual React Native (or web) app, you\u2019ve probably tried react-i18next, i18n-js, LinguiJS, or similar libraries.<\/p>\n

But in every project, the same issues come up:<\/p>\n

\u274c Unused key-value pairs are never removed
\u274c Content gets duplicated
\u274c Ensuring format consistency across languages is painful
\u274c i18next doesn\u2019t generate TypeScript types by default \u2013 so t(«my.key») won\u2019t throw even if it\u2019s been deleted
\u274c Localization platforms like Lokalise or Locize get expensive fast<\/p>\n

Frustrated by these challenges, I waited for a better solution… then decided to build one myself: Intlayer<\/strong><\/a>.<\/p>\n

\u2728 Key points<\/h3>\n

\u2705 Works with React Native<\/strong> and Lynx<\/strong>
\u2705 Easy integration
\u2705 Localized content close to your components<\/strong>
\u2705 Autogenerated TypeScript types<\/strong>
\u2705 Define content in JSON, JS, or TS
\u2705 Embed external files<\/strong> (Markdown, TXT…)
\u2705 Fetch and type remote content instantly
\u2705 Native CMS compatibility for editing content externally<\/p>\n

\u26a1 Getting Started (React Native)<\/h3>\n

1\ufe0f\u20e3 Install<\/h4>\n
npm install intlayer react-intlayer react-native-intlayer<\/code><\/pre>\n
2\ufe0f\u20e3 Configure Locales<\/h4>\n
Create intlayer.config.ts<\/code> at the root:<\/p>\n
import { Locales, type IntlayerConfig } from \"intlayer\";  const config: IntlayerConfig = {   internationalization: {     locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],     defaultLocale: Locales.ENGLISH,   }, };  export default config;<\/code><\/pre>\n
3\ufe0f\u20e3 Add Metro Support<\/h4>\n
In metro.config.js<\/code>:<\/p>\n
const { getDefaultConfig } = require(\"expo\/metro-config\"); const { configMetroIntlayer } = require(\"react-native-intlayer\/metro\");  module.exports = (async () => {   const defaultConfig = getDefaultConfig(__dirname);   return await configMetroIntlayer(defaultConfig); })();<\/code><\/pre>\n
4\ufe0f\u20e3 Wrap Your App<\/h4>\n
In _layout.tsx<\/code>:<\/p>\n
import { Stack } from \"expo-router\"; import { getLocales } from \"expo-localization\"; import { IntlayerProviderContent } from \"react-intlayer\"; import { intlayerPolyfill } from \"react-native-intlayer\";  intlayerPolyfill();  const RootLayout = () => {   return (     <IntlayerProviderContent defaultLocale={getLocales()[0]?.languageTag}>       <Stack>         <Stack.Screen name=\"(tabs)\" \/>       <\/Stack>     <\/IntlayerProviderContent>   ); };  export default RootLayout;<\/code><\/pre>\n
5\ufe0f\u20e3 Define Localized Content by Component<\/h4>\n
Keep translations close to your UI:<\/p>\n
import { t, md, file, type Dictionary } from \"intlayer\";  const homeScreenContent = {   key: \"home-screen\",   content: {     title: t({       en: \"My Title\",       fr: \"Mon titre\",       es: \"Mi t\u00edtulo\",     }),     description: t({       en: md(file(\".\/myDescription.en.md\")),       fr: md(file(\".\/myDescription.fr.md\")),       es: md(file(\".\/myDescription.es.md\")),     }),     contentFetch: fetch(\"https:\/\/example.com\").then((res) => res.text()),   }, } satisfies Dictionary;  export default homeScreenContent;<\/code><\/pre>\n
Then use them like this:<\/p>\n
import { Text, View } from \"react-native\"; import { useIntlayer } from \"react-intlayer\";  const MyComponent = () => {   const { title, description, contentFetch } = useIntlayer(\"my-component\");    return (     <View>       <Text>{title}<\/Text>       <Text>{description}<\/Text>       <Text>{contentFetch}<\/Text>     <\/View>   ); }; <\/code><\/pre>\n
\ud83d\udd04 Switch Languages at Runtime<\/h3>\n
import { View, Text, TouchableOpacity } from \"react-native\"; import { getLocaleName } from \"intlayer\"; import { useLocale } from \"react-intlayer\";  const LocaleSwitcher = () => {   const { setLocale, availableLocales } = useLocale();    return (     <View>       {availableLocales.map((locale) => (         <TouchableOpacity key={locale} onPress={() => setLocale(locale)}>           <Text>{getLocaleName(locale)}<\/Text>         <\/TouchableOpacity>       ))}     <\/View>   ); };  export default LocaleSwitcher;<\/code><\/pre>\n
\ud83d\udcda Resources<\/h3>\n