Skip to Content
DocumentationGuidesInternationalization

Internationalization

The starter comes with a basic internationalization setup. It uses expo-localization  and i18next  to provide a simple way to translate your app.

Adding a new language

Mainly the demo app supports two languages: English and French. You can add more languages

  1. Adding the translation files in the translations folder (ex: ‘en-EN.json’) and adding the language code to the hooks/language/schema.ts file.
hooks/language/schema.ts
...
 
export const enum SupportedLanguages {
  EN_EN = 'en-EN',
  FR_FR = 'fr-FR',
}
 
export const languageSchema = z.enum([
  SupportedLanguages.EN_EN,
  SupportedLanguages.FR_FR,
]);
 
...
  1. Adding the translation resources in the translations/index.ts file.
translations/index.ts
...
// add the new language import
import en from "./en-EN.json";
 
export const resources = {
	// add the new language resource
  "en-EN": en,
  "fr-FR": fr,
} as const satisfies Record<Language, unknown>;

Using translations in your app

The i18n core module provides a set of utility functions to help you use translation in your app.

  • useTranslation hook from react-i18next: to get the translation function.
import React from 'react';
import { useTranslation } from 'react-i18next';
import { Text } from '@/components/ui';
export const Foo = () => {
  const { t } = useTranslation();
  return (
    <>
      <Text className="text-center">{t('settings.language')}</Text>
    </>
  );
};
  • useI18n hook: to change the current language.
const { changeLanguage } = useI18n();
{
  /* change language select */
}
<Select
  className='mt-4'
  onValueChange={(option) =>
    changeLanguage(option?.value as SupportedLanguages)
  }
>
  <SelectTrigger>
    <View className='flex-row items-center gap-2'>
      <Icon name='Languages' className='text-foreground' size={16} />
      <SelectValue className='text-foreground' placeholder='Change language' />
    </View>
  </SelectTrigger>
  <SelectContent>
    <SelectItem value='en-EN' label='English' />
    <SelectItem value='fr-FR' label='French' />
  </SelectContent>
</Select>;
Error TrackingNavigation