Features

Translations

Boost accessibility and reach a wider audience by translating your app into multiple languages.

This feature is implemented in the @kit/i18n package.

This feature is implemented in all the applications of the kit. By default, no setup is needed.

The following steps describe how to implement translations inside a new native application.

Setup

1. Installation


pnpm add '@kit/i18n@workspace:*'

2. Configuration file

Create a new file config/i18n.config.ts with the following content:

config/i18n.config.ts


import { parseI18nConfig } from '@kit/i18n/config';
import { DEFAULT_LANG, SUPPORTED_LANGS } from '@kit/i18n/defined-languages';
import enCommon from '../locales/en/common.json';
import frCommon from '../locales/fr/common.json';
import enAuth from '../../../kit/auth/src/i18n/locales/en/auth.json'
import frAuth from '../../../kit/auth/src/i18n/locales/fr/auth.json'
 
// Create a mapping object for all translations
// const translations: Record<string, Record<string, Record<string, string>>> = {
const translations = {
    en: {
        common: enCommon,
        auth: enAuth,
    },
    fr: {
        common: frCommon,
        auth: frAuth,
    },
};
 
async function i18nResolver(
    language: keyof typeof translations,
    namespace: string
): Promise<Record<string, string>> {
    // Default to English if the requested language is not available
    const lang = translations[language] ? language : 'en';
 
    // Default to common namespace if the requested namespace is not available
    const ns = (
        namespace in translations[lang] ? namespace : 'common'
    ) as keyof (typeof translations)[typeof lang];
 
    // @ts-ignore
    return translations[lang][ns];
}
 
export const i18nConfig = parseI18nConfig({
    defaultLanguage: DEFAULT_LANG,
    languages: SUPPORTED_LANGS,
    namespaces: ['common'],
    resolver: i18nResolver as (lang: string, namespace: string) => Promise<Record<string, string>>,
});

I18nConfig

Prop	Type	Default
`defaultLanguage*`	`string`
`languages*`	`string[]`
`namespaces`	`string[]`
`useRouting`	`boolean`	`false`
`resolver*`	`Resolver`

As described in the web translation doc you have to relatively import all the json translation files from the other packages.

3. Wrap the app with the I18nProvider

apps/layout.ts


import React from 'react';
import { getLocales } from 'expo-localization';
import { i18nConfig } from '~/config/i18n.config';
 
const locale = getLocales()[0];
if (!locale) {
    throw new Error('No locale found');
}
const lang = locale.languageCode;
 
export default function RootLayout({ children }: React.PropsWithChildren): Promise<React.JSX.Element> {
    return (
        <I18nProvider config={i18nConfig} lang={lang ?? undefined}>
            {children}
        </I18nProvider>
    );
}

Onboarding

Add an onboarding process after registration on your mobile app to collect more data on your new users.

Settings

Manage your application settings with ease.

How is this guide?

Last updated on 1/18/2026