@umituz/react-native-subscription 2.2.27 → 2.2.29

package/package.json

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

@@ -5,7 +5,6 @@
 
 import React, { useEffect } from "react";
 import { View, Modal, StyleSheet, TouchableOpacity } from "react-native";
-import { SafeAreaView } from "react-native-safe-area-context";
 import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
 import { useLocalization } from "@umituz/react-native-localization";
 import type { PurchasesPackage } from "react-native-purchases";
@@ -106,11 +105,12 @@ export const PaywallModal: React.FC<PaywallModalProps> = React.memo(
           <View
             style={[styles.content, { backgroundColor: tokens.colors.surface }]}
           >
-            <SafeAreaView edges={["top"]} style={styles.safeArea}>
+            <View style={styles.contentInner}>
               <PaywallHeader
                 title={displayTitle}
                 subtitle={displaySubtitle}
                 onClose={onClose}
+                variant="fullscreen"
               />
 
               <PaywallTabBar
@@ -148,7 +148,7 @@ export const PaywallModal: React.FC<PaywallModalProps> = React.memo(
                   restoreButtonText={restoreButtonText}
                 />
               )}
-            </SafeAreaView>
+            </View>
           </View>
         </View>
       </Modal>
@@ -178,7 +178,9 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     borderColor: "rgba(255, 255, 255, 0.08)",
   },
-  safeArea: {
+  contentInner: {
     flex: 1,
+    paddingTop: 20,
+    paddingBottom: 20,
   },
 });

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

@@ -5,7 +5,6 @@
 
 import React from "react";
 import { View, StyleSheet, ScrollView } from "react-native";
-import { SafeAreaView } from "react-native-safe-area-context";
 import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
 import type { PurchasesPackage } from "react-native-purchases";
 
@@ -79,13 +78,13 @@ export const SubscriptionModal: React.FC<SubscriptionModalProps> = React.memo((p
 
   if (!visible) return null;
 
-  const ContentWrapper = variant === "fullscreen" ? SafeAreaView : View;
-  const wrapperProps = variant === "fullscreen" ? { edges: ["top", "bottom"] as const } : {};
+  const ContentWrapper = View;
+  const containerStyle = variant === "fullscreen" ? styles.fullscreenContainer : styles.container;
 
   return (
     <SubscriptionModalOverlay visible={visible} onClose={onClose} variant={variant}>
-      <ContentWrapper {...wrapperProps} style={styles.container}>
-        <SubscriptionModalHeader title={title} subtitle={subtitle} onClose={onClose} />
+      <ContentWrapper style={containerStyle}>
+        <SubscriptionModalHeader title={title} subtitle={subtitle} onClose={onClose} variant={variant} />
 
         <ScrollView
           style={styles.scrollView}
@@ -137,6 +136,12 @@ const styles = StyleSheet.create({
     flex: 1,
     width: "100%",
   },
+  fullscreenContainer: {
+    flex: 1,
+    width: "100%",
+    paddingTop: 20,
+    paddingBottom: 20,
+  },
   scrollView: {
     flex: 1,
     width: "100%",

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,