@croacroa/react-native-template 2.0.0 → 2.0.1

package/components/providers/SuspenseBoundary.tsx

@@ -56,7 +56,7 @@ interface ErrorBoundaryProps {
  * </ErrorBoundary>
  * ```
  */
-export class ErrorBoundary extends Component<
+export class LocalErrorBoundary extends Component<
   ErrorBoundaryProps,
   ErrorBoundaryState
 > {
@@ -232,7 +232,7 @@ export function AsyncBoundary({
   fallback: loadingFallback,
 }: AsyncBoundaryProps) {
   return (
-    <ErrorBoundary
+    <LocalErrorBoundary
       key={resetKey}
       fallback={errorFallback}
       onError={onError}
@@ -246,7 +246,7 @@ export function AsyncBoundary({
       >
         {children}
       </SuspenseBoundary>
-    </ErrorBoundary>
+    </LocalErrorBoundary>
   );
 }
 
@@ -298,11 +298,11 @@ export function QueryBoundary({
   }
 
   return (
-    <ErrorBoundary fallback={errorFallback}>
+    <LocalErrorBoundary fallback={errorFallback}>
       <Suspense fallback={loadingFallback || <DefaultLoadingFallback />}>
         {children}
       </Suspense>
-    </ErrorBoundary>
+    </LocalErrorBoundary>
   );
 }
 
@@ -351,7 +351,7 @@ export function BoundaryProvider({ children }: { children: ReactNode }) {
 
   return (
     <BoundaryContext.Provider value={{ resetAll, reportError }}>
-      <ErrorBoundary key={resetKey}>{children}</ErrorBoundary>
+      <LocalErrorBoundary key={resetKey}>{children}</LocalErrorBoundary>
     </BoundaryContext.Provider>
   );
 }

package/components/providers/index.ts

@@ -1,10 +1,18 @@
 /**
  * @fileoverview Provider components for app-wide functionality
  * @module components/providers
+ *
+ * Error Boundary Usage:
+ * - Use `ErrorBoundary` (from components/ErrorBoundary) for app root with Sentry integration
+ * - Use `LocalErrorBoundary` for local async patterns (lighter, no Sentry)
  */
 
+// Main ErrorBoundary with Sentry integration - use at app root
+export { ErrorBoundary, withErrorBoundary } from "../ErrorBoundary";
+
+// Local boundaries for async patterns - lighter weight, no Sentry
 export {
-  ErrorBoundary,
+  LocalErrorBoundary,
   SuspenseBoundary,
   AsyncBoundary,
   QueryBoundary,

package/hooks/useOffline.ts

@@ -4,7 +4,7 @@
  * @module hooks/useOffline
  */
 
-import { useEffect, useState } from "react";
+import { useEffect, useState, useCallback } from "react";
 import NetInfo, { NetInfoState } from "@react-native-community/netinfo";
 import { onlineManager } from "@tanstack/react-query";
 import { toast } from "@/utils/toast";
@@ -68,9 +68,10 @@ export function useOffline(options: UseOfflineOptions = {}) {
 
 /**
  * Hook for tracking pending mutations count.
- * Useful to show a sync indicator when there are queued offline mutations.
+ * Integrates with the backgroundSync mutation queue.
  *
- * @returns Object with pendingCount and hasPending flag
+ * @param pollingInterval - How often to check the queue (default: 5000ms)
+ * @returns Object with pendingCount, hasPending flag, and refresh function
  *
  * @example
  * ```tsx
@@ -87,13 +88,36 @@ export function useOffline(options: UseOfflineOptions = {}) {
  * }
  * ```
  */
-export function usePendingMutations() {
+export function usePendingMutations(pollingInterval = 5000) {
   const [pendingCount, setPendingCount] = useState(0);
+  const [isLoading, setIsLoading] = useState(true);
+
+  const refresh = useCallback(async () => {
+    try {
+      const { getMutationQueue } = await import("@/services/backgroundSync");
+      const queue = await getMutationQueue();
+      setPendingCount(queue.length);
+    } catch (error) {
+      console.error("[usePendingMutations] Failed to get queue:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    // Initial fetch
+    refresh();
+
+    // Poll for updates
+    const interval = setInterval(refresh, pollingInterval);
+
+    return () => clearInterval(interval);
+  }, [refresh, pollingInterval]);
 
-  // This would need to be integrated with mutation cache
-  // For now, return 0 as a placeholder
   return {
     pendingCount,
     hasPending: pendingCount > 0,
+    isLoading,
+    refresh,
   };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@croacroa/react-native-template",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "Production-ready React Native template with Expo, authentication, i18n, offline support, and more",
   "main": "expo-router/entry",
   "author": "Croacroa <contact@croacroa.dev>",

package/services/security.ts

@@ -199,6 +199,9 @@ export const SSL_PINNING_CONFIG = {
 
   /**
    * Generate Android network_security_config.xml content
+   * Save this to android/app/src/main/res/xml/network_security_config.xml
+   * and reference it in AndroidManifest.xml:
+   * <application android:networkSecurityConfig="@xml/network_security_config">
    */
   getAndroidConfig(): string {
     const pinEntries = Object.entries(SECURITY.SSL_PINS)
@@ -209,7 +212,7 @@ export const SSL_PINNING_CONFIG = {
 
         return `    <domain-config cleartextTrafficPermitted="false">
       <domain includeSubdomains="true">${domain}</domain>
-      <pin-set expiration="2025-12-31">
+      <pin-set expiration="2026-12-31">
 ${pinElements}
       </pin-set>
     </domain-config>`;
@@ -226,4 +229,58 @@ ${pinElements}
 ${pinEntries}
 </network-security-config>`;
   },
