Internationalization (i18n) Implementation

Overview

The Pennyzo app now supports multiple Indian languages with a complete internationalization system using react-i18next.

Supported Languages

English - English
Hindi - हिन्दी
Bengali - বাংলা
Telugu - తెలుగు
Marathi - मराठी
Tamil - தமிழ்
Gujarati - ગુજરાતી
Kannada - ಕನ್ನಡ
Malayalam - മലയാളം
Punjabi - ਪੰਜਾਬੀ

Features

✅ Complete A-Z translation for all supported languages
✅ Language persistence using AsyncStorage
✅ Beautiful language selector modal with native names
✅ Instant language switching without app restart
✅ Blurred background image for aesthetic appeal
✅ Language button with translate icon in the header

File Structure

src/
├── i18n/
│   ├── config.ts              # i18n initialization and configuration
│   ├── languages.ts           # Language definitions
│   └── locales/
│       ├── en.ts             # English translations
│       ├── hi.ts             # Hindi translations
│       ├── bn.ts             # Bengali translations
│       ├── te.ts             # Telugu translations
│       ├── mr.ts             # Marathi translations
│       ├── ta.ts             # Tamil translations
│       ├── gu.ts             # Gujarati translations
│       ├── kn.ts             # Kannada translations
│       ├── ml.ts             # Malayalam translations
│       └── pa.ts             # Punjabi translations
└── components/
    └── LanguageSelector.tsx   # Language selection modal

Usage

In Components

Use the useTranslation hook to access translations:

import { useTranslation } from 'react-i18next';

export const MyComponent: React.FC = () => {
  const { t } = useTranslation();

  return <Text>{t('home')}</Text>;
};

Adding New Translations

Add the key-value pair to all locale files in src/i18n/locales/
Use the translation key with the t() function

Example:

// In en.ts
export const en = {
  translation: {
    newKey: 'New Text',
  },
};

// In hi.ts
export const hi = {
  translation: {
    newKey: 'नया पाठ',
  },
};

// In component
<Text>{t('newKey')}</Text>;

Background Image Implementation

The app features a blurred background image (bg pennyzo.png) with:

blurRadius={10} for aesthetic blur effect
Semi-transparent overlay (rgba(0, 0, 0, 0.5)) for better text readability
Full screen coverage with resizeMode="cover"
Transparent Screen component to show background

Language Selector Component

Located in src/components/LanguageSelector.tsx:

Modal-based selection
Shows both English and native names
Visual indicator for selected language
Automatic save to AsyncStorage
Smooth transition after selection

Dependencies

i18next - Core i18n framework
react-i18next - React bindings
@react-native-async-storage/async-storage - Persistent storage

Testing

Open the app
Tap the translate icon in the header
Select any language from the list
Observe all text content changes instantly
Restart the app - language preference is persisted

Future Enhancements

Add more regional languages (Odia, Assamese, etc.)
RTL support for Urdu
Voice-based language selection
Auto-detect system language

3.5 KiB Raw Blame History