feat(i18n-mobile): add bilingual support (Català / Castellano) for React Native app
Run Tests on Branches / Detect Changes (push) Successful in 13s
Run Tests on Branches / Backend Tests (push) Has been skipped
Run Tests on Branches / Frontend Tests (push) Successful in 1m40s
Run Tests on Branches / Frontend Mobile Tests (push) Successful in 1m37s
Run Tests on Branches / Parapharmacy API Tests (push) Has been skipped
Run Tests on Branches / PIP Platform Tests (push) Has been skipped

Add lightweight i18n system matching the web app architecture.
Language persisted in AsyncStorage('ff-lang').

New files:
- src/i18n/locales/ca.js (~190 translation keys)
- src/i18n/locales/es.js (~190 translation keys)
- src/i18n/LanguageContext.jsx (Provider + AsyncStorage)
- src/i18n/useTranslation.js (hook)
- src/i18n/index.js (barrel export)

Modified 16 files:
- app/_layout.tsx: wrap with LanguageProvider, translate stack titles
- app/(tabs)/_layout.tsx: translate tab bar labels
- app/(tabs)/index.tsx: translate home screen
- app/(tabs)/search.tsx: translate search screen
- app/(tabs)/alerts.tsx: translate alerts screen
- app/(tabs)/profile.tsx: translate profile + add language selector (CA/ES)
- app/(tabs)/scan.tsx: translate scanner screen
- app/auth/login.tsx: translate login/register
- app/medicine/[id].tsx: translate medicine detail
- app/pharmacy/[id].tsx: translate pharmacy detail
- app/product/[source]/[id].tsx: translate product detail
- 5 components: MedicineCard, StockBadge, SearchBar, LoadingSpinner, BarcodeScanner

Language selector in Profile screen (globe icon + CA/ES toggle).
No routes changed. No API calls affected.
This commit is contained in:
Antoni Nuñez Romeu
2026-07-17 10:22:14 +02:00
parent d12c575fcf
commit ee958d4525
21 changed files with 771 additions and 198 deletions
@@ -3,6 +3,7 @@ import { View, TextInput, StyleSheet, TouchableOpacity, useWindowDimensions } fr
import { Ionicons } from '@expo/vector-icons';
import { useThemeContext } from './ThemeProvider';
import { spacing, borderRadius } from '../constants/theme';
import { useTranslation } from '../src/i18n';
const TABLET_MIN_WIDTH = 768;
@@ -14,7 +15,7 @@ interface SearchBarProps {
}
export function SearchBar({
placeholder = 'Buscar medicamentos...',
placeholder,
onSearch,
value,
onChangeText
@@ -22,6 +23,7 @@ export function SearchBar({
const { width } = useWindowDimensions();
const isTablet = width >= TABLET_MIN_WIDTH;
const { colors } = useThemeContext();
const { t } = useTranslation();
const [localValue, setLocalValue] = useState(value || '');
const handleChange = (text: string) => {
@@ -44,7 +46,7 @@ export function SearchBar({
<Ionicons name="search" size={20} color={colors.textSecondary} style={styles.icon} />
<TextInput
style={[styles.input, isTablet && styles.inputTablet, { color: colors.text }]}
placeholder={placeholder}
placeholder={placeholder ?? t('search.placeholder')}
placeholderTextColor={colors.textSecondary}
value={localValue}
onChangeText={handleChange}