useLocalization

Access localization functions for internationalization (i18n).

Usage

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

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

  return (
    <View>
      <Text>{translate('welcome')}</Text>
      <Text>Current: {language}</Text>
      <Button title="Español" onPress={() => changeLanguage('es')} />
    </View>
  );
}

Return Value

Property	Type	Description
language	Language	Current language code (e.g., 'en', 'es')
languages	Language[]	All supported locale codes derived from the translations prop
changeLanguage	(lang: Language) => void	Switch to a different language
translate	TFunction	i18next translation function

Translation Function

const { translate } = useLocalization();

// Simple key
translate('welcome') // "Welcome"

// Nested key
translate('buttons.submit') // "Submit"

// With interpolation
translate('greeting', { name: 'John' }) // "Hello, John!"

// With default value
translate('unknown.key', 'Default text')

Language Switching

const { changeLanguage } = useLocalization();

// Switch to Spanish
changeLanguage('es');

// Switch to English
changeLanguage('en');

Language preference is automatically persisted to AsyncStorage.

Language Picker

Use the languages array to build a language picker directly from the supported locales:

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

function LanguagePicker() {
  const { language, languages, changeLanguage } = useLocalization();

  const items = languages.map(code => ({ text: code.toUpperCase(), value: code }));

  return (
    <ListPicker
      selectedItem={language}
      items={items}
      onChange={changeLanguage}
    />
  );
}

Setup

See Localization Guide for setup instructions.