@croacroa/react-native-template 1.0.0

package/app/(public)/onboarding.tsx

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

package/app/(public)/register.tsx

@@ -0,0 +1,139 @@
+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 { FormInput } from "@/components/forms/FormInput";
+import { AnimatedButton } from "@/components/ui/AnimatedButton";
+import { useAuth } from "@/hooks/useAuth";
+import { registerSchema, RegisterFormData } from "@/utils/validation";
+
+export default function RegisterScreen() {
+  const { signUp } = useAuth();
+
+  const {
+    control,
+    handleSubmit,
+    formState: { isSubmitting },
+  } = useForm<RegisterFormData>({
+    resolver: zodResolver(registerSchema),
+    defaultValues: {
+      name: "",
+      email: "",
+      password: "",
+      confirmPassword: "",
+    },
+  });
+
+  const onSubmit = async (data: RegisterFormData) => {
+    try {
+      await signUp(data.email, data.password, data.name);
+      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"
+      >
+        <ScrollView
+          contentContainerStyle={{ flexGrow: 1, justifyContent: "center" }}
+          keyboardShouldPersistTaps="handled"
+        >
+          <View className="flex-1 justify-center px-6 py-8">
+            {/* Header */}
+            <Animated.View
+              entering={FadeInDown.delay(100).springify()}
+              className="mb-8"
+            >
+              <Text className="text-3xl font-bold text-text-light dark:text-text-dark">
+                Create account
+              </Text>
+              <Text className="mt-2 text-muted-light dark:text-muted-dark">
+                Sign up to get started
+              </Text>
+            </Animated.View>
+
+            {/* Form */}
+            <Animated.View
+              entering={FadeInDown.delay(200).springify()}
+              className="gap-4"
+            >
+              <FormInput
+                name="name"
+                control={control}
+                label="Name"
+                placeholder="Enter your name"
+                autoComplete="name"
+                leftIcon="person-outline"
+              />
+
+              <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="Create a password"
+                secureTextEntry
+                autoComplete="new-password"
+                leftIcon="lock-closed-outline"
+                hint="Min 8 chars, 1 uppercase, 1 lowercase, 1 number"
+              />
+
+              <FormInput
+                name="confirmPassword"
+                control={control}
+                label="Confirm Password"
+                placeholder="Confirm your password"
+                secureTextEntry
+                autoComplete="new-password"
+                leftIcon="lock-closed-outline"
+              />
+
+              <AnimatedButton
+                onPress={handleSubmit(onSubmit)}
+                isLoading={isSubmitting}
+                className="mt-4"
+              >
+                Create Account
+              </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">
+                Already have an account?{" "}
+              </Text>
+              <Link href="/(public)/login" asChild>
+                <Pressable>
+                  <Text className="font-semibold text-primary-600 dark:text-primary-400">
+                    Sign In
+                  </Text>
+                </Pressable>
+              </Link>
+            </Animated.View>
+          </View>
+        </ScrollView>
+      </KeyboardAvoidingView>
+    </SafeAreaView>
+  );
+}

package/app/_layout.tsx

@@ -0,0 +1,97 @@
+import "../global.css";
+import { useEffect } from "react";
+import { Stack } from "expo-router";
+import { StatusBar } from "expo-status-bar";
+import * as SplashScreen from "expo-splash-screen";
+import { PersistQueryClientProvider } from "@tanstack/react-query-persist-client";
+import { GestureHandlerRootView } from "react-native-gesture-handler";
+import { SafeAreaProvider } from "react-native-safe-area-context";
+
+import { ErrorBoundary } from "@/components/ErrorBoundary";
+import { AuthProvider } from "@/hooks/useAuth";
+import { ThemeProvider, useTheme } from "@/hooks/useTheme";
+import { useNotifications } from "@/hooks/useNotifications";
+import { useOffline } from "@/hooks/useOffline";
+import {
+  queryClient,
+  persistOptions,
+  setupOnlineManager,
+  setupFocusManager,
+} from "@/services/queryClient";
+import { initSentry } from "@/services/sentry";
+
+// Initialize Sentry as early as possible
+initSentry();
+
+// Prevent splash screen from auto-hiding
+SplashScreen.preventAutoHideAsync();
+
+// Setup TanStack Query online/offline management
+setupOnlineManager();
+
+function RootLayoutContent() {
+  const { isDark, isLoaded } = useTheme();
+  const { registerForPushNotifications } = useNotifications();
+
+  // Track offline status with toast notifications
+  useOffline({ showToast: true });
+
+  useEffect(() => {
+    if (isLoaded) {
+      SplashScreen.hideAsync();
+    }
+  }, [isLoaded]);
+
+  useEffect(() => {
+    registerForPushNotifications();
+  }, []);
+
+  // Setup focus manager (refetch on app focus)
+  useEffect(() => {
+    const cleanup = setupFocusManager();
+    return cleanup;
+  }, []);
+
+  if (!isLoaded) {
+    return null;
+  }
+
+  return (
+    <>
+      <Stack
+        screenOptions={{
+          headerShown: false,
+          contentStyle: {
+            backgroundColor: isDark ? "#0f172a" : "#ffffff",
+          },
+          animation: "slide_from_right",
+        }}
+      >
+        <Stack.Screen name="(public)" />
+        <Stack.Screen name="(auth)" />
+      </Stack>
+      <StatusBar style={isDark ? "light" : "dark"} />
+    </>
+  );
+}
+
+export default function RootLayout() {
+  return (
+    <ErrorBoundary>
+      <GestureHandlerRootView style={{ flex: 1 }}>
+        <SafeAreaProvider>
+          <PersistQueryClientProvider
+            client={queryClient}
+            persistOptions={persistOptions}
+          >
+            <ThemeProvider>
+              <AuthProvider>
+                <RootLayoutContent />
+              </AuthProvider>
+            </ThemeProvider>
+          </PersistQueryClientProvider>
+        </SafeAreaProvider>
+      </GestureHandlerRootView>
+    </ErrorBoundary>
+  );
+}

package/app/index.tsx

@@ -0,0 +1,21 @@
+import { Redirect } from "expo-router";
+import { useAuth } from "@/hooks/useAuth";
+import { View, ActivityIndicator } from "react-native";
+
+export default function Index() {
+  const { isAuthenticated, isLoading } = useAuth();
+
+  if (isLoading) {
+    return (
+      <View className="flex-1 items-center justify-center bg-background-light dark:bg-background-dark">
+        <ActivityIndicator size="large" color="#3b82f6" />
+      </View>
+    );
+  }
+
+  if (isAuthenticated) {
+    return <Redirect href="/(auth)/home" />;
+  }
+
+  return <Redirect href="/(public)/login" />;
+}

package/app.config.ts

@@ -0,0 +1,72 @@
+import { ExpoConfig, ConfigContext } from "expo/config";
+
+const IS_DEV = process.env.APP_VARIANT === "development";
+const IS_PREVIEW = process.env.APP_VARIANT === "preview";
+
+const getUniqueIdentifier = () => {
+  if (IS_DEV) return "com.yourcompany.yourapp.dev";
+  if (IS_PREVIEW) return "com.yourcompany.yourapp.preview";
+  return "com.yourcompany.yourapp";
+};
+
+const getAppName = () => {
+  if (IS_DEV) return "YourApp (Dev)";
+  if (IS_PREVIEW) return "YourApp (Preview)";
+  return "YourApp";
+};
+
+export default ({ config }: ConfigContext): ExpoConfig => ({
+  ...config,
+  name: getAppName(),
+  slug: "your-app",
+  version: "1.0.0",
+  orientation: "portrait",
+  icon: "./assets/images/icon.png",
+  scheme: "yourapp",
+  userInterfaceStyle: "automatic",
+  splash: {
+    image: "./assets/images/splash.png",
+    resizeMode: "contain",
+    backgroundColor: "#ffffff",
+  },
+  assetBundlePatterns: ["**/*"],
+  ios: {
+    supportsTablet: true,
+    bundleIdentifier: getUniqueIdentifier(),
+    infoPlist: {
+      UIBackgroundModes: ["remote-notification"],
+    },
+  },
+  android: {
+    adaptiveIcon: {
+      foregroundImage: "./assets/images/adaptive-icon.png",
+      backgroundColor: "#ffffff",
+    },
+    package: getUniqueIdentifier(),
+    permissions: ["NOTIFICATIONS"],
+  },
+  web: {
+    bundler: "metro",
+    output: "static",
+    favicon: "./assets/images/favicon.png",
+  },
+  plugins: [
+    "expo-router",
+    "expo-secure-store",
+    [
+      "expo-notifications",
+      {
+        icon: "./assets/images/notification-icon.png",
+        color: "#ffffff",
+      },
+    ],
+  ],
+  experiments: {
+    typedRoutes: true,
+  },
+  extra: {
+    eas: {
+      projectId: "your-project-id",
+    },
+  },
+});

package/assets/images/.gitkeep

@@ -0,0 +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)

