@croacroa/react-native-template 1.0.0

package/services/queryClient.ts

@@ -0,0 +1,97 @@
+import { QueryClient } from "@tanstack/react-query";
+import { createAsyncStoragePersister } from "@tanstack/query-async-storage-persister";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import NetInfo from "@react-native-community/netinfo";
+import { onlineManager, focusManager } from "@tanstack/react-query";
+import { AppState, Platform } from "react-native";
+import type { AppStateStatus } from "react-native";
+
+/**
+ * Configure online state management
+ * TanStack Query will pause queries when offline and resume when online
+ */
+export function setupOnlineManager() {
+  onlineManager.setEventListener((setOnline) => {
+    return NetInfo.addEventListener((state) => {
+      setOnline(!!state.isConnected);
+    });
+  });
+}
+
+/**
+ * Configure focus management
+ * Refetch queries when app comes to foreground
+ */
+export function setupFocusManager() {
+  function onAppStateChange(status: AppStateStatus) {
+    if (Platform.OS !== "web") {
+      focusManager.setFocused(status === "active");
+    }
+  }
+
+  const subscription = AppState.addEventListener("change", onAppStateChange);
+  return () => subscription.remove();
+}
+
+/**
+ * Create the query client with production-ready defaults
+ */
+export function createQueryClient() {
+  return new QueryClient({
+    defaultOptions: {
+      queries: {
+        // Cache data for 5 minutes by default
+        staleTime: 1000 * 60 * 5,
+        // Keep unused data in cache for 30 minutes
+        gcTime: 1000 * 60 * 30,
+        // Retry failed requests up to 3 times
+        retry: 3,
+        retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 30000),
+        // Don't refetch on window focus in dev (annoying)
+        refetchOnWindowFocus: !__DEV__,
+        // Refetch on reconnect
+        refetchOnReconnect: true,
+        // Keep previous data while fetching new data
+        placeholderData: (previousData: unknown) => previousData,
+      },
+      mutations: {
+        // Retry mutations once on failure
+        retry: 1,
+        retryDelay: 1000,
+      },
+    },
+  });
+}
+
+/**
+ * Create the async storage persister for offline support
+ */
+export function createPersister() {
+  return createAsyncStoragePersister({
+    storage: AsyncStorage,
+    key: "REACT_QUERY_CACHE",
+    // Throttle writes to storage (1 second)
+    throttleTime: 1000,
+    // Serialize/deserialize functions
+    serialize: JSON.stringify,
+    deserialize: JSON.parse,
+  });
+}
+
+/**
+ * Default persist options
+ */
+export const persistOptions = {
+  persister: createPersister(),
+  // Maximum age of persisted data (24 hours)
+  maxAge: 1000 * 60 * 60 * 24,
+  // Only persist successful queries
+  dehydrateOptions: {
+    shouldDehydrateQuery: (query: { state: { status: string } }) => {
+      return query.state.status === "success";
+    },
+  },
+};
+
+// Pre-configured query client singleton
+export const queryClient = createQueryClient();

package/services/sentry.ts

@@ -0,0 +1,131 @@
+import * as Sentry from "@sentry/react-native";
+import { IS_DEV, IS_PROD, APP_VERSION } from "@/constants/config";
+
+// TODO: Replace with your actual Sentry DSN
+// Get it from: https://sentry.io -> Project Settings -> Client Keys (DSN)
+const SENTRY_DSN = process.env.EXPO_PUBLIC_SENTRY_DSN || "";
+
+/**
+ * Initialize Sentry error tracking
+ * Call this early in app startup (before RootLayout)
+ */
+export function initSentry() {
+  if (!SENTRY_DSN) {
+    if (IS_DEV) {
+      console.log("[Sentry] No DSN configured, skipping initialization");
+    }
+    return;
+  }
+
+  Sentry.init({
+    dsn: SENTRY_DSN,
+    debug: IS_DEV,
+    enabled: !IS_DEV, // Only enable in non-dev environments
+    environment: IS_PROD ? "production" : "staging",
+    release: APP_VERSION,
+
+    // Performance Monitoring
+    tracesSampleRate: IS_PROD ? 0.2 : 1.0, // 20% in prod, 100% in staging
+
+    // Session Replay (if needed)
+    // replaysSessionSampleRate: 0.1,
+    // replaysOnErrorSampleRate: 1.0,
+
+    // Integrations
+    integrations: [
+      Sentry.reactNativeTracingIntegration(),
+    ],
+
+    // Filter out certain errors
+    beforeSend(event) {
+      // Don't send events in dev
+      if (IS_DEV) {
+        console.log("[Sentry] Would send event:", event);
+        return null;
+      }
+
+      // Filter out network errors that are expected
+      if (event.message?.includes("Network request failed")) {
+        return null;
+      }
+
+      return event;
+    },
+  });
+}
+
+/**
+ * Capture an exception with optional context
+ */
+export function captureException(
+  error: Error,
+  context?: Record<string, unknown>
+) {
+  if (IS_DEV) {
+    console.error("[Sentry] Exception:", error, context);
+    return;
+  }
+
+  Sentry.captureException(error, {
+    extra: context,
+  });
+}
+
+/**
+ * Capture a message with optional level
+ */
+export function captureMessage(
+  message: string,
+  level: Sentry.SeverityLevel = "info"
+) {
+  if (IS_DEV) {
+    console.log(`[Sentry] ${level}: ${message}`);
+    return;
+  }
+
+  Sentry.captureMessage(message, level);
+}
+
+/**
+ * Set user context for error tracking
+ */
+export function setUser(user: { id: string; email?: string; name?: string } | null) {
+  if (user) {
+    Sentry.setUser({
+      id: user.id,
+      email: user.email,
+      username: user.name,
+    });
+  } else {
+    Sentry.setUser(null);
+  }
+}
+
+/**
+ * Add breadcrumb for debugging
+ */
+export function addBreadcrumb(
+  category: string,
+  message: string,
+  data?: Record<string, unknown>
+) {
+  Sentry.addBreadcrumb({
+    category,
+    message,
+    data,
+    level: "info",
+  });
+}
+
+/**
+ * Start a performance transaction
+ */
+export function startTransaction(name: string, op: string) {
+  return Sentry.startInactiveSpan({
+    name,
+    op,
+  });
+}
+
+// Re-export Sentry for advanced usage
+export { Sentry };

package/services/storage.ts

@@ -0,0 +1,82 @@
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import * as SecureStore from "expo-secure-store";
+
+/**
+ * Regular storage for non-sensitive data
+ * Uses AsyncStorage under the hood
+ */
+export const storage = {
+  async get<T>(key: string): Promise<T | null> {
+    try {
+      const value = await AsyncStorage.getItem(key);
+      return value ? JSON.parse(value) : null;
+    } catch (error) {
+      console.error(`Failed to get ${key} from storage:`, error);
+      return null;
+    }
+  },
+
+  async set<T>(key: string, value: T): Promise<void> {
+    try {
+      await AsyncStorage.setItem(key, JSON.stringify(value));
+    } catch (error) {
+      console.error(`Failed to set ${key} in storage:`, error);
+    }
+  },
+
+  async remove(key: string): Promise<void> {
+    try {
+      await AsyncStorage.removeItem(key);
+    } catch (error) {
+      console.error(`Failed to remove ${key} from storage:`, error);
+    }
+  },
+
+  async clear(): Promise<void> {
+    try {
+      await AsyncStorage.clear();
+    } catch (error) {
+      console.error("Failed to clear storage:", error);
+    }
+  },
+
+  async getAllKeys(): Promise<readonly string[]> {
+    try {
+      return await AsyncStorage.getAllKeys();
+    } catch (error) {
+      console.error("Failed to get all keys from storage:", error);
+      return [];
+    }
+  },
+};
+
+/**
+ * Secure storage for sensitive data (tokens, credentials)
+ * Uses expo-secure-store (Keychain on iOS, EncryptedSharedPreferences on Android)
+ */
+export const secureStorage = {
+  async get(key: string): Promise<string | null> {
+    try {
+      return await SecureStore.getItemAsync(key);
+    } catch (error) {
+      console.error(`Failed to get ${key} from secure storage:`, error);
+      return null;
+    }
+  },
+
+  async set(key: string, value: string): Promise<void> {
+    try {
+      await SecureStore.setItemAsync(key, value);
+    } catch (error) {
+      console.error(`Failed to set ${key} in secure storage:`, error);
+    }
+  },
+
+  async remove(key: string): Promise<void> {
+    try {
+      await SecureStore.deleteItemAsync(key);
+    } catch (error) {
+      console.error(`Failed to remove ${key} from secure storage:`, error);
+    }
+  },
+};

package/stores/appStore.ts

@@ -0,0 +1,54 @@
+import { create } from "zustand";
+import { persist, createJSONStorage } from "zustand/middleware";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+
+interface AppState {
+  // App-wide loading state
+  isLoading: boolean;
+  setIsLoading: (loading: boolean) => void;
+
+  // Onboarding
+  hasCompletedOnboarding: boolean;
+  setHasCompletedOnboarding: (completed: boolean) => void;
+
+  // Feature flags (example)
+  featureFlags: Record<string, boolean>;
+  setFeatureFlag: (key: string, value: boolean) => void;
+
+  // Reset all state
+  reset: () => void;
+}
+
+const initialState = {
+  isLoading: false,
+  hasCompletedOnboarding: false,
+  featureFlags: {},
+};
+
+export const useAppStore = create<AppState>()(
+  persist(
+    (set) => ({
+      ...initialState,
+
+      setIsLoading: (loading) => set({ isLoading: loading }),
+
+      setHasCompletedOnboarding: (completed) =>
+        set({ hasCompletedOnboarding: completed }),
+
+      setFeatureFlag: (key, value) =>
+        set((state) => ({
+          featureFlags: { ...state.featureFlags, [key]: value },
+        })),
+
+      reset: () => set(initialState),
+    }),
+    {
+      name: "app-storage",
+      storage: createJSONStorage(() => AsyncStorage),
+      partialize: (state) => ({
+        hasCompletedOnboarding: state.hasCompletedOnboarding,
+        featureFlags: state.featureFlags,
+      }),
+    }
+  )
+);

package/stores/index.ts

@@ -0,0 +1,2 @@
+export { useAppStore } from "./appStore";
+export { useNotificationStore } from "./notificationStore";

package/stores/notificationStore.ts

@@ -0,0 +1,40 @@
+import { create } from "zustand";
+import { persist, createJSONStorage } from "zustand/middleware";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import * as Notifications from "expo-notifications";
+
+interface NotificationState {
+  pushToken: string | null;
+  isEnabled: boolean;
+  lastNotification: Notifications.Notification | null;
+  setPushToken: (token: string | null) => void;
+  setIsEnabled: (enabled: boolean) => void;
+  toggleNotifications: () => void;
+  setLastNotification: (notification: Notifications.Notification | null) => void;
+}
+
+export const useNotificationStore = create<NotificationState>()(
+  persist(
+    (set, get) => ({
+      pushToken: null,
+      isEnabled: true,
+      lastNotification: null,
+
+      setPushToken: (token) => set({ pushToken: token }),
+
+      setIsEnabled: (enabled) => set({ isEnabled: enabled }),
+
+      toggleNotifications: () => set({ isEnabled: !get().isEnabled }),
+
+      setLastNotification: (notification) =>
+        set({ lastNotification: notification }),
+    }),
+    {
+      name: "notification-storage",
+      storage: createJSONStorage(() => AsyncStorage),
+      partialize: (state) => ({
+        isEnabled: state.isEnabled,
+      }),
+    }
+  )
+);

package/tailwind.config.js

@@ -0,0 +1,47 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./app/**/*.{js,jsx,ts,tsx}",
+    "./components/**/*.{js,jsx,ts,tsx}",
+  ],
+  presets: [require("nativewind/preset")],
+  theme: {
+    extend: {
+      colors: {
+        // Croacroa emerald green
+        primary: {
+          50: "#ecfdf5",
+          100: "#d1fae5",
+          200: "#a7f3d0",
+          300: "#6ee7b7",
+          400: "#34d399",
+          500: "#10b981",
+          600: "#059669",
+          700: "#047857",
+          800: "#065f46",
+          900: "#064e3b",
+        },
+        background: {
+          light: "#ffffff",
+          dark: "#0f172a",
+        },
+        surface: {
+          light: "#f8fafc",
+          dark: "#1e293b",
+        },
+        text: {
+          light: "#0f172a",
+          dark: "#f8fafc",
+        },
+        muted: {
+          light: "#64748b",
+          dark: "#94a3b8",
+        },
+      },
+      fontFamily: {
+        sans: ["Inter", "system-ui", "sans-serif"],
+      },
+    },
+  },
+  plugins: [],
+};

package/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "strict": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./*"],
+      "@/components/*": ["components/*"],
+      "@/hooks/*": ["hooks/*"],
+      "@/stores/*": ["stores/*"],
+      "@/services/*": ["services/*"],
+      "@/theme/*": ["theme/*"],
+      "@/constants/*": ["constants/*"],
+      "@/utils/*": ["utils/*"],
+      "@/types/*": ["types/*"]
+    },
+    "types": ["jest", "@testing-library/jest-native"]
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+    ".expo/types/**/*.ts",
+    "expo-env.d.ts"
+  ],
+  "exclude": ["node_modules"]
+}

package/types/index.ts

@@ -0,0 +1,42 @@
+// Re-export all types from a single entry point
+export * from "./user";
+
+// API Response types
+export interface ApiResponse<T> {
+  data: T;
+  message?: string;
+  success: boolean;
+}
+
+export interface PaginatedResponse<T> {
+  data: T[];
+  page: number;
+  pageSize: number;
+  total: number;
+  totalPages: number;
+}
+
+// Error types
+export interface ApiError {
+  message: string;
+  code?: string;
+  status: number;
+  details?: Record<string, string[]>;
+}
+
+// Navigation types (extend as needed)
+export type RootStackParamList = {
+  "(public)/login": undefined;
+  "(public)/register": undefined;
+  "(public)/forgot-password": undefined;
+  "(auth)/home": undefined;
+  "(auth)/profile": undefined;
+  "(auth)/settings": undefined;
+};
+
+// Notification types
+export interface NotificationData {
+  type: "message" | "alert" | "promotion";
+  screen?: string;
+  params?: Record<string, unknown>;
+}

package/types/user.ts

@@ -0,0 +1,63 @@
+/**
+ * Centralized User types - Single source of truth
+ * Import from here across the entire app
+ */
+
+export interface User {
+  id: string;
+  email: string;
+  name: string;
+  avatar?: string;
+  createdAt?: string;
+  updatedAt?: string;
+}
+
+export interface AuthTokens {
+  accessToken: string;
+  refreshToken: string;
+  expiresAt: number;
+}
+
+export interface AuthState {
+  user: User | null;
+  tokens: AuthTokens | null;
+  isAuthenticated: boolean;
+  isLoading: boolean;
+}
+
+// API DTOs
+export interface LoginRequest {
+  email: string;
+  password: string;
+}
+
+export interface LoginResponse {
+  user: User;
+  accessToken: string;
+  refreshToken: string;
+  expiresIn: number;
+}
+
+export interface RegisterRequest {
+  name: string;
+  email: string;
+  password: string;
+}
+
+export interface RegisterResponse extends LoginResponse {}
+
+export interface RefreshTokenRequest {
+  refreshToken: string;
+}
+
+export interface RefreshTokenResponse {
+  accessToken: string;
+  refreshToken: string;
+  expiresIn: number;
+}
+
+export interface UpdateUserRequest {
+  name?: string;
+  email?: string;
+  avatar?: string;
+}