[Frontend] Add multi-language support (English, Sinhala, Tamil)

[MohamadNazik]

Description:

The mobile app currently has all UI strings hardcoded in English. There is no internationalization (i18n) framework or language selection mechanism available to users. Sri Lanka's three official/national languages — English, Sinhala (සිංහල), and Tamil (தமிழ்) — should all be supported, allowing users to switch their preferred language from within the app.

Current Behaviour

• All user-facing strings (button labels, navigation titles, profile fields, sign-in prompts, error messages, etc.) are hardcoded in English directly inside components.
• No i18n library is installed.
• No language selector exists anywhere in the app.
• The native bridge (utils/bridge.ts) does not expose the user's language preference to micro apps.

Expected Behaviour

• On initial launch, the app should present a language selection prompt asking the user to choose their preferred language (English, Sinhala, or Tamil) before proceeding to the main screen.
• Users should be able to change their preferred language later from the Profile/Settings screen.
• The app should re-render all UI text in the selected language.
• The selected language preference should be persisted across sessions (using AsyncStorage or expo-secure-store).
• The selected language preference should be passed to micro apps through the native bridge, so micro apps can also render their content in the user's preferred language.

---

Implementation Guidance

1. Install i18n Dependencies

Install an i18n library compatible with React Native / Expo:

• i18next + react-i18next
• expo-localization (for detecting device locale on initial launch)

2. Create Translation Files

Add a frontend/locales/ directory with JSON translation files:

frontend/locales/
├── en.json    # English (default)
├── si.json    # Sinhala (සිංහල)
└── ta.json    # Tamil (தமிழ்)

3. Initialize i18n

Create frontend/utils/i18n.ts to configure i18next with:

• Fallback language: en
• Detection of device locale via expo-localization as a hint for the initial prompt
• Lazy loading of translation bundles

4. First-Launch Language Selection Prompt

• On the very first launch (no persisted preference found), display a full-screen language selection screen before the user reaches the home screen.
• This screen should present the three language options clearly:
  • 🇬🇧 English
  • 🇱🇰 සිංහල (Sinhala)
  • 🇱🇰 தமிழ் (Tamil)
• The selected language should be persisted immediately and the app should proceed with that language applied.
• This prompt should only appear once (on first launch). Subsequent launches should use the persisted preference.

5. Add a Language Selector to Profile/Settings

Add a language picker on the Profile screen (frontend/app/(tabs)/profile.tsx) so users can change their language at any time after the initial setup.

6. Persist Language Preference

Store the selected language in AsyncStorage or the existing Redux store with redux-persist so it survives app restarts.

7. Expose Language Preference via Native Bridge

The app uses a native bridge (utils/bridge.ts + utils/bridgeHandlers/) to communicate with micro apps loaded in WebViews. The user's selected language preference must be made available to micro apps through this bridge so they can also implement multi-language support. This can be done by:

• Adding a new bridge handler (e.g., utils/bridgeHandlers/languagePreference.ts) that micro apps can call via window.nativebridge.requestLanguagePreference() to retrieve the current language code (en, si, or ta).
• Registering it in the BRIDGE_REGISTRY (utils/bridgeHandlers/index.ts) alongside existing handlers like token, deviceSafeAreaInsets, etc.
• The resolved language value will automatically be persisted in the WebView's window.nativeLanguagePreference global variable (via the existing bridge pattern in bridge.ts), allowing micro apps to access it even after page navigations.

This will enable micro app developers to read the language preference and render their own content in the matching language.

8. Extract All Hardcoded Strings

Replace all hardcoded English strings across these screens and components with translation keys (t('key')):

Screens:

• app/(tabs)/index.tsx — Home screen
• app/(tabs)/profile.tsx — Profile / Settings
• app/(tabs)/apps/store.tsx — App Store
• app/login.tsx — Login screen
• app/update.tsx — Update screen
• app/micro-app.tsx — Micro App screen (error messages, header text)
• app/+not-found.tsx — Not Found screen

Components:

• SignInMessage.tsx, SignInModal.tsx, SearchBar.tsx, ProfileListItem.tsx, NotFound.tsx, CameraPermission.tsx, SyncingModal.tsx, Scanner.tsx, and any other component with user-facing text.

---

Related Issues:

• [SuperAppAdminPortal] Add multi-language support (English, Sinhala, Tamil) #90