Skip to main content

Internationalization and RTL (React Native)

References: REGIONAL_PROFILE.md, SPEC.md NFR-PORT-002, MODULE_SHARED_STANDARDS.md.

The clinician Berry template does not apply to patient UI—layout and copy rules are here and in UI_UX_PATTERNS.md.


1. Phase 1 locales (mandatory)

Per REGIONAL_PROFILE.md §2:

LanguageDirectionLocale tag
EnglishLTRen
PashtoRTLps-AF
DariRTLfa-AF
Arabic (UAE)RTLar-AE

2. Libraries

  • i18next + react-i18next for string catalogs and namespaces (common, screens, errors).
  • Use ICU-style interpolation for values; avoid string concatenation for RTL-sensitive copy.

3. RTL layout

  • Call I18nManager.forceRTL(isRTL) (or Expo’s localization APIs) when locale changes; prefer restart or root remount if the runtime requires it for consistent layout on Android.
  • Use start / end margin and padding (React Native supports start/end in styles) instead of left/right for mirrored layouts.
  • Icons that imply direction (chevrons, back) SHOULD flip in RTL; symmetric icons need not.
  • Mixed-direction content: names in Arabic with Latin MRN or lab units MUST use Unicode bidirectional isolation or WritingDirection / android:layoutDirection where needed (REGIONAL_PROFILE.md §2 Rules).

4. Dates, times, calendars

  • Store UTC; display with locale-aware formatting (Intl.DateTimeFormat or dayjs/luxon with locale plugins).
  • Support Gregorian display by default; Islamic Hijri / Solar Hijri calendars when tenant configures (REGIONAL_PROFILE.md §3)—surface a calendar picker mode if product requires.

5. Numbers and currency


6. Language fallback chain

  1. Patient preferred language (from profile or app setting persisted server-side when available)
  2. Facility default
  3. Tenant default
  4. English en

7. Testing

  • Snapshot or Maestro flows for each RTL locale on at least one screen per major flow (login, home, booking, results).
  • Manual test: mixed LTR tokens inside RTL paragraphs (phone numbers, codes).

8. Accessibility and locale

Screen readers MUST read content in the active app language; ensure accessibilityLabel keys are translated, not English-only.