@croacroa/react-native-template 1.0.0

package/app/(auth)/home.tsx

@@ -0,0 +1,117 @@
+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 { Card } from "@/components/ui/Card";
+import { Button } from "@/components/ui/Button";
+import { useAuth } from "@/hooks/useAuth";
+import { useTheme } from "@/hooks/useTheme";
+
+export default function HomeScreen() {
+  const { user } = useAuth();
+  const { isDark } = useTheme();
+
+  return (
+    <SafeAreaView className="flex-1 bg-background-light dark:bg-background-dark">
+      <ScrollView className="flex-1 px-4 pt-4">
+        {/* Header */}
+        <View className="mb-6 flex-row items-center justify-between">
+          <View>
+            <Text className="text-muted-light dark:text-muted-dark">
+              Welcome back,
+            </Text>
+            <Text className="text-2xl font-bold text-text-light dark:text-text-dark">
+              {user?.name || "User"}
+            </Text>
+          </View>
+          <Link href="/(auth)/profile" asChild>
+            <View className="h-12 w-12 items-center justify-center rounded-full bg-primary-100 dark:bg-primary-900">
+              <Ionicons
+                name="person"
+                size={24}
+                color={isDark ? "#93c5fd" : "#2563eb"}
+              />
+            </View>
+          </Link>
+        </View>
+
+        {/* Quick Actions */}
+        <Text className="mb-3 text-lg font-semibold text-text-light dark:text-text-dark">
+          Quick Actions
+        </Text>
+        <View className="mb-6 flex-row gap-3">
+          <Card className="flex-1 items-center p-4">
+            <View className="mb-2 h-12 w-12 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900/30">
+              <Ionicons
+                name="add"
+                size={24}
+                color={isDark ? "#93c5fd" : "#2563eb"}
+              />
+            </View>
+            <Text className="text-sm text-text-light dark:text-text-dark">
+              New Item
+            </Text>
+          </Card>
+          <Card className="flex-1 items-center p-4">
+            <View className="mb-2 h-12 w-12 items-center justify-center rounded-full bg-green-100 dark:bg-green-900/30">
+              <Ionicons
+                name="search"
+                size={24}
+                color={isDark ? "#86efac" : "#16a34a"}
+              />
+            </View>
+            <Text className="text-sm text-text-light dark:text-text-dark">
+              Search
+            </Text>
+          </Card>
+          <Card className="flex-1 items-center p-4">
+            <View className="mb-2 h-12 w-12 items-center justify-center rounded-full bg-purple-100 dark:bg-purple-900/30">
+              <Ionicons
+                name="stats-chart"
+                size={24}
+                color={isDark ? "#c4b5fd" : "#7c3aed"}
+              />
+            </View>
+            <Text className="text-sm text-text-light dark:text-text-dark">
+              Stats
+            </Text>
+          </Card>
+        </View>
+
+        {/* Recent Activity */}
+        <Text className="mb-3 text-lg font-semibold text-text-light dark:text-text-dark">
+          Recent Activity
+        </Text>
+        <Card className="mb-4 p-4">
+          <View className="items-center py-8">
+            <Ionicons
+              name="time-outline"
+              size={48}
+              color={isDark ? "#64748b" : "#94a3b8"}
+            />
+            <Text className="mt-2 text-muted-light dark:text-muted-dark">
+              No recent activity
+            </Text>
+            <Text className="mt-1 text-sm text-muted-light dark:text-muted-dark">
+              Your activity will appear here
+            </Text>
+          </View>
+        </Card>
+
+        {/* Settings Link */}
+        <Link href="/(auth)/settings" asChild>
+          <Button variant="outline" className="mb-8">
+            <Ionicons
+              name="settings-outline"
+              size={20}
+              color={isDark ? "#f8fafc" : "#0f172a"}
+              style={{ marginRight: 8 }}
+            />
+            Settings
+          </Button>
+        </Link>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}

package/app/(auth)/profile.tsx

@@ -0,0 +1,152 @@
+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 { Card } from "@/components/ui/Card";
+import { Button } from "@/components/ui/Button";
+import { useAuth } from "@/hooks/useAuth";
+import { useTheme } from "@/hooks/useTheme";
+
+export default function ProfileScreen() {
+  const { user, signOut } = useAuth();
+  const { isDark } = useTheme();
+
+  const handleSignOut = async () => {
+    await signOut();
+    router.replace("/(public)/login");
+  };
+
+  return (
+    <SafeAreaView className="flex-1 bg-background-light dark:bg-background-dark">
+      <ScrollView className="flex-1">
+        {/* Header */}
+        <View className="flex-row items-center px-4 py-2">
+          <Pressable onPress={() => router.back()} className="mr-4">
+            <Ionicons
+              name="arrow-back"
+              size={24}
+              color={isDark ? "#f8fafc" : "#0f172a"}
+            />
+          </Pressable>
+          <Text className="text-xl font-semibold text-text-light dark:text-text-dark">
+            Profile
+          </Text>
+        </View>
+
+        {/* Avatar */}
+        <View className="items-center py-8">
+          <View className="mb-4 h-24 w-24 items-center justify-center rounded-full bg-primary-100 dark:bg-primary-900">
+            <Text className="text-4xl font-bold text-primary-600 dark:text-primary-400">
+              {user?.name?.charAt(0).toUpperCase() || "U"}
+            </Text>
+          </View>
+          <Text className="text-2xl font-bold text-text-light dark:text-text-dark">
+            {user?.name || "User"}
+          </Text>
+          <Text className="text-muted-light dark:text-muted-dark">
+            {user?.email || "user@example.com"}
+          </Text>
+        </View>
+
+        {/* Info Cards */}
+        <View className="px-4">
+          <Card className="mb-4">
+            <Pressable className="flex-row items-center justify-between p-4">
+              <View className="flex-row items-center">
+                <Ionicons
+                  name="person-outline"
+                  size={24}
+                  color={isDark ? "#94a3b8" : "#64748b"}
+                />
+                <Text className="ml-3 text-text-light dark:text-text-dark">
+                  Edit Profile
+                </Text>
+              </View>
+              <Ionicons
+                name="chevron-forward"
+                size={20}
+                color={isDark ? "#64748b" : "#94a3b8"}
+              />
+            </Pressable>
+          </Card>
+
+          <Card className="mb-4">
+            <Pressable className="flex-row items-center justify-between p-4">
+              <View className="flex-row items-center">
+                <Ionicons
+                  name="notifications-outline"
+                  size={24}
+                  color={isDark ? "#94a3b8" : "#64748b"}
+                />
+                <Text className="ml-3 text-text-light dark:text-text-dark">
+                  Notifications
+                </Text>
+              </View>
+              <Ionicons
+                name="chevron-forward"
+                size={20}
+                color={isDark ? "#64748b" : "#94a3b8"}
+              />
+            </Pressable>
+          </Card>
+
+          <Card className="mb-4">
+            <Pressable className="flex-row items-center justify-between p-4">
+              <View className="flex-row items-center">
+                <Ionicons
+                  name="shield-outline"
+                  size={24}
+                  color={isDark ? "#94a3b8" : "#64748b"}
+                />
+                <Text className="ml-3 text-text-light dark:text-text-dark">
+                  Privacy & Security
+                </Text>
+              </View>
+              <Ionicons
+                name="chevron-forward"
+                size={20}
+                color={isDark ? "#64748b" : "#94a3b8"}
+              />
+            </Pressable>
+          </Card>
+
+          <Card className="mb-4">
+            <Pressable className="flex-row items-center justify-between p-4">
+              <View className="flex-row items-center">
+                <Ionicons
+                  name="help-circle-outline"
+                  size={24}
+                  color={isDark ? "#94a3b8" : "#64748b"}
+                />
+                <Text className="ml-3 text-text-light dark:text-text-dark">
+                  Help & Support
+                </Text>
+              </View>
+              <Ionicons
+                name="chevron-forward"
+                size={20}
+                color={isDark ? "#64748b" : "#94a3b8"}
+              />
+            </Pressable>
+          </Card>
+
+          {/* Sign Out */}
+          <Button
+            variant="outline"
+            onPress={handleSignOut}
+            className="mt-4 mb-8 border-red-500"
+          >
+            <Ionicons
+              name="log-out-outline"
+              size={20}
+              color="#ef4444"
+              style={{ marginRight: 8 }}
+            />
+            <Text className="text-red-500">Sign Out</Text>
+          </Button>
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}

package/app/(auth)/settings.tsx

@@ -0,0 +1,147 @@
+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 { Card } from "@/components/ui/Card";
+import { useTheme } from "@/hooks/useTheme";
+import { useNotificationStore } from "@/stores/notificationStore";
+
+export default function SettingsScreen() {
+  const { isDark, toggleTheme } = useTheme();
+  const { isEnabled, toggleNotifications } = useNotificationStore();
+
+  return (
+    <SafeAreaView className="flex-1 bg-background-light dark:bg-background-dark">
+      <ScrollView className="flex-1">
+        {/* Header */}
+        <View className="flex-row items-center px-4 py-2">
+          <Pressable onPress={() => router.back()} className="mr-4">
+            <Ionicons
+              name="arrow-back"
+              size={24}
+              color={isDark ? "#f8fafc" : "#0f172a"}
+            />
+          </Pressable>
+          <Text className="text-xl font-semibold text-text-light dark:text-text-dark">
+            Settings
+          </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
+          </Text>
+          <Card className="mb-6">
+            <View className="flex-row items-center justify-between p-4">
+              <View className="flex-row items-center">
+                <Ionicons
+                  name={isDark ? "moon" : "sunny"}
+                  size={24}
+                  color={isDark ? "#94a3b8" : "#64748b"}
+                />
+                <Text className="ml-3 text-text-light dark:text-text-dark">
+                  Dark Mode
+                </Text>
+              </View>
+              <Switch
+                value={isDark}
+                onValueChange={toggleTheme}
+                trackColor={{ false: "#cbd5e1", true: "#3b82f6" }}
+                thumbColor="#ffffff"
+              />
+            </View>
+          </Card>
+
+          {/* Notifications */}
+          <Text className="mb-3 text-sm font-medium uppercase text-muted-light dark:text-muted-dark">
+            Notifications
+          </Text>
+          <Card className="mb-6">
+            <View className="flex-row items-center justify-between p-4">
+              <View className="flex-row items-center">
+                <Ionicons
+                  name="notifications-outline"
+                  size={24}
+                  color={isDark ? "#94a3b8" : "#64748b"}
+                />
+                <Text className="ml-3 text-text-light dark:text-text-dark">
+                  Push Notifications
+                </Text>
+              </View>
+              <Switch
+                value={isEnabled}
+                onValueChange={toggleNotifications}
+                trackColor={{ false: "#cbd5e1", true: "#3b82f6" }}
+                thumbColor="#ffffff"
+              />
+            </View>
+          </Card>
+
+          {/* About */}
+          <Text className="mb-3 text-sm font-medium uppercase text-muted-light dark:text-muted-dark">
+            About
+          </Text>
+          <Card className="mb-6">
+            <Pressable className="flex-row items-center justify-between p-4">
+              <View className="flex-row items-center">
+                <Ionicons
+                  name="information-circle-outline"
+                  size={24}
+                  color={isDark ? "#94a3b8" : "#64748b"}
+                />
+                <Text className="ml-3 text-text-light dark:text-text-dark">
+                  App Version
+                </Text>
+              </View>
+              <Text className="text-muted-light dark:text-muted-dark">
+                1.0.0
+              </Text>
+            </Pressable>
+
+            <View className="mx-4 h-px bg-gray-200 dark:bg-gray-700" />
+
+            <Pressable className="flex-row items-center justify-between p-4">
+              <View className="flex-row items-center">
+                <Ionicons
+                  name="document-text-outline"
+                  size={24}
+                  color={isDark ? "#94a3b8" : "#64748b"}
+                />
+                <Text className="ml-3 text-text-light dark:text-text-dark">
+                  Terms of Service
+                </Text>
+              </View>
+              <Ionicons
+                name="chevron-forward"
+                size={20}
+                color={isDark ? "#64748b" : "#94a3b8"}
+              />
+            </Pressable>
+
+            <View className="mx-4 h-px bg-gray-200 dark:bg-gray-700" />
+
+            <Pressable className="flex-row items-center justify-between p-4">
+              <View className="flex-row items-center">
+                <Ionicons
+                  name="lock-closed-outline"
+                  size={24}
+                  color={isDark ? "#94a3b8" : "#64748b"}
+                />
+                <Text className="ml-3 text-text-light dark:text-text-dark">
+                  Privacy Policy
+                </Text>
+              </View>
+              <Ionicons
+                name="chevron-forward"
+                size={20}
+                color={isDark ? "#64748b" : "#94a3b8"}
+              />
+            </Pressable>
+          </Card>
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}

package/app/(public)/_layout.tsx

@@ -0,0 +1,21 @@
+import { Stack } from "expo-router";
+import { useTheme } from "@/hooks/useTheme";
+
+export default function PublicLayout() {
+  const { isDark } = useTheme();
+
+  return (
+    <Stack
+      screenOptions={{
+        headerShown: false,
+        contentStyle: {
+          backgroundColor: isDark ? "#0f172a" : "#ffffff",
+        },
+      }}
+    >
+      <Stack.Screen name="login" />
+      <Stack.Screen name="register" />
+      <Stack.Screen name="forgot-password" />
+    </Stack>
+  );
+}

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

@@ -0,0 +1,127 @@
+import { useState } from "react";
+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 { Input } from "@/components/ui/Input";
+import { Button } from "@/components/ui/Button";
+
+export default function ForgotPasswordScreen() {
+  const [email, setEmail] = useState("");
+  const [error, setError] = useState("");
+  const [success, setSuccess] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleResetPassword = async () => {
+    if (!email) {
+      setError("Please enter your email");
+      return;
+    }
+
+    setIsLoading(true);
+    setError("");
+
+    try {
+      // TODO: Implement password reset API call
+      // await api.resetPassword(email);
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+      setSuccess(true);
+    } catch (err) {
+      setError("Failed to send reset email. Please try again.");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  if (success) {
+    return (
+      <SafeAreaView className="flex-1 bg-background-light dark:bg-background-dark">
+        <View className="flex-1 items-center justify-center px-6">
+          <View className="mb-6 h-20 w-20 items-center justify-center rounded-full bg-green-100 dark:bg-green-900/30">
+            <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
+          </Text>
+          <Text className="mt-2 text-center text-muted-light dark:text-muted-dark">
+            We've sent a password reset link to {email}
+          </Text>
+          <Button
+            onPress={() => router.replace("/(public)/login")}
+            className="mt-8"
+          >
+            Back to Sign In
+          </Button>
+        </View>
+      </SafeAreaView>
+    );
+  }
+
+  return (
+    <SafeAreaView className="flex-1 bg-background-light dark:bg-background-dark">
+      <KeyboardAvoidingView
+        behavior={Platform.OS === "ios" ? "padding" : "height"}
+        className="flex-1"
+      >
+        <View className="flex-1 justify-center px-6">
+          <Pressable
+            onPress={() => router.back()}
+            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>
+          </Pressable>
+
+          <View className="mb-8">
+            <Text className="text-3xl font-bold text-text-light dark:text-text-dark">
+              Reset password
+            </Text>
+            <Text className="mt-2 text-muted-light dark:text-muted-dark">
+              Enter your email and we'll send you a reset link
+            </Text>
+          </View>
+
+          {error ? (
+            <View className="mb-4 rounded-lg bg-red-100 p-3 dark:bg-red-900/30">
+              <Text className="text-red-600 dark:text-red-400">{error}</Text>
+            </View>
+          ) : null}
+
+          <View className="gap-4">
+            <Input
+              label="Email"
+              placeholder="Enter your email"
+              value={email}
+              onChangeText={setEmail}
+              keyboardType="email-address"
+              autoCapitalize="none"
+              autoComplete="email"
+            />
+
+            <Button
+              onPress={handleResetPassword}
+              isLoading={isLoading}
+              className="mt-4"
+            >
+              Send Reset Link
+            </Button>
+          </View>
+
+          <View className="mt-8 flex-row justify-center">
+            <Text className="text-muted-light dark:text-muted-dark">
+              Remember your password?{" "}
+            </Text>
+            <Link href="/(public)/login" asChild>
+              <Pressable>
+                <Text className="font-semibold text-primary-600 dark:text-primary-400">
+                  Sign In
+                </Text>
+              </Pressable>
+            </Link>
+          </View>
+        </View>
+      </KeyboardAvoidingView>
+    </SafeAreaView>
+  );
+}

package/app/(public)/login.tsx

@@ -0,0 +1,120 @@
+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 { FormInput } from "@/components/forms/FormInput";
+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 {
+    control,
+    handleSubmit,
+    formState: { isSubmitting },
+  } = useForm<LoginFormData>({
+    resolver: zodResolver(loginSchema),
+    defaultValues: {
+      email: "",
+      password: "",
+    },
+  });
+
+  const onSubmit = async (data: LoginFormData) => {
+    try {
+      await signIn(data.email, data.password);
+      router.replace("/(auth)/home");
+    } catch {
+      // Error is handled by useAuth with toast
+    }
+  };
+
+  return (
+    <SafeAreaView className="flex-1 bg-background-light dark:bg-background-dark">
+      <KeyboardAvoidingView
+        behavior={Platform.OS === "ios" ? "padding" : "height"}
+        className="flex-1"
+      >
+        <View className="flex-1 justify-center px-6">
+          {/* Header */}
+          <Animated.View
+            entering={FadeInDown.delay(100).springify()}
+            className="mb-8"
+          >
+            <Text className="text-3xl font-bold text-text-light dark:text-text-dark">
+              Welcome back
+            </Text>
+            <Text className="mt-2 text-muted-light dark:text-muted-dark">
+              Sign in to your account
+            </Text>
+          </Animated.View>
+
+          {/* Form */}
+          <Animated.View
+            entering={FadeInDown.delay(200).springify()}
+            className="gap-4"
+          >
+            <FormInput
+              name="email"
+              control={control}
+              label="Email"
+              placeholder="Enter your email"
+              keyboardType="email-address"
+              autoCapitalize="none"
+              autoComplete="email"
+              leftIcon="mail-outline"
+            />
+
+            <FormInput
+              name="password"
+              control={control}
+              label="Password"
+              placeholder="Enter your password"
+              secureTextEntry
+              autoComplete="password"
+              leftIcon="lock-closed-outline"
+            />
+
+            <Link href="/(public)/forgot-password" asChild>
+              <Pressable className="self-end">
+                <Text className="text-primary-600 dark:text-primary-400">
+                  Forgot password?
+                </Text>
+              </Pressable>
+            </Link>
+
+            <AnimatedButton
+              onPress={handleSubmit(onSubmit)}
+              isLoading={isSubmitting}
+              className="mt-4"
+            >
+              Sign In
+            </AnimatedButton>
+          </Animated.View>
+
+          {/* Footer */}
+          <Animated.View
+            entering={FadeInDown.delay(300).springify()}
+            className="mt-8 flex-row justify-center"
+          >
+            <Text className="text-muted-light dark:text-muted-dark">
+              Don't have an account?{" "}
+            </Text>
+            <Link href="/(public)/register" asChild>
+              <Pressable>
+                <Text className="font-semibold text-primary-600 dark:text-primary-400">
+                  Sign Up
+                </Text>
+              </Pressable>
+            </Link>
+          </Animated.View>
+        </View>
+      </KeyboardAvoidingView>
+    </SafeAreaView>
+  );
+}