@umituz/react-native-subscription 2.11.27 → 2.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-subscription",
-  "version": "2.11.27",
+  "version": "2.12.0",
   "description": "Complete subscription management with RevenueCat, paywall UI, and credits system for React Native apps",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -47,7 +47,7 @@
   "devDependencies": {
     "@tanstack/react-query": "^5.0.0",
     "@types/react": "~19.1.10",
-    "@umituz/react-native-design-system": "^2.1.3",
+    "@umituz/react-native-design-system": "^2.2.0",
     "@umituz/react-native-firebase": "*",
     "@umituz/react-native-legal": "*",
     "@umituz/react-native-localization": "*",

package/src/presentation/components/paywall/BestValueBadge.tsx

@@ -1,6 +1,6 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { View, StyleSheet } from "react-native";
-import { AtomicText, useAppDesignTokens } from "@umituz/react-native-design-system";
+import { AtomicText, useAppDesignTokens, useResponsive } from "@umituz/react-native-design-system";
 import { LinearGradient } from "expo-linear-gradient";
 
 interface BestValueBadgeProps {
@@ -11,6 +11,10 @@ interface BestValueBadgeProps {
 export const BestValueBadge: React.FC<BestValueBadgeProps> = React.memo(
   ({ text, visible = true }) => {
     const tokens = useAppDesignTokens();
+    const { spacingMultiplier, getFontSize } = useResponsive();
+
+    const styles = useMemo(() => createStyles(spacingMultiplier), [spacingMultiplier]);
+    const fontSize = getFontSize(10);
 
     if (!visible) return null;
 
@@ -24,7 +28,7 @@ export const BestValueBadge: React.FC<BestValueBadgeProps> = React.memo(
         >
           <AtomicText
             type="labelSmall"
-            style={{ color: tokens.colors.onPrimary, fontWeight: "800", textTransform: "uppercase", fontSize: 10 }}
+            style={{ color: tokens.colors.onPrimary, fontWeight: "800", textTransform: "uppercase", fontSize }}
           >
             {text}
           </AtomicText>
@@ -36,19 +40,20 @@ export const BestValueBadge: React.FC<BestValueBadgeProps> = React.memo(
 
 BestValueBadge.displayName = "BestValueBadge";
 
-const styles = StyleSheet.create({
-  badgeContainer: {
-    position: "absolute",
-    top: -12,
-    right: 16,
-    zIndex: 1,
-    alignSelf: "flex-end",
-  },
-  badge: {
-    paddingHorizontal: 16,
-    paddingVertical: 6,
-    borderRadius: 16,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-});
+const createStyles = (spacingMult: number) =>
+  StyleSheet.create({
+    badgeContainer: {
+      position: "absolute",
+      top: -12 * spacingMult,
+      right: 16 * spacingMult,
+      zIndex: 1,
+      alignSelf: "flex-end",
+    },
+    badge: {
+      paddingHorizontal: 16 * spacingMult,
+      paddingVertical: 6 * spacingMult,
+      borderRadius: 16 * spacingMult,
+      alignItems: "center",
+      justifyContent: "center",
+    },
+  });

package/src/presentation/components/paywall/CreditsTabContent.tsx

@@ -5,8 +5,7 @@
 
 import React from "react";
 import { View, StyleSheet, ScrollView } from "react-native";
-import { AtomicText, AtomicButton } from "@umituz/react-native-design-system";
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import { AtomicText, AtomicButton, Grid, useResponsiveDesignTokens } from "@umituz/react-native-design-system";
 import { useLocalization } from "@umituz/react-native-localization";
 import { CreditsPackageCard } from "./CreditsPackageCard";
 import { PaywallLegalFooter } from "./PaywallLegalFooter";
@@ -38,7 +37,7 @@ export const CreditsTabContent: React.FC<CreditsTabContentProps> = React.memo(
     creditsInfoText,
     processingText,
   }) => {
-    const tokens = useAppDesignTokens();
+    const tokens = useResponsiveDesignTokens();
     const { t } = useLocalization();
 
     const needsCredits = requiredCredits && requiredCredits > currentCredits;
@@ -72,10 +71,10 @@ export const CreditsTabContent: React.FC<CreditsTabContentProps> = React.memo(
 
         <ScrollView
           style={styles.scrollView}
-          contentContainerStyle={styles.scrollContent}
+          contentContainerStyle={[styles.scrollContent, { paddingHorizontal: tokens.spacing.lg, paddingBottom: tokens.spacing.md }]}
           showsVerticalScrollIndicator={false}
         >
-          <View style={styles.packagesContainer}>
+          <Grid mobileColumns={1} tabletColumns={2} gap={tokens.spacing.sm}>
             {packages.map((pkg) => (
               <CreditsPackageCard
                 key={pkg.id}
@@ -84,7 +83,7 @@ export const CreditsTabContent: React.FC<CreditsTabContentProps> = React.memo(
                 onSelect={() => onSelectPackage(pkg.id)}
               />
             ))}
-          </View>
+          </Grid>
         </ScrollView>
 
         <View style={styles.footer}>
@@ -116,13 +115,7 @@ const styles = StyleSheet.create({
   scrollView: {
     flex: 1,
   },
-  scrollContent: {
-    paddingHorizontal: 24,
-    paddingBottom: 16,
-  },
-  packagesContainer: {
-    gap: 12,
-  },
+  scrollContent: {},
   footer: {
     padding: 24,
     paddingTop: 16,

package/src/presentation/components/paywall/PaywallFeatureItem.tsx

@@ -5,8 +5,7 @@
 
 import React, { useMemo } from "react";
 import { View, StyleSheet } from "react-native";
-import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system";
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import { AtomicText, AtomicIcon, useAppDesignTokens, useResponsive } from "@umituz/react-native-design-system";
 
 interface PaywallFeatureItemProps {
   icon: string;
@@ -16,6 +15,12 @@ interface PaywallFeatureItemProps {
 export const PaywallFeatureItem: React.FC<PaywallFeatureItemProps> = React.memo(
   ({ icon, text }) => {
     const tokens = useAppDesignTokens();
+    const { spacingMultiplier, getFontSize } = useResponsive();
+
+    const styles = useMemo(() => createStyles(spacingMultiplier), [spacingMultiplier]);
+    const fontSize = getFontSize(15);
+    const lineHeight = getFontSize(22);
+    const iconSize = getFontSize(20);
 
     // Pass icon name directly to AtomicIcon (which uses Ionicons)
     // Do NOT capitalize, as Ionicons names are lowercase/kebab-case.
@@ -28,13 +33,13 @@ export const PaywallFeatureItem: React.FC<PaywallFeatureItemProps> = React.memo(
       <View style={styles.featureItem}>
         <AtomicIcon
           name={iconName}
-          customSize={20}
+          customSize={iconSize}
           customColor={tokens.colors.primary}
           style={styles.featureIcon}
         />
         <AtomicText
           type="bodyMedium"
-          style={[styles.featureText, { color: tokens.colors.textPrimary }]}
+          style={[styles.featureText, { color: tokens.colors.textPrimary, fontSize, lineHeight }]}
         >
           {text}
         </AtomicText>
@@ -45,17 +50,16 @@ export const PaywallFeatureItem: React.FC<PaywallFeatureItemProps> = React.memo(
 
 PaywallFeatureItem.displayName = "PaywallFeatureItem";
 
-const styles = StyleSheet.create({
-  featureItem: {
-    flexDirection: "row",
-    alignItems: "center",
-  },
-  featureIcon: {
-    marginRight: 12,
-  },
-  featureText: {
-    fontSize: 15,
-    flex: 1,
-    lineHeight: 22,
-  },
-});
+const createStyles = (spacingMult: number) =>
+  StyleSheet.create({
+    featureItem: {
+      flexDirection: "row",
+      alignItems: "center",
+    },
+    featureIcon: {
+      marginRight: 12 * spacingMult,
+    },
+    featureText: {
+      flex: 1,
+    },
+  });

package/src/presentation/components/paywall/PaywallFeaturesList.tsx

@@ -5,6 +5,7 @@
 
 import React from "react";
 import { View, StyleSheet } from "react-native";
+import { useResponsive } from "@umituz/react-native-design-system";
 import { PaywallFeatureItem } from "./PaywallFeatureItem";
 
 interface PaywallFeaturesListProps {
@@ -18,12 +19,15 @@ interface PaywallFeaturesListProps {
 
 export const PaywallFeaturesList: React.FC<PaywallFeaturesListProps> = React.memo(
   ({ features, containerStyle, gap = 12 }) => {
+    const { spacingMultiplier } = useResponsive();
+    const responsiveGap = gap * spacingMultiplier;
+
     return (
       <View style={[styles.container, containerStyle]}>
         {features.map((feature, index) => (
           <View
             key={`${feature.icon}-${feature.text}-${index}`}
-            style={{ marginBottom: index < features.length - 1 ? gap : 0 }}
+            style={{ marginBottom: index < features.length - 1 ? responsiveGap : 0 }}
           >
             <PaywallFeatureItem icon={feature.icon} text={feature.text} />
           </View>

package/src/presentation/components/paywall/SubscriptionFooter.tsx

@@ -1,8 +1,7 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { View, StyleSheet, TouchableOpacity } from "react-native";
 import type { PurchasesPackage } from "react-native-purchases";
-import { AtomicText } from "@umituz/react-native-design-system";
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import { AtomicText, useAppDesignTokens, useResponsive } from "@umituz/react-native-design-system";
 import { PaywallLegalFooter } from "./PaywallLegalFooter";
 
 interface SubscriptionFooterProps {
@@ -42,6 +41,10 @@ export const SubscriptionFooter: React.FC<SubscriptionFooterProps> = React.memo(
         onRestore,
     }) => {
         const tokens = useAppDesignTokens();
+        const { spacingMultiplier, getFontSize } = useResponsive();
+
+        const styles = useMemo(() => createStyles(spacingMultiplier), [spacingMultiplier]);
+        const buttonFontSize = getFontSize(16);
 
         const isDisabled = !selectedPkg || isProcessing || isLoading;
 
@@ -65,7 +68,7 @@ export const SubscriptionFooter: React.FC<SubscriptionFooterProps> = React.memo(
                                     style={{
                                         color: tokens.colors.onPrimary,
                                         fontWeight: "800",
-                                        fontSize: 16,
+                                        fontSize: buttonFontSize,
                                     }}
                                 >
                                     {isProcessing ? processingText : purchaseButtonText}
@@ -92,21 +95,22 @@ export const SubscriptionFooter: React.FC<SubscriptionFooterProps> = React.memo(
 
 SubscriptionFooter.displayName = "SubscriptionFooter";
 
-const styles = StyleSheet.create({
-    container: {},
-    actions: {
-        paddingHorizontal: 24,
-        paddingVertical: 16,
-        gap: 12,
-    },
-    gradientButton: {
-        paddingVertical: 16,
-        borderRadius: 16,
-        alignItems: "center",
-        justifyContent: "center",
-    },
-    restoreButton: {
-        alignItems: "center",
-        paddingVertical: 8,
-    },
-});
+const createStyles = (spacingMult: number) =>
+    StyleSheet.create({
+        container: {},
+        actions: {
+            paddingHorizontal: 24 * spacingMult,
+            paddingVertical: 16 * spacingMult,
+            gap: 12 * spacingMult,
+        },
+        gradientButton: {
+            paddingVertical: 16 * spacingMult,
+            borderRadius: 16 * spacingMult,
+            alignItems: "center",
+            justifyContent: "center",
+        },
+        restoreButton: {
+            alignItems: "center",
+            paddingVertical: 8 * spacingMult,
+        },
+    });

package/src/presentation/components/paywall/SubscriptionModal.tsx

@@ -3,9 +3,9 @@
  * Fullscreen subscription flow using BaseModal from design system
  */
 
-import React from "react";
+import React, { useMemo } from "react";
 import { View, StyleSheet, ScrollView } from "react-native";
-import { BaseModal } from "@umituz/react-native-design-system";
+import { BaseModal, useResponsive } from "@umituz/react-native-design-system";
 import type { PurchasesPackage } from "react-native-purchases";
 
 import { SubscriptionModalHeader } from "./SubscriptionModalHeader";
@@ -85,6 +85,9 @@ export const SubscriptionModal: React.FC<SubscriptionModalProps> = React.memo((p
     onClose,
   });
 
+  const { spacingMultiplier } = useResponsive();
+  const styles = useMemo(() => createStyles(spacingMultiplier), [spacingMultiplier]);
+
   return (
     <BaseModal visible={visible} onClose={onClose}>
       <View style={styles.container}>
@@ -145,20 +148,21 @@ export const SubscriptionModal: React.FC<SubscriptionModalProps> = React.memo((p
 
 SubscriptionModal.displayName = "SubscriptionModal";
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    width: "100%",
-  },
-  scrollView: {
-    flex: 1,
-  },
-  scrollContent: {
-    flexGrow: 1,
-    paddingBottom: 32,
-  },
-  featuresList: {
-    paddingHorizontal: 24,
-    marginBottom: 24,
-  },
-});
+const createStyles = (spacingMult: number) =>
+  StyleSheet.create({
+    container: {
+      flex: 1,
+      width: "100%",
+    },
+    scrollView: {
+      flex: 1,
+    },
+    scrollContent: {
+      flexGrow: 1,
+      paddingBottom: 32 * spacingMult,
+    },
+    featuresList: {
+      paddingHorizontal: 24 * spacingMult,
+      marginBottom: 24 * spacingMult,
+    },
+  });

package/src/presentation/components/paywall/SubscriptionPlanCard.tsx

@@ -3,24 +3,91 @@
  * Single Responsibility: Display a subscription plan option
  */
 
-import React from "react";
-import { View, TouchableOpacity } from "react-native";
+import React, { useMemo } from "react";
+import { View, TouchableOpacity, StyleSheet } from "react-native";
 import { AtomicText } from "@umituz/react-native-design-system";
-import { useAppDesignTokens, withAlpha } from "@umituz/react-native-design-system";
+import { useAppDesignTokens, withAlpha, useResponsive } from "@umituz/react-native-design-system";
 import { formatPrice } from "../../../utils/priceUtils";
 import { useLocalization } from "@umituz/react-native-localization";
 import { BestValueBadge } from "./BestValueBadge";
 import { getPeriodLabel, isYearlyPackage } from "../../../utils/packagePeriodUtils";
 import { LinearGradient } from "expo-linear-gradient";
 import type { SubscriptionPlanCardProps } from "./SubscriptionPlanCardTypes";
-import { styles } from "./SubscriptionPlanCardStyles";
 
 export type { SubscriptionPlanCardProps } from "./SubscriptionPlanCardTypes";
 
+/**
+ * Create responsive styles for subscription plan card
+ */
+const createStyles = (spacingMult: number, touchTarget: number) => {
+  const basePadding = 18;
+  const baseRadius = 16;
+  const baseCreditRadius = 12;
+
+  const radioSize = Math.max(touchTarget * 0.5, 24);
+  const radioInnerSize = radioSize * 0.5;
+
+  return StyleSheet.create({
+    container: {
+      borderRadius: baseRadius * spacingMult,
+      position: "relative",
+      overflow: "hidden",
+    },
+    gradientWrapper: {
+      flex: 1,
+      padding: basePadding * spacingMult,
+    },
+    content: {
+      flexDirection: "row",
+      justifyContent: "space-between",
+      alignItems: "center",
+    },
+    leftSection: {
+      flexDirection: "row",
+      alignItems: "center",
+      flex: 1,
+    },
+    radio: {
+      width: radioSize,
+      height: radioSize,
+      borderRadius: radioSize / 2,
+      borderWidth: 2,
+      alignItems: "center",
+      justifyContent: "center",
+      marginRight: 16 * spacingMult,
+    },
+    radioInner: {
+      width: radioInnerSize,
+      height: radioInnerSize,
+      borderRadius: radioInnerSize / 2,
+    },
+    textContainer: {
+      flex: 1,
+    },
+    title: {
+      fontWeight: "600",
+      marginBottom: 2 * spacingMult,
+    },
+    creditBadge: {
+      paddingHorizontal: 10 * spacingMult,
+      paddingVertical: 4 * spacingMult,
+      borderRadius: baseCreditRadius * spacingMult,
+      marginBottom: 4 * spacingMult,
+    },
+    rightSection: {
+      alignItems: "flex-end",
+    },
+    price: {
+      fontWeight: "700",
+    },
+  });
+};
+
 export const SubscriptionPlanCard: React.FC<SubscriptionPlanCardProps> =
   React.memo(({ package: pkg, isSelected, onSelect, isBestValue = false, creditAmount }) => {
     const tokens = useAppDesignTokens();
     const { t } = useLocalization();
+    const { spacingMultiplier, getFontSize, minTouchTarget } = useResponsive();
 
     const period = pkg.product.subscriptionPeriod;
     const isYearly = isYearlyPackage(pkg);
@@ -41,6 +108,11 @@ export const SubscriptionPlanCard: React.FC<SubscriptionPlanCardProps> =
       }
       : {};
 
+    // Responsive styles
+    const styles = useMemo(() => createStyles(spacingMultiplier, minTouchTarget), [spacingMultiplier, minTouchTarget]);
+    const secondaryFontSize = getFontSize(11);
+    const creditFontSize = getFontSize(11);
+
     return (
       <TouchableOpacity
         onPress={onSelect}
@@ -87,12 +159,12 @@ export const SubscriptionPlanCard: React.FC<SubscriptionPlanCardProps> =
                 >
                   {title}
                 </AtomicText>
-                {isYearly && (
+                {isYearly && monthlyEquivalent && (
                   <AtomicText
                     type="bodySmall"
-                    style={{ color: tokens.colors.textSecondary, fontSize: 11 }}
+                    style={{ color: tokens.colors.textSecondary, fontSize: secondaryFontSize }}
                   >
-                    {price}
+                    {monthlyEquivalent}/mo
                   </AtomicText>
                 )}
               </View>
@@ -117,7 +189,7 @@ export const SubscriptionPlanCard: React.FC<SubscriptionPlanCardProps> =
                     style={{
                       color: tokens.colors.primary,
                       fontWeight: "800",
-                      fontSize: 11,
+                      fontSize: creditFontSize,
                     }}
                   >
                     {creditAmount} {t("paywall.credits") || "Credits"}
@@ -128,9 +200,7 @@ export const SubscriptionPlanCard: React.FC<SubscriptionPlanCardProps> =
                 type="titleMedium"
                 style={[styles.price, { color: tokens.colors.textPrimary }]}
               >
-                {isYearly && monthlyEquivalent
-                  ? `${monthlyEquivalent}/mo`
-                  : price}
+                {price}
               </AtomicText>
             </View>
           </View>

package/src/presentation/components/paywall/accordion/AccordionPlanCard.tsx

@@ -3,9 +3,9 @@
  * Expandable subscription plan card with credit display
  */
 
-import React, { useCallback } from "react";
+import React, { useCallback, useMemo } from "react";
 import { View, StyleSheet, type StyleProp, type ViewStyle } from "react-native";
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import { useAppDesignTokens, useResponsive } from "@umituz/react-native-design-system";
 import { formatPrice } from "../../../../utils/priceUtils";
 import { getPeriodLabel, isYearlyPackage } from "../../../../utils/packagePeriodUtils";
 import { useLocalization } from "@umituz/react-native-localization";
@@ -28,6 +28,9 @@ export const AccordionPlanCard: React.FC<AccordionPlanCardProps> = React.memo(
   }) => {
     const tokens = useAppDesignTokens();
     const { t } = useLocalization();
+    const { spacingMultiplier } = useResponsive();
+
+    const styles = useMemo(() => createStyles(spacingMultiplier), [spacingMultiplier]);
 
     const period = pkg.product.subscriptionPeriod;
     const isYearly = isYearlyPackage(pkg);
@@ -88,9 +91,10 @@ export const AccordionPlanCard: React.FC<AccordionPlanCardProps> = React.memo(
 
 AccordionPlanCard.displayName = "AccordionPlanCard";
 
-const styles = StyleSheet.create({
-  container: {
-    borderRadius: 16,
-    marginBottom: 12,
-  },
-});
+const createStyles = (spacingMult: number) =>
+  StyleSheet.create({
+    container: {
+      borderRadius: 16 * spacingMult,
+      marginBottom: 12 * spacingMult,
+    },
+  });

package/src/presentation/components/paywall/accordion/PlanCardDetails.tsx

@@ -3,11 +3,12 @@
  * Expanded state of accordion subscription card
  */
 
-import React from "react";
+import React, { useMemo } from "react";
 import { View, StyleSheet } from "react-native";
 import {
   AtomicText,
   useAppDesignTokens,
+  useResponsive,
 } from "@umituz/react-native-design-system";
 import type { PlanCardDetailsProps } from "./AccordionPlanCardTypes";
 
@@ -21,6 +22,9 @@ export const PlanCardDetails: React.FC<PlanCardDetailsProps> = ({
   perMonthLabel = "Per Month",
 }) => {
   const tokens = useAppDesignTokens();
+  const { spacingMultiplier } = useResponsive();
+
+  const styles = useMemo(() => createStyles(spacingMultiplier), [spacingMultiplier]);
 
   return (
     <View
@@ -57,7 +61,10 @@ export const PlanCardDetails: React.FC<PlanCardDetailsProps> = ({
           </AtomicText>
           <AtomicText
             type="bodyMedium"
-            style={{ color: tokens.colors.textPrimary, fontWeight: "600" }}
+            style={{
+              color: tokens.colors.primary,
+              fontWeight: "700",
+            }}
           >
             {fullPrice}
           </AtomicText>
@@ -74,10 +81,7 @@ export const PlanCardDetails: React.FC<PlanCardDetailsProps> = ({
           </AtomicText>
           <AtomicText
             type="bodyMedium"
-            style={{
-              color: tokens.colors.primary,
-              fontWeight: "700",
-            }}
+            style={{ color: tokens.colors.textPrimary, fontWeight: "600" }}
           >
             {monthlyEquivalent}
           </AtomicText>
@@ -87,16 +91,17 @@ export const PlanCardDetails: React.FC<PlanCardDetailsProps> = ({
   );
 };
 
-const styles = StyleSheet.create({
-  container: {
-    paddingHorizontal: 16,
-    paddingVertical: 12,
-    borderTopWidth: 1,
-    gap: 10,
-  },
-  row: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-  },
-});
+const createStyles = (spacingMult: number) =>
+  StyleSheet.create({
+    container: {
+      paddingHorizontal: 16 * spacingMult,
+      paddingVertical: 12 * spacingMult,
+      borderTopWidth: 1,
+      gap: 10 * spacingMult,
+    },
+    row: {
+      flexDirection: "row",
+      justifyContent: "space-between",
+      alignItems: "center",
+    },
+  });

package/src/presentation/components/paywall/accordion/PlanCardHeader.tsx

@@ -3,12 +3,13 @@
  * Collapsed state of accordion subscription card
  */
 
-import React from "react";
+import React, { useMemo } from "react";
 import { View, TouchableOpacity, StyleSheet } from "react-native";
 import {
   AtomicText,
   useAppDesignTokens,
   withAlpha,
+  useResponsive,
 } from "@umituz/react-native-design-system";
 import { BestValueBadge } from "../BestValueBadge";
 import { useLocalization } from "@umituz/react-native-localization";
@@ -24,6 +25,13 @@ export const PlanCardHeader: React.FC<PlanCardHeaderProps> = ({
 }) => {
   const tokens = useAppDesignTokens();
   const { t } = useLocalization();
+  const { spacingMultiplier, getFontSize, minTouchTarget } = useResponsive();
+
+  const styles = useMemo(
+    () => createStyles(spacingMultiplier, minTouchTarget),
+    [spacingMultiplier, minTouchTarget]
+  );
+  const creditFontSize = getFontSize(11);
 
   return (
     <TouchableOpacity
@@ -77,7 +85,7 @@ export const PlanCardHeader: React.FC<PlanCardHeaderProps> = ({
                   style={{
                     color: tokens.colors.primary,
                     fontWeight: "700",
-                    fontSize: 11,
+                    fontSize: creditFontSize,
                   }}
                 >
                   {creditAmount} {t("paywall.credits") || "Credits"}
@@ -103,50 +111,55 @@ export const PlanCardHeader: React.FC<PlanCardHeaderProps> = ({
   );
 };
 
-const styles = StyleSheet.create({
-  container: {
-    width: "100%",
-  },
-  content: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    paddingVertical: 16,
-    paddingHorizontal: 16,
-  },
-  leftSection: {
-    flexDirection: "row",
-    alignItems: "center",
-    flex: 1,
-  },
-  radio: {
-    width: 22,
-    height: 22,
-    borderRadius: 11,
-    borderWidth: 2,
-    alignItems: "center",
-    justifyContent: "center",
-    marginRight: 12,
-  },
-  radioInner: {
-    width: 12,
-    height: 12,
-    borderRadius: 6,
-  },
-  textContainer: {
-    flex: 1,
-    gap: 6,
-  },
-  creditBadge: {
-    paddingHorizontal: 10,
-    paddingVertical: 4,
-    borderRadius: 12,
-    borderWidth: 1,
-    alignSelf: "flex-start",
-  },
-  rightSection: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 12,
-  },
-});
+const createStyles = (spacingMult: number, touchTarget: number) => {
+  const radioSize = Math.max(touchTarget * 0.4, 22);
+  const radioInnerSize = radioSize * 0.55;
+
+  return StyleSheet.create({
+    container: {
+      width: "100%",
+    },
+    content: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      paddingVertical: 16 * spacingMult,
+      paddingHorizontal: 16 * spacingMult,
+    },
+    leftSection: {
+      flexDirection: "row",
+      alignItems: "center",
+      flex: 1,
+    },
+    radio: {
+      width: radioSize,
+      height: radioSize,
+      borderRadius: radioSize / 2,
+      borderWidth: 2,
+      alignItems: "center",
+      justifyContent: "center",
+      marginRight: 12 * spacingMult,
+    },
+    radioInner: {
+      width: radioInnerSize,
+      height: radioInnerSize,
+      borderRadius: radioInnerSize / 2,
+    },
+    textContainer: {
+      flex: 1,
+      gap: 6 * spacingMult,
+    },
+    creditBadge: {
+      paddingHorizontal: 10 * spacingMult,
+      paddingVertical: 4 * spacingMult,
+      borderRadius: 12 * spacingMult,
+      borderWidth: 1,
+      alignSelf: "flex-start",
+    },
+    rightSection: {
+      flexDirection: "row",
+      alignItems: "center",
+      gap: 12 * spacingMult,
+    },
+  });
+};