@umituz/react-native-subscription 2.39.7 → 2.39.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-subscription",
-  "version": "2.39.7",
+  "version": "2.39.8",
   "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

@@ -35,6 +35,10 @@ export const paywallScreenStyles = StyleSheet.create({
     marginTop: 12,
   },
   stickyFooter: {
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    right: 0,
     paddingHorizontal: 16,
     paddingTop: 12,
     borderTopWidth: 1,

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

@@ -77,145 +77,157 @@ export const PaywallScreen: React.FC<PaywallScreenProps> = React.memo((props) =>
     }
   }, []);
 
-  // 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>
-  );
+  return (
+    <View style={[screenStyles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}>
+      {/* Close button - positioned absolutely at top */}
+      <View style={[screenStyles.headerContainer, { paddingTop: insets.top }]}>
+        <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>
+      </View>
 
-  // 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}
+      {/* Scrollable content */}
+      <ScreenLayout
+        scrollable={true}
+        backgroundColor="transparent"
+        contentContainerStyle={{ ...screenStyles.contentContainer, paddingBottom: 120 }}
       >
-        <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>
-  );
+        {/* Hero Image */}
+        {heroImage && (
+          <View style={styles.heroContainer}>
+            <Image source={heroImage} style={styles.heroImage} contentFit="cover" transition={0} />
+          </View>
+        )}
 
-  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 && (
+        {/* Header */}
+        <View style={styles.header}>
           <AtomicText
-            type="bodyMedium"
+            type="headlineMedium"
             adjustsFontSizeToFit
-            numberOfLines={3}
-            minimumFontScale={0.8}
-            style={[styles.subtitle, { color: tokens.colors.textSecondary }]}
+            numberOfLines={2}
+            minimumFontScale={0.75}
+            style={[styles.title, { color: tokens.colors.textPrimary }]}
           >
-            {translations.subtitle}
+            {translations.title}
           </AtomicText>
-        )}
-      </View>
-
-      {/* 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>
-            )}
-          </View>
-        ) : packages.length === 0 ? (
-          <View style={styles.loading}>
+          {translations.subtitle && (
             <AtomicText
               type="bodyMedium"
-              style={{ color: tokens.colors.textSecondary, textAlign: "center" }}
+              adjustsFontSizeToFit
+              numberOfLines={3}
+              minimumFontScale={0.8}
+              style={[styles.subtitle, { color: tokens.colors.textSecondary }]}
             >
-              {translations.emptyText ?? "No packages available"}
+              {translations.subtitle}
             </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)}
-              />
-            );
-          })
-        )}
+          )}
+        </View>
+
+        {/* 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>
+              )}
+            </View>
+          ) : packages.length === 0 ? (
+            <View style={styles.loading}>
+              <AtomicText
+                type="bodyMedium"
+                style={{ color: tokens.colors.textSecondary, textAlign: "center" }}
+              >
+                {translations.emptyText ?? "No packages available"}
+              </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)}
+                />
+              );
+            })
+          )}
+        </View>
+      </ScreenLayout>
+
+      {/* Fixed footer overlay - always visible at bottom */}
+      <View style={[styles.stickyFooter, { backgroundColor: tokens.colors.backgroundPrimary, paddingBottom: Math.max(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>
-    </ScreenLayout>
+    </View>
   );
 });
 
 PaywallScreen.displayName = "PaywallScreen";
 
 const screenStyles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  headerContainer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    zIndex: 1000,
+    paddingHorizontal: 12,
+    paddingTop: 12,
+  },
   closeBtn: {
     width: 36,
     height: 36,
     borderRadius: 18,
     justifyContent: 'center',
     alignItems: 'center',
+    alignSelf: 'flex-end',
   },
   contentContainer: {
-    paddingBottom: 16,
+    paddingTop: 60, // Space for close button
   },
 });

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,
     },