@namiml/expo-sdk 3.4.1 → 3.4.2-dev.202605300214

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@namiml/expo-sdk",
-  "version": "3.4.1",
+  "version": "3.4.2-dev.202605300214",
   "type": "module",
   "description": "Nami Expo SDK — paywall and subscription management for Expo apps",
   "main": "./dist/index.cjs",
@@ -29,9 +29,10 @@
     "prepublishOnly": "yarn clean && yarn build:prod"
   },
   "dependencies": {
-    "@namiml/expo-nami-iap": "3.4.1",
-    "@namiml/sdk-core": "3.4.1",
+    "@namiml/expo-nami-iap": "3.4.2-dev.202605300214",
+    "@namiml/sdk-core": "3.4.2-dev.202605300214",
     "react-native-qrcode-svg": "^6.3.21",
+    "react-native-safe-area-context": "^5.6.0",
     "react-native-svg": "^15.15.4"
   },
   "peerDependencies": {

package/src/components/NamiView.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useLayoutEffect, useRef, useMemo, useCallback } from 'react';
-import { View, StyleSheet, Animated, Dimensions, SafeAreaView, StatusBar, BackHandler, ActivityIndicator } from 'react-native';
+import { View, StyleSheet, Animated, Dimensions, StatusBar, BackHandler, ActivityIndicator } from 'react-native';
+import { SafeAreaProvider, initialWindowMetrics } from 'react-native-safe-area-context';
 import type {
   IPaywall,
   NamiPaywallLaunchContext,
@@ -11,6 +12,7 @@ import type {
 import {
   getPaywallDataFromLabel,
   getPaywall,
+  isValidUrl,
   isNamiFlowCampaign,
   NamiReservedActions,
   hasAllPaywalls,
@@ -141,7 +143,13 @@ export const NamiView: React.FC<NamiViewProps> = ({
   const resolvedLaunch = useMemo<LaunchRequest>(() => {
     if (launchRequest?.value) return launchRequest;
     if (url) return { type: 'url', value: url };
-    if (placement) return { type: 'label', value: placement };
+    if (placement) {
+      // A URL/deeplink campaign carries its URL in the value. If one is handed
+      // in via the placement prop, classify it as a url launch so core takes
+      // the URL-match branch — otherwise the label lookup misses, no paywall
+      // resolves, and NamiView spins on the placeholder forever.
+      return { type: isValidUrl(placement) ? 'url' : 'label', value: placement };
+    }
     return { type: undefined, value: '' };
   }, [launchRequest, url, placement]);
 
@@ -638,7 +646,7 @@ export const NamiView: React.FC<NamiViewProps> = ({
   }, []);
 
   if (isClosing) {
-    return <SafeAreaView style={styles.root} />;
+    return <View style={styles.root} />;
   }
 
   if (loading || !campaignData || (!isFlowCampaign && !paywallData) || (isFlowCampaign && !hasFlowScreen)) {
@@ -646,8 +654,14 @@ export const NamiView: React.FC<NamiViewProps> = ({
   }
 
   return (
-    <SafeAreaView style={styles.root}>
-      <StatusBar barStyle="light-content" />
+    // Full-bleed root so the paywall background extends under the status bar and
+    // home indicator (edge-to-edge). Safe-area insets are applied only to the
+    // chrome (header/footer) via useSafeAreaInsets, not the whole tree — the
+    // previous core SafeAreaView inset every edge and let the #000 root show
+    // through as letterbox bands. SafeAreaProvider guarantees an inset context
+    // even if the host app didn't mount one (nested providers are supported).
+    <SafeAreaProvider initialMetrics={initialWindowMetrics} style={styles.root}>
+      <StatusBar barStyle="light-content" translucent backgroundColor="transparent" />
       {isFlowCampaign ? (
         <FlowRenderer
           paywalls={flowState.paywalls}
@@ -673,7 +687,7 @@ export const NamiView: React.FC<NamiViewProps> = ({
       )}
       {!isClosing && showLaunchPlaceholder && <LaunchPlaceholder paywall={launchPlaceholderPaywall} overlay />}
       {showTransitionPlaceholder && <LaunchPlaceholder paywall={pendingTransitionPaywall} overlay />}
-    </SafeAreaView>
+    </SafeAreaProvider>
   );
 };
 

package/src/components/PaywallScreen.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { ActivityIndicator, BackHandler, View, StyleSheet } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import type { IPaywall, TPages } from '@namiml/sdk-core';
 import { useFirstFocusReadyContext, usePaywallContext } from '../context/PaywallContext';
 import { NamiContentContainer } from './containers/NamiContentContainer';
@@ -36,7 +37,20 @@ export const PaywallScreen: React.FC<Props> = ({
   isActive = true,
 }) => {
   const ctx = usePaywallContext();
+  const insets = useSafeAreaInsets();
   const focusReadyCtx = useFirstFocusReadyContext();
+
+  // Push the measured top safe-area inset into paywall state so templates can
+  // position chrome via ${state.safeAreaTop} (e.g. header topPadding,
+  // background topMargin). Mirrors the native Android renderer, which measures
+  // the display cutout and calls setSafeAreaTop. The full-bleed root lets the
+  // background extend under the status bar; this offsets the content back into
+  // the safe area. No safeAreaBottom equivalent exists in core/Android state.
+  // Depend only on insets.top (stable per device/orientation) — depending on
+  // ctx would re-run every render and loop through setState.
+  useEffect(() => {
+    ctx.setSafeAreaTop(insets.top);
+  }, [insets.top]);
   const scaleFactor = getDeviceScaleFactor(ctx.state.formFactor);
   const userInteractionEnabled = ctx.state.userInteractionEnabled !== false;
   const currentPageName = ctx.state.selectedPaywall === paywall

package/src/components/containers/NamiContentContainer.tsx

@@ -19,6 +19,17 @@ function splitContainerStyles(style: ViewStyle): { outer: ViewStyle; inner: View
   } = style;
 
   const outer: ViewStyle = { ...rest };
+  // The content container is always the page's vertical fill region: styles.outer
+  // declares flex:1 and the body scrolls internally. A payload height of
+  // 'fitContent' makes sizeStyles emit flexGrow:0, which would otherwise override
+  // that fill and collapse the body to 0 height — the flex:1 ScrollView child
+  // can't give an unbounded parent a height. Drop the flex-sizing keys so the
+  // fill stays authoritative, matching the native renderers which always
+  // fill-and-scroll this region regardless of the authored height.
+  delete outer.flex;
+  delete outer.flexGrow;
+  delete outer.flexBasis;
+  delete outer.flexShrink;
   const inner: ViewStyle = {
     ...(paddingLeft != null ? { paddingLeft } : {}),
     ...(paddingRight != null ? { paddingRight } : {}),