# Internationalization (i18n) Implementation

## Overview

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

## Supported Languages

1. **English** - English
2. **Hindi** - हिन्दी
3. **Bengali** - বাংলা
4. **Telugu** - తెలుగు
5. **Marathi** - मराठी
6. **Tamil** - தமிழ்
7. **Gujarati** - ગુજરાતી
8. **Kannada** - ಕನ್ನಡ
9. **Malayalam** - മലയാളം
10. **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:

```tsx
import { useTranslation } from 'react-i18next';

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

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

### Adding New Translations

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

Example:

```typescript
// 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

1. Open the app
2. Tap the translate icon in the header
3. Select any language from the list
4. Observe all text content changes instantly
5. 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