package/babel.config.js

@@ -0,0 +1,10 @@
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: [
+      ["babel-preset-expo", { jsxImportSource: "nativewind" }],
+      "nativewind/babel",
+    ],
+    plugins: ["react-native-reanimated/plugin"],
+  };
+};

package/components/ErrorBoundary.tsx

@@ -0,0 +1,169 @@
+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";
+
+interface Props {
+  children: ReactNode;
+  fallback?: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | null;
+  errorInfo: ErrorInfo | null;
+}
+
+/**
+ * Global Error Boundary component
+ * Catches JavaScript errors anywhere in the child component tree
+ * and displays a fallback UI instead of crashing the whole app
+ */
+export class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      hasError: false,
+      error: null,
+      errorInfo: null,
+    };
+  }
+
+  static getDerivedStateFromError(error: Error): Partial<State> {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    this.setState({ errorInfo });
+
+    // Log to your error reporting service (Sentry, Bugsnag, etc.)
+    this.logError(error, errorInfo);
+  }
+
+  private logError(error: Error, errorInfo: ErrorInfo) {
+    // Add breadcrumb for context
+    addBreadcrumb("error-boundary", "Error caught by ErrorBoundary", {
+      componentStack: errorInfo.componentStack?.slice(0, 500),
+    });
+
+    // Send to Sentry
+    captureException(error, {
+      componentStack: errorInfo.componentStack,
+    });
+
+    // Also log to console in dev
+    console.error("ErrorBoundary caught an error:", error);
+    console.error("Component stack:", errorInfo.componentStack);
+  }
+
+  private handleRestart = async () => {
+    try {
+      // Try to reload the app using expo-updates
+      if (!__DEV__) {
+        await Updates.reloadAsync();
+      } else {
+        // In dev, just reset the error state
+        this.setState({
+          hasError: false,
+          error: null,
+          errorInfo: null,
+        });
+      }
+    } catch (e) {
+      // If Updates.reloadAsync fails, reset state
+      this.setState({
+        hasError: false,
+        error: null,
+        errorInfo: null,
+      });
+    }
+  };
+
+  private handleReset = () => {
+    this.setState({
+      hasError: false,
+      error: null,
+      errorInfo: null,
+    });
+  };
+
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+
+      return (
+        <View className="flex-1 items-center justify-center bg-background-light px-6 dark:bg-background-dark">
+          {/* Error Icon */}
+          <View className="mb-6 h-24 w-24 items-center justify-center rounded-full bg-red-100 dark:bg-red-900/30">
+            <Ionicons name="warning-outline" size={48} color="#ef4444" />
+          </View>
+
+          {/* Title */}
+          <Text className="mb-2 text-center text-2xl font-bold text-text-light dark:text-text-dark">
+            Oops! Something went wrong
+          </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.
+          </Text>
+
+          {/* Error details (dev only) */}
+          {__DEV__ && this.state.error && (
+            <ScrollView className="mb-6 max-h-32 w-full rounded-lg bg-gray-100 p-4 dark:bg-gray-800">
+              <Text className="font-mono text-xs text-red-600 dark:text-red-400">
+                {this.state.error.toString()}
+              </Text>
+              {this.state.errorInfo && (
+                <Text className="mt-2 font-mono text-xs text-gray-600 dark:text-gray-400">
+                  {this.state.errorInfo.componentStack?.slice(0, 500)}...
+                </Text>
+              )}
+            </ScrollView>
+          )}
+
+          {/* 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>
+          </View>
+        </View>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+/**
+ * HOC to wrap any component with error boundary
+ */
+export function withErrorBoundary<P extends object>(
+  WrappedComponent: React.ComponentType<P>,
+  fallback?: ReactNode
+) {
+  return function WithErrorBoundary(props: P) {
+    return (
+      <ErrorBoundary fallback={fallback}>
+        <WrappedComponent {...props} />
+      </ErrorBoundary>
+    );
+  };
+}

package/components/forms/FormInput.tsx

@@ -0,0 +1,78 @@
+import { forwardRef } from "react";
+import { TextInput, TextInputProps } from "react-native";
+import {
+  Controller,
+  Control,
+  FieldValues,
+  Path,
+  RegisterOptions,
+} from "react-hook-form";
+import { Input } from "@/components/ui/Input";
+import { Ionicons } from "@expo/vector-icons";
+
+interface FormInputProps<T extends FieldValues>
+  extends Omit<TextInputProps, "value" | "onChangeText"> {
+  name: Path<T>;
+  control: Control<T>;
+  rules?: RegisterOptions<T, Path<T>>;
+  label?: string;
+  hint?: string;
+  leftIcon?: keyof typeof Ionicons.glyphMap;
+  rightIcon?: keyof typeof Ionicons.glyphMap;
+  onRightIconPress?: () => void;
+  containerClassName?: string;
+  inputClassName?: string;
+}
+
+/**
+ * Form-connected Input component using React Hook Form
+ * Automatically handles validation errors and form state
+ */
+export const FormInput = forwardRef(function FormInputInner<
+  T extends FieldValues
+>(
+  {
+    name,
+    control,
+    rules,
+    label,
+    hint,
+    leftIcon,
+    rightIcon,
+    onRightIconPress,
+    containerClassName,
+    inputClassName,
+    ...props
+  }: FormInputProps<T>,
+  ref: React.Ref<TextInput>
+) {
+  return (
+    <Controller
+      name={name}
+      control={control}
+      rules={rules}
+      render={({
+        field: { onChange, onBlur, value },
+        fieldState: { error },
+      }) => (
+        <Input
+          ref={ref}
+          label={label}
+          value={value}
+          onChangeText={onChange}
+          onBlur={onBlur}
+          error={error?.message}
+          hint={hint}
+          leftIcon={leftIcon}
+          rightIcon={rightIcon}
+          onRightIconPress={onRightIconPress}
+          containerClassName={containerClassName}
+          inputClassName={inputClassName}
+          {...props}
+        />
+      )}
+    />
+  );
+}) as <T extends FieldValues>(
+  props: FormInputProps<T> & { ref?: React.Ref<TextInput> }
+) => JSX.Element;

package/components/forms/index.ts

@@ -0,0 +1 @@
+export { FormInput } from "./FormInput";