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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@namiml/expo-sdk",
-  "version": "3.4.1",
+  "version": "3.4.2-dev.202606032130",
   "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.202606032130",
+    "@namiml/sdk-core": "3.4.2-dev.202606032130",
     "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 } : {}),

package/src/components/containers/NamiResponsiveGrid.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo, useState, useCallback } from 'react';
-import { View, StyleSheet, Dimensions, LayoutChangeEvent, ViewStyle } from 'react-native';
+import { View, StyleSheet, Dimensions, LayoutChangeEvent, ScrollView, ViewStyle } from 'react-native';
 import { applyGridStyles, focusedStyleOverrides, parseSize } from '../../utils/styles';
 import { TemplateRenderer } from '../TemplateRenderer';
 import type { TComponent } from '@namiml/sdk-core';
@@ -41,11 +41,75 @@ export const NamiResponsiveGrid: React.FC<Props> = ({ component, scaleFactor, on
   const itemWidth = (usableWidth - gap * (columns - 1)) / columns;
 
   const repeatingBlocks = useMemo(() => getRepeatingListBlocks(ctx, component), [ctx, component]);
+
+  const isGrouped = !!(component.groupBy && component.groupHeaderTemplate);
+  const isHorizontalGrouped = !isVertical && isGrouped && repeatingBlocks.length > 0;
+
+  // Grouped horizontal: walk blocks and build per-group sections.
+  // Only used when isHorizontalGrouped; computed unconditionally to satisfy hook rules.
+  const groupSections = useMemo<Array<{ header: TComponent; items: TComponent[] }>>(() => {
+    if (!isHorizontalGrouped) return [];
+    const sections: Array<{ header: TComponent; items: TComponent[] }> = [];
+    let currentItems: TComponent[] = [];
+    repeatingBlocks.forEach((subArray: TComponent[]) => {
+      const isHeader =
+        subArray.length === 1 && (subArray[0] as any)?.__namiGroupHeader === true;
+      if (isHeader) {
+        currentItems = [];
+        sections.push({ header: subArray[0], items: currentItems });
+      } else {
+        subArray.forEach((child) => currentItems.push(child));
+      }
+    });
+    return sections;
+  }, [isHorizontalGrouped, repeatingBlocks]);
+
+  // Flat items list — used only by non-grouped paths.
   const items: TComponent[] = useMemo(
     () => (repeatingBlocks.length ? repeatingBlocks.flat() : (component.components ?? [])),
     [component.components, repeatingBlocks],
   );
 
+  if (isHorizontalGrouped) {
+    return (
+      <FocusScope onFocusWithinChange={setIsFocused}>
+        <View style={containerStyle} onLayout={onLayout}>
+          {groupSections.map((group, groupIdx) => (
+            <View key={(group.header as any).id ?? `group-${groupIdx}`} style={styles.groupSection}>
+              <View style={styles.groupHeader}>
+                <TemplateRenderer
+                  component={group.header}
+                  scaleFactor={scaleFactor}
+                  onClose={onClose}
+                  parentDirection={direction}
+                />
+              </View>
+              <ScrollView
+                horizontal
+                showsHorizontalScrollIndicator={false}
+                contentContainerStyle={styles.horizontalScrollContent}
+              >
+                {group.items.map((child: TComponent, itemIdx: number) => (
+                  <View
+                    key={(child as any).id ?? `group-${groupIdx}-item-${itemIdx}`}
+                    style={{ marginRight: itemIdx < group.items.length - 1 ? gap : 0 }}
+                  >
+                    <TemplateRenderer
+                      component={child}
+                      scaleFactor={scaleFactor}
+                      onClose={onClose}
+                      parentDirection={direction}
+                    />
+                  </View>
+                ))}
+              </ScrollView>
+            </View>
+          ))}
+        </View>
+      </FocusScope>
+    );
+  }
+
   return (
     <FocusScope onFocusWithinChange={setIsFocused}>
       <View style={[containerStyle, styles.grid, isVertical ? styles.vertical : styles.horizontal]} onLayout={onLayout}>
@@ -72,4 +136,7 @@ const styles = StyleSheet.create({
   grid: { alignItems: 'center', justifyContent: 'center' },
   horizontal: { flexDirection: 'row', flexWrap: 'wrap', alignSelf: 'baseline' },
   vertical: { flexDirection: 'column', flexWrap: 'nowrap', alignSelf: 'baseline' },
+  groupSection: { width: '100%' },
+  groupHeader: { width: '100%' },
+  horizontalScrollContent: { flexDirection: 'row', flexWrap: 'nowrap' },
 });