Over-the-air translation updates in React Native

Setup steps

1. 1

   Create a release

   In litei18n, commit your translations and create a release on the Releases page (Starter plan and above). Copy your project ID from the release URL shown there. Export your translations as JSON too, and add them to your app as the bundled copy.

2. 2

   Load the release when the app starts

   Install i18next and react-i18next. The bundled English file is the fallback, and loadLatest downloads a language and adds it to i18next. keySeparator is off because litei18n keys are flat names such as home.title.

   src/i18n.tsCopy

   import i18n from 'i18next';
   import { initReactI18next } from 'react-i18next';
   import en from './locales/en.json';
   
   const PROJECT_ID = 'YOUR_PROJECT_ID';
   const RELEASES =
     'https://ttksowxkfdohtprtfarf.supabase.co/storage/v1/object/public/releases/locales';
   
   i18n.use(initReactI18next).init({
     lng: 'en',
     fallbackLng: 'en',
     resources: { en: { translation: en } },
     keySeparator: false, // litei18n keys are flat: "home.title"
     interpolation: { escapeValue: false },
   });
   
   export async function loadLatest(locale: string) {
     try {
       const res = await fetch(`${RELEASES}/${PROJECT_ID}/latest/${locale}.json`);
       if (res.ok) {
         i18n.addResourceBundle(locale, 'translation', await res.json(), true, true);
       }
     } catch {
       // Offline: the bundled strings stay in place.
     }
     await i18n.changeLanguage(locale);
   }
   
   export default i18n;

3. 3

   Use the strings

   Use the useTranslation hook as usual, and call loadLatest once at startup with the user's language.

   src/App.tsxCopy

   import { useEffect } from 'react';
   import { Text } from 'react-native';
   import { useTranslation } from 'react-i18next';
   import { loadLatest } from './i18n';
   
   function Home() {
     const { t } = useTranslation();
     return <Text>{t('home.title')}</Text>;
   }
   
   export default function App() {
     useEffect(() => {
       loadLatest('es');
     }, []);
     return <Home />;
   }

4. 4

   Change text without a new build

   Edit a translation, commit it and create a new release. The latest URL now serves the new text, and your app picks it up the next time it loads translations. No new build, no app store review.