@croacroa/react-native-template 2.0.1 → 3.2.0

package/__tests__/services/api.test.ts

@@ -1,7 +1,12 @@
 import * as SecureStore from "expo-secure-store";
 import { router } from "expo-router";
 
-import { ApiClient, getTokens, saveTokens, getValidAccessToken } from "@/services/api";
+import {
+  ApiClient,
+  getTokens,
+  saveTokens,
+  getValidAccessToken,
+} from "@/services/api";
 
 // Mock dependencies
 jest.mock("@/utils/toast", () => ({
@@ -12,8 +17,13 @@ jest.mock("@/utils/toast", () => ({
   },
 }));
 
+jest.mock("i18next", () => ({
+  t: jest.fn((key: string) => key),
+}));
+
 jest.mock("@/constants/config", () => ({
   API_URL: "https://api.example.com",
+  API_CONFIG: { ENABLE_ETAG_CACHE: false },
 }));
 
 const mockSecureStore = SecureStore as jest.Mocked<typeof SecureStore>;
@@ -26,7 +36,7 @@ const mockTokens = {
   expiresAt: Date.now() + 60 * 60 * 1000, // 1 hour from now
 };
 
-const expiredTokens = {
+const _expiredTokens = {
   accessToken: "expired_access_token",
   refreshToken: "expired_refresh_token",
   expiresAt: Date.now() - 1000, // Already expired
@@ -262,7 +272,9 @@ describe("ApiClient", () => {
         "Authentication failed"
       );
 
-      expect(mockSecureStore.deleteItemAsync).toHaveBeenCalledWith("auth_tokens");
+      expect(mockSecureStore.deleteItemAsync).toHaveBeenCalledWith(
+        "auth_tokens"
+      );
       expect(mockSecureStore.deleteItemAsync).toHaveBeenCalledWith("auth_user");
       expect(toast.error).toHaveBeenCalledWith(
         "Session expired",
@@ -446,7 +458,9 @@ describe("ApiClient", () => {
         text: () => Promise.resolve(""),
       });
 
-      const result = await apiClient.delete("/users/1", { requiresAuth: false });
+      const result = await apiClient.delete("/users/1", {
+        requiresAuth: false,
+      });
 
       expect(result).toEqual({});
     });
@@ -491,7 +505,9 @@ describe("Token Utilities", () => {
     });
 
     it("should return parsed tokens when stored", async () => {
-      mockSecureStore.getItemAsync.mockResolvedValue(JSON.stringify(mockTokens));
+      mockSecureStore.getItemAsync.mockResolvedValue(
+        JSON.stringify(mockTokens)
+      );
 
       const tokens = await getTokens();
 
@@ -525,7 +541,9 @@ describe("Token Utilities", () => {
     });
 
     it("should return token when not expired", async () => {
-      mockSecureStore.getItemAsync.mockResolvedValue(JSON.stringify(mockTokens));
+      mockSecureStore.getItemAsync.mockResolvedValue(
+        JSON.stringify(mockTokens)
+      );
 
       const token = await getValidAccessToken();
 

package/app/(auth)/home.tsx

@@ -2,6 +2,7 @@ import { View, Text, ScrollView } from "react-native";
 import { Link } from "expo-router";
 import { SafeAreaView } from "react-native-safe-area-context";
 import { Ionicons } from "@expo/vector-icons";
+import { useTranslation } from "react-i18next";
 
 import { Card } from "@/components/ui/Card";
 import { Button } from "@/components/ui/Button";
@@ -11,6 +12,7 @@ import { useTheme } from "@/hooks/useTheme";
 export default function HomeScreen() {
   const { user } = useAuth();
   const { isDark } = useTheme();
+  const { t } = useTranslation();
 
   return (
     <SafeAreaView className="flex-1 bg-background-light dark:bg-background-dark">
@@ -19,7 +21,7 @@ export default function HomeScreen() {
         <View className="mb-6 flex-row items-center justify-between">
           <View>
             <Text className="text-muted-light dark:text-muted-dark">
-              Welcome back,
+              {t("home.welcomeBack", { name: user?.name || "User" })}
             </Text>
             <Text className="text-2xl font-bold text-text-light dark:text-text-dark">
               {user?.name || "User"}
@@ -38,7 +40,7 @@ export default function HomeScreen() {
 
         {/* Quick Actions */}
         <Text className="mb-3 text-lg font-semibold text-text-light dark:text-text-dark">
-          Quick Actions
+          {t("home.quickActions")}
         </Text>
         <View className="mb-6 flex-row gap-3">
           <Card className="flex-1 items-center p-4">
@@ -50,7 +52,7 @@ export default function HomeScreen() {
               />
             </View>
             <Text className="text-sm text-text-light dark:text-text-dark">
-              New Item
+              {t("home.newItem")}
             </Text>
           </Card>
           <Card className="flex-1 items-center p-4">
@@ -62,7 +64,7 @@ export default function HomeScreen() {
               />
             </View>
             <Text className="text-sm text-text-light dark:text-text-dark">
-              Search
+              {t("common.search")}
             </Text>
           </Card>
           <Card className="flex-1 items-center p-4">
@@ -74,14 +76,14 @@ export default function HomeScreen() {
               />
             </View>
             <Text className="text-sm text-text-light dark:text-text-dark">
-              Stats
+              {t("home.stats")}
             </Text>
           </Card>
         </View>
 
         {/* Recent Activity */}
         <Text className="mb-3 text-lg font-semibold text-text-light dark:text-text-dark">
-          Recent Activity
+          {t("home.recentActivity")}
         </Text>
         <Card className="mb-4 p-4">
           <View className="items-center py-8">
@@ -91,10 +93,10 @@ export default function HomeScreen() {
               color={isDark ? "#64748b" : "#94a3b8"}
             />
             <Text className="mt-2 text-muted-light dark:text-muted-dark">
-              No recent activity
+              {t("home.noRecentActivity")}
             </Text>
             <Text className="mt-1 text-sm text-muted-light dark:text-muted-dark">
-              Your activity will appear here
+              {t("home.activityWillAppear")}
             </Text>
           </View>
         </Card>
@@ -108,7 +110,7 @@ export default function HomeScreen() {
               color={isDark ? "#f8fafc" : "#0f172a"}
               style={{ marginRight: 8 }}
             />
-            Settings
+            {t("settings.title")}
           </Button>
         </Link>
       </ScrollView>

package/app/(auth)/profile.tsx

@@ -2,6 +2,7 @@ import { View, Text, ScrollView, Pressable } from "react-native";
 import { router } from "expo-router";
 import { SafeAreaView } from "react-native-safe-area-context";
 import { Ionicons } from "@expo/vector-icons";
+import { useTranslation } from "react-i18next";
 
 import { Card } from "@/components/ui/Card";
 import { Button } from "@/components/ui/Button";
@@ -11,6 +12,7 @@ import { useTheme } from "@/hooks/useTheme";
 export default function ProfileScreen() {
   const { user, signOut } = useAuth();
   const { isDark } = useTheme();
+  const { t } = useTranslation();
 
   const handleSignOut = async () => {
     await signOut();
@@ -30,7 +32,7 @@ export default function ProfileScreen() {
             />
           </Pressable>
           <Text className="text-xl font-semibold text-text-light dark:text-text-dark">
-            Profile
+            {t("profile.title")}
           </Text>
         </View>
 
@@ -60,7 +62,7 @@ export default function ProfileScreen() {
                   color={isDark ? "#94a3b8" : "#64748b"}
                 />
                 <Text className="ml-3 text-text-light dark:text-text-dark">
-                  Edit Profile
+                  {t("profile.editProfile")}
                 </Text>
               </View>
               <Ionicons
@@ -80,7 +82,7 @@ export default function ProfileScreen() {
                   color={isDark ? "#94a3b8" : "#64748b"}
                 />
                 <Text className="ml-3 text-text-light dark:text-text-dark">
-                  Notifications
+                  {t("navigation.notifications")}
                 </Text>
               </View>
               <Ionicons
@@ -100,7 +102,7 @@ export default function ProfileScreen() {
                   color={isDark ? "#94a3b8" : "#64748b"}
                 />
                 <Text className="ml-3 text-text-light dark:text-text-dark">
-                  Privacy & Security
+                  {t("profile.privacySecurity")}
                 </Text>
               </View>
               <Ionicons
@@ -120,7 +122,7 @@ export default function ProfileScreen() {
                   color={isDark ? "#94a3b8" : "#64748b"}
                 />
                 <Text className="ml-3 text-text-light dark:text-text-dark">
-                  Help & Support
+                  {t("profile.helpSupport")}
                 </Text>
               </View>
               <Ionicons
@@ -143,7 +145,7 @@ export default function ProfileScreen() {
               color="#ef4444"
               style={{ marginRight: 8 }}
             />
-            <Text className="text-red-500">Sign Out</Text>
+            <Text className="text-red-500">{t("auth.signOut")}</Text>
           </Button>
         </View>
       </ScrollView>

package/app/(auth)/settings.tsx

@@ -2,6 +2,7 @@ import { View, Text, ScrollView, Pressable, Switch } from "react-native";
 import { router } from "expo-router";
 import { SafeAreaView } from "react-native-safe-area-context";
 import { Ionicons } from "@expo/vector-icons";
+import { useTranslation } from "react-i18next";
 
 import { Card } from "@/components/ui/Card";
 import { useTheme } from "@/hooks/useTheme";
@@ -10,6 +11,7 @@ import { useNotificationStore } from "@/stores/notificationStore";
 export default function SettingsScreen() {
   const { isDark, toggleTheme } = useTheme();
   const { isEnabled, toggleNotifications } = useNotificationStore();
+  const { t } = useTranslation();
 
   return (
     <SafeAreaView className="flex-1 bg-background-light dark:bg-background-dark">
@@ -24,14 +26,14 @@ export default function SettingsScreen() {
             />
           </Pressable>
           <Text className="text-xl font-semibold text-text-light dark:text-text-dark">
-            Settings
+            {t("settings.title")}
           </Text>
         </View>
 
         <View className="px-4 pt-4">
           {/* Appearance */}
           <Text className="mb-3 text-sm font-medium uppercase text-muted-light dark:text-muted-dark">
-            Appearance
+            {t("settings.appearance")}
           </Text>
           <Card className="mb-6">
             <View className="flex-row items-center justify-between p-4">
@@ -42,7 +44,7 @@ export default function SettingsScreen() {
                   color={isDark ? "#94a3b8" : "#64748b"}
                 />
                 <Text className="ml-3 text-text-light dark:text-text-dark">
-                  Dark Mode
+                  {t("settings.darkMode")}
                 </Text>
               </View>
               <Switch
@@ -56,7 +58,7 @@ export default function SettingsScreen() {
 
           {/* Notifications */}
           <Text className="mb-3 text-sm font-medium uppercase text-muted-light dark:text-muted-dark">
-            Notifications
+            {t("settings.notifications")}
           </Text>
           <Card className="mb-6">
             <View className="flex-row items-center justify-between p-4">
@@ -67,7 +69,7 @@ export default function SettingsScreen() {
                   color={isDark ? "#94a3b8" : "#64748b"}
                 />
                 <Text className="ml-3 text-text-light dark:text-text-dark">
-                  Push Notifications
+                  {t("settings.pushNotifications")}
                 </Text>
               </View>
               <Switch
@@ -81,7 +83,7 @@ export default function SettingsScreen() {
 
           {/* About */}
           <Text className="mb-3 text-sm font-medium uppercase text-muted-light dark:text-muted-dark">
-            About
+            {t("settings.about")}
           </Text>
           <Card className="mb-6">
             <Pressable className="flex-row items-center justify-between p-4">
@@ -92,7 +94,7 @@ export default function SettingsScreen() {
                   color={isDark ? "#94a3b8" : "#64748b"}
                 />
                 <Text className="ml-3 text-text-light dark:text-text-dark">
-                  App Version
+                  {t("settings.appVersion")}
                 </Text>
               </View>
               <Text className="text-muted-light dark:text-muted-dark">
@@ -110,7 +112,7 @@ export default function SettingsScreen() {
                   color={isDark ? "#94a3b8" : "#64748b"}
                 />
                 <Text className="ml-3 text-text-light dark:text-text-dark">
-                  Terms of Service
+                  {t("settings.terms")}
                 </Text>
               </View>
               <Ionicons
@@ -130,7 +132,7 @@ export default function SettingsScreen() {
                   color={isDark ? "#94a3b8" : "#64748b"}
                 />
                 <Text className="ml-3 text-text-light dark:text-text-dark">
-                  Privacy Policy
+                  {t("settings.privacy")}
                 </Text>
               </View>
               <Ionicons

package/app/(public)/forgot-password.tsx

@@ -1,8 +1,15 @@
 import { useState } from "react";
-import { View, Text, Pressable, KeyboardAvoidingView, Platform } from "react-native";
+import {
+  View,
+  Text,
+  Pressable,
+  KeyboardAvoidingView,
+  Platform,
+} from "react-native";
 import { Link, router } from "expo-router";
 import { SafeAreaView } from "react-native-safe-area-context";
 import { Ionicons } from "@expo/vector-icons";
+import { useTranslation } from "react-i18next";
 
 import { Input } from "@/components/ui/Input";
 import { Button } from "@/components/ui/Button";
@@ -12,10 +19,11 @@ export default function ForgotPasswordScreen() {
   const [error, setError] = useState("");
   const [success, setSuccess] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
+  const { t } = useTranslation();
 
   const handleResetPassword = async () => {
     if (!email) {
-      setError("Please enter your email");
+      setError(t("forgotPassword.emailRequired"));
       return;
     }
 
@@ -27,8 +35,8 @@ export default function ForgotPasswordScreen() {
       // await api.resetPassword(email);
       await new Promise((resolve) => setTimeout(resolve, 1000));
       setSuccess(true);
-    } catch (err) {
-      setError("Failed to send reset email. Please try again.");
+    } catch {
+      setError(t("forgotPassword.sendFailed"));
     } finally {
       setIsLoading(false);
     }
@@ -42,16 +50,16 @@ export default function ForgotPasswordScreen() {
             <Ionicons name="mail-outline" size={40} color="#22c55e" />
           </View>
           <Text className="text-center text-2xl font-bold text-text-light dark:text-text-dark">
-            Check your email
+            {t("forgotPassword.checkEmail")}
           </Text>
           <Text className="mt-2 text-center text-muted-light dark:text-muted-dark">
-            We've sent a password reset link to {email}
+            {t("forgotPassword.resetSent", { email })}
           </Text>
           <Button
             onPress={() => router.replace("/(public)/login")}
             className="mt-8"
           >
-            Back to Sign In
+            {t("forgotPassword.backToSignIn")}
           </Button>
         </View>
       </SafeAreaView>
@@ -70,15 +78,17 @@ export default function ForgotPasswordScreen() {
             className="mb-8 flex-row items-center"
           >
             <Ionicons name="arrow-back" size={24} color="#64748b" />
-            <Text className="ml-2 text-muted-light dark:text-muted-dark">Back</Text>
+            <Text className="ml-2 text-muted-light dark:text-muted-dark">
+              {t("common.back")}
+            </Text>
           </Pressable>
 
           <View className="mb-8">
             <Text className="text-3xl font-bold text-text-light dark:text-text-dark">
-              Reset password
+              {t("forgotPassword.title")}
             </Text>
             <Text className="mt-2 text-muted-light dark:text-muted-dark">
-              Enter your email and we'll send you a reset link
+              {t("forgotPassword.subtitle")}
             </Text>
           </View>
 
@@ -90,8 +100,8 @@ export default function ForgotPasswordScreen() {
 
           <View className="gap-4">
             <Input
-              label="Email"
-              placeholder="Enter your email"
+              label={t("auth.email")}
+              placeholder={t("auth.enterEmail")}
               value={email}
               onChangeText={setEmail}
               keyboardType="email-address"
@@ -104,18 +114,18 @@ export default function ForgotPasswordScreen() {
               isLoading={isLoading}
               className="mt-4"
             >
-              Send Reset Link
+              {t("forgotPassword.sendResetLink")}
             </Button>
           </View>
 
           <View className="mt-8 flex-row justify-center">
             <Text className="text-muted-light dark:text-muted-dark">
-              Remember your password?{" "}
+              {t("forgotPassword.rememberPassword")}{" "}
             </Text>
             <Link href="/(public)/login" asChild>
               <Pressable>
                 <Text className="font-semibold text-primary-600 dark:text-primary-400">
-                  Sign In
+                  {t("auth.signIn")}
                 </Text>
               </Pressable>
             </Link>

package/app/(public)/login.tsx

@@ -1,17 +1,26 @@
-import { View, Text, Pressable, KeyboardAvoidingView, Platform } from "react-native";
+import {
+  View,
+  Text,
+  Pressable,
+  KeyboardAvoidingView,
+  Platform,
+} from "react-native";
 import { Link, router } from "expo-router";
 import { SafeAreaView } from "react-native-safe-area-context";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import Animated, { FadeInDown } from "react-native-reanimated";
+import { useTranslation } from "react-i18next";
 
 import { FormInput } from "@/components/forms/FormInput";
+import { SocialLoginButtons } from "@/components/auth/SocialLoginButtons";
 import { AnimatedButton } from "@/components/ui/AnimatedButton";
 import { useAuth } from "@/hooks/useAuth";
 import { loginSchema, LoginFormData } from "@/utils/validation";
 
 export default function LoginScreen() {
   const { signIn } = useAuth();
+  const { t } = useTranslation();
 
   const {
     control,
@@ -47,10 +56,10 @@ export default function LoginScreen() {
             className="mb-8"
           >
             <Text className="text-3xl font-bold text-text-light dark:text-text-dark">
-              Welcome back
+              {t("auth.welcomeBack")}
             </Text>
             <Text className="mt-2 text-muted-light dark:text-muted-dark">
-              Sign in to your account
+              {t("auth.signInToContinue")}
             </Text>
           </Animated.View>
 
@@ -62,8 +71,8 @@ export default function LoginScreen() {
             <FormInput
               name="email"
               control={control}
-              label="Email"
-              placeholder="Enter your email"
+              label={t("auth.email")}
+              placeholder={t("auth.enterEmail")}
               keyboardType="email-address"
               autoCapitalize="none"
               autoComplete="email"
@@ -73,8 +82,8 @@ export default function LoginScreen() {
             <FormInput
               name="password"
               control={control}
-              label="Password"
-              placeholder="Enter your password"
+              label={t("auth.password")}
+              placeholder={t("auth.enterPassword")}
               secureTextEntry
               autoComplete="password"
               leftIcon="lock-closed-outline"
@@ -83,7 +92,7 @@ export default function LoginScreen() {
             <Link href="/(public)/forgot-password" asChild>
               <Pressable className="self-end">
                 <Text className="text-primary-600 dark:text-primary-400">
-                  Forgot password?
+                  {t("auth.forgotPassword")}
                 </Text>
               </Pressable>
             </Link>
@@ -93,22 +102,49 @@ export default function LoginScreen() {
               isLoading={isSubmitting}
               className="mt-4"
             >
-              Sign In
+              {t("auth.signIn")}
             </AnimatedButton>
           </Animated.View>
 
-          {/* Footer */}
+          {/* Divider */}
           <Animated.View
             entering={FadeInDown.delay(300).springify()}
+            className="my-6 flex-row items-center"
+          >
+            <View className="h-px flex-1 bg-muted-light/30 dark:bg-muted-dark/30" />
+            <Text className="mx-4 text-muted-light dark:text-muted-dark">
+              {t("socialAuth.orContinueWith")}
+            </Text>
+            <View className="h-px flex-1 bg-muted-light/30 dark:bg-muted-dark/30" />
+          </Animated.View>
+
+          {/* Social Login */}
+          <Animated.View entering={FadeInDown.delay(400).springify()}>
+            <SocialLoginButtons
+              onSuccess={(result) => {
+                if (__DEV__)
+                  console.log(
+                    "Social login succeeded:",
+                    result.provider,
+                    result.user.email
+                  );
+                // TODO: Send result.idToken to your backend
+              }}
+            />
+          </Animated.View>
+
+          {/* Footer */}
+          <Animated.View
+            entering={FadeInDown.delay(500).springify()}
             className="mt-8 flex-row justify-center"
           >
             <Text className="text-muted-light dark:text-muted-dark">
-              Don't have an account?{" "}
+              {t("auth.noAccount")}{" "}
             </Text>
             <Link href="/(public)/register" asChild>
               <Pressable>
                 <Text className="font-semibold text-primary-600 dark:text-primary-400">
-                  Sign Up
+                  {t("auth.signUp")}
                 </Text>
               </Pressable>
             </Link>

package/app/(public)/onboarding.tsx

@@ -1,5 +1,5 @@
-import { OnboardingScreen } from "@/components/onboarding";
-
-export default function Onboarding() {
-  return <OnboardingScreen />;
-}
+import { OnboardingScreen } from "@/components/onboarding";
+
+export default function Onboarding() {
+  return <OnboardingScreen />;
+}