132 lines
3.5 KiB
Markdown
132 lines
3.5 KiB
Markdown
# 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
|