Localization

Multinaire UI includes built-in internationalization (i18n) support using i18next and react-i18next.

Creating Translation Files

Create JSON files for each language:

// assets/translations/en.json
{
  "welcome": "Welcome",
  "settings": "Settings",
  "theme": "Theme",
  "language": "Language",
  "buttons": {
    "submit": "Submit",
    "cancel": "Cancel"
  }
}

// assets/translations/es.json
{
  "welcome": "Bienvenido",
  "settings": "Configuración",
  "theme": "Tema",
  "language": "Idioma",
  "buttons": {
    "submit": "Enviar",
    "cancel": "Cancelar"
  }
}

Configure the Provider

import MultinaireUI from '@multinaire/ui';
import en from './assets/translations/en.json';
import es from './assets/translations/es.json';

const translations = {
  en: { translation: en },
  es: { translation: es },
};

export default function App() {
  return (
    <MultinaireUI translations={translations}>
      {/* Your app */}
    </MultinaireUI>
  );
}

Using Translations

Use the useLocalization hook for translations:

import { useLocalization } from '@multinaire/ui';

function MyComponent() {
  const { translate, language, changeLanguage } = useLocalization();

  return (
    <View>
      <Text>{translate('welcome')}</Text>
      <Text>{translate('buttons.submit')}</Text>

      <Text>Current language: {language}</Text>

      <Button
        title="Switch to Spanish"
        onPress={() => changeLanguage('es')}
      />
    </View>
  );
}

Default Language

Control the startup language with the defaultLanguage prop on MultinaireUI:

// Auto-detect: checks AsyncStorage first, then device locale, then first translation key (default)
<MultinaireUI translations={translations} defaultLanguage="auto">

// Hard-code a specific language (ignores stored preference)
<MultinaireUI translations={translations} defaultLanguage="fr">

Language Persistence

When defaultLanguage is 'auto' (the default), the selected language is automatically persisted to AsyncStorage. When the app restarts, the user's language preference is restored.

Best Practices

1. Use nested keys for organization: screens.home.title, buttons.submit
2. Keep translation files in sync across languages
3. Use interpolation for dynamic values: translate('greeting', { name: 'John' })
4. Provide fallback text for missing translations

Advanced Usage

For advanced i18next features (pluralization, interpolation, namespaces), refer to the i18next documentation.