@umituz/react-native-subscription 2.2.20 → 2.2.21

package/package.json

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

@@ -34,7 +34,7 @@ export const PaywallFeatureItem: React.FC<PaywallFeatureItemProps> = React.memo(
         />
         <AtomicText
           type="bodyMedium"
-          style={[styles.featureText, { color: tokens.colors.text }]}
+          style={[styles.featureText, { color: tokens.colors.textPrimary }]}
         >
           {text}
         </AtomicText>

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

@@ -92,25 +92,28 @@ const styles = StyleSheet.create({
   container: {
     alignItems: "center",
     paddingHorizontal: 24,
-    paddingBottom: 20,
+    paddingBottom: 32, // Increased for home indicator safety
     paddingTop: 8,
+    width: "100%",
   },
   termsText: {
     textAlign: "center",
     fontSize: 11,
     lineHeight: 16,
-    marginBottom: 8,
+    marginBottom: 10,
   },
   legalLinksContainer: {
     flexDirection: "row",
     alignItems: "center",
+    justifyContent: "center",
     marginTop: 4,
+    flexWrap: "wrap",
   },
   linkText: {
     textDecorationLine: "underline",
     fontSize: 12,
   },
   separator: {
-    marginHorizontal: 4,
+    marginHorizontal: 8,
   },
 });

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

@@ -222,13 +222,14 @@ const styles = StyleSheet.create({
     backgroundColor: "rgba(0, 0, 0, 0.5)",
   },
 
-  // Bottom-sheet container - KEY FIX: explicit max height calculation
+  // Bottom-sheet container
   bottomSheetContainer: {
-    borderTopLeftRadius: 24,
-    borderTopRightRadius: 24,
-    maxHeight: SCREEN_HEIGHT * 0.85,
-    paddingTop: 16,
-    paddingBottom: 24,
+    borderTopLeftRadius: 32,
+    borderTopRightRadius: 32,
+    maxHeight: SCREEN_HEIGHT * 0.9,
+    minHeight: 400,
+    width: "100%",
+    paddingBottom: 0, // Footer has its own padding
   },
 
   // Fullscreen container
@@ -241,11 +242,12 @@ const styles = StyleSheet.create({
   header: {
     alignItems: "center",
     paddingHorizontal: 24,
+    paddingTop: 8,
     paddingBottom: 16,
   },
   closeButton: {
     position: "absolute",
-    top: 0,
+    top: 8,
     right: 16,
     padding: 8,
     zIndex: 1,
@@ -260,23 +262,25 @@ const styles = StyleSheet.create({
   },
   subtitle: {
     textAlign: "center",
+    paddingHorizontal: 20,
   },
 
   // ScrollView - expands to fill available space, shrinks if needed
   scrollView: {
     flex: 1,
-    minHeight: 100,
   },
   scrollContent: {
     paddingHorizontal: 24,
-    paddingBottom: 16,
+    paddingBottom: 24,
     flexGrow: 1,
   },
 
   // Features section
   featuresSection: {
-    borderRadius: 16,
-    padding: 16,
-    marginTop: 16,
+    borderRadius: 20,
+    padding: 20,
+    marginTop: 8,
+    borderWidth: 1,
+    borderColor: "rgba(255, 255, 255, 0.05)",
   },
 });