@croacroa/react-native-template 1.0.0

package/hooks/useUpdates.ts

@@ -0,0 +1,358 @@
+import { useEffect, useState, useCallback } from "react";
+import * as Updates from "expo-updates";
+import { Alert, AppState, AppStateStatus } from "react-native";
+import { IS_DEV } from "@/constants/config";
+
+export type UpdateStatus =
+  | "idle"
+  | "checking"
+  | "available"
+  | "downloading"
+  | "ready"
+  | "error"
+  | "no-update";
+
+interface UpdateInfo {
+  /**
+   * Whether an update is available
+   */
+  isAvailable: boolean;
+
+  /**
+   * Current update status
+   */
+  status: UpdateStatus;
+
+  /**
+   * Download progress (0-100)
+   */
+  progress: number;
+
+  /**
+   * Error message if status is 'error'
+   */
+  error: string | null;
+
+  /**
+   * Update manifest info
+   */
+  manifest: Updates.Manifest | null;
+}
+
+interface UseUpdatesOptions {
+  /**
+   * Check for updates on mount
+   * @default true
+   */
+  checkOnMount?: boolean;
+
+  /**
+   * Check for updates when app returns to foreground
+   * @default true
+   */
+  checkOnForeground?: boolean;
+
+  /**
+   * Show alert when update is available
+   * @default true
+   */
+  showAlert?: boolean;
+
+  /**
+   * Auto download and apply updates
+   * @default false
+   */
+  autoUpdate?: boolean;
+
+  /**
+   * Callback when update is available
+   */
+  onUpdateAvailable?: (manifest: Updates.Manifest) => void;
+
+  /**
+   * Callback when update is downloaded and ready
+   */
+  onUpdateReady?: () => void;
+
+  /**
+   * Callback on error
+   */
+  onError?: (error: Error) => void;
+}
+
+interface UseUpdatesReturn extends UpdateInfo {
+  /**
+   * Manually check for updates
+   */
+  checkForUpdate: () => Promise<boolean>;
+
+  /**
+   * Download the available update
+   */
+  downloadUpdate: () => Promise<void>;
+
+  /**
+   * Apply the downloaded update (restarts the app)
+   */
+  applyUpdate: () => Promise<void>;
+
+  /**
+   * Reset update state
+   */
+  reset: () => void;
+}
+
+/**
+ * Hook for managing OTA updates with expo-updates
+ *
+ * @example
+ * ```tsx
+ * function App() {
+ *   const { status, isAvailable, checkForUpdate, applyUpdate } = useUpdates({
+ *     checkOnMount: true,
+ *     showAlert: true,
+ *   });
+ *
+ *   if (status === 'ready') {
+ *     return (
+ *       <Button onPress={applyUpdate}>
+ *         Restart to update
+ *       </Button>
+ *     );
+ *   }
+ *
+ *   return <App />;
+ * }
+ * ```
+ */
+export function useUpdates(options: UseUpdatesOptions = {}): UseUpdatesReturn {
+  const {
+    checkOnMount = true,
+    checkOnForeground = true,
+    showAlert = true,
+    autoUpdate = false,
+    onUpdateAvailable,
+    onUpdateReady,
+    onError,
+  } = options;
+
+  const [status, setStatus] = useState<UpdateStatus>("idle");
+  const [progress, setProgress] = useState(0);
+  const [error, setError] = useState<string | null>(null);
+  const [manifest, setManifest] = useState<Updates.Manifest | null>(null);
+
+  const isAvailable =
+    status === "available" || status === "downloading" || status === "ready";
+
+  /**
+   * Download the available update
+   */
+  const downloadUpdate = useCallback(async (): Promise<void> => {
+    if (IS_DEV || !Updates.isEnabled) {
+      return;
+    }
+
+    try {
+      setStatus("downloading");
+      setProgress(0);
+
+      const progressInterval = setInterval(() => {
+        setProgress((p) => Math.min(p + 10, 90));
+      }, 200);
+
+      await Updates.fetchUpdateAsync();
+
+      clearInterval(progressInterval);
+      setProgress(100);
+      setStatus("ready");
+      onUpdateReady?.();
+    } catch (e) {
+      const err = e as Error;
+      setStatus("error");
+      setError(err.message);
+      onError?.(err);
+    }
+  }, [onUpdateReady, onError]);
+
+  /**
+   * Apply the downloaded update (restarts the app)
+   */
+  const applyUpdate = useCallback(async (): Promise<void> => {
+    if (IS_DEV || !Updates.isEnabled) {
+      return;
+    }
+
+    try {
+      await Updates.reloadAsync();
+    } catch (e) {
+      const err = e as Error;
+      setStatus("error");
+      setError(err.message);
+      onError?.(err);
+    }
+  }, [onError]);
+
+  /**
+   * Check for available updates
+   */
+  const checkForUpdate = useCallback(async (): Promise<boolean> => {
+    // Skip in development
+    if (IS_DEV || !Updates.isEnabled) {
+      return false;
+    }
+
+    try {
+      setStatus("checking");
+      setError(null);
+
+      const update = await Updates.checkForUpdateAsync();
+
+      if (update.isAvailable) {
+        setStatus("available");
+        setManifest(update.manifest);
+        onUpdateAvailable?.(update.manifest);
+
+        if (showAlert && !autoUpdate) {
+          Alert.alert(
+            "Update Available",
+            "A new version of the app is available. Would you like to update now?",
+            [
+              { text: "Later", style: "cancel" },
+              {
+                text: "Update",
+                onPress: () => downloadUpdate(),
+              },
+            ]
+          );
+        }
+
+        if (autoUpdate) {
+          await downloadUpdate();
+        }
+
+        return true;
+      } else {
+        setStatus("no-update");
+        return false;
+      }
+    } catch (e) {
+      const err = e as Error;
+      setStatus("error");
+      setError(err.message);
+      onError?.(err);
+      return false;
+    }
+  }, [
+    showAlert,
+    autoUpdate,
+    onUpdateAvailable,
+    onError,
+    downloadUpdate,
+    applyUpdate,
+  ]);
+
+  /**
+   * Reset update state
+   */
+  const reset = useCallback(() => {
+    setStatus("idle");
+    setProgress(0);
+    setError(null);
+    setManifest(null);
+  }, []);
+
+  // Check on mount
+  useEffect(() => {
+    if (checkOnMount) {
+      checkForUpdate();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [checkOnMount]);
+
+  // Check when app returns to foreground
+  useEffect(() => {
+    if (!checkOnForeground) return;
+
+    const handleAppStateChange = (nextState: AppStateStatus) => {
+      if (nextState === "active") {
+        checkForUpdate();
+      }
+    };
+
+    const subscription = AppState.addEventListener(
+      "change",
+      handleAppStateChange
+    );
+    return () => subscription.remove();
+  }, [checkOnForeground, checkForUpdate]);
+
+  return {
+    isAvailable,
+    status,
+    progress,
+    error,
+    manifest,
+    checkForUpdate,
+    downloadUpdate,
+    applyUpdate,
+    reset,
+  };
+}
+
+/**
+ * Get current update info
+ */
+export function getUpdateInfo(): {
+  isEnabled: boolean;
+  channel: string | null;
+  runtimeVersion: string | null;
+  updateId: string | null;
+  createdAt: Date | null;
+} {
+  if (IS_DEV || !Updates.isEnabled) {
+    return {
+      isEnabled: false,
+      channel: null,
+      runtimeVersion: null,
+      updateId: null,
+      createdAt: null,
+    };
+  }
+
+  return {
+    isEnabled: Updates.isEnabled,
+    channel: Updates.channel,
+    runtimeVersion: Updates.runtimeVersion,
+    updateId: Updates.updateId,
+    createdAt: Updates.createdAt,
+  };
+}
+
+/**
+ * Force check and apply update (useful for settings screen)
+ */
+export async function forceUpdate(): Promise<void> {
+  if (IS_DEV || !Updates.isEnabled) {
+    Alert.alert(
+      "Development Mode",
+      "Updates are not available in development."
+    );
+    return;
+  }
+
+  try {
+    const update = await Updates.checkForUpdateAsync();
+    if (update.isAvailable) {
+      Alert.alert("Updating...", "Downloading the latest version.");
+      await Updates.fetchUpdateAsync();
+      await Updates.reloadAsync();
+    } else {
+      Alert.alert("Up to Date", "You're running the latest version.");
+    }
+  } catch (error) {
+    Alert.alert(
+      "Update Failed",
+      "Could not check for updates. Please try again."
+    );
+  }
+}

package/i18n/index.ts

@@ -0,0 +1,77 @@
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+import * as Localization from "expo-localization";
+import { storage } from "@/services/storage";
+
+import en from "./locales/en.json";
+import fr from "./locales/fr.json";
+
+export const LANGUAGES = {
+  en: { name: "English", nativeName: "English" },
+  fr: { name: "French", nativeName: "Français" },
+} as const;
+
+export type LanguageCode = keyof typeof LANGUAGES;
+
+const LANGUAGE_STORAGE_KEY = "app_language";
+
+const resources = {
+  en: { translation: en },
+  fr: { translation: fr },
+};
+
+/**
+ * Get the device's preferred language
+ * Falls back to 'en' if not supported
+ */
+function getDeviceLanguage(): LanguageCode {
+  const locale = Localization.getLocales()[0];
+  const languageCode = locale?.languageCode || "en";
+
+  // Check if we support this language
+  if (languageCode in LANGUAGES) {
+    return languageCode as LanguageCode;
+  }
+
+  return "en";
+}
+
+/**
+ * Initialize i18n with the saved language or device language
+ */
+export async function initI18n(): Promise<void> {
+  // Try to get saved language preference
+  const savedLanguage = await storage.get<LanguageCode>(LANGUAGE_STORAGE_KEY);
+  const initialLanguage = savedLanguage || getDeviceLanguage();
+
+  await i18n.use(initReactI18next).init({
+    resources,
+    lng: initialLanguage,
+    fallbackLng: "en",
+    compatibilityJSON: "v3",
+    interpolation: {
+      escapeValue: false, // React already escapes values
+    },
+    react: {
+      useSuspense: false, // Prevents issues with SSR/async loading
+    },
+  });
+}
+
+/**
+ * Change the app language
+ */
+export async function changeLanguage(language: LanguageCode): Promise<void> {
+  await i18n.changeLanguage(language);
+  await storage.set(LANGUAGE_STORAGE_KEY, language);
+}
+
+/**
+ * Get current language
+ */
+export function getCurrentLanguage(): LanguageCode {
+  return (i18n.language || "en") as LanguageCode;
+}
+
+export { i18n };
+export default i18n;

package/i18n/locales/en.json

@@ -0,0 +1,101 @@
+{
+  "common": {
+    "loading": "Loading...",
+    "error": "Error",
+    "success": "Success",
+    "cancel": "Cancel",
+    "confirm": "Confirm",
+    "save": "Save",
+    "delete": "Delete",
+    "edit": "Edit",
+    "close": "Close",
+    "back": "Back",
+    "next": "Next",
+    "done": "Done",
+    "retry": "Retry",
+    "search": "Search",
+    "noResults": "No results found",
+    "offline": "You are offline",
+    "online": "Back online"
+  },
+  "auth": {
+    "signIn": "Sign In",
+    "signUp": "Sign Up",
+    "signOut": "Sign Out",
+    "email": "Email",
+    "password": "Password",
+    "confirmPassword": "Confirm Password",
+    "name": "Name",
+    "forgotPassword": "Forgot Password?",
+    "resetPassword": "Reset Password",
+    "noAccount": "Don't have an account?",
+    "haveAccount": "Already have an account?",
+    "welcomeBack": "Welcome back!",
+    "signInToContinue": "Sign in to continue",
+    "createAccount": "Create Account",
+    "joinUs": "Join us today",
+    "enterEmail": "Enter your email",
+    "enterPassword": "Enter your password",
+    "enterName": "Enter your name",
+    "passwordHint": "At least 8 characters",
+    "invalidCredentials": "Invalid email or password",
+    "accountCreated": "Account created successfully!",
+    "sessionExpired": "Session expired. Please sign in again.",
+    "biometric": {
+      "title": "Biometric Authentication",
+      "prompt": "Authenticate to continue",
+      "fallback": "Use passcode",
+      "enabled": "Biometric login enabled",
+      "disabled": "Biometric login disabled",
+      "notAvailable": "Biometric authentication not available"
+    }
+  },
+  "navigation": {
+    "home": "Home",
+    "profile": "Profile",
+    "settings": "Settings",
+    "notifications": "Notifications"
+  },
+  "profile": {
+    "title": "Profile",
+    "editProfile": "Edit Profile",
+    "changePhoto": "Change Photo",
+    "personalInfo": "Personal Information",
+    "memberSince": "Member since {{date}}"
+  },
+  "settings": {
+    "title": "Settings",
+    "appearance": "Appearance",
+    "theme": "Theme",
+    "themeLight": "Light",
+    "themeDark": "Dark",
+    "themeSystem": "System",
+    "language": "Language",
+    "notifications": "Notifications",
+    "pushNotifications": "Push Notifications",
+    "emailNotifications": "Email Notifications",
+    "security": "Security",
+    "biometricAuth": "Biometric Authentication",
+    "changePassword": "Change Password",
+    "privacy": "Privacy Policy",
+    "terms": "Terms of Service",
+    "about": "About",
+    "version": "Version",
+    "deleteAccount": "Delete Account"
+  },
+  "errors": {
+    "generic": "Something went wrong",
+    "network": "Network error. Please check your connection.",
+    "timeout": "Request timed out. Please try again.",
+    "unauthorized": "You are not authorized to perform this action.",
+    "notFound": "Resource not found.",
+    "validation": "Please check your input and try again."
+  },
+  "validation": {
+    "required": "This field is required",
+    "email": "Please enter a valid email",
+    "passwordMin": "Password must be at least 8 characters",
+    "passwordMatch": "Passwords do not match",
+    "nameMin": "Name must be at least 2 characters"
+  }
+}

package/i18n/locales/fr.json

@@ -0,0 +1,101 @@
+{
+  "common": {
+    "loading": "Chargement...",
+    "error": "Erreur",
+    "success": "Succès",
+    "cancel": "Annuler",
+    "confirm": "Confirmer",
+    "save": "Enregistrer",
+    "delete": "Supprimer",
+    "edit": "Modifier",
+    "close": "Fermer",
+    "back": "Retour",
+    "next": "Suivant",
+    "done": "Terminé",
+    "retry": "Réessayer",
+    "search": "Rechercher",
+    "noResults": "Aucun résultat trouvé",
+    "offline": "Vous êtes hors ligne",
+    "online": "De retour en ligne"
+  },
+  "auth": {
+    "signIn": "Se connecter",
+    "signUp": "S'inscrire",
+    "signOut": "Se déconnecter",
+    "email": "Email",
+    "password": "Mot de passe",
+    "confirmPassword": "Confirmer le mot de passe",
+    "name": "Nom",
+    "forgotPassword": "Mot de passe oublié ?",
+    "resetPassword": "Réinitialiser le mot de passe",
+    "noAccount": "Vous n'avez pas de compte ?",
+    "haveAccount": "Vous avez déjà un compte ?",
+    "welcomeBack": "Bon retour !",
+    "signInToContinue": "Connectez-vous pour continuer",
+    "createAccount": "Créer un compte",
+    "joinUs": "Rejoignez-nous",
+    "enterEmail": "Entrez votre email",
+    "enterPassword": "Entrez votre mot de passe",
+    "enterName": "Entrez votre nom",
+    "passwordHint": "Au moins 8 caractères",
+    "invalidCredentials": "Email ou mot de passe invalide",
+    "accountCreated": "Compte créé avec succès !",
+    "sessionExpired": "Session expirée. Veuillez vous reconnecter.",
+    "biometric": {
+      "title": "Authentification biométrique",
+      "prompt": "Authentifiez-vous pour continuer",
+      "fallback": "Utiliser le code",
+      "enabled": "Connexion biométrique activée",
+      "disabled": "Connexion biométrique désactivée",
+      "notAvailable": "Authentification biométrique non disponible"
+    }
+  },
+  "navigation": {
+    "home": "Accueil",
+    "profile": "Profil",
+    "settings": "Paramètres",
+    "notifications": "Notifications"
+  },
+  "profile": {
+    "title": "Profil",
+    "editProfile": "Modifier le profil",
+    "changePhoto": "Changer la photo",
+    "personalInfo": "Informations personnelles",
+    "memberSince": "Membre depuis {{date}}"
+  },
+  "settings": {
+    "title": "Paramètres",
+    "appearance": "Apparence",
+    "theme": "Thème",
+    "themeLight": "Clair",
+    "themeDark": "Sombre",
+    "themeSystem": "Système",
+    "language": "Langue",
+    "notifications": "Notifications",
+    "pushNotifications": "Notifications push",
+    "emailNotifications": "Notifications par email",
+    "security": "Sécurité",
+    "biometricAuth": "Authentification biométrique",
+    "changePassword": "Changer le mot de passe",
+    "privacy": "Politique de confidentialité",
+    "terms": "Conditions d'utilisation",
+    "about": "À propos",
+    "version": "Version",
+    "deleteAccount": "Supprimer le compte"
+  },
+  "errors": {
+    "generic": "Une erreur s'est produite",
+    "network": "Erreur réseau. Vérifiez votre connexion.",
+    "timeout": "Délai dépassé. Veuillez réessayer.",
+    "unauthorized": "Vous n'êtes pas autorisé à effectuer cette action.",
+    "notFound": "Ressource introuvable.",
+    "validation": "Veuillez vérifier vos informations et réessayer."
+  },
+  "validation": {
+    "required": "Ce champ est requis",
+    "email": "Veuillez entrer un email valide",
+    "passwordMin": "Le mot de passe doit contenir au moins 8 caractères",
+    "passwordMatch": "Les mots de passe ne correspondent pas",
+    "nameMin": "Le nom doit contenir au moins 2 caractères"
+  }
+}

package/jest.config.js

@@ -0,0 +1,32 @@
+module.exports = {
+  preset: "jest-expo",
+  setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
+  transformIgnorePatterns: [
+    "node_modules/(?!((jest-)?react-native|@react-native(-community)?)|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|react-native-svg|nativewind|tailwindcss)",
+  ],
+  moduleNameMapper: {
+    "^@/(.*)$": "<rootDir>/$1",
+  },
+  collectCoverageFrom: [
+    "**/*.{ts,tsx}",
+    "!**/node_modules/**",
+    "!**/coverage/**",
+    "!**/.expo/**",
+    "!**/babel.config.js",
+    "!**/jest.config.js",
+    "!**/metro.config.js",
+    "!**/tailwind.config.js",
+    "!**/*.stories.tsx",
+    "!**/.storybook/**",
+  ],
+  coverageThreshold: {
+    global: {
+      branches: 50,
+      functions: 50,
+      lines: 50,
+      statements: 50,
+    },
+  },
+  testPathIgnorePatterns: ["/node_modules/", "/.expo/"],
+  moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json"],
+};