@croacroa/react-native-template 1.0.0

package/hooks/useDeepLinking.ts

@@ -0,0 +1,256 @@
+import { useEffect, useCallback } from "react";
+import * as Linking from "expo-linking";
+import { router } from "expo-router";
+
+// Define your app's deep link routes
+type DeepLinkRoute =
+  | { path: "login"; params?: never }
+  | { path: "register"; params?: never }
+  | { path: "reset-password"; params: { token: string } }
+  | { path: "profile"; params?: { userId?: string } }
+  | { path: "settings"; params?: never }
+  | { path: "post"; params: { postId: string } };
+
+interface ParsedDeepLink {
+  route: DeepLinkRoute | null;
+  rawUrl: string;
+}
+
+/**
+ * Parse a deep link URL into a route and params
+ */
+function parseDeepLink(url: string): ParsedDeepLink {
+  try {
+    const parsed = Linking.parse(url);
+    const { path, queryParams } = parsed;
+
+    if (!path) {
+      return { route: null, rawUrl: url };
+    }
+
+    // Map URL paths to app routes
+    switch (path) {
+      case "login":
+        return { route: { path: "login" }, rawUrl: url };
+
+      case "register":
+      case "signup":
+        return { route: { path: "register" }, rawUrl: url };
+
+      case "reset-password":
+        if (queryParams?.token && typeof queryParams.token === "string") {
+          return {
+            route: {
+              path: "reset-password",
+              params: { token: queryParams.token },
+            },
+            rawUrl: url,
+          };
+        }
+        return { route: null, rawUrl: url };
+
+      case "profile":
+        return {
+          route: {
+            path: "profile",
+            params: queryParams?.userId
+              ? { userId: String(queryParams.userId) }
+              : undefined,
+          },
+          rawUrl: url,
+        };
+
+      case "settings":
+        return { route: { path: "settings" }, rawUrl: url };
+
+      case "post":
+        if (queryParams?.id && typeof queryParams.id === "string") {
+          return {
+            route: { path: "post", params: { postId: queryParams.id } },
+            rawUrl: url,
+          };
+        }
+        return { route: null, rawUrl: url };
+
+      default: {
+        // Try to handle paths like /post/123
+        const pathParts = path.split("/");
+        if (pathParts[0] === "post" && pathParts[1]) {
+          return {
+            route: { path: "post", params: { postId: pathParts[1] } },
+            rawUrl: url,
+          };
+        }
+        if (pathParts[0] === "profile" && pathParts[1]) {
+          return {
+            route: { path: "profile", params: { userId: pathParts[1] } },
+            rawUrl: url,
+          };
+        }
+        return { route: null, rawUrl: url };
+      }
+    }
+  } catch (error) {
+    console.error("Failed to parse deep link:", error);
+    return { route: null, rawUrl: url };
+  }
+}
+
+/**
+ * Navigate to a deep link route
+ */
+function navigateToRoute(route: DeepLinkRoute): void {
+  switch (route.path) {
+    case "login":
+      router.replace("/(public)/login");
+      break;
+
+    case "register":
+      router.replace("/(public)/register");
+      break;
+
+    case "reset-password":
+      // Navigate to forgot password with token
+      router.push({
+        pathname: "/(public)/forgot-password",
+        params: { token: route.params.token },
+      });
+      break;
+
+    case "profile":
+      if (route.params?.userId) {
+        // Navigate to specific user profile
+        router.push({
+          pathname: "/(auth)/profile",
+          params: { userId: route.params.userId },
+        });
+      } else {
+        // Navigate to own profile
+        router.push("/(auth)/profile");
+      }
+      break;
+
+    case "settings":
+      router.push("/(auth)/settings");
+      break;
+
+    case "post":
+      // You'll need to create this route
+      router.push({
+        pathname: "/(auth)/post/[id]" as const,
+        params: { id: route.params.postId },
+      } as Parameters<typeof router.push>[0]);
+      break;
+  }
+}
+
+interface UseDeepLinkingOptions {
+  /**
+   * Called when a deep link is received but couldn't be parsed
+   */
+  onUnknownLink?: (url: string) => void;
+
+  /**
+   * Called before navigating to allow custom handling
+   * Return false to prevent default navigation
+   */
+  onBeforeNavigate?: (route: DeepLinkRoute) => boolean | void;
+
+  /**
+   * Whether deep linking is enabled
+   * @default true
+   */
+  enabled?: boolean;
+}
+
+/**
+ * Hook to handle deep links in your app
+ *
+ * @example
+ * ```tsx
+ * function App() {
+ *   useDeepLinking({
+ *     onUnknownLink: (url) => console.log('Unknown link:', url),
+ *     onBeforeNavigate: (route) => {
+ *       // Custom validation before navigating
+ *       if (route.path === 'profile' && !isAuthenticated) {
+ *         router.push('/login');
+ *         return false; // Prevent default navigation
+ *       }
+ *     },
+ *   });
+ *
+ *   return <App />;
+ * }
+ * ```
+ */
+export function useDeepLinking(options: UseDeepLinkingOptions = {}): void {
+  const { onUnknownLink, onBeforeNavigate, enabled = true } = options;
+
+  const handleDeepLink = useCallback(
+    (event: { url: string }) => {
+      if (!enabled) return;
+
+      const { route, rawUrl } = parseDeepLink(event.url);
+
+      if (!route) {
+        onUnknownLink?.(rawUrl);
+        console.log("Unknown deep link:", rawUrl);
+        return;
+      }
+
+      // Allow custom handling before navigation
+      const shouldNavigate = onBeforeNavigate?.(route);
+      if (shouldNavigate === false) {
+        return;
+      }
+
+      navigateToRoute(route);
+    },
+    [enabled, onUnknownLink, onBeforeNavigate]
+  );
+
+  useEffect(() => {
+    if (!enabled) return;
+
+    // Handle deep links when app is already open
+    const subscription = Linking.addEventListener("url", handleDeepLink);
+
+    // Handle deep link that opened the app
+    Linking.getInitialURL().then((url) => {
+      if (url) {
+        handleDeepLink({ url });
+      }
+    });
+
+    return () => {
+      subscription.remove();
+    };
+  }, [enabled, handleDeepLink]);
+}
+
+/**
+ * Get the app's deep link URL prefix
+ */
+export function getDeepLinkPrefix(): string {
+  return Linking.createURL("/");
+}
+
+/**
+ * Create a deep link URL for the app
+ *
+ * @example
+ * ```ts
+ * const url = createDeepLink('profile', { userId: '123' });
+ * // Returns: yourapp://profile?userId=123
+ * ```
+ */
+export function createDeepLink(
+  path: string,
+  params?: Record<string, string>
+): string {
+  return Linking.createURL(path, { queryParams: params });
+}
+
+export { parseDeepLink, navigateToRoute };
+export type { DeepLinkRoute, ParsedDeepLink };