+
+  /**
+   * Generate iOS TrustKit configuration dictionary
+   * Add this to your AppDelegate.mm or use expo-build-properties plugin
+   *
+   * For Expo managed workflow, add to app.config.ts:
+   * ```
+   * plugins: [
+   *   ["expo-build-properties", {
+   *     ios: {
+   *       infoPlist: SSL_PINNING_CONFIG.getIOSInfoPlist()
+   *     }
+   *   }]
+   * ]
+   * ```
+   */
+  getIOSConfig(): Record<string, unknown> {
+    const pinnedDomains: Record<string, unknown> = {};
+
+    Object.entries(SECURITY.SSL_PINS).forEach(([domain, pins]) => {
+      pinnedDomains[domain] = {
+        TSKIncludeSubdomains: true,
+        TSKEnforcePinning: true,
+        TSKPublicKeyHashes: pins.map((pin) => pin.replace("sha256/", "")),
+      };
+    });
+
+    return {
+      TSKSwizzleNetworkDelegates: true,
+      TSKPinnedDomains: pinnedDomains,
+    };
+  },
+
+  /**
+   * Generate iOS Info.plist entries for SSL pinning
+   */
+  getIOSInfoPlist(): Record<string, unknown> {
+    return {
+      NSAppTransportSecurity: {
+        NSAllowsArbitraryLoads: false,
+        NSPinnedDomains: Object.fromEntries(
+          Object.entries(SECURITY.SSL_PINS).map(([domain, pins]) => [
+            domain,
+            {
+              NSIncludesSubdomains: true,
+              NSPinnedLeafIdentities: pins.map((pin) => ({
+                "SPKI-SHA256-BASE64": pin.replace("sha256/", ""),
+              })),
+            },
+          ])
+        ),
+      },
+    };
+  },
 };

package/utils/validation.ts

@@ -12,7 +12,8 @@ export const passwordSchema = z
   .min(8, "Password must be at least 8 characters")
   .regex(/[A-Z]/, "Password must contain at least one uppercase letter")
   .regex(/[a-z]/, "Password must contain at least one lowercase letter")
-  .regex(/[0-9]/, "Password must contain at least one number");
+  .regex(/[0-9]/, "Password must contain at least one number")
+  .regex(/[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/, "Password must contain at least one special character");
 
 export const nameSchema = z
   .string()