feat(i18n): add internationalization with i18next and expo-localization

This commit is contained in:
2026-08-08 10:09:30 +02:00
parent 408a2fa10c
commit 9946e78858
81 changed files with 1820 additions and 125 deletions
@@ -1,5 +1,6 @@
import { useEffect, useState } from "react";
import { View, Text, Pressable } from "react-native";
import { useTranslation } from "react-i18next";
import { useNavigation, useRoute } from "@react-navigation/native";
import type { NativeStackNavigationProp } from "@react-navigation/native-stack";
import type { RootStackParamList } from "@navigation/types";
@@ -9,6 +10,8 @@ import { formatTime } from "@utils/formatTime";
import { formatDistance } from "@utils/formatDistance";
export function PostSwimScreen() {
const { t } = useTranslation("active-workout");
const { t: tc } = useTranslation("common");
const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
const route = useRoute<RouteProp<RootStackParamList, "PostSwim">>();
const [summary, setSummary] = useState<{
@@ -46,38 +49,38 @@ export function PostSwimScreen() {
<View className="flex-1 bg-white p-4">
<View className="items-center mb-8">
<Text className="text-3xl mb-2">🏊</Text>
<Text className="text-2xl font-bold text-slate-900 mb-1">Swim Complete!</Text>
<Text className="text-slate-500">Great job getting in the water</Text>
<Text className="text-2xl font-bold text-slate-900 mb-1">{t("swimComplete")}</Text>
<Text className="text-slate-500">{t("greatJob")}</Text>
</View>
{summary ? (
<View className="gap-3 mb-8">
<View className="bg-sky-50 rounded-2xl p-5 flex-row justify-between items-center">
<Text className="text-slate-600">Distance</Text>
<Text className="text-slate-600">{tc("distance")}</Text>
<Text className="text-xl font-bold text-sky-600">
{formatDistance(summary.distance)}
</Text>
</View>
<View className="bg-sky-50 rounded-2xl p-5 flex-row justify-between items-center">
<Text className="text-slate-600">Duration</Text>
<Text className="text-slate-600">{tc("duration")}</Text>
<Text className="text-xl font-bold text-sky-600">
{formatTime(summary.duration)}
</Text>
</View>
<View className="bg-sky-50 rounded-2xl p-5 flex-row justify-between items-center">
<Text className="text-slate-600">Laps</Text>
<Text className="text-slate-600">{tc("laps")}</Text>
<Text className="text-xl font-bold text-sky-600">{summary.laps}</Text>
</View>
{summary.avgSwolf && (
<View className="bg-sky-50 rounded-2xl p-5 flex-row justify-between items-center">
<Text className="text-slate-600">Avg SWOLF</Text>
<Text className="text-slate-600">{tc("avgSwolf")}</Text>
<Text className="text-xl font-bold text-sky-600">{summary.avgSwolf}</Text>
</View>
)}
</View>
) : (
<View className="py-8 items-center">
<Text className="text-slate-400">Loading summary...</Text>
<Text className="text-slate-400">{t("loadingSummary")}</Text>
</View>
)}
@@ -85,7 +88,7 @@ export function PostSwimScreen() {
onPress={() => navigation.popToTop()}
className="bg-slate-900 rounded-2xl py-4 items-center"
>
<Text className="text-white font-bold text-lg">Done</Text>
<Text className="text-white font-bold text-lg">{tc("done")}</Text>
</Pressable>
</View>
);