Localization

Multinaire Design 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 { MultinaireDesignProvider } from '@multinaire/multinaire-design';
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 (
    <MultinaireDesignProvider translations={translations}>
      {/* Your app */}
    </MultinaireDesignProvider>
  );
}

Using Translations

Use the useMultinaireLocalization hook for translations:

import { useMultinaireLocalization } from '@multinaire/multinaire-design';

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

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

Language Persistence

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.