@umituz/react-native-subscription 2.39.7 → 2.39.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-subscription",
-  "version": "2.39.7",
+  "version": "2.39.9",
   "description": "Complete subscription management with RevenueCat, paywall UI, and credits system for React Native apps",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/domains/paywall/components/PaywallScreen.styles.ts

@@ -1,93 +1,169 @@
-import { StyleSheet } from "react-native";
+import { StyleSheet, Platform } from "react-native";
 
 export const paywallScreenStyles = StyleSheet.create({
   container: {
     flex: 1,
   },
+  // Header / Hero
   heroContainer: {
     alignItems: "center",
-    marginBottom: 24,
+    justifyContent: "center",
+    marginVertical: 24,
+    height: 140,
   },
   heroImage: {
     width: 120,
     height: 120,
-    borderRadius: 60,
+    borderRadius: 30, // More modern rounded corners
   },
   header: {
     paddingHorizontal: 24,
-    marginBottom: 24,
+    marginBottom: 32,
+    alignItems: "center",
   },
   title: {
-    marginBottom: 8,
+    marginBottom: 12,
+    textAlign: "center",
+    fontWeight: "800",
+    letterSpacing: -0.5,
   },
   subtitle: {
     lineHeight: 22,
+    textAlign: "center",
+    opacity: 0.8,
+    paddingHorizontal: 12,
   },
-  plans: {
-    paddingHorizontal: 16,
+
+  // Sections
+  sectionHeader: {
+    paddingHorizontal: 24,
+    marginTop: 24,
     marginBottom: 16,
   },
-  loading: {
-    alignItems: "center",
-    paddingVertical: 32,
-  },
-  loadingText: {
-    marginTop: 12,
-  },
-  stickyFooter: {
-    paddingHorizontal: 16,
-    paddingTop: 12,
-    borderTopWidth: 1,
-    borderTopColor: "rgba(255, 255, 255, 0.1)",
-  },
-  cta: {
-    borderRadius: 14,
-    paddingVertical: 16,
-    alignItems: "center",
-  },
-  ctaDisabled: {
+  sectionTitle: {
+    fontWeight: "700",
+    textTransform: "uppercase",
+    letterSpacing: 1,
+    fontSize: 13,
     opacity: 0.6,
   },
-  ctaText: {
-    fontWeight: "600",
-  },
-  features: {
-    padding: 16,
+
+  // Features
+  featuresContainer: {
+    marginHorizontal: 24,
+    padding: 20,
+    borderRadius: 24,
+    gap: 16,
+    borderWidth: 1,
+    borderColor: "rgba(255, 255, 255, 0.1)",
   },
   featureRow: {
     flexDirection: "row",
     alignItems: "center",
-    marginBottom: 12,
+    gap: 14,
   },
   featureIcon: {
-    width: 32,
-    height: 32,
-    borderRadius: 16,
-    alignItems: "center",
+    width: 30,
+    height: 30,
+    borderRadius: 10,
     justifyContent: "center",
-    marginRight: 12,
+    alignItems: "center",
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.2,
+    shadowRadius: 4,
+    elevation: 3,
   },
   featureText: {
     flex: 1,
+    fontWeight: "500",
+    fontSize: 15,
   },
-  footer: {
-    paddingHorizontal: 16,
-    paddingBottom: 16,
+
+  // Fixed Footer
+  stickyFooter: {
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    right: 0,
+    paddingHorizontal: 24,
+    paddingTop: 20,
+    borderTopWidth: 1,
+    borderTopColor: "rgba(255, 255, 255, 0.08)",
+    ...Platform.select({
+      ios: {
+        shadowColor: "#000",
+        shadowOffset: { width: 0, height: -4 },
+        shadowOpacity: 0.1,
+        shadowRadius: 12,
+      },
+      android: {
+        elevation: 8,
+      },
+    }),
   },
-  restoreButton: {
-    paddingVertical: 8,
+  cta: {
+    borderRadius: 18,
+    height: 60,
+    justifyContent: "center",
+    alignItems: "center",
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.3,
+    shadowRadius: 8,
+    elevation: 6,
   },
-  restoreButtonDisabled: {
+  ctaDisabled: {
     opacity: 0.5,
   },
+  ctaText: {
+    fontWeight: "700",
+    letterSpacing: 0.5,
+  },
+
+  // Footer Links
+  footer: {
+    marginTop: 16,
+    alignItems: "center",
+    gap: 12,
+  },
+  restoreButton: {
+    paddingVertical: 4,
+  },
   footerLink: {
     fontSize: 12,
+    fontWeight: "500",
+    textDecorationLine: "underline",
+    opacity: 0.7,
   },
   legalRow: {
     flexDirection: "row",
     justifyContent: "center",
     alignItems: "center",
+    gap: 20,
+    marginBottom: 8,
+  },
+
+  // Close Button
+  closeBtn: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    justifyContent: "center",
+    alignItems: "center",
+    marginRight: 16,
     marginTop: 8,
-    gap: 16,
+    borderWidth: 1,
+    borderColor: "rgba(255, 255, 255, 0.1)",
+  },
+  
+  // List
+  listContent: {
+    paddingBottom: 40,
+  },
+  loadingContainer: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
   },
 });

package/src/domains/paywall/components/PaywallScreen.tsx

@@ -1,23 +1,36 @@
 /**
  * Paywall Screen Component
  *
- * Full-screen paywall (not modal). Use when you want the paywall
- * to be a standalone screen instead of a modal overlay.
+ * Full-screen paywall with optimized FlatList for performance and modern design.
  */
 
-import React, { useCallback, useEffect } from "react";
-import { View, TouchableOpacity, Linking, StyleSheet } from "react-native";
+import React, { useCallback, useEffect, useMemo } from "react";
+import { 
+  View, 
+  TouchableOpacity, 
+  Linking, 
+  FlatList, 
+  ListRenderItem, 
+  StatusBar,
+} from "react-native";
 import { AtomicText, AtomicIcon, AtomicSpinner } from "@umituz/react-native-design-system/atoms";
 import { useSafeAreaInsets } from "@umituz/react-native-design-system/safe-area";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
-import { ScreenLayout } from "@umituz/react-native-design-system/layouts";
 import { Image } from "expo-image";
+import type { PurchasesPackage } from "react-native-purchases";
 import { PlanCard } from "./PlanCard";
 import { paywallScreenStyles as styles } from "./PaywallScreen.styles";
-import { PaywallFeatures } from "./PaywallFeatures";
 import { PaywallFooter } from "./PaywallFooter";
 import { usePaywallActions } from "../hooks/usePaywallActions";
 import { PaywallScreenProps } from "./PaywallScreen.types";
+import type { SubscriptionFeature } from "../entities/types";
+
+type PaywallListItem = 
+  | { type: 'HEADER' }
+  | { type: 'FEATURE_HEADER' }
+  | { type: 'FEATURE'; feature: SubscriptionFeature }
+  | { type: 'PLAN_HEADER' }
+  | { type: 'PLAN'; pkg: PurchasesPackage };
 
 export const PaywallScreen: React.FC<PaywallScreenProps> = React.memo((props) => {
   const {
@@ -42,14 +55,6 @@ export const PaywallScreen: React.FC<PaywallScreenProps> = React.memo((props) =>
   const tokens = useAppDesignTokens();
   const insets = useSafeAreaInsets();
 
-  if (__DEV__) {
-    console.log("[PaywallScreen] Render:", {
-      packagesCount: packages.length,
-      isLoadingPackages,
-      source,
-    });
-  }
-
   const { selectedPlanId, setSelectedPlanId, isProcessing, handlePurchase, handleRestore } = usePaywallActions({
     packages,
     onPurchase,
@@ -61,7 +66,7 @@ export const PaywallScreen: React.FC<PaywallScreenProps> = React.memo((props) =>
     onClose
   });
 
-  // Auto-select first package when packages load and none is selected
+  // Auto-select first package
   useEffect(() => {
     if (packages.length > 0 && !selectedPlanId) {
       setSelectedPlanId(packages[0].product.identifier);
@@ -73,149 +78,224 @@ export const PaywallScreen: React.FC<PaywallScreenProps> = React.memo((props) =>
     try {
       if (await Linking.canOpenURL(url)) await Linking.openURL(url);
     } catch (error) {
-      console.error('[PaywallScreen] Failed to open URL:', error instanceof Error ? error.message : String(error));
+      console.error('[PaywallScreen] Failed to open URL:', error);
     }
   }, []);
 
-  // Close button for header
-  const closeButton = (
-    <TouchableOpacity
-      onPress={onClose}
-      style={[screenStyles.closeBtn, { backgroundColor: tokens.colors.surfaceSecondary }]}
-      hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
-    >
-      <AtomicIcon name="close-outline" size="md" customColor={tokens.colors.textPrimary} />
-    </TouchableOpacity>
-  );
+  // Prepare flat data for the list
+  const flatData = useMemo(() => {
+    const data: PaywallListItem[] = [];
+    
+    // 1. Header (Hero, Title, Subtitle)
+    data.push({ type: 'HEADER' });
 
-  // Sticky footer with CTA and restore/legal links
-  const footerContent = (
-    <View style={[styles.stickyFooter, { paddingBottom: insets.bottom || 16 }]}>
-      <TouchableOpacity
-        onPress={handlePurchase}
-        disabled={isProcessing || isLoadingPackages || !selectedPlanId}
-        style={[
-          styles.cta,
-          { backgroundColor: tokens.colors.primary },
-          (isProcessing || isLoadingPackages || !selectedPlanId) && styles.ctaDisabled
-        ]}
-        activeOpacity={0.75}
-      >
-        <AtomicText type="titleLarge" style={[styles.ctaText, { color: tokens.colors.onPrimary }]}>
-          {isProcessing ? translations.processingText : translations.purchaseButtonText}
-        </AtomicText>
-      </TouchableOpacity>
-      <PaywallFooter
-        translations={translations}
-        legalUrls={legalUrls}
-        isProcessing={isProcessing}
-        onRestore={onRestore ? handleRestore : undefined}
-        onLegalClick={handleLegalUrl}
-      />
-    </View>
-  );
+    // 2. Features Section
+    if (features.length > 0) {
+      data.push({ type: 'FEATURE_HEADER' });
+      features.forEach(feature => {
+        data.push({ type: 'FEATURE', feature });
+      });
+    }
 
-  return (
-    <ScreenLayout
-      scrollable={true}
-      backgroundColor={tokens.colors.backgroundPrimary}
-      header={closeButton}
-      footer={footerContent}
-      contentContainerStyle={screenStyles.contentContainer}
-    >
-      {/* Hero Image */}
-      {heroImage && (
-        <View style={styles.heroContainer}>
-          <Image source={heroImage} style={styles.heroImage} contentFit="cover" transition={0} />
-        </View>
-      )}
-
-      {/* Header */}
-      <View style={styles.header}>
-        <AtomicText
-          type="headlineMedium"
-          adjustsFontSizeToFit
-          numberOfLines={2}
-          minimumFontScale={0.75}
-          style={[styles.title, { color: tokens.colors.textPrimary }]}
-        >
-          {translations.title}
-        </AtomicText>
-        {translations.subtitle && (
-          <AtomicText
-            type="bodyMedium"
-            adjustsFontSizeToFit
-            numberOfLines={3}
-            minimumFontScale={0.8}
-            style={[styles.subtitle, { color: tokens.colors.textSecondary }]}
-          >
-            {translations.subtitle}
-          </AtomicText>
-        )}
-      </View>
+    // 3. Plans Section
+    if (packages.length > 0) {
+      data.push({ type: 'PLAN_HEADER' });
+      packages.forEach(pkg => {
+        data.push({ type: 'PLAN', pkg });
+      });
+    }
 
-      {/* Features */}
-      <PaywallFeatures features={features} />
-
-      {/* Plans */}
-      <View style={styles.plans}>
-        {isLoadingPackages ? (
-          <View style={styles.loading}>
-            <AtomicSpinner size="md" />
-            {translations.processingText && (
-              <AtomicText
-                type="bodySmall"
-                style={[styles.loadingText, { color: tokens.colors.textSecondary }]}
-              >
-                {translations.processingText}
-              </AtomicText>
+    return data;
+  }, [features, packages]);
+
+  const renderItem: ListRenderItem<PaywallListItem> = useCallback(({ item }) => {
+    switch (item.type) {
+      case 'HEADER':
+        return (
+          <View key="header">
+            {/* Hero Image */}
+            {heroImage && (
+              <View style={styles.heroContainer}>
+                <Image source={heroImage} style={styles.heroImage} contentFit="cover" transition={200} />
+              </View>
             )}
+
+            {/* Header Text */}
+            <View style={styles.header}>
+              <AtomicText type="headlineLarge" style={[styles.title, { color: tokens.colors.textPrimary }]}>
+                {translations.title}
+              </AtomicText>
+              {translations.subtitle && (
+                <AtomicText type="bodyMedium" style={[styles.subtitle, { color: tokens.colors.textSecondary }]}>
+                  {translations.subtitle}
+                </AtomicText>
+              )}
+            </View>
           </View>
-        ) : packages.length === 0 ? (
-          <View style={styles.loading}>
-            <AtomicText
-              type="bodyMedium"
-              style={{ color: tokens.colors.textSecondary, textAlign: "center" }}
-            >
-              {translations.emptyText ?? "No packages available"}
+        );
+
+      case 'FEATURE_HEADER':
+        return (
+          <View key="feat-header" style={styles.sectionHeader}>
+            <AtomicText type="labelLarge" style={[styles.sectionTitle, { color: tokens.colors.textSecondary }]}>
+              {translations.featuresTitle || "WHAT'S INCLUDED"}
+            </AtomicText>
+          </View>
+        );
+
+      case 'FEATURE':
+        return (
+          <View key={`feat-${item.feature.text}`} style={[styles.featureRow, { marginHorizontal: 24, marginBottom: 16 }]}>
+            <View style={[styles.featureIcon, { backgroundColor: tokens.colors.primary }]}>
+              <AtomicIcon name={item.feature.icon as any} customSize={16} customColor={tokens.colors.onPrimary} />
+            </View>
+            <AtomicText type="bodyMedium" style={[styles.featureText, { color: tokens.colors.textPrimary }]}>
+              {item.feature.text}
+            </AtomicText>
+          </View>
+        );
+
+      case 'PLAN_HEADER':
+        return (
+          <View key="plan-header" style={styles.sectionHeader}>
+            <AtomicText type="labelLarge" style={[styles.sectionTitle, { color: tokens.colors.textSecondary }]}>
+              {translations.plansTitle || "CHOOSE YOUR PLAN"}
             </AtomicText>
           </View>
-        ) : (
-          packages.map((pkg) => {
-            const pid = pkg.product.identifier;
-            const isSelected = selectedPlanId === pid;
-            const isBestValue = bestValueIdentifier === pid;
-            const credits = creditAmounts?.[pid];
-
-            return (
-              <PlanCard
-                key={pid}
-                pkg={pkg}
-                isSelected={isSelected}
-                badge={isBestValue ? translations.bestValueBadgeText : undefined}
-                creditAmount={credits}
-                creditsLabel={creditsLabel}
-                onSelect={() => setSelectedPlanId(pid)}
-              />
-            );
-          })
-        )}
+        );
+
+      case 'PLAN': {
+        const pid = item.pkg.product.identifier;
+        return (
+          <PlanCard
+            key={pid}
+            pkg={item.pkg}
+            isSelected={selectedPlanId === pid}
+            badge={bestValueIdentifier === pid ? translations.bestValueBadgeText : undefined}
+            creditAmount={creditAmounts?.[pid]}
+            creditsLabel={creditsLabel}
+            onSelect={() => setSelectedPlanId(pid)}
+          />
+        );
+      }
+
+      default:
+        return null;
+    }
+  }, [heroImage, translations, tokens, selectedPlanId, bestValueIdentifier, creditAmounts, creditsLabel, setSelectedPlanId]);
+
+  // Performance Optimization: getItemLayout for FlatList
+  const getItemLayout = useCallback((_data: any, index: number) => {
+    // Estimated heights for different item types
+    // HEADER: ~300, FEATURE_HEADER: ~60, FEATURE: ~46, PLAN_HEADER: ~60, PLAN: ~80
+    let offset = 0;
+    for (let i = 0; i < index; i++) {
+      const item = flatData[i];
+      if (item.type === 'HEADER') offset += 300;
+      else if (item.type === 'FEATURE_HEADER' || item.type === 'PLAN_HEADER') offset += 60;
+      else if (item.type === 'FEATURE') offset += 46;
+      else if (item.type === 'PLAN') offset += 80;
+    }
+    
+    const currentItem = flatData[index];
+    let length = 80;
+    if (currentItem.type === 'HEADER') length = 300;
+    else if (currentItem.type === 'FEATURE_HEADER' || currentItem.type === 'PLAN_HEADER') length = 60;
+    else if (currentItem.type === 'FEATURE') length = 46;
+    
+    return { length, offset, index };
+  }, [flatData]);
+
+  const keyExtractor = useCallback((item: PaywallListItem, index: number) => {
+    if (item.type === 'FEATURE') return `feat-${item.feature.text}`;
+    if (item.type === 'PLAN') return `plan-${item.pkg.product.identifier}`;
+    return `${item.type}-${index}`;
+  }, []);
+
+  if (isLoadingPackages) {
+    return (
+      <View style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary, paddingTop: insets.top }]}>
+        <View style={styles.loadingContainer}>
+          <AtomicSpinner size="lg" />
+        </View>
       </View>
-    </ScreenLayout>
+    );
+  }
+
+  return (
+    <View style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}>
+      <StatusBar barStyle="light-content" />
+      
+      {/* Absolute Close Button */}
+      <View style={{ 
+        position: 'absolute', 
+        top: Math.max(insets.top, 16), 
+        right: 0, 
+        zIndex: 10,
+      }}>
+        <TouchableOpacity
+          onPress={onClose}
+          style={[styles.closeBtn, { backgroundColor: tokens.colors.surfaceSecondary }]}
+          activeOpacity={0.7}
+        >
+          <AtomicIcon name="close-outline" size="sm" customColor={tokens.colors.textPrimary} />
+        </TouchableOpacity>
+      </View>
+
+      {/* Main Content */}
+      <FlatList
+        data={flatData}
+        renderItem={renderItem}
+        keyExtractor={keyExtractor}
+        getItemLayout={getItemLayout}
+        windowSize={5}
+        removeClippedSubviews={true}
+        initialNumToRender={10}
+        maxToRenderPerBatch={10}
+        updateCellsBatchingPeriod={50}
+        contentContainerStyle={[
+          styles.listContent, 
+          { 
+            paddingTop: Math.max(insets.top, 20) + 40,
+            paddingBottom: 220 
+          }
+        ]}
+        showsVerticalScrollIndicator={false}
+      />
+
+      {/* Fixed Footer */}
+      <View style={[
+        styles.stickyFooter, 
+        { 
+          backgroundColor: tokens.colors.backgroundPrimary,
+          paddingBottom: Math.max(insets.bottom, 24)
+        }
+      ]}>
+        <TouchableOpacity
+          onPress={handlePurchase}
+          disabled={isProcessing || !selectedPlanId}
+          style={[
+            styles.cta,
+            { backgroundColor: tokens.colors.primary },
+            (isProcessing || !selectedPlanId) && styles.ctaDisabled
+          ]}
+          activeOpacity={0.8}
+        >
+          <AtomicText type="titleLarge" style={[styles.ctaText, { color: tokens.colors.onPrimary }]}>
+            {isProcessing ? translations.processingText : translations.purchaseButtonText}
+          </AtomicText>
+        </TouchableOpacity>
+
+        <PaywallFooter
+          translations={translations}
+          legalUrls={legalUrls}
+          isProcessing={isProcessing}
+          onRestore={onRestore ? handleRestore : undefined}
+          onLegalClick={handleLegalUrl}
+        />
+      </View>
+    </View>
   );
 });
 
 PaywallScreen.displayName = "PaywallScreen";
-
-const screenStyles = StyleSheet.create({
-  closeBtn: {
-    width: 36,
-    height: 36,
-    borderRadius: 18,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  contentContainer: {
-    paddingBottom: 16,
-  },
-});

package/src/domains/paywall/entities/types.ts

@@ -6,6 +6,8 @@ export interface SubscriptionFeature {
 export interface PaywallTranslations {
     title: string;
     subtitle?: string;
+    featuresTitle?: string;
+    plansTitle?: string;
     purchaseButtonText: string;
     restoreButtonText: string;
     loadingText: string;

package/src/domains/paywall/hooks/usePaywallActions.ts

@@ -1,6 +1,6 @@
-import { useState, useCallback, useRef } from "react";
+import { useState, useCallback, useRef, useMemo } from "react";
 import type { PurchasesPackage } from "react-native-purchases";
-import { usePurchaseLoadingStore } from "../../subscription/presentation/stores/purchaseLoadingStore";
+import { usePurchaseLoadingStore, selectIsPurchasing } from "../../subscription/presentation/stores/purchaseLoadingStore";
 import type { PurchaseSource } from "../../subscription/core/SubscriptionConstants";
 
 interface UsePaywallActionsParams {
@@ -26,10 +26,17 @@ export function usePaywallActions({
   const [selectedPlanId, setSelectedPlanId] = useState<string | null>(null);
   const [isLocalProcessing, setIsLocalProcessing] = useState(false);
 
-  const { startPurchase, endPurchase } = usePurchaseLoadingStore();
-  const isGlobalPurchasing = usePurchaseLoadingStore((state) => state.isPurchasing());
-
+  // Use optimized selector for global purchasing state
+  const isGlobalPurchasing = usePurchaseLoadingStore(selectIsPurchasing);
+  
+  // Combine processing states
   const isProcessing = isLocalProcessing || isGlobalPurchasing;
+  
+  // Use ref for isProcessing to keep callbacks stable without re-creating them
+  const isProcessingRef = useRef(isProcessing);
+  isProcessingRef.current = isProcessing;
+
+  const { startPurchase, endPurchase } = usePurchaseLoadingStore();
 
   const onPurchaseRef = useRef(onPurchase);
   const onRestoreRef = useRef(onRestore);
@@ -37,101 +44,86 @@ export function usePaywallActions({
   const onPurchaseErrorRef = useRef(onPurchaseError);
   const onAuthRequiredRef = useRef(onAuthRequired);
   const onCloseRef = useRef(onClose);
+  const packagesRef = useRef(packages);
 
-  // Update refs in render body — always in sync, no 1-frame delay
+  // Update refs in render body — always in sync
   onPurchaseRef.current = onPurchase;
   onRestoreRef.current = onRestore;
   onPurchaseSuccessRef.current = onPurchaseSuccess;
   onPurchaseErrorRef.current = onPurchaseError;
   onAuthRequiredRef.current = onAuthRequired;
   onCloseRef.current = onClose;
+  packagesRef.current = packages;
 
   const handlePurchase = useCallback(async () => {
-    if (!selectedPlanId) {
-      return;
-    }
+    // Access current state via refs to keep callback stable
+    const currentSelectedId = selectedPlanId;
+    if (!currentSelectedId) return;
 
     if (!onPurchaseRef.current) {
-      const err = new Error("Purchase handler not configured");
-      onPurchaseErrorRef.current?.(err);
+      onPurchaseErrorRef.current?.(new Error("Purchase handler not configured"));
       return;
     }
 
-    if (isProcessing) {
-      return;
-    }
+    if (isProcessingRef.current) return;
 
-    const pkg = packages.find((p) => p.product.identifier === selectedPlanId);
+    const pkg = packagesRef.current.find((p) => p.product.identifier === currentSelectedId);
 
     if (!pkg) {
-      if (typeof __DEV__ !== "undefined" && __DEV__) {
-        console.error("[usePaywallActions] Package not found", {
-          selectedPlanId,
-          availablePackages: packages.map(p => p.product.identifier),
-        });
-      }
-      const err = new Error(`Package not found: ${selectedPlanId}`);
-      onPurchaseErrorRef.current?.(err);
+      onPurchaseErrorRef.current?.(new Error(`Package not found: ${currentSelectedId}`));
       return;
     }
 
     setIsLocalProcessing(true);
-    startPurchase(selectedPlanId, "manual");
+    startPurchase(currentSelectedId, "manual");
 
     try {
       const success = await onPurchaseRef.current(pkg);
-
       if (success === true) {
         onPurchaseSuccessRef.current?.();
         onCloseRef.current?.();
       }
     } catch (error) {
-      const err = error instanceof Error ? error : new Error(String(error));
-      onPurchaseErrorRef.current?.(err);
+      onPurchaseErrorRef.current?.(error instanceof Error ? error : new Error(String(error)));
     } finally {
       setIsLocalProcessing(false);
-      endPurchase(selectedPlanId);
+      endPurchase(currentSelectedId);
     }
-  }, [selectedPlanId, packages, isProcessing, startPurchase, endPurchase]);
+  }, [selectedPlanId, startPurchase, endPurchase]); // Only depend on state that must trigger re-creation if changed
 
   const handleRestore = useCallback(async () => {
     if (!onRestoreRef.current) {
-      const err = new Error("Restore handler not configured");
-      onPurchaseErrorRef.current?.(err);
+      onPurchaseErrorRef.current?.(new Error("Restore handler not configured"));
       return;
     }
 
-    if (isProcessing) {
-      return;
-    }
+    if (isProcessingRef.current) return;
 
     setIsLocalProcessing(true);
     try {
       const success = await onRestoreRef.current();
-
       if (success === true) {
         onPurchaseSuccessRef.current?.();
         onCloseRef.current?.();
       }
     } catch (error) {
-      const err = error instanceof Error ? error : new Error(String(error));
-      onPurchaseErrorRef.current?.(err);
+      onPurchaseErrorRef.current?.(error instanceof Error ? error : new Error(String(error)));
     } finally {
       setIsLocalProcessing(false);
     }
-  }, [isProcessing]);
+  }, []); // Truly stable callback
 
   const resetState = useCallback(() => {
     setSelectedPlanId(null);
     setIsLocalProcessing(false);
   }, []);
 
-  return {
+  return useMemo(() => ({
     selectedPlanId,
     setSelectedPlanId,
     isProcessing,
     handlePurchase,
     handleRestore,
     resetState,
-  };
+  }), [selectedPlanId, isProcessing, handlePurchase, handleRestore, resetState]);
 }

package/src/domains/subscription/presentation/components/feedback/PaywallFeedbackScreen.tsx

@@ -139,7 +139,13 @@ export const PaywallFeedbackScreen: React.FC<PaywallFeedbackScreenProps> = React
 
 PaywallFeedbackScreen.displayName = "PaywallFeedbackScreen";
 
-const createScreenStyles = (tokens: any, _insets: any) => ({
+const createScreenStyles = (
+    tokens: {
+        colors: { backgroundPrimary: string; border: string };
+        spacing: { xl: number; sm: number; md: number };
+    },
+    _insets: { top: number; bottom: number }
+) => ({
     container: {
         flex: 1,
     },

package/src/domains/subscription/presentation/stores/purchaseLoadingStore.ts

@@ -7,7 +7,6 @@ interface PurchaseLoadingState {
 interface PurchaseLoadingActions {
   startPurchase: (productId: string, source: "manual" | "auto-execution") => void;
   endPurchase: (productId: string) => void;
-  isPurchasing: (productId?: string) => boolean;
   reset: () => void;
 }
 
@@ -17,7 +16,7 @@ const createInitialState = (): PurchaseLoadingState => ({
   activePurchases: new Map(),
 });
 
-export const usePurchaseLoadingStore = create<PurchaseLoadingStore>((set, get) => ({
+export const usePurchaseLoadingStore = create<PurchaseLoadingStore>((set) => ({
   ...createInitialState(),
 
   startPurchase: (productId, source) => {
@@ -36,15 +35,19 @@ export const usePurchaseLoadingStore = create<PurchaseLoadingStore>((set, get) =
     });
   },
 
-  isPurchasing: (productId) => {
-    const state = get();
-    if (productId) return state.activePurchases.has(productId);
-    return state.activePurchases.size > 0;
-  },
-
   reset: () => {
     set(createInitialState());
   },
 }));
 
+/**
+ * Optimized selector for purchasing state.
+ * Use this to avoid re-renders when other parts of the state change.
+ */
 export const selectIsPurchasing = (state: PurchaseLoadingStore) => state.activePurchases.size > 0;
+
+/**
+ * Optimized selector for a specific product's purchasing state.
+ */
+export const selectIsProductPurchasing = (productId: string) => (state: PurchaseLoadingStore) => 
+  state.activePurchases.has(productId);

package/src/shared/infrastructure/SubscriptionEventBus.ts

@@ -2,7 +2,7 @@ type EventCallback<T = unknown> = (data: T) => void;
 
 class SubscriptionEventBus {
   private static instance: SubscriptionEventBus;
-  private listeners: Record<string, EventCallback[]> = {};
+  private listeners: Map<string, Set<EventCallback>> = new Map();
 
   private constructor() {}
 
@@ -14,52 +14,58 @@ class SubscriptionEventBus {
   }
 
   on<T>(event: string, callback: EventCallback<T>): () => void {
-    if (!this.listeners[event]) {
-      this.listeners[event] = [];
+    if (!this.listeners.has(event)) {
+      this.listeners.set(event, new Set());
     }
-    this.listeners[event].push(callback as EventCallback);
+    
+    const eventSet = this.listeners.get(event)!;
+    eventSet.add(callback as EventCallback);
 
     return () => {
-      const listeners = this.listeners[event];
+      const listeners = this.listeners.get(event);
       if (listeners) {
-        this.listeners[event] = listeners.filter(l => l !== callback);
-
-        if (this.listeners[event].length === 0) {
-          delete this.listeners[event];
+        listeners.delete(callback as EventCallback);
+        if (listeners.size === 0) {
+          this.listeners.delete(event);
         }
       }
     };
   }
 
   emit<T>(event: string, data: T): void {
-    if (!this.listeners[event]) return;
+    const listeners = this.listeners.get(event);
+    if (!listeners || listeners.size === 0) return;
 
-    this.listeners[event].forEach(callback => {
-      Promise.resolve().then(() => {
+    // Use microtask for async execution to not block main thread
+    // but keep it fast.
+    listeners.forEach(callback => {
+      queueMicrotask(() => {
         try {
           callback(data);
         } catch (error) {
           console.error('[SubscriptionEventBus] Listener error for event:', event, { error });
         }
-      }).catch(error => {
-        console.error('[SubscriptionEventBus] Async listener error for event:', event, { error });
       });
     });
   }
 
   clear(event?: string): void {
     if (event) {
-      delete this.listeners[event];
+      this.listeners.delete(event);
     } else {
-      this.listeners = {};
+      this.listeners.clear();
     }
   }
 
   getListenerCount(event?: string): number {
     if (event) {
-      return this.listeners[event]?.length ?? 0;
+      return this.listeners.get(event)?.size ?? 0;
     }
-    return Object.values(this.listeners).reduce((total, arr) => total + arr.length, 0);
+    let total = 0;
+    this.listeners.forEach(set => {
+      total += set.size;
+    });
+    return total;
   }
 }