@umituz/react-native-subscription 2.2.26 → 2.2.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-subscription",
-  "version": "2.2.26",
+  "version": "2.2.28",
   "description": "Complete subscription management with RevenueCat, paywall UI, and credits system for React Native apps",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -63,4 +63,4 @@
     "README.md",
     "LICENSE"
   ]
-}
+}

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";
@@ -94,7 +93,7 @@ export const PaywallModal: React.FC<PaywallModalProps> = React.memo(
       <Modal
         visible={visible}
         transparent
-        animationType="slide"
+        animationType="fade"
         onRequestClose={onClose}
       >
         <View style={styles.overlay}>
@@ -106,7 +105,7 @@ 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}
@@ -148,7 +147,7 @@ export const PaywallModal: React.FC<PaywallModalProps> = React.memo(
                   restoreButtonText={restoreButtonText}
                 />
               )}
-            </SafeAreaView>
+            </View>
           </View>
         </View>
       </Modal>
@@ -161,19 +160,26 @@ PaywallModal.displayName = "PaywallModal";
 const styles = StyleSheet.create({
   overlay: {
     flex: 1,
-    justifyContent: "flex-end",
+    justifyContent: "center",
+    alignItems: "center",
+    paddingHorizontal: 20,
   },
   backdrop: {
     ...StyleSheet.absoluteFillObject,
-    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    backgroundColor: "rgba(0, 0, 0, 0.85)",
   },
   content: {
-    borderTopLeftRadius: 24,
-    borderTopRightRadius: 24,
-    maxHeight: "90%",
-    flex: 1,
+    borderRadius: 32,
+    maxHeight: "88%",
+    width: "92%",
+    maxWidth: 480,
+    overflow: "hidden",
+    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,12 +78,12 @@ 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}>
+      <ContentWrapper style={containerStyle}>
         <SubscriptionModalHeader title={title} subtitle={subtitle} onClose={onClose} />
 
         <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/SubscriptionModalOverlay.tsx

@@ -43,12 +43,19 @@ export const SubscriptionModalOverlay: React.FC<SubscriptionModalOverlayProps> =
         return (
             <Modal
                 visible={visible}
-                transparent={false}
-                animationType="slide"
+                transparent
+                animationType="fade"
                 onRequestClose={onClose}
             >
-                <View style={[styles.fullscreen, { backgroundColor: tokens.colors.backgroundPrimary }]}>
-                    {children}
+                <View style={styles.fullscreenOverlay}>
+                    <TouchableOpacity
+                        style={styles.fullscreenBackdrop}
+                        activeOpacity={1}
+                        onPress={onClose}
+                    />
+                    <View style={[styles.fullscreenContent, { backgroundColor: tokens.colors.surface }]}>
+                        {children}
+                    </View>
                 </View>
             </Modal>
         );
@@ -93,8 +100,34 @@ const styles = StyleSheet.create({
         ...StyleSheet.absoluteFillObject,
         backgroundColor: "rgba(0, 0, 0, 0.6)",
     },
-    fullscreen: {
+    fullscreenOverlay: {
         flex: 1,
+        justifyContent: "center",
+        alignItems: "center",
+        paddingHorizontal: 20,
+    },
+    fullscreenBackdrop: {
+        ...StyleSheet.absoluteFillObject,
+        backgroundColor: "rgba(0, 0, 0, 0.85)",
+    },
+    fullscreenContent: {
+        width: Math.min(SCREEN_WIDTH * 0.92, 480),
+        maxHeight: SCREEN_HEIGHT * 0.88,
+        borderRadius: 32,
+        overflow: "hidden",
+        borderWidth: 1,
+        borderColor: "rgba(255, 255, 255, 0.08)",
+        ...Platform.select({
+            ios: {
+                shadowColor: "#000",
+                shadowOffset: { width: 0, height: 16 },
+                shadowOpacity: 0.5,
+                shadowRadius: 32,
+            },
+            android: {
+                elevation: 16,
+            },
+        }),
     },
     bottomSheet: {
         borderTopLeftRadius: 32,
@@ -110,7 +143,7 @@ const styles = StyleSheet.create({
         borderRadius: 32,
         overflow: "hidden",
         borderWidth: 1,
-        borderColor: "rgba(255, 255, 255, 0.1)", // Subtle premium border
+        borderColor: "rgba(255, 255, 255, 0.1)",
         ...Platform.select({
             ios: {
                 shadowColor: "#000",