@umituz/react-native-subscription 2.2.18 → 2.2.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-subscription",
-  "version": "2.2.18",
+  "version": "2.2.20",
   "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/SubscriptionModal.tsx

@@ -10,6 +10,7 @@ import {
   StyleSheet,
   TouchableOpacity,
   ScrollView,
+  Dimensions,
 } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
 import type { PurchasesPackage } from "react-native-purchases";
@@ -19,6 +20,8 @@ import { PaywallFeaturesList } from "./PaywallFeaturesList";
 import { SubscriptionPackageList } from "./SubscriptionPackageList";
 import { SubscriptionFooter } from "./SubscriptionFooter";
 
+const { height: SCREEN_HEIGHT } = Dimensions.get("window");
+
 export interface SubscriptionModalProps {
   visible: boolean;
   onClose: () => void;
@@ -97,93 +100,108 @@ export const SubscriptionModal: React.FC<SubscriptionModalProps> = React.memo(
 
     const isFullScreen = variant === "fullscreen";
 
+    // Fullscreen variant uses SafeAreaView, bottom-sheet uses regular View
     const ContentWrapper = isFullScreen ? SafeAreaView : View;
     const wrapperProps = isFullScreen ? { edges: ["top", "bottom"] as const } : {};
 
-    const Content = (
-      <ContentWrapper
-        {...wrapperProps}
-        style={isFullScreen ? styles.safeAreaFullScreen : styles.safeAreaBottomSheet}
+    // Scrollable content (packages + features)
+    const ScrollContent = (
+      <ScrollView
+        style={styles.scrollView}
+        contentContainerStyle={styles.scrollContent}
+        showsVerticalScrollIndicator={false}
+        bounces={false}
       >
-        <View style={styles.header}>
-          <TouchableOpacity style={styles.closeButton} onPress={onClose}>
-            <AtomicText style={[styles.closeIcon, { color: tokens.colors.textSecondary }]}>
-              ×
-            </AtomicText>
-          </TouchableOpacity>
-          <AtomicText
-            type="headlineMedium"
-            style={[styles.title, { color: tokens.colors.textPrimary }]}
-          >
-            {title}
-          </AtomicText>
-          {subtitle && (
-            <AtomicText
-              type="bodyMedium"
-              style={[styles.subtitle, { color: tokens.colors.textSecondary }]}
-            >
-              {subtitle}
-            </AtomicText>
-          )}
-        </View>
-
-        <ScrollView
-          style={isFullScreen ? styles.scrollViewFullScreen : styles.scrollViewBottomSheet}
-          contentContainerStyle={styles.scrollContent}
-        >
-          <SubscriptionPackageList
-            packages={packages}
-            isLoading={isLoading}
-            selectedPkg={selectedPkg}
-            onSelect={setSelectedPkg}
-            loadingText={loadingText}
-            emptyText={emptyText}
-          />
-          {features.length > 0 && (
-            <View style={[styles.featuresSection, { backgroundColor: tokens.colors.surfaceSecondary }]}>
-              <PaywallFeaturesList features={features} gap={12} />
-            </View>
-          )}
-        </ScrollView>
-
-        <SubscriptionFooter
-          isProcessing={isProcessing}
+        <SubscriptionPackageList
+          packages={packages}
           isLoading={isLoading}
-          processingText={processingText}
-          purchaseButtonText={purchaseButtonText}
-          hasPackages={packages.length > 0}
           selectedPkg={selectedPkg}
-          restoreButtonText={restoreButtonText}
-          showRestoreButton={showRestoreButton}
-          privacyUrl={privacyUrl}
-          termsUrl={termsUrl}
-          privacyText={privacyText}
-          termsOfServiceText={termsOfServiceText}
-          onPurchase={handlePurchase}
-          onRestore={handleRestore}
+          onSelect={setSelectedPkg}
+          loadingText={loadingText}
+          emptyText={emptyText}
         />
-      </ContentWrapper>
+        {features.length > 0 && (
+          <View style={[styles.featuresSection, { backgroundColor: tokens.colors.surfaceSecondary }]}>
+            <PaywallFeaturesList features={features} gap={12} />
+          </View>
+        )}
+      </ScrollView>
+    );
+
+    // Footer with buttons and legal links
+    const Footer = (
+      <SubscriptionFooter
+        isProcessing={isProcessing}
+        isLoading={isLoading}
+        processingText={processingText}
+        purchaseButtonText={purchaseButtonText}
+        hasPackages={packages.length > 0}
+        selectedPkg={selectedPkg}
+        restoreButtonText={restoreButtonText}
+        showRestoreButton={showRestoreButton}
+        privacyUrl={privacyUrl}
+        termsUrl={termsUrl}
+        privacyText={privacyText}
+        termsOfServiceText={termsOfServiceText}
+        onPurchase={handlePurchase}
+        onRestore={handleRestore}
+      />
     );
 
-    if (variant === "fullscreen") {
+    // Header with title and close button
+    const Header = (
+      <View style={styles.header}>
+        <TouchableOpacity style={styles.closeButton} onPress={onClose}>
+          <AtomicText style={[styles.closeIcon, { color: tokens.colors.textSecondary }]}>
+            ×
+          </AtomicText>
+        </TouchableOpacity>
+        <AtomicText
+          type="headlineMedium"
+          style={[styles.title, { color: tokens.colors.textPrimary }]}
+        >
+          {title}
+        </AtomicText>
+        {subtitle && (
+          <AtomicText
+            type="bodyMedium"
+            style={[styles.subtitle, { color: tokens.colors.textSecondary }]}
+          >
+            {subtitle}
+          </AtomicText>
+        )}
+      </View>
+    );
+
+    // FULLSCREEN VARIANT
+    if (isFullScreen) {
       const Wrapper = BackgroundComponent || View;
-      const wrapperStyle = !BackgroundComponent ? { flex: 1, backgroundColor: tokens.colors.backgroundPrimary } : { flex: 1 };
+      const wrapperStyle = !BackgroundComponent
+        ? { flex: 1, backgroundColor: tokens.colors.backgroundPrimary }
+        : { flex: 1 };
 
       return (
         <Modal visible={visible} transparent={false} animationType="slide" onRequestClose={onClose}>
           <Wrapper style={wrapperStyle}>
-            {Content}
+            <ContentWrapper {...wrapperProps} style={styles.fullscreenContainer}>
+              {Header}
+              {ScrollContent}
+              {Footer}
+            </ContentWrapper>
           </Wrapper>
         </Modal>
       );
     }
 
+    // BOTTOM-SHEET VARIANT
     return (
       <Modal visible={visible} transparent animationType="slide" onRequestClose={onClose}>
         <View style={styles.overlay}>
           <TouchableOpacity style={styles.backdrop} activeOpacity={1} onPress={onClose} />
-          <View style={[styles.bottomSheetContent, { backgroundColor: tokens.colors.surface }]}>
-            {Content}
+          <View style={[styles.bottomSheetContainer, { backgroundColor: tokens.colors.surface }]}>
+            {Header}
+            {ScrollContent}
+            {Footer}
           </View>
         </View>
       </Modal>
@@ -194,22 +212,71 @@ export const SubscriptionModal: React.FC<SubscriptionModalProps> = React.memo(
 SubscriptionModal.displayName = "SubscriptionModal";
 
 const styles = StyleSheet.create({
-  overlay: { flex: 1, justifyContent: "flex-end" },
-  backdrop: { ...StyleSheet.absoluteFillObject, backgroundColor: "rgba(0, 0, 0, 0.5)" },
-  bottomSheetContent: { borderTopLeftRadius: 24, borderTopRightRadius: 24, maxHeight: "90%" },
+  // Overlay and backdrop for bottom-sheet
+  overlay: {
+    flex: 1,
+    justifyContent: "flex-end",
+  },
+  backdrop: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+  },
+
+  // Bottom-sheet container - KEY FIX: explicit max height calculation
+  bottomSheetContainer: {
+    borderTopLeftRadius: 24,
+    borderTopRightRadius: 24,
+    maxHeight: SCREEN_HEIGHT * 0.85,
+    paddingTop: 16,
+    paddingBottom: 24,
+  },
 
-  safeAreaFullScreen: { flex: 1, paddingTop: 16 },
-  safeAreaBottomSheet: { flex: 1, paddingTop: 16, paddingBottom: 24 },
+  // Fullscreen container
+  fullscreenContainer: {
+    flex: 1,
+    paddingTop: 16,
+  },
 
-  header: { alignItems: "center", paddingHorizontal: 24, paddingBottom: 20 },
-  closeButton: { position: "absolute", top: 0, right: 16, padding: 8, zIndex: 1 },
-  closeIcon: { fontSize: 28, fontWeight: "300" },
-  title: { marginBottom: 8, textAlign: "center" },
-  subtitle: { textAlign: "center" },
+  // Header
+  header: {
+    alignItems: "center",
+    paddingHorizontal: 24,
+    paddingBottom: 16,
+  },
+  closeButton: {
+    position: "absolute",
+    top: 0,
+    right: 16,
+    padding: 8,
+    zIndex: 1,
+  },
+  closeIcon: {
+    fontSize: 28,
+    fontWeight: "300",
+  },
+  title: {
+    marginBottom: 8,
+    textAlign: "center",
+  },
+  subtitle: {
+    textAlign: "center",
+  },
 
-  scrollViewFullScreen: { flex: 1 },
-  scrollViewBottomSheet: {},
+  // ScrollView - expands to fill available space, shrinks if needed
+  scrollView: {
+    flex: 1,
+    minHeight: 100,
+  },
+  scrollContent: {
+    paddingHorizontal: 24,
+    paddingBottom: 16,
+    flexGrow: 1,
+  },
 
-  scrollContent: { paddingHorizontal: 24, paddingBottom: 16 },
-  featuresSection: { borderRadius: 16, padding: 16, marginTop: 20 },
+  // Features section
+  featuresSection: {
+    borderRadius: 16,
+    padding: 16,
+    marginTop: 16,
+  },
 });