useUiTranslation

Installation

pnpm dlx @docyrus/cli add @docyrus/rn-hooks-use-ui-translation

The module exports useUiTranslation() (hook), <UiTranslationProvider> (provider) and UiTranslationContext. It has no runtime dependencies; the translation function comes from your app's i18n library.

Overview

Docyrus native components never ship per-language message maps. Each user-facing string is read through t(key, englishFallback):

• No provider mounted: t returns the English fallback. Nothing crashes.
• <UiTranslationProvider t={…}> mounted: t forwards to your i18n library. If your catalog has no entry for the key, the library's default-value behaviour returns the English fallback.

Keys follow the web convention ui.<group>.<camelCaseKey> (e.g. ui.calendar.addEvent, ui.dataGrid.filter). One translation catalog therefore covers both @docyrus/ui and @docyrus/ui-native.

Precedence inside a component: an explicit prop (label, messages, …) first, then the provider's t(key), then the English fallback.

Usage

Wire your i18n library once

import { useTranslation } from 'react-i18next';

import { UiTranslationProvider } from '@/hooks/docyrus-native/use-ui-translation';

export function AppProviders({ children }: { children: React.ReactNode }) {
  const { t } = useTranslation();

  return <UiTranslationProvider t={t}>{children}</UiTranslationProvider>;
}

Read translations in a component

import { Text } from 'react-native';

import { useUiTranslation } from '@/hooks/docyrus-native/use-ui-translation';

export function EmptyInbox() {
  const { t } = useUiTranslation();

  return <Text>{t('ui.inbox.empty', 'No messages yet')}</Text>;
}

Component keys

Every native component reads its built-in copy through useUiTranslation(); the legacy useNativeI18n helper, its embedded en / tr maps and the DocyThemeProvider.messages['<namespace>.<key>'] lookup have been removed. Provide translations for the keys listed on each component page (for example ui.alertDialog.confirm, ui.emptyState.searchTitle, ui.common.cancel) through <UiTranslationProvider>. An explicit prop (confirmText, cancelLabel, emptyMessage, …) always wins over the translated value.

API Reference

useUiTranslation()

Takes no parameters.

Returns: { t: TranslateFn }

<UiTranslationProvider>

UiTranslationContext

The raw React context ({ t: TranslateFn } \| null). It is null when no provider is mounted. Components normally use useUiTranslation() instead.

Type Exports