@umituz/react-native-subscription 2.14.28 → 2.14.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-subscription",
-  "version": "2.14.28",
+  "version": "2.14.30",
   "description": "Complete subscription management with RevenueCat, paywall UI, and credits system for React Native apps",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -39,6 +39,7 @@
     "@umituz/react-native-localization": "latest",
     "@umituz/react-native-sentry": "latest",
     "expo-constants": ">=16.0.0",
+    "expo-image": ">=2.0.0",
     "expo-linear-gradient": ">=14.0.0",
     "firebase": ">=10.0.0",
     "react": ">=18.2.0",
@@ -62,6 +63,7 @@
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.0.1",
     "expo-constants": "~16.0.0",
+    "expo-image": "~3.0.0",
     "expo-linear-gradient": "~15.0.0",
     "firebase": "^10.0.0",
     "react": "19.1.0",

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

@@ -4,8 +4,9 @@
  */
 
 import React, { useState, useCallback } from "react";
-import { View, ScrollView, StyleSheet, TouchableOpacity, ActivityIndicator, Linking } from "react-native";
+import { View, ScrollView, StyleSheet, TouchableOpacity, ActivityIndicator, Linking, type ImageSourcePropType } from "react-native";
 import { BaseModal, useAppDesignTokens, AtomicText, AtomicIcon } from "@umituz/react-native-design-system";
+import { Image } from "expo-image";
 import type { PurchasesPackage } from "react-native-purchases";
 import { PlanCard } from "./PlanCard";
 import { CreditCard } from "./CreditCard";
@@ -24,6 +25,8 @@ export interface PaywallModalProps {
     bestValueIdentifier?: string;
     creditAmounts?: Record<string, number>;
     creditsLabel?: string;
+    /** Hero image source (require or uri) */
+    heroImage?: ImageSourcePropType;
     onSubscriptionPurchase?: (pkg: PurchasesPackage) => Promise<void>;
     onCreditsPurchase?: (packageId: string) => Promise<void>;
     onRestore?: () => Promise<void>;
@@ -43,6 +46,7 @@ export const PaywallModal: React.FC<PaywallModalProps> = React.memo((props) => {
         bestValueIdentifier,
         creditAmounts,
         creditsLabel,
+        heroImage,
         onSubscriptionPurchase,
         onCreditsPurchase,
         onRestore,
@@ -117,6 +121,16 @@ export const PaywallModal: React.FC<PaywallModalProps> = React.memo((props) => {
                 </TouchableOpacity>
 
                 <ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={styles.scroll}>
+                    {heroImage && (
+                        <View style={styles.heroContainer}>
+                            <Image
+                                source={heroImage}
+                                style={styles.heroImage}
+                                contentFit="cover"
+                                transition={300}
+                            />
+                        </View>
+                    )}
                     <View style={styles.header}>
                         <AtomicText type="headlineMedium" style={[styles.title, { color: tokens.colors.textPrimary }]}>
                             {translations.title}
@@ -228,6 +242,8 @@ const styles = StyleSheet.create({
     container: { flex: 1 },
     closeBtn: { position: "absolute", top: 12, right: 12, width: 32, height: 32, borderRadius: 16, justifyContent: "center", alignItems: "center", zIndex: 10 },
     scroll: { flexGrow: 1, padding: 16, paddingTop: 48, paddingBottom: 32 },
+    heroContainer: { alignItems: "center", marginBottom: 16, marginTop: -24 },
+    heroImage: { width: 200, height: 200, borderRadius: 16 },
     header: { alignItems: "center", marginBottom: 12 },
     title: { fontWeight: "700", textAlign: "center", marginBottom: 4 },
     subtitle: { textAlign: "center" },