package/hooks/useNotifications.ts

@@ -0,0 +1,138 @@
+import { useEffect, useRef } from "react";
+import { Platform } from "react-native";
+import * as Notifications from "expo-notifications";
+import * as Device from "expo-device";
+import Constants from "expo-constants";
+
+import { useNotificationStore } from "@/stores/notificationStore";
+
+// Configure how notifications should be handled when app is in foreground
+Notifications.setNotificationHandler({
+  handleNotification: async () => ({
+    shouldShowAlert: true,
+    shouldPlaySound: true,
+    shouldSetBadge: true,
+  }),
+});
+
+export function useNotifications() {
+  const notificationListener = useRef<Notifications.Subscription>();
+  const responseListener = useRef<Notifications.Subscription>();
+  const { setPushToken, setLastNotification } = useNotificationStore();
+
+  useEffect(() => {
+    // Listen for incoming notifications
+    notificationListener.current =
+      Notifications.addNotificationReceivedListener((notification) => {
+        setLastNotification(notification);
+      });
+
+    // Listen for notification interactions
+    responseListener.current =
+      Notifications.addNotificationResponseReceivedListener((response) => {
+        const data = response.notification.request.content.data;
+        handleNotificationPress(data);
+      });
+
+    return () => {
+      if (notificationListener.current) {
+        Notifications.removeNotificationSubscription(
+          notificationListener.current
+        );
+      }
+      if (responseListener.current) {
+        Notifications.removeNotificationSubscription(responseListener.current);
+      }
+    };
+  }, []);
+
+  const handleNotificationPress = (data: Record<string, unknown>) => {
+    // TODO: Handle notification navigation based on data
+    // Example: router.push(data.screen as string);
+    console.log("Notification pressed with data:", data);
+  };
+
+  const registerForPushNotifications = async () => {
+    if (!Device.isDevice) {
+      console.log("Push notifications require a physical device");
+      return null;
+    }
+
+    // Check existing permissions
+    const { status: existingStatus } =
+      await Notifications.getPermissionsAsync();
+    let finalStatus = existingStatus;
+
+    // Request permissions if not granted
+    if (existingStatus !== "granted") {
+      const { status } = await Notifications.requestPermissionsAsync();
+      finalStatus = status;
+    }
+
+    if (finalStatus !== "granted") {
+      console.log("Push notification permission not granted");
+      return null;
+    }
+
+    // Get the push token
+    try {
+      const projectId = Constants.expoConfig?.extra?.eas?.projectId;
+      const token = await Notifications.getExpoPushTokenAsync({
+        projectId,
+      });
+
+      setPushToken(token.data);
+
+      // Configure Android channel
+      if (Platform.OS === "android") {
+        await Notifications.setNotificationChannelAsync("default", {
+          name: "Default",
+          importance: Notifications.AndroidImportance.MAX,
+          vibrationPattern: [0, 250, 250, 250],
+          lightColor: "#3b82f6",
+        });
+      }
+
+      return token.data;
+    } catch (error) {
+      console.error("Failed to get push token:", error);
+      return null;
+    }
+  };
+
+  const scheduleLocalNotification = async (
+    title: string,
+    body: string,
+    data?: Record<string, unknown>,
+    trigger?: Notifications.NotificationTriggerInput
+  ) => {
+    await Notifications.scheduleNotificationAsync({
+      content: {
+        title,
+        body,
+        data: data || {},
+      },
+      trigger: trigger || null, // null = immediate
+    });
+  };
+
+  const cancelAllNotifications = async () => {
+    await Notifications.cancelAllScheduledNotificationsAsync();
+  };
+
+  const getBadgeCount = async () => {
+    return Notifications.getBadgeCountAsync();
+  };
+
+  const setBadgeCount = async (count: number) => {
+    await Notifications.setBadgeCountAsync(count);
+  };
+
+  return {
+    registerForPushNotifications,
+    scheduleLocalNotification,
+    cancelAllNotifications,
+    getBadgeCount,
+    setBadgeCount,
+  };
+}

