@umituz/react-native-subscription 3.1.26 → 3.1.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-subscription",
-  "version": "3.1.26",
+  "version": "3.1.27",
   "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.renderItem.tsx

@@ -7,15 +7,16 @@ import React from "react";
 import { View } from "react-native";
 import type { ImageSourcePropType } from "react-native";
 import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system/atoms";
+import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
 import { Image } from "expo-image";
 import { PlanCard } from "./PlanCard";
 import type { PaywallListItem } from "../utils/paywallLayoutUtils";
+import type { PaywallTranslations } from "../entities/types";
 import { paywallScreenStyles as styles } from "./PaywallScreen.styles";
 
 interface PaywallRenderItemProps {
   item: PaywallListItem;
-  tokens: any;
-  translations: any;
+  translations: PaywallTranslations;
   heroImage?: ImageSourcePropType;
   selectedPlanId?: string;
   bestValueIdentifier?: string;
@@ -26,7 +27,6 @@ interface PaywallRenderItemProps {
 
 export const PaywallRenderItem: React.FC<PaywallRenderItemProps> = React.memo(({
   item,
-  tokens,
   translations,
   heroImage,
   selectedPlanId,
@@ -35,6 +35,8 @@ export const PaywallRenderItem: React.FC<PaywallRenderItemProps> = React.memo(({
   creditsLabel,
   onSelectPlan,
 }) => {
+  const tokens = useAppDesignTokens();
+
   if (!translations) return null;
 
   switch (item.type) {
@@ -73,7 +75,7 @@ export const PaywallRenderItem: React.FC<PaywallRenderItemProps> = React.memo(({
 
     case 'FEATURE':
       return (
-        <View key={`feat-${item.feature.text}`} style={[styles.featureRow, { marginHorizontal: 24, marginBottom: 16 }]}>
+        <View key={`feat-${item.feature.text}`} style={styles.featureRow}>
           <View style={[styles.featureIcon, { backgroundColor: tokens.colors.primary }]}>
             <AtomicIcon name={item.feature.icon} customSize={16} customColor={tokens.colors.onPrimary} />
           </View>

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

@@ -61,6 +61,8 @@ export const paywallScreenStyles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     gap: 14,
+    marginHorizontal: 24,
+    marginBottom: 16,
   },
   featureIcon: {
     width: 30,

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

@@ -30,6 +30,10 @@ import {
 import { hasItems } from "../../../shared/utils/arrayUtils";
 import { PaywallRenderItem } from "./PaywallScreen.renderItem";
 
+// Paywall layout constants
+const PAYWALL_HEADER_HEIGHT = 60; // Close button + spacing
+const PAYWALL_FOOTER_HEIGHT_BASE = 280; // Base footer height
+
 export const PaywallScreen: React.FC<PaywallScreenProps> = React.memo((props) => {
   const navigation = useNavigation();
 
@@ -148,7 +152,6 @@ export const PaywallScreen: React.FC<PaywallScreenProps> = React.memo((props) =>
     return (
       <PaywallRenderItem
         item={item}
-        tokens={tokens}
         translations={translations}
         heroImage={heroImage}
         selectedPlanId={selectedPlanId ?? undefined}
@@ -158,7 +161,7 @@ export const PaywallScreen: React.FC<PaywallScreenProps> = React.memo((props) =>
         onSelectPlan={setSelectedPlanId}
       />
     );
-  }, [tokens, translations, heroImage, selectedPlanId, bestValueIdentifier, creditAmounts, creditsLabel, setSelectedPlanId]);
+  }, [translations, heroImage, selectedPlanId, bestValueIdentifier, creditAmounts, creditsLabel, setSelectedPlanId]);
 
   // Performance Optimization: getItemLayout for FlatList
   const getItemLayout = useCallback((_data: ArrayLike<PaywallListItem> | null | undefined, index: number) => {
@@ -222,8 +225,8 @@ export const PaywallScreen: React.FC<PaywallScreenProps> = React.memo((props) =>
         contentContainerStyle={[
           styles.listContent,
           {
-            paddingTop: Math.max(insets.top, 20) + 60, // Responsive header spacing
-            paddingBottom: 280 + responsive.verticalPadding, // Dynamic footer spacing
+            paddingTop: Math.max(insets.top, 20) + PAYWALL_HEADER_HEIGHT, // Responsive header spacing
+            paddingBottom: PAYWALL_FOOTER_HEIGHT_BASE + responsive.verticalPadding, // Dynamic footer spacing
             paddingHorizontal: responsive.horizontalPadding, // Device-based horizontal padding
           }
         ]}