[WIP] Add multi-language support for internationalization

[Copilot]

Multi-Language Support (Internationalization/i18n) Implementation Plan

Current Status

• Explore repository structure
• Verify i18n dependencies (i18next, react-i18next, react-native-localize) are installed
• Confirm existing i18n infrastructure (i18n.ts, useRTL.ts, localization config)
• Verify language selector UI component exists
• Analyze existing translations (5 languages: en, es, fr, si, ar)

Implementation Plan

Phase 1: Add Missing Languages

• Create missing locale files (de.json, ja.json, zh-Hans.json, hi.json)
• Update localizationConfig.ts with all 9 languages
• Enable Arabic (currently commented out)
• Update i18n.ts to import new language files

Phase 2: Update Configuration

• Add locale mappings for new languages in getLocaleForFormatting
• Verify RTL support configuration for Arabic

Phase 3: Testing & Validation

• Test language switching for all 9 languages
• Verify RTL layout for Arabic
• Test date/time/number formatting for each locale
• Verify language persistence after app restart
• Check for text truncation and special character rendering

Phase 4: Final Review

• Run linter to ensure code quality
• Request code review
• Run security scan with CodeQL
• Document changes and create final summary

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Feature: Add Multi-Language Support (Internationalization/i18n)</issue_title>
<issue_description>## 🌍 Feature Description

Implement comprehensive internationalization (i18n) support to make TipMate available in multiple languages. Currently, the app only supports English with hardcoded strings throughout the codebase. This feature will enable users from different regions to use the app in their preferred language.

📊 Current State

The app currently:

• ✅ Has 30+ supported currencies with proper localization for number formatting
• ✅ Uses some locale-specific formatting (date, time) with hardcoded 'en-US' locale
• ✅ Android manifest has android:supportsRtl="true" configured
• ❌ All UI text is hardcoded in English
• ❌ No i18n library integrated
• ❌ No language selection interface
• ❌ No React Native I18nManager usage for RTL layout control

🎯 Languages to Support (Phase 1)

1. English (en) - Default
2. Spanish (es)
3. French (fr)
4. German (de)
5. Japanese (ja)
6. Chinese Simplified (zh-Hans)
7. Indian Hindi (hi)
8. Sinhala (si) 🆕
9. Arabic (ar) 🆕 - RTL Language

Additional languages in Phase 2 based on user demand.

✨ Implementation Scope

1. i18n Library Integration

• Use i18next with react-i18next for flexibility and ecosystem
• Add react-native-localize for device locale detection
• Set up translation files structure (JSON format)
• Implement language detection based on device locale
• Manual language selection in settings

2. RTL (Right-to-Left) Language Support 🆕

• Implement React Native I18nManager for RTL layout control
• Create useRTL hook to manage RTL state
• Auto-detect RTL languages (Arabic, Hebrew, etc.)
• Force RTL layout when Arabic is selected
• Handle app restart requirement for layout direction changes
• Update styles to be RTL-aware using react-native-unistyles

3. Translation Strings to Localize

All text from:

• app/screens/TipScreens/HomeTipScreen.tsx
• app/screens/TipScreens/SavedTipsScreen.tsx
• app/screens/TipScreens/SavedTipDetailScreen.tsx
• app/screens/TipScreens/SettingsScreen.tsx
• app/screens/AppInfoScreens/*
• app/components/* (all Styled components)
• Alert messages in hooks
• Buttons, labels, placeholders, tooltips
• Toast messages
• Navigation labels

4. Settings Integration

• Add "Language" option in Settings Screen
• Language dropdown/picker component
• Save selected language to AsyncStorage
• Persist user language preference
• Apply language change without app restart (except for RTL changes)
• Show restart prompt when switching to/from RTL languages

5. Date & Time Localization

• Replace hardcoded 'en-US' locale with device/selected locale
• Format dates according to selected language/region
• Time format localization (12/24 hour format based on region)

6. Number Formatting

• Integrate with selected locale for decimal separators
• Thousands separators based on language
• Already partially supported via currency configuration

📁 Proposed File Structure

app/
  localization/
    i18n.ts                 # i18next configuration
    useTranslation.ts       # Custom hook wrapper
    useRTL.ts               # RTL management hook 🆕
    locales/
      en.json               # English translations
      es.json               # Spanish translations
      fr.json               # French translations
      de.json               # German translations
      ja.json               # Japanese translations
      zh-Hans.json          # Chinese Simplified translations
      hi.json               # Hindi translations
      si.json               # Sinhala translations 🆕
      ar.json               # Arabic translations 🆕 (RTL)
  configs/
    localizationConfig.ts   # Language configuration

📝 Translation Keys Structure

Example structure for translation files:

{
  "common": {
    "save": "Save",
    "delete": "Delete",
    "cancel": "Cancel",
    "close": "Close",
    "reset": "Reset",
    "confirm": "Confirm"
  },
  "screens": {
    "home": {
      "title": "TipMate",
      "tagline": "Smart Tips, Easy Living",
      "billAmount": "Bill Amount",
      "selectTip": "Select Tip",
      "totalCost": "Total Cost",
      "roundTotal": "Round Total",
      "splitCount": "Split Count"
    },
    "savedTips": {
      "title": "Tip Summary",
      "subtitle": "Quick search and review",
      "noTips": "No saved tips yet"
    },
    "settings": {
      "title": "Settings & Preferences",
      "language": "Language",
      "theme": "Theme",
      "customiseTips": "Customise Your Tips",
      "darkMode": "Toggle Dark Mode"
    }
  },
  "messages": {
    "success": "Success",
    "error": "Error",
    "confirmReset": "Confirm Reset",
    "restartRequired": "App restart required to apply RTL layout changes"
  }
}

🔧 Technical Implementation

Dependencies to Add

</details>



<!-- START COPILOT CODING AGENT SUFFIX -->

- Fixes DevinByteX/TipMate-ReactNative#35

<!-- START COPILOT CODING AGENT TIPS -->
---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our [2 minute survey](https://gh.io/copilot-coding-agent-survey).