Translations (i18n)

Localize all UI text to support multiple languages.

Quick Start

import { OTAUpdatesProvider } from '@ddedic/expo-fancy-ota-updates';

<OTAUpdatesProvider
  translations={{
    banner: {
      updateAvailable: 'Neue Version verfügbar',
      updateButton: 'Aktualisieren',
    },
  }}
>

Translation Structure

interface OTATranslations {
  banner: {
    updateAvailable: string;
    updateReady: string;
    downloading: string;
    versionAvailable: string;
    restartToApply: string;
    updateButton: string;
    restartButton: string;
  };
  infoScreen: {
    title: string;
    statusTitle: string;
    embeddedBuild: string;
    otaUpdate: string;
    runtimeVersion: string;
    otaVersion: string;
    releaseDate: string;
    updateId: string;
    channel: string;
    whatsNew: string;
    checkForUpdates: string;
    downloadUpdate: string;
    reloadApp: string;
    debugTitle: string;
    simulateUpdate: string;
    devMode: string;
    notAvailable: string;
    none: string;
  };
}

Default Translations (English)

import { defaultTranslations } from '@ddedic/expo-fancy-ota-updates';

// All defaults are in English
<OTAUpdatesProvider translations={defaultTranslations}>

Partial Translations

You only need to specify the strings you want to change:

<OTAUpdatesProvider
  translations={{
    banner: {
      updateButton: 'Update Now!',
    },
  }}
>

The rest will use English defaults.

Complete Examples

German

const germanTranslations = {
  banner: {
    updateAvailable: 'Update verfügbar',
    updateReady: 'Update bereit',
    downloading: 'Wird heruntergeladen...',
    versionAvailable: 'Eine neue Version ist verfügbar',
    restartToApply: 'Neustart zum Anwenden',
    updateButton: 'Aktualisieren',
    restartButton: 'Neustart',
  },
  infoScreen: {
    title: 'OTA Updates',
    statusTitle: 'Status',
    embeddedBuild: 'Eingebetteter Build',
    otaUpdate: 'OTA Update',
    runtimeVersion: 'Runtime Version',
    otaVersion: 'OTA Version',
    releaseDate: 'Veröffentlichungsdatum',
    updateId: 'Update ID',
    channel: 'Kanal',
    whatsNew: 'Was ist neu',
    checkForUpdates: 'Nach Updates suchen',
    downloadUpdate: 'Update herunterladen',
    reloadApp: 'App neu laden',
    debugTitle: 'Debug',
    simulateUpdate: 'Update simulieren',
    devMode: 'Entwicklungsmodus',
    notAvailable: 'Nicht verfügbar',
    none: 'Keine',
  },
};

<OTAUpdatesProvider translations={germanTranslations}>

Spanish

const spanishTranslations = {
  banner: {
    updateAvailable: 'Actualización disponible',
    updateReady: 'Actualización lista',
    downloading: 'Descargando...',
    versionAvailable: 'Una nueva versión está disponible',
    restartToApply: 'Reiniciar para aplicar',
    updateButton: 'Actualizar',
    restartButton: 'Reiniciar',
  },
  infoScreen: {
    title: 'Actualizaciones OTA',
    checkForUpdates: 'Buscar actualizaciones',
    downloadUpdate: 'Descargar actualización',
    reloadApp: 'Recargar aplicación',
    // ... rest of translations
  },
};

French

const frenchTranslations = {
  banner: {
    updateAvailable: 'Mise à jour disponible',
    updateReady: 'Mise à jour prête',
    downloading: 'Téléchargement...',
    versionAvailable: 'Une nouvelle version est disponible',
    restartToApply: 'Redémarrer pour appliquer',
    updateButton: 'Mettre à jour',
    restartButton: 'Redémarrer',
  },
  // ... rest of translations
};

Dynamic Translations

With react-i18next

import { useTranslation } from 'react-i18next';

function App() {
  const { t } = useTranslation('ota');
  
  return (
    <OTAUpdatesProvider
      translations={{
        banner: {
          updateAvailable: t('banner.updateAvailable'),
          updateButton: t('banner.updateButton'),
          // ... map all strings
        },
        infoScreen: {
          title: t('infoScreen.title'),
          // ... map all strings
        },
      }}
    >
      <YourApp />
    </OTAUpdatesProvider>
  );
}

With expo-localization

import * as Localization from 'expo-localization';

const translations = {
  en: englishTranslations,
  de: germanTranslations,
  es: spanishTranslations,
  fr: frenchTranslations,
};

function App() {
  const locale = Localization.locale.split('-')[0]; // 'en', 'de', etc.
  const currentTranslations = translations[locale] || translations.en;
  
  return (
    <OTAUpdatesProvider translations={currentTranslations}>
      <YourApp />
    </OTAUpdatesProvider>
  );
}

With Context

import { useLanguage } from './LanguageContext';

function App() {
  const { language, translations } = useLanguage();
  
  return (
    <OTAUpdatesProvider translations={translations.ota}>
      <YourApp />
    </OTAUpdatesProvider>
  );
}

Translation Keys Reference

Banner Translations

Key	Default (EN)	Usage
updateAvailable	"Update Available"	Banner title when update found
updateReady	"Update Ready"	Banner title when downloaded
downloading	"Downloading..."	Banner title while downloading
versionAvailable	"A new version is available"	Banner description
restartToApply	"Restart to apply"	Banner description when ready
updateButton	"Update"	Download button
restartButton	"Restart"	Restart button

Info Screen Translations

Key	Default (EN)	Usage
title	"OTA Updates"	Screen title
statusTitle	"Status"	Status section title
checkForUpdates	"Check for Updates"	Check button
downloadUpdate	"Download Update"	Download button
reloadApp	"Reload App"	Reload button
whatsNew	"What's New"	Changelog section title

Best Practices

1. Use Partial Translations — Only override what you need
2. Keep Strings Short — Especially for buttons
3. Test All Languages — Ensure text fits in UI
4. Use Placeholders — For dynamic content (if needed)
5. Maintain Consistency — Use same terms across app

Next Steps

• Theming Guide →
• Hooks System →
• Complete Workflow →