@umituz/react-native-subscription 3.1.10 → 3.1.12

package/src/domains/subscription/presentation/screens/components/SubscriptionHeaderContent.tsx

@@ -11,6 +11,12 @@ interface SubscriptionHeaderContentStyles {
   value: TextStyle;
 }
 
+interface DetailInfo {
+  label?: string;
+  value: string;
+  highlight?: boolean;
+}
+
 interface SubscriptionHeaderContentProps {
   showExpirationDate: boolean;
   expirationDate?: string;
@@ -28,106 +34,116 @@ interface SubscriptionHeaderContentProps {
   isSandbox?: boolean;
 }
 
-export const SubscriptionHeaderContent: React.FC<SubscriptionHeaderContentProps> = ({
-  showExpirationDate,
-  expirationDate,
-  purchaseDate,
-  showExpiring,
-  translations,
-  styles,
-  willRenew,
-  periodType: _periodType,
-  packageType,
-  store,
-  originalPurchaseDate,
-  latestPurchaseDate,
-  billingIssuesDetected,
-  isSandbox,
-}) => (
-  <View style={styles.details}>
-    {showExpirationDate && expirationDate && (
-      <DetailRow
-        label={translations.expiresLabel}
-        value={expirationDate}
-        highlight={showExpiring}
-        style={styles.row}
-        labelStyle={styles.label}
-        valueStyle={styles.value}
-      />
-    )}
-    {purchaseDate && (
-      <DetailRow
-        label={translations.purchasedLabel}
-        value={purchaseDate}
-        style={styles.row}
-        labelStyle={styles.label}
-        valueStyle={styles.value}
-      />
-    )}
-    {willRenew !== null && willRenew !== undefined && translations.willRenewLabel && (
-      <DetailRow
-        label={translations.willRenewLabel}
-        value={willRenew ? (translations.willRenewYes ?? "Yes") : (translations.willRenewNo ?? "No")}
-        highlight={!willRenew}
-        style={styles.row}
-        labelStyle={styles.label}
-        valueStyle={styles.value}
-      />
-    )}
-    {packageType && translations.periodTypeLabel && (
-      <DetailRow
-        label={translations.periodTypeLabel}
-        value={formatPackageTypeForDisplay(packageType)}
-        style={styles.row}
-        labelStyle={styles.label}
-        valueStyle={styles.value}
-      />
-    )}
-    {store && translations.storeLabel && (
-      <DetailRow
-        label={translations.storeLabel}
-        value={store}
-        style={styles.row}
-        labelStyle={styles.label}
-        valueStyle={styles.value}
-      />
-    )}
-    {originalPurchaseDate && translations.originalPurchaseDateLabel && (
-      <DetailRow
-        label={translations.originalPurchaseDateLabel}
-        value={originalPurchaseDate}
-        style={styles.row}
-        labelStyle={styles.label}
-        valueStyle={styles.value}
-      />
-    )}
-    {latestPurchaseDate && translations.latestPurchaseDateLabel && (
-      <DetailRow
-        label={translations.latestPurchaseDateLabel}
-        value={latestPurchaseDate}
-        style={styles.row}
-        labelStyle={styles.label}
-        valueStyle={styles.value}
-      />
-    )}
-    {billingIssuesDetected && translations.billingIssuesLabel && (
-      <DetailRow
-        label={translations.billingIssuesLabel}
-        value={translations.billingIssuesDetected ?? "Detected"}
-        highlight={true}
-        style={styles.row}
-        labelStyle={styles.label}
-        valueStyle={styles.value}
-      />
-    )}
-    {typeof __DEV__ !== 'undefined' && __DEV__ && isSandbox && translations.sandboxLabel && (
-      <DetailRow
-        label={translations.sandboxLabel}
-        value={translations.sandboxTestMode ?? "Test Mode"}
-        style={styles.row}
-        labelStyle={styles.label}
-        valueStyle={styles.value}
-      />
-    )}
-  </View>
-);
+/**
+ * Helper to build detail row data array.
+ * Reduces code duplication by centralizing detail row creation logic.
+ */
+function buildDetails(
+  props: SubscriptionHeaderContentProps
+): DetailInfo[] {
+  const {
+    showExpirationDate,
+    expirationDate,
+    purchaseDate,
+    showExpiring,
+    translations,
+    willRenew,
+    packageType,
+    store,
+    originalPurchaseDate,
+    latestPurchaseDate,
+    billingIssuesDetected,
+    isSandbox,
+  } = props;
+
+  const details: DetailInfo[] = [];
+
+  if (showExpirationDate && expirationDate) {
+    details.push({
+      label: translations.expiresLabel,
+      value: expirationDate,
+      highlight: showExpiring,
+    });
+  }
+
+  if (purchaseDate) {
+    details.push({
+      label: translations.purchasedLabel,
+      value: purchaseDate,
+    });
+  }
+
+  if (willRenew !== null && willRenew !== undefined && translations.willRenewLabel) {
+    details.push({
+      label: translations.willRenewLabel,
+      value: willRenew ? (translations.willRenewYes ?? "Yes") : (translations.willRenewNo ?? "No"),
+      highlight: !willRenew,
+    });
+  }
+
+  if (packageType && translations.periodTypeLabel) {
+    details.push({
+      label: translations.periodTypeLabel,
+      value: formatPackageTypeForDisplay(packageType),
+    });
+  }
+
+  if (store && translations.storeLabel) {
+    details.push({
+      label: translations.storeLabel,
+      value: store,
+    });
+  }
+
+  if (originalPurchaseDate && translations.originalPurchaseDateLabel) {
+    details.push({
+      label: translations.originalPurchaseDateLabel,
+      value: originalPurchaseDate,
+    });
+  }
+
+  if (latestPurchaseDate && translations.latestPurchaseDateLabel) {
+    details.push({
+      label: translations.latestPurchaseDateLabel,
+      value: latestPurchaseDate,
+    });
+  }
+
+  if (billingIssuesDetected && translations.billingIssuesLabel) {
+    details.push({
+      label: translations.billingIssuesLabel,
+      value: translations.billingIssuesDetected ?? "Detected",
+      highlight: true,
+    });
+  }
+
+  if (typeof __DEV__ !== 'undefined' && __DEV__ && isSandbox && translations.sandboxLabel) {
+    details.push({
+      label: translations.sandboxLabel,
+      value: translations.sandboxTestMode ?? "Test Mode",
+    });
+  }
+
+  return details;
+}
+
+export const SubscriptionHeaderContent: React.FC<SubscriptionHeaderContentProps> = (props) => {
+  const { styles } = props;
+  const details = buildDetails(props);
+
+  return (
+    <View style={styles.details}>
+      {details.map((detail) => (
+        <DetailRow
+          key={detail.label}
+          label={detail.label!}
+          value={detail.value}
+          highlight={detail.highlight}
+          style={styles.row}
+          labelStyle={styles.label}
+          valueStyle={styles.value}
+        />
+      ))}
+    </View>
+  );
+};

package/src/domains/wallet/presentation/components/BalanceCard.tsx

@@ -58,6 +58,13 @@ export const BalanceCard: React.FC<BalanceCardProps> = React.memo(({
       </View>
     </View>
   );
+}, (prevProps, nextProps) => {
+  // PERFORMANCE: Custom comparison to prevent unnecessary re-renders
+  return (
+    prevProps.balance === nextProps.balance &&
+    prevProps.translations === nextProps.translations &&
+    prevProps.iconName === nextProps.iconName
+  );
 });
 
 const styles = StyleSheet.create({

package/src/domains/wallet/presentation/components/TransactionItem.tsx

@@ -44,4 +44,15 @@ export const TransactionItem: React.FC<TransactionItemProps> = React.memo(({
       </AtomicText>
     </View>
   );
+}, (prevProps, nextProps) => {
+  // PERFORMANCE: Custom comparison to prevent unnecessary re-renders
+  return (
+    prevProps.transaction.id === nextProps.transaction.id &&
+    prevProps.transaction.change === nextProps.transaction.change &&
+    prevProps.transaction.reason === nextProps.transaction.reason &&
+    prevProps.transaction.description === nextProps.transaction.description &&
+    prevProps.transaction.createdAt === nextProps.transaction.createdAt &&
+    prevProps.translations === nextProps.translations &&
+    prevProps.dateFormatter === nextProps.dateFormatter
+  );
 });

package/src/index.components.ts

@@ -35,6 +35,6 @@ export type { PaywallScreenProps } from "./domains/paywall/components/PaywallScr
 
 // Root Flow Components
 export { ManagedSubscriptionFlow } from "./domains/subscription/presentation/components/ManagedSubscriptionFlow";
-export type { ManagedSubscriptionFlowProps } from "./domains/subscription/presentation/components/ManagedSubscriptionFlow";
+export type { ManagedSubscriptionFlowProps } from "./domains/subscription/presentation/components/ManagedSubscriptionFlow.types";
 export { SubscriptionFlowStatus } from "./domains/subscription/presentation/useSubscriptionFlow";
 export { SubscriptionFlowProvider, useSubscriptionFlowStatus } from "./domains/subscription/presentation/providers/SubscriptionFlowProvider";

package/src/shared/infrastructure/SubscriptionEventBus.ts

@@ -36,8 +36,10 @@ class SubscriptionEventBus {
     const listeners = this.listeners.get(event);
     if (!listeners || listeners.size === 0) return;
 
-    listeners.forEach(callback => {
-      queueMicrotask(() => {
+    // PERFORMANCE: Batch all callbacks in a single microtask to reduce call stack overhead
+    // This prevents UI jank when multiple listeners are registered
+    queueMicrotask(() => {
+      listeners.forEach(callback => {
         try {
           callback(data);
         } catch (error) {

package/src/shared/presentation/hooks/useFirestoreRealTime.ts

@@ -14,7 +14,7 @@
  * - Support for both document and collection queries
  */
 
-import { useEffect, useState, useCallback } from "react";
+import { useEffect, useState, useCallback, useRef } from "react";
 import {
   onSnapshot,
   type Query,
@@ -65,6 +65,8 @@ export type Mapper<TDocument, TEntity> = (
 /**
  * Generic hook for real-time document sync via Firestore onSnapshot.
  *
+ * PERFORMANCE: Uses useRef to stabilize mapper and prevent unnecessary re-subscriptions
+ *
  * @template TDocument - Firestore document type
  * @template TEntity - Domain entity type
  *
@@ -85,6 +87,10 @@ export function useFirestoreDocumentRealTime<TDocument, TEntity>(
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<Error | null>(null);
 
+  // Stabilize mapper to prevent re-subscriptions when parent re-renders
+  const mapperRef = useRef(mapper);
+  mapperRef.current = mapper;
+
   useEffect(() => {
     // Reset state when userId changes
     if (!userId) {
@@ -106,7 +112,7 @@ export function useFirestoreDocumentRealTime<TDocument, TEntity>(
       docRef,
       (snapshot) => {
         if (snapshot.exists()) {
-          const entity = mapper(snapshot.data() as TDocument, snapshot.id);
+          const entity = mapperRef.current(snapshot.data() as TDocument, snapshot.id);
           setData(entity);
         } else {
           setData(null);
@@ -123,7 +129,7 @@ export function useFirestoreDocumentRealTime<TDocument, TEntity>(
     return () => {
       unsubscribe();
     };
-  }, [userId, docRef, mapper, tag]);
+  }, [userId, docRef, tag]); // Removed mapper from deps
 
   const refetch = useCallback(() => {
     // Real-time sync doesn't need refetch, but keep for API compatibility
@@ -143,6 +149,8 @@ export function useFirestoreDocumentRealTime<TDocument, TEntity>(
 /**
  * Generic hook for real-time collection sync via Firestore onSnapshot.
  *
+ * PERFORMANCE: Uses useRef to stabilize mapper and optimize snapshot processing
+ *
  * @template TDocument - Firestore document type
  * @template TEntity - Domain entity type
  *
@@ -163,6 +171,10 @@ export function useFirestoreCollectionRealTime<TDocument, TEntity>(
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<Error | null>(null);
 
+  // Stabilize mapper to prevent re-subscriptions when parent re-renders
+  const mapperRef = useRef(mapper);
+  mapperRef.current = mapper;
+
   useEffect(() => {
     // Reset state when userId changes
     if (!userId) {
@@ -178,10 +190,14 @@ export function useFirestoreCollectionRealTime<TDocument, TEntity>(
     const unsubscribe = onSnapshot(
       query,
       (snapshot) => {
-        const entities: TEntity[] = [];
+        // PERFORMANCE: Pre-allocate array with known size for better memory efficiency
+        const entities: TEntity[] = new Array(snapshot.size);
+        let index = 0;
+
         snapshot.forEach((doc) => {
-          entities.push(mapper(doc.data() as TDocument, doc.id));
+          entities[index++] = mapperRef.current(doc.data() as TDocument, doc.id);
         });
+
         setData(entities);
         setIsLoading(false);
       },
@@ -195,7 +211,7 @@ export function useFirestoreCollectionRealTime<TDocument, TEntity>(
     return () => {
       unsubscribe();
     };
-  }, [userId, query, mapper, tag]);
+  }, [userId, query, tag]); // Removed mapper from deps
 
   const refetch = useCallback(() => {
     // Real-time sync doesn't need refetch, but keep for API compatibility

package/src/shared/utils/errors/errorAssertions.ts

@@ -0,0 +1,35 @@
+/**
+ * Error Assertion Functions
+ *
+ * Runtime validation and type narrowing utilities.
+ * Throws errors with consistent formatting.
+ */
+
+import { createError } from "./errorConversion";
+
+/**
+ * Assert that a condition is true, throw error otherwise.
+ * Useful for validation and runtime checks.
+ */
+export function assert(
+  condition: boolean,
+  message: string,
+  code: string = "ASSERTION_ERROR"
+): asserts condition {
+  if (!condition) {
+    throw createError(message, code);
+  }
+}
+
+/**
+ * Assert that a value is not null/undefined.
+ * Throws error if value is null/undefined, returns value otherwise.
+ * Useful for type narrowing.
+ */
+export function assertNotNil<T>(
+  value: T | null | undefined,
+  message: string = "Value should not be null or undefined"
+): T {
+  assert(value !== null && value !== undefined, message, "NOT_NIL_ERROR");
+  return value;
+}

package/src/shared/utils/errors/errorConversion.ts

@@ -0,0 +1,73 @@
+/**
+ * Error Conversion Utilities
+ *
+ * Functions to normalize and convert unknown errors to Error objects.
+ * Separated for better modularity and testability.
+ */
+
+import { logError } from "../logger";
+
+/**
+ * Safely convert unknown error to Error object.
+ * Useful when catching errors from external APIs.
+ */
+export function toError(error: unknown): Error {
+  if (error instanceof Error) {
+    return error;
+  }
+
+  if (typeof error === "string") {
+    return new Error(error);
+  }
+
+  if (error === null || error === undefined) {
+    return new Error("Unknown error occurred");
+  }
+
+  try {
+    return new Error(JSON.stringify(error));
+  } catch {
+    return new Error(String(error));
+  }
+}
+
+/**
+ * Create an error with a code and optional cause.
+ */
+export function createError(
+  message: string,
+  code: string,
+  cause?: Error
+): Error {
+  const error = new Error(message);
+  error.name = code;
+
+  if (cause) {
+    // @ts-ignore - adding cause property
+    error.cause = cause;
+  }
+
+  return error;
+}
+
+/**
+ * Log an error with consistent formatting.
+ * Only logs in __DEV__ mode.
+ */
+export function logAndReturnError(
+  tag: string,
+  message: string,
+  error: unknown,
+  context?: Record<string, unknown>
+): Error {
+  const normalizedError = toError(error);
+
+  if (typeof __DEV__ !== "undefined" && __DEV__) {
+    logError(tag, message, normalizedError, {
+      ...context,
+      originalError: error,
+    });
+  }
+
+  return normalizedError;
+}

package/src/shared/utils/errors/errorTypeGuards.ts

@@ -0,0 +1,27 @@
+/**
+ * Error Type Guards
+ *
+ * Type-safe error checking utilities.
+ * Provides type narrowing for error objects.
+ */
+
+/**
+ * Type guard to check if value is an Error.
+ */
+export function isError(value: unknown): value is Error {
+  return value instanceof Error;
+}
+
+/**
+ * Type guard to check if error has a code property.
+ */
+export function isErrorWithCode(error: Error): error is Error & { code: string } {
+  return "code" in error && typeof error.code === "string";
+}
+
+/**
+ * Type guard to check if error has a cause property.
+ */
+export function isErrorWithCause(error: Error): error is Error & { cause: Error } {
+  return "cause" in error && error.cause instanceof Error;
+}

package/src/shared/utils/errors/errorWrappers.ts

@@ -0,0 +1,54 @@
+/**
+ * Error Wrapper Functions
+ *
+ * Wrap functions with error handling and return Result types.
+ * Provides consistent error handling patterns.
+ */
+
+import { logAndReturnError } from "./errorConversion";
+
+type Result<T> =
+  | { success: true; data: T }
+  | { success: false; error: Error };
+
+/**
+ * Wrap an async function with error handling.
+ * Returns a Result type with success/error states.
+ */
+export async function tryAsync<T>(
+  fn: () => Promise<T>,
+  context: { tag: string; operation: string }
+): Promise<Result<T>> {
+  try {
+    const data = await fn();
+    return { success: true, data };
+  } catch (error) {
+    const normalizedError = logAndReturnError(
+      context.tag,
+      `Failed to ${context.operation}`,
+      error
+    );
+    return { success: false, error: normalizedError };
+  }
+}
+
+/**
+ * Wrap a synchronous function with error handling.
+ * Returns a Result type with success/error states.
+ */
+export function trySync<T>(
+  fn: () => T,
+  context: { tag: string; operation: string }
+): Result<T> {
+  try {
+    const data = fn();
+    return { success: true, data };
+  } catch (error) {
+    const normalizedError = logAndReturnError(
+      context.tag,
+      `Failed to ${context.operation}`,
+      error
+    );
+    return { success: false, error: normalizedError };
+  }
+}

package/src/shared/utils/errors/index.ts

@@ -0,0 +1,19 @@
+/**
+ * Error Utilities Module
+ *
+ * Centralized error handling utilities split into focused modules.
+ * Original 195-line file split into 5 files for better maintainability.
+ *
+ * Modules:
+ * - errorConversion: Error normalization and creation
+ * - errorTypeGuards: Type-safe error checking
+ * - errorWrappers: Function wrapping with error handling
+ * - errorAssertions: Runtime validation and type narrowing
+ * - serviceErrors: Service-specific error creation
+ */
+
+export * from './errorConversion';
+export * from './errorTypeGuards';
+export * from './errorWrappers';
+export * from './errorAssertions';
+export * from './serviceErrors';

package/src/shared/utils/errors/serviceErrors.ts

@@ -0,0 +1,36 @@
+/**
+ * Service-Specific Error Creators
+ *
+ * Consistent error creation for external services.
+ * Provides clear error codes and messages.
+ */
+
+import { createError, toError } from "./errorConversion";
+
+/**
+ * Create a Firestore-specific error with consistent formatting.
+ */
+export function createFirestoreError(
+  operation: string,
+  error: unknown
+): Error {
+  return createError(
+    `Firestore ${operation} failed`,
+    "FIRESTORE_ERROR",
+    toError(error)
+  );
+}
+
+/**
+ * Create a RevenueCat-specific error with consistent formatting.
+ */
+export function createRevenueCatError(
+  operation: string,
+  error: unknown
+): Error {
+  return createError(
+    `RevenueCat ${operation} failed`,
+    "REVENUECAT_ERROR",
+    toError(error)
+  );
+}