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/expo-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/expo-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>
  );
}

Interpolation

Pass a second argument to translate to substitute variables into the translation string:

// en.json
{ "welcome": "Welcome to {{appName}}" }

translate('welcome', { appName: 'Multinaire UI' })
// → "Welcome to Multinaire UI"

The options object is typed as Record<string, unknown> and forwarded directly to i18next, so all standard i18next interpolation features (plurals, formatting, etc.) work out of the box.

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
5. Use NotoSans as your UI font family when targeting multilingual apps — it automatically loads the correct glyph set for my and th locales

Advanced Usage

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