@umituz/react-native-subscription 2.2.26 → 2.2.27

package/package.json

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

@@ -94,7 +94,7 @@ export const PaywallModal: React.FC<PaywallModalProps> = React.memo(
       <Modal
         visible={visible}
         transparent
-        animationType="slide"
+        animationType="fade"
         onRequestClose={onClose}
       >
         <View style={styles.overlay}>
@@ -161,17 +161,22 @@ 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: {
     flex: 1,

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",