@umituz/react-native-subscription 2.2.28 → 2.2.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-subscription",
-  "version": "2.2.28",
+  "version": "2.2.29",
   "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/presentation/components/paywall/PaywallHeader.tsx

@@ -12,14 +12,17 @@ interface PaywallHeaderProps {
   title: string;
   subtitle?: string;
   onClose: () => void;
+  variant?: "bottom-sheet" | "fullscreen" | "dialog";
 }
 
 export const PaywallHeader: React.FC<PaywallHeaderProps> = React.memo(
-  ({ title, subtitle, onClose }) => {
+  ({ title, subtitle, onClose, variant = "bottom-sheet" }) => {
     const tokens = useAppDesignTokens();
 
+    const containerStyle = variant === "fullscreen" ? styles.containerFullscreen : styles.container;
+
     return (
-      <View style={styles.container}>
+      <View style={containerStyle}>
         <View style={styles.titleContainer}>
           <AtomicText
             type="headlineLarge"
@@ -62,6 +65,14 @@ const styles = StyleSheet.create({
     paddingTop: 8,
     paddingBottom: 16,
   },
+  containerFullscreen: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "flex-start",
+    paddingHorizontal: 24,
+    paddingTop: 48,
+    paddingBottom: 16,
+  },
   titleContainer: {
     flex: 1,
     marginRight: 16,

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

@@ -110,6 +110,7 @@ export const PaywallModal: React.FC<PaywallModalProps> = React.memo(
                 title={displayTitle}
                 subtitle={displaySubtitle}
                 onClose={onClose}
+                variant="fullscreen"
               />
 
               <PaywallTabBar

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

@@ -84,7 +84,7 @@ export const SubscriptionModal: React.FC<SubscriptionModalProps> = React.memo((p
   return (
     <SubscriptionModalOverlay visible={visible} onClose={onClose} variant={variant}>
       <ContentWrapper style={containerStyle}>
-        <SubscriptionModalHeader title={title} subtitle={subtitle} onClose={onClose} />
+        <SubscriptionModalHeader title={title} subtitle={subtitle} onClose={onClose} variant={variant} />
 
         <ScrollView
           style={styles.scrollView}

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

@@ -11,12 +11,14 @@ interface SubscriptionModalHeaderProps {
     title: string;
     subtitle?: string;
     onClose: () => void;
+    variant?: "bottom-sheet" | "fullscreen" | "dialog";
 }
 
 export const SubscriptionModalHeader: React.FC<SubscriptionModalHeaderProps> = ({
     title,
     subtitle,
     onClose,
+    variant = "bottom-sheet",
 }) => {
     const tokens = useAppDesignTokens();
 
@@ -24,8 +26,10 @@ export const SubscriptionModalHeader: React.FC<SubscriptionModalHeaderProps> = (
         console.log("[SubscriptionModalHeader] Rendering title:", title);
     }
 
+    const headerStyle = variant === "fullscreen" ? styles.headerFullscreen : styles.header;
+
     return (
-        <View style={styles.header}>
+        <View style={headerStyle}>
             <TouchableOpacity
                 style={styles.closeButton}
                 onPress={onClose}
@@ -60,6 +64,12 @@ const styles = StyleSheet.create({
         paddingTop: 8,
         paddingBottom: 16,
     },
+    headerFullscreen: {
+        alignItems: "center",
+        paddingHorizontal: 24,
+        paddingTop: 48,
+        paddingBottom: 16,
+    },
     closeButton: {
         position: "absolute",
         top: 8,