@croacroa/react-native-template 2.1.0 → 3.2.0

package/app/(public)/register.tsx

@@ -1,9 +1,17 @@
-import { View, Text, Pressable, KeyboardAvoidingView, Platform, ScrollView } from "react-native";
+import {
+  View,
+  Text,
+  Pressable,
+  KeyboardAvoidingView,
+  Platform,
+  ScrollView,
+} 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 { AnimatedButton } from "@/components/ui/AnimatedButton";
@@ -12,6 +20,7 @@ import { registerSchema, RegisterFormData } from "@/utils/validation";
 
 export default function RegisterScreen() {
   const { signUp } = useAuth();
+  const { t } = useTranslation();
 
   const {
     control,
@@ -53,10 +62,10 @@ export default function RegisterScreen() {
               className="mb-8"
             >
               <Text className="text-3xl font-bold text-text-light dark:text-text-dark">
-                Create account
+                {t("auth.createAccount")}
               </Text>
               <Text className="mt-2 text-muted-light dark:text-muted-dark">
-                Sign up to get started
+                {t("auth.joinUs")}
               </Text>
             </Animated.View>
 
@@ -68,8 +77,8 @@ export default function RegisterScreen() {
               <FormInput
                 name="name"
                 control={control}
-                label="Name"
-                placeholder="Enter your name"
+                label={t("auth.name")}
+                placeholder={t("auth.enterName")}
                 autoComplete="name"
                 leftIcon="person-outline"
               />
@@ -77,8 +86,8 @@ export default function RegisterScreen() {
               <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"
@@ -88,19 +97,19 @@ export default function RegisterScreen() {
               <FormInput
                 name="password"
                 control={control}
-                label="Password"
-                placeholder="Create a password"
+                label={t("auth.password")}
+                placeholder={t("auth.createPasswordPlaceholder")}
                 secureTextEntry
                 autoComplete="new-password"
                 leftIcon="lock-closed-outline"
-                hint="Min 8 chars, 1 uppercase, 1 lowercase, 1 number"
+                hint={t("auth.passwordHintFull")}
               />
 
               <FormInput
                 name="confirmPassword"
                 control={control}
-                label="Confirm Password"
-                placeholder="Confirm your password"
+                label={t("auth.confirmPassword")}
+                placeholder={t("auth.confirmPasswordPlaceholder")}
                 secureTextEntry
                 autoComplete="new-password"
                 leftIcon="lock-closed-outline"
@@ -111,7 +120,7 @@ export default function RegisterScreen() {
                 isLoading={isSubmitting}
                 className="mt-4"
               >
-                Create Account
+                {t("auth.createAccount")}
               </AnimatedButton>
             </Animated.View>
 
@@ -121,12 +130,12 @@ export default function RegisterScreen() {
               className="mt-8 flex-row justify-center"
             >
               <Text className="text-muted-light dark:text-muted-dark">
-                Already have an account?{" "}
+                {t("auth.haveAccount")}{" "}
               </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/_layout.tsx

@@ -8,6 +8,7 @@ import { GestureHandlerRootView } from "react-native-gesture-handler";
 import { SafeAreaProvider } from "react-native-safe-area-context";
 
 import { ErrorBoundary } from "@/components/ErrorBoundary";
+import { AnalyticsProvider } from "@/components/providers/AnalyticsProvider";
 import { AuthProvider } from "@/hooks/useAuth";
 import { ThemeProvider, useTheme } from "@/hooks/useTheme";
 import { useNotifications } from "@/hooks/useNotifications";
@@ -85,9 +86,11 @@ export default function RootLayout() {
             persistOptions={persistOptions}
           >
             <ThemeProvider>
-              <AuthProvider>
-                <RootLayoutContent />
-              </AuthProvider>
+              <AnalyticsProvider>
+                <AuthProvider>
+                  <RootLayoutContent />
+                </AuthProvider>
+              </AnalyticsProvider>
             </ThemeProvider>
           </PersistQueryClientProvider>
         </SafeAreaProvider>

package/app.config.ts

@@ -18,7 +18,7 @@ const getAppName = () => {
 export default ({ config }: ConfigContext): ExpoConfig => ({
   ...config,
   name: getAppName(),
-  slug: "your-app",
+  slug: "react-native-template",
   version: "1.0.0",
   orientation: "portrait",
   icon: "./assets/images/icon.png",
@@ -35,6 +35,16 @@ export default ({ config }: ConfigContext): ExpoConfig => ({
     bundleIdentifier: getUniqueIdentifier(),
     infoPlist: {
       UIBackgroundModes: ["remote-notification", "fetch", "processing"],
+      ITSAppUsesNonExemptEncryption: false,
+      NSCameraUsageDescription: "This app uses the camera to take photos.",
+      NSPhotoLibraryUsageDescription:
+        "This app accesses your photo library to select images.",
+      NSLocationWhenInUseUsageDescription:
+        "This app uses your location to show nearby results.",
+      NSContactsUsageDescription:
+        "This app accesses your contacts to find friends.",
+      NSMicrophoneUsageDescription:
+        "This app uses the microphone to record audio.",
     },
   },
   android: {
@@ -47,6 +57,13 @@ export default ({ config }: ConfigContext): ExpoConfig => ({
       "NOTIFICATIONS",
       "RECEIVE_BOOT_COMPLETED",
       "FOREGROUND_SERVICE",
+      "CAMERA",
+      "READ_CONTACTS",
+      "ACCESS_FINE_LOCATION",
+      "ACCESS_COARSE_LOCATION",
+      "READ_MEDIA_IMAGES",
+      "READ_MEDIA_VIDEO",
+      "RECORD_AUDIO",
     ],
   },
   web: {
@@ -87,6 +104,8 @@ export default ({ config }: ConfigContext): ExpoConfig => ({
   plugins: [
     "expo-router",
     "expo-secure-store",
+    "expo-image-picker",
+    "@sentry/react-native",
     [
       "expo-notifications",
       {
@@ -103,13 +122,19 @@ export default ({ config }: ConfigContext): ExpoConfig => ({
       },
     ],
     "expo-task-manager",
+    [
+      "expo-camera",
+      {
+        cameraPermission: "This app uses the camera to take photos.",
+      },
+    ],
   ],
   experiments: {
     typedRoutes: true,
   },
   extra: {
     eas: {
-      projectId: "your-project-id",
+      projectId: "e683c5b3-fb16-4a31-b578-01f3fca1e67a",
     },
   },
 });

package/assets/images/.gitkeep

@@ -1,7 +1,7 @@
-# Placeholder for app assets
-# Replace these files with your own:
-# - icon.png (1024x1024)
-# - splash.png (1284x2778)
-# - adaptive-icon.png (1024x1024)
-# - favicon.png (48x48)
-# - notification-icon.png (96x96, white on transparent)
+# Placeholder for app assets
+# Replace these files with your own:
+# - icon.png (1024x1024)
+# - splash.png (1284x2778)
+# - adaptive-icon.png (1024x1024)
+# - favicon.png (48x48)
+# - notification-icon.png (96x96, white on transparent)

package/components/ErrorBoundary.tsx

@@ -2,7 +2,9 @@ import { Component, ErrorInfo, ReactNode } from "react";
 import { View, Text, Pressable, ScrollView } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
 import * as Updates from "expo-updates";
-import { captureException, addBreadcrumb } from "@/services/sentry";
+import i18next from "i18next";
+import { captureException, addBreadcrumb, Sentry } from "@/services/sentry";
+import { useAppStore } from "@/stores/appStore";
 
 interface Props {
   children: ReactNode;
@@ -13,12 +15,18 @@ interface State {
   hasError: boolean;
   error: Error | null;
   errorInfo: ErrorInfo | null;
+  crashCount: number;
 }
 
+const MAX_SOFT_RESETS = 3;
+
 /**
  * Global Error Boundary component
  * Catches JavaScript errors anywhere in the child component tree
- * and displays a fallback UI instead of crashing the whole app
+ * and displays a fallback UI instead of crashing the whole app.
+ *
+ * After multiple consecutive soft-reset failures, automatically
+ * offers a hard reset (clears stores + full app restart).
  */
 export class ErrorBoundary extends Component<Props, State> {
   constructor(props: Props) {
@@ -27,6 +35,7 @@ export class ErrorBoundary extends Component<Props, State> {
       hasError: false,
       error: null,
       errorInfo: null,
+      crashCount: 0,
     };
   }
 
@@ -35,9 +44,17 @@ export class ErrorBoundary extends Component<Props, State> {
   }
 
   componentDidCatch(error: Error, errorInfo: ErrorInfo) {
-    this.setState({ errorInfo });
+    this.setState((prev) => {
+      const crashCount = prev.crashCount + 1;
+      const lastCrashTime = new Date().toISOString();
+
+      // Set Sentry context for crash recovery debugging
+      Sentry.setContext("crash_recovery", { crashCount, lastCrashTime });
+
+      return { errorInfo, crashCount };
+    });
 
-    // Log to your error reporting service (Sentry, Bugsnag, etc.)
+    // Log to error reporting service
     this.logError(error, errorInfo);
   }
 
@@ -57,30 +74,41 @@ export class ErrorBoundary extends Component<Props, State> {
     console.error("Component stack:", errorInfo.componentStack);
   }
 
-  private handleRestart = async () => {
+  /**
+   * Hard reset: clears all Zustand persisted state and reloads the app.
+   */
+  private handleHardReset = async () => {
     try {
-      // Try to reload the app using expo-updates
+      // Reset Zustand stores
+      useAppStore.getState().reset();
+
+      // Full app restart via expo-updates
       if (!__DEV__) {
         await Updates.reloadAsync();
       } else {
-        // In dev, just reset the error state
+        // In dev, just reset the error state and crash counter
         this.setState({
           hasError: false,
           error: null,
           errorInfo: null,
+          crashCount: 0,
         });
       }
-    } catch (e) {
-      // If Updates.reloadAsync fails, reset state
+    } catch {
+      // Last resort: reset error state so user isn't stuck
       this.setState({
         hasError: false,
         error: null,
         errorInfo: null,
+        crashCount: 0,
       });
     }
   };
 
-  private handleReset = () => {
+  /**
+   * Soft reset: simply re-renders the children by clearing the error state.
+   */
+  private handleSoftReset = () => {
     this.setState({
       hasError: false,
       error: null,
@@ -94,6 +122,8 @@ export class ErrorBoundary extends Component<Props, State> {
         return this.props.fallback;
       }
 
+      const showHardReset = this.state.crashCount >= MAX_SOFT_RESETS;
+
       return (
         <View className="flex-1 items-center justify-center bg-background-light px-6 dark:bg-background-dark">
           {/* Error Icon */}
@@ -103,13 +133,12 @@ export class ErrorBoundary extends Component<Props, State> {
 
           {/* Title */}
           <Text className="mb-2 text-center text-2xl font-bold text-text-light dark:text-text-dark">
-            Oops! Something went wrong
+            {i18next.t("errors.crashTitle")}
           </Text>
 
           {/* Description */}
           <Text className="mb-8 text-center text-muted-light dark:text-muted-dark">
-            The app ran into a problem and could not continue. We apologize for
-            any inconvenience.
+            {i18next.t("errors.crashMessage")}
           </Text>
 
           {/* Error details (dev only) */}
@@ -128,21 +157,37 @@ export class ErrorBoundary extends Component<Props, State> {
 
           {/* Action buttons */}
           <View className="w-full gap-3">
-            <Pressable
-              onPress={this.handleRestart}
-              className="w-full items-center rounded-xl bg-primary-600 py-4"
-            >
-              <Text className="font-semibold text-white">Restart App</Text>
-            </Pressable>
-
-            <Pressable
-              onPress={this.handleReset}
-              className="w-full items-center rounded-xl border-2 border-gray-300 py-4 dark:border-gray-600"
-            >
-              <Text className="font-semibold text-text-light dark:text-text-dark">
-                Try Again
-              </Text>
-            </Pressable>
+            {showHardReset ? (
+              // After MAX_SOFT_RESETS consecutive failures, show hard reset
+              <Pressable
+                onPress={this.handleHardReset}
+                className="w-full items-center rounded-xl bg-red-600 py-4"
+              >
+                <Text className="font-semibold text-white">
+                  {i18next.t("errors.restartApp")}
+                </Text>
+              </Pressable>
+            ) : (
+              <>
+                <Pressable
+                  onPress={this.handleSoftReset}
+                  className="w-full items-center rounded-xl bg-primary-600 py-4"
+                >
+                  <Text className="font-semibold text-white">
+                    {i18next.t("errors.tryAgain")}
+                  </Text>
+                </Pressable>
+
+                <Pressable
+                  onPress={this.handleHardReset}
+                  className="w-full items-center rounded-xl border-2 border-gray-300 py-4 dark:border-gray-600"
+                >
+                  <Text className="font-semibold text-text-light dark:text-text-dark">
+                    {i18next.t("errors.restartApp")}
+                  </Text>
+                </Pressable>
+              </>
+            )}
           </View>
         </View>
       );

package/components/auth/SocialLoginButtons.tsx

@@ -0,0 +1,168 @@
+/**
+ * @fileoverview Social login buttons component
+ * Renders styled Google and Apple sign-in buttons with loading states.
+ * Apple button is only shown on iOS devices.
+ * @module components/auth/SocialLoginButtons
+ */
+
+import { useState } from "react";
+import {
+  View,
+  Text,
+  Pressable,
+  ActivityIndicator,
+  useColorScheme,
+  type ViewProps,
+} from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import { useTranslation } from "react-i18next";
+
+import {
+  SocialAuth,
+  isAppleSignInAvailable,
+} from "@/services/auth/social/social-auth";
+import type { SocialAuthResult } from "@/services/auth/social/types";
+import { cn } from "@/utils/cn";
+
+// ============================================================================
+// Types
+// ============================================================================
+
+interface SocialLoginButtonsProps extends ViewProps {
+  /** Callback when social sign-in succeeds */
+  onSuccess: (result: SocialAuthResult) => void;
+  /** Callback when social sign-in fails */
+  onError?: (error: Error) => void;
+  /** Disable all buttons (e.g., while another form is submitting) */
+  disabled?: boolean;
+}
+
+// ============================================================================
+// Component
+// ============================================================================
+
+/**
+ * Social login buttons for Google and Apple Sign-In.
+ *
+ * - Google button is always shown
+ * - Apple button is only shown on iOS
+ * - Each button has its own loading state
+ * - Supports dark mode via NativeWind
+ *
+ * @example
+ * ```tsx
+ * <SocialLoginButtons
+ *   onSuccess={(result) => {
+ *     // Send result.idToken to your backend
+ *   }}
+ *   onError={(error) => {
+ *     Alert.alert('Error', error.message);
+ *   }}
+ * />
+ * ```
+ */
+export function SocialLoginButtons({
+  onSuccess,
+  onError,
+  disabled = false,
+  className,
+  ...viewProps
+}: SocialLoginButtonsProps) {
+  const [loadingProvider, setLoadingProvider] = useState<string | null>(null);
+  const colorScheme = useColorScheme();
+  const { t } = useTranslation();
+
+  const showApple = isAppleSignInAvailable();
+  const isLoading = loadingProvider !== null;
+  const isDark = colorScheme === "dark";
+
+  const handleSignIn = async (provider: "google" | "apple") => {
+    if (isLoading || disabled) return;
+
+    setLoadingProvider(provider);
+
+    try {
+      const result = await SocialAuth.signIn(provider);
+
+      if (result) {
+        onSuccess(result);
+      }
+    } catch (error) {
+      const authError =
+        error instanceof Error ? error : new Error("Social sign-in failed");
+      onError?.(authError);
+    } finally {
+      setLoadingProvider(null);
+    }
+  };
+
+  // Apple button colors are inverted in dark mode
+  const appleIconColor = isDark ? "#000000" : "#FFFFFF";
+  const appleSpinnerColor = isDark ? "#000000" : "#FFFFFF";
+
+  return (
+    <View className={cn("gap-3", className)} {...viewProps}>
+      {/* Google Sign-In Button */}
+      <Pressable
+        onPress={() => handleSignIn("google")}
+        disabled={isLoading || disabled}
+        accessibilityRole="button"
+        accessibilityLabel="Continue with Google"
+        className={cn(
+          "flex-row items-center justify-center rounded-xl border border-gray-300 bg-white px-4 py-3.5",
+          "dark:border-gray-600 dark:bg-gray-100",
+          "active:bg-gray-50 dark:active:bg-gray-200",
+          (isLoading || disabled) && "opacity-50"
+        )}
+      >
+        {loadingProvider === "google" ? (
+          <ActivityIndicator size="small" color="#4285F4" />
+        ) : (
+          <>
+            <Ionicons
+              name="logo-google"
+              size={20}
+              color="#4285F4"
+              style={{ marginRight: 12 }}
+            />
+            <Text className="text-base font-semibold text-gray-700">
+              {t("socialAuth.continueWithGoogle")}
+            </Text>
+          </>
+        )}
+      </Pressable>
+
+      {/* Apple Sign-In Button (iOS only) */}
+      {showApple && (
+        <Pressable
+          onPress={() => handleSignIn("apple")}
+          disabled={isLoading || disabled}
+          accessibilityRole="button"
+          accessibilityLabel="Continue with Apple"
+          className={cn(
+            "flex-row items-center justify-center rounded-xl bg-black px-4 py-3.5",
+            "dark:bg-white",
+            "active:opacity-80",
+            (isLoading || disabled) && "opacity-50"
+          )}
+        >
+          {loadingProvider === "apple" ? (
+            <ActivityIndicator size="small" color={appleSpinnerColor} />
+          ) : (
+            <>
+              <Ionicons
+                name="logo-apple"
+                size={20}
+                color={appleIconColor}
+                style={{ marginRight: 12 }}
+              />
+              <Text className="text-base font-semibold text-white dark:text-black">
+                {t("socialAuth.continueWithApple")}
+              </Text>
+            </>
+          )}
+        </Pressable>
+      )}
+    </View>
+  );
+}

package/components/forms/FormInput.tsx

@@ -10,8 +10,10 @@ import {
 import { Input } from "@/components/ui/Input";
 import { Ionicons } from "@expo/vector-icons";
 
-interface FormInputProps<T extends FieldValues>
-  extends Omit<TextInputProps, "value" | "onChangeText"> {
+interface FormInputProps<T extends FieldValues> extends Omit<
+  TextInputProps,
+  "value" | "onChangeText"
+> {
   name: Path<T>;
   control: Control<T>;
   rules?: RegisterOptions<T, Path<T>>;
@@ -29,7 +31,7 @@ interface FormInputProps<T extends FieldValues>
  * Automatically handles validation errors and form state
  */
 export const FormInput = forwardRef(function FormInputInner<
-  T extends FieldValues
+  T extends FieldValues,
 >(
   {
     name,