package/hooks/useOffline.ts

@@ -0,0 +1,69 @@
+import { useEffect, useState } from "react";
+import NetInfo, { NetInfoState } from "@react-native-community/netinfo";
+import { onlineManager } from "@tanstack/react-query";
+import { toast } from "@/utils/toast";
+
+interface UseOfflineOptions {
+  showToast?: boolean;
+}
+
+/**
+ * Hook to track online/offline status
+ * Integrates with TanStack Query's online manager
+ */
+export function useOffline(options: UseOfflineOptions = {}) {
+  const { showToast = true } = options;
+  const [isOnline, setIsOnline] = useState(true);
+  const [isInitialized, setIsInitialized] = useState(false);
+
+  useEffect(() => {
+    // Get initial state
+    NetInfo.fetch().then((state) => {
+      const online = !!state.isConnected;
+      setIsOnline(online);
+      setIsInitialized(true);
+      onlineManager.setOnline(online);
+    });
+
+    // Subscribe to changes
+    const unsubscribe = NetInfo.addEventListener((state: NetInfoState) => {
+      const online = !!state.isConnected;
+      const wasOnline = isOnline;
+
+      setIsOnline(online);
+      onlineManager.setOnline(online);
+
+      // Show toast on status change (after initialization)
+      if (showToast && isInitialized) {
+        if (!online && wasOnline) {
+          toast.info("You're offline", "Some features may be limited");
+        } else if (online && !wasOnline) {
+          toast.success("Back online", "Syncing data...");
+        }
+      }
+    });
+
+    return () => unsubscribe();
+  }, [isOnline, isInitialized, showToast]);
+
+  return {
+    isOnline,
+    isOffline: !isOnline,
+    isInitialized,
+  };
+}
+
+/**
+ * Hook for pending mutations count
+ * Useful to show sync indicator
+ */
+export function usePendingMutations() {
+  const [pendingCount, setPendingCount] = useState(0);
+
+  // This would need to be integrated with mutation cache
+  // For now, return 0 as a placeholder
+  return {
+    pendingCount,
+    hasPending: pendingCount > 0,
+  };
+}