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

package/dist/index.mjs

@@ -1,7 +1,8 @@
-import { NAMI_SDK_PACKAGE_VERSION, registerPlatformAdapters, registerPurchaseAdapter, logger, Nami as Nami$1, PaywallState, initialState, getUrlParams, SMART_TEXT_PATTERN, VAR_REGEX, LIQUID_VARIABLE_REGEX, isAnonymousMode, NamiAPI, storageService, getDeviceScaleFactor, NamiEventEmitter, PAYWALL_ACTION_EVENT, NamiPaywallAction, NamiReservedActions, _internal, isNamiFlowCampaign, hasAllPaywalls, getPaywallDataFromLabel, getPaywall } from '@namiml/sdk-core';
+import { NAMI_SDK_PACKAGE_VERSION, registerPlatformAdapters, registerPurchaseAdapter, logger, Nami as Nami$1, PaywallState, initialState, getUrlParams, SMART_TEXT_PATTERN, VAR_REGEX, LIQUID_VARIABLE_REGEX, isAnonymousMode, NamiAPI, storageService, getDeviceScaleFactor, NamiEventEmitter, PAYWALL_ACTION_EVENT, NamiPaywallAction, NamiReservedActions, _internal, isValidUrl, isNamiFlowCampaign, hasAllPaywalls, getPaywallDataFromLabel, getPaywall } from '@namiml/sdk-core';
 export { NamiCampaignManager, NamiCustomerManager, NamiEntitlementManager, NamiFlowManager, NamiPaywallManager, NamiPurchaseManager } from '@namiml/sdk-core';
-import { Platform, Dimensions, StyleSheet, View, ScrollView, ImageBackground, BackHandler, ActivityIndicator, SafeAreaView, StatusBar, Animated } from 'react-native';
+import { Platform, Dimensions, StyleSheet, View, ScrollView, ImageBackground, BackHandler, ActivityIndicator, StatusBar, Animated } from 'react-native';
 import require$$0, { createContext, useRef, useState, useEffect, useMemo, useContext, useCallback, useLayoutEffect } from 'react';
+import { useSafeAreaInsets, SafeAreaProvider, initialWindowMetrics } from 'react-native-safe-area-context';
 
 class ExpoStorageAdapter {
     constructor() {
@@ -2940,6 +2941,17 @@ function renderResolvedComponent(componentType, resolvedComponent, scaleFactor,
 function splitContainerStyles(style) {
     const { paddingLeft, paddingRight, paddingTop, paddingBottom, flexDirection, alignItems, justifyContent, ...rest } = style;
     const outer = { ...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 = {
         ...(paddingLeft != null ? { paddingLeft } : {}),
         ...(paddingRight != null ? { paddingRight } : {}),
@@ -3141,7 +3153,19 @@ catch {
 const fontGateCache = new Map();
 const PaywallScreen = ({ paywall, onClose, onCommitted, holdInteractionUntilFocus = false, 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
@@ -3329,8 +3353,13 @@ const NamiView = ({ placement, url, onClose, onSignIn, onDeepLink, onPurchase, o
             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]);
     const ctx = useMemo(() => ({
@@ -3742,12 +3771,19 @@ const NamiView = ({ placement, url, onClose, onSignIn, onDeepLink, onPurchase, o
         setInitialScreenCommitted(true);
     }, []);
     if (isClosing) {
-        return jsxRuntimeExports.jsx(SafeAreaView, { style: styles.root });
+        return jsxRuntimeExports.jsx(View, { style: styles.root });
     }
     if (loading || !campaignData || (!isFlowCampaign && !paywallData) || (isFlowCampaign && !hasFlowScreen)) {
         return jsxRuntimeExports.jsx(LaunchPlaceholder, { paywall: launchPlaceholderPaywall });
     }
-    return (jsxRuntimeExports.jsxs(SafeAreaView, { style: styles.root, children: [jsxRuntimeExports.jsx(StatusBar, { barStyle: "light-content" }), isFlowCampaign ? (jsxRuntimeExports.jsx(FlowRenderer, { paywalls: flowState.paywalls, currentIndex: flowState.index, animation: flowState.animation ?? undefined, onSettled: handleFlowAnimationSettled, onTransitionVisible: () => setPendingTransitionPaywall(null), onInitialCommitted: handleInitialCommitted, onClose: onClose, campaign: campaignData, context: ctx, flow: flowRef.current })) : (jsxRuntimeExports.jsx(PaywallProvider, { paywall: paywallData, context: ctx, campaign: campaignData, children: jsxRuntimeExports.jsx(PaywallScreen, { paywall: paywallData, onClose: requestClose, onCommitted: handleInitialCommitted, isActive: true }) })), !isClosing && showLaunchPlaceholder && jsxRuntimeExports.jsx(LaunchPlaceholder, { paywall: launchPlaceholderPaywall, overlay: true }), showTransitionPlaceholder && jsxRuntimeExports.jsx(LaunchPlaceholder, { paywall: pendingTransitionPaywall, overlay: true })] }));
+    return (
+    // 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).
+    jsxRuntimeExports.jsxs(SafeAreaProvider, { initialMetrics: initialWindowMetrics, style: styles.root, children: [jsxRuntimeExports.jsx(StatusBar, { barStyle: "light-content", translucent: true, backgroundColor: "transparent" }), isFlowCampaign ? (jsxRuntimeExports.jsx(FlowRenderer, { paywalls: flowState.paywalls, currentIndex: flowState.index, animation: flowState.animation ?? undefined, onSettled: handleFlowAnimationSettled, onTransitionVisible: () => setPendingTransitionPaywall(null), onInitialCommitted: handleInitialCommitted, onClose: onClose, campaign: campaignData, context: ctx, flow: flowRef.current })) : (jsxRuntimeExports.jsx(PaywallProvider, { paywall: paywallData, context: ctx, campaign: campaignData, children: jsxRuntimeExports.jsx(PaywallScreen, { paywall: paywallData, onClose: requestClose, onCommitted: handleInitialCommitted, isActive: true }) })), !isClosing && showLaunchPlaceholder && jsxRuntimeExports.jsx(LaunchPlaceholder, { paywall: launchPlaceholderPaywall, overlay: true }), showTransitionPlaceholder && jsxRuntimeExports.jsx(LaunchPlaceholder, { paywall: pendingTransitionPaywall, overlay: true })] }));
 };
 const LaunchPlaceholder = ({ paywall, overlay = false }) => {
     const initialPageName = paywall?.template?.initialState?.currentPage ?? 'page1';