Internationalization (i18n)
Relevant source files
The following files were used as context for generating this wiki page:The internationalization (i18n) system in the aidoit4u-mobile-app provides multi-language support to create a localized user experience. The system is built using React's Context API to manage and distribute the currently selected language and translation strings throughout the application. It is designed to be straightforward, with a central translation file and a custom hook for easy consumption within components.
Currently, the application supports three languages: English (EN), Spanish (ES), and German (DE). The implementation covers all primary screens, including Home, Analyze, Generate, Chat, and Documents. Future work includes persisting the user's language preference to AsyncStorage.
Sources: lib/translations.ts:3, lib/language-context.tsx, todo.md:65-72
Architecture Overview
The i18n architecture is centered around a LanguageProvider that wraps the application's component tree. This provider holds the state for the current language. Components within this tree can then use the useLanguage hook to access the current language and a translation function. The translation function retrieves the appropriate string from a centralized translations object based on the current language and a given key.
The following diagram illustrates the data flow from the provider to a consumer component.
Core Components
Translation Data
All UI text strings are stored in a single translations object within lib/translations.ts. This object is structured by language code, with each language containing a key-value map of translation keys to their corresponding strings.
Supported Languages
The system supports the following languages, defined by the Language type:
| Language Code | Description |
|---|---|
ES | Spanish |
EN | English |
DE | German |
Sources: lib/translations.ts:1
Data Structure
The translations object has a nested structure. The top-level keys are the language codes (ES, EN, DE). Each language object contains identical keys, but with translated string values.
// lib/translations.ts:3-10
export const translations = {
ES: {
// Navigation & Headers
home: "Inicio",
documents: "Documentos",
settings: "Configuración",
analyzeDocument: "Analizar Documento",
// ... more keys
},
EN: {
// ... same keys, English values
},
DE: {
// ... same keys, German values
}
};
Sources: lib/translations.ts:3-401
Language Context and Provider
The LanguageContext is the core of the state management for i18n. It is created using React.createContext and provides the current language state and a function to update it.
The LanguageProvider is a wrapper component that uses useState to manage the language state, defaulting to 'EN'. It passes the current language and the setLanguage function down to its children via the LanguageContext.Provider. The project plan includes enhancing this provider to persist the selected language to AsyncStorage.
// lib/language-context.tsx:11-23
export const LanguageProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
const [language, setLanguage] = useState<Language>("EN");
// TODO: Load language from AsyncStorage on mount
// TODO: Save language to AsyncStorage on change
const value = {
language,
setLanguage,
};
return <LanguageContext.Provider value={value}>{children}</LanguageContext.Provider>;
};
Sources: lib/language-context.tsx:5-25, todo.md:72
Translation Retrieval
getTranslation Function
This utility function is the primary mechanism for retrieving a translated string. It takes a language code and a translation key, and returns the corresponding string from the translations object. If a key is not found for the given language, it falls back to returning the key itself.
// lib/translations.ts:403-405
export function getTranslation(language: Language, key: keyof typeof translations.EN): string {
return translations[language][key] || key;
}
Sources: lib/translations.ts:403-405
useLanguage Hook
This custom hook provides a simple interface for components to access the language context. It is a wrapper around React.useContext(LanguageContext).
// lib/language-context.tsx:27-32
export const useLanguage = () => {
const context = useContext(LanguageContext);
if (context === undefined) {
throw new Error("useLanguage must be used within a LanguageProvider");
}
return context;
};
Sources: lib/language-context.tsx:27-32
Usage in Components
To use the i18n system, a component must be a descendant of LanguageProvider. Inside the component, the useLanguage hook is called to get the current language. A helper function, typically named t, is then defined to simplify calls to getTranslation.
The following sequence diagram shows the process of a component rendering a translated text element.
Example: HomeScreen
The HomeScreen component demonstrates a typical implementation. It retrieves the current language via useLanguage and defines a t function to translate keys. This function is then used directly in the JSX to render text.
// app/(tabs)/index.tsx:14-18
export default function HomeScreen() {
const router = useRouter();
const { language } = useLanguage();
const t = (key: string) => getTranslation(language, key as keyof typeof translations.EN);
// ...
return (
<ScreenContainer className="p-6">
<ScrollView contentContainerStyle={{ flexGrow: 1 }} showsVerticalScrollIndicator={false}>
<View className="flex-1 gap-6">
{/* Header */}
<View className="items-center gap-2">
<Text className="text-4xl font-bold text-foreground">Legal AI</Text>
<Text className="text-base text-muted text-center">
{t("professionalLegalAnalysis" as any)}
</Text>
</View>
{/* ... more translated text */}
</View>
</ScrollView>
</ScreenContainer>
);
}
This pattern is repeated across all major screens, such as AnalyzeScreen, DocumentsScreen, and GenerateScreen, ensuring a consistent, translated user interface.
Sources: app/(tabs)/index.tsx:15-16, 28, app/(tabs)/analyze.tsx:15, 71, app/(tabs)/documents.tsx:15, 41
Summary
The internationalization system is a core feature that enables the app to serve users in multiple languages. It leverages standard React patterns (Context, Hooks) for a clean and scalable implementation. The centralized translation file makes it easy to add or update strings, and the useLanguage hook provides a simple API for components to consume translations. The planned addition of language persistence will further improve the user experience by remembering the user's preference across sessions.