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
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:
@@ -14,6 +14,7 @@ import { useThemeContext } from '../../components/ThemeProvider';
|
||||
import { spacing, borderRadius } from '../../constants/theme';
|
||||
import { Medicine } from '../../types';
|
||||
import { config } from '../../constants/config';
|
||||
import { useTranslation } from '../../src/i18n';
|
||||
|
||||
const TABLET_MIN_WIDTH = 768;
|
||||
|
||||
@@ -25,6 +26,7 @@ const suggestions = [
|
||||
];
|
||||
|
||||
export default function SearchScreen() {
|
||||
const { t } = useTranslation();
|
||||
const { width } = useWindowDimensions();
|
||||
const isTablet = width >= TABLET_MIN_WIDTH;
|
||||
const { isAuthenticated } = useAuth();
|
||||
@@ -68,7 +70,7 @@ export default function SearchScreen() {
|
||||
const data = await searchMedicines(debouncedQuery);
|
||||
setResults(data);
|
||||
} catch (err) {
|
||||
setError('Error al buscar medicamentos');
|
||||
setError(t('search.error'));
|
||||
console.error(err);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
@@ -106,7 +108,7 @@ export default function SearchScreen() {
|
||||
{query.length >= 2 && (results.length + products.length) > 0 && (
|
||||
<View style={styles.resultsSummary}>
|
||||
<Text style={[styles.resultsSummaryText, { color: colors.textSecondary }]}>
|
||||
{results.length + products.length} resultados encontrados
|
||||
{results.length + products.length} {t('search.resultsFound')}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
@@ -114,7 +116,7 @@ export default function SearchScreen() {
|
||||
{showSuggestions && (
|
||||
<>
|
||||
<View style={[styles.suggestionsSection, isTablet && styles.suggestionsSectionTablet]}>
|
||||
<Text style={[styles.sectionTitle, { color: colors.text }]}>Sugerencias</Text>
|
||||
<Text style={[styles.sectionTitle, { color: colors.text }]}>{t('search.suggestions')}</Text>
|
||||
<View style={styles.suggestionsGrid}>
|
||||
{suggestions.map((s) => (
|
||||
<TouchableOpacity
|
||||
@@ -134,7 +136,7 @@ export default function SearchScreen() {
|
||||
|
||||
{isAuthenticated && recentSearches.length > 0 && (
|
||||
<View style={[styles.recentSection, isTablet && styles.recentSectionTablet]}>
|
||||
<Text style={[styles.sectionTitle, { color: colors.text }]}>Búsquedas recientes</Text>
|
||||
<Text style={[styles.sectionTitle, { color: colors.text }]}>{t('search.recentSearches')}</Text>
|
||||
{recentSearches.map((term) => (
|
||||
<TouchableOpacity
|
||||
key={term}
|
||||
@@ -154,7 +156,7 @@ export default function SearchScreen() {
|
||||
</>
|
||||
)}
|
||||
|
||||
{isLoading && <LoadingSpinner message="Buscando..." />}
|
||||
{isLoading && <LoadingSpinner message={t('search.loading')} />}
|
||||
|
||||
{error && (
|
||||
<View style={[styles.errorContainer, isTablet && styles.errorContainerTablet, { backgroundColor: colors.dangerContainer }]}>
|
||||
@@ -164,7 +166,7 @@ export default function SearchScreen() {
|
||||
|
||||
{!isLoading && !error && results.length === 0 && products.length === 0 && query.length >= 2 && (
|
||||
<View style={styles.emptyContainer}>
|
||||
<Text style={[styles.emptyText, { color: colors.textSecondary }]}>No se encontraron resultados</Text>
|
||||
<Text style={[styles.emptyText, { color: colors.textSecondary }]}>{t('search.noResults')}</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
@@ -176,7 +178,7 @@ export default function SearchScreen() {
|
||||
<>
|
||||
{products.length > 0 && (
|
||||
<View style={styles.section}>
|
||||
<Text style={[styles.sectionTitle, { color: colors.text }]}>Parafarmacia</Text>
|
||||
<Text style={[styles.sectionTitle, { color: colors.text }]}>{t('search.parapharmacy')}</Text>
|
||||
{products.map((product) => (
|
||||
<TouchableOpacity
|
||||
key={`${product.source}-${product.id || product._id}`}
|
||||
@@ -187,7 +189,7 @@ export default function SearchScreen() {
|
||||
<View style={styles.productInfo}>
|
||||
<View style={styles.badges}>
|
||||
<View style={[styles.sourceBadge, { backgroundColor: '#16a34a' }]}>
|
||||
<Text style={styles.badgeText}>Parafarmacia</Text>
|
||||
<Text style={styles.badgeText}>{t('search.parapharmacy')}</Text>
|
||||
</View>
|
||||
</View>
|
||||
<Text style={[styles.productName, { color: colors.text }]} numberOfLines={1}>{product.name}</Text>
|
||||
|
||||
Reference in New Issue
Block a user