@namiml/expo-sdk 3.4.0-dev.202605060437

package/src/components/containers/NamiContentContainer.tsx

@@ -0,0 +1,140 @@
+import React, { useMemo } from 'react';
+import { ScrollView, StyleSheet, View, type ViewStyle } from 'react-native';
+import type { TContainer, TComponent } from '@namiml/sdk-core';
+import { applyStyles, childSpacingStyle, flexDirectionFromConfig } from '../../utils/styles';
+import { usePaywallContext } from '../../context/PaywallContext';
+import { TemplateRenderer } from '../TemplateRenderer';
+
+interface Props {
+  component: TContainer;
+  scaleFactor: number;
+  onClose?: () => void;
+}
+
+function splitContainerStyles(style: ViewStyle): { outer: ViewStyle; inner: ViewStyle } {
+  const {
+    paddingLeft, paddingRight, paddingTop, paddingBottom,
+    flexDirection, alignItems, justifyContent,
+    ...rest
+  } = style;
+
+  const outer: ViewStyle = { ...rest };
+  const inner: ViewStyle = {
+    ...(paddingLeft != null ? { paddingLeft } : {}),
+    ...(paddingRight != null ? { paddingRight } : {}),
+    ...(paddingTop != null ? { paddingTop } : {}),
+    ...(paddingBottom != null ? { paddingBottom } : {}),
+    ...(flexDirection ? { flexDirection } : {}),
+    ...(alignItems ? { alignItems } : {}),
+    ...(justifyContent ? { justifyContent } : {}),
+  };
+
+  return { outer, inner };
+}
+
+export const NamiContentContainer: React.FC<Props> = ({
+  component,
+  scaleFactor,
+  onClose,
+}) => {
+  const ctx = usePaywallContext();
+  if (!component || component.hidden) return null;
+
+  const baseStyle = useMemo(
+    () => applyStyles(component as any, scaleFactor) as ViewStyle,
+    [component, scaleFactor]
+  );
+  const { outer, inner } = splitContainerStyles(baseStyle);
+
+  const formFactor = ctx.state.formFactor;
+  const scrollEnabled = formFactor !== 'television';
+  const direction = component.direction ?? 'vertical';
+  const flexDir = flexDirectionFromConfig(direction);
+  const contentAlignment = useMemo(() => {
+    const vertical = component.verticalAlignment;
+    const horizontal = component.horizontalAlignment;
+    const isRow = flexDir === 'row' || flexDir === 'row-reverse';
+
+    return {
+      alignItems: isRow
+        ? (vertical === 'top' ? 'flex-start' : vertical === 'bottom' ? 'flex-end' : vertical === 'center' ? 'center' : 'center')
+        : (horizontal === 'left' ? 'flex-start' : horizontal === 'right' ? 'flex-end' : horizontal === 'center' ? 'center' : 'center'),
+      justifyContent: isRow
+        ? (horizontal === 'left' ? 'flex-start' : horizontal === 'right' ? 'flex-end' : horizontal === 'center' ? 'center' : 'flex-start')
+        : (vertical === 'top' ? 'flex-start' : vertical === 'bottom' ? 'flex-end' : vertical === 'center' ? 'center' : 'flex-start'),
+    } as const;
+  }, [component.verticalAlignment, component.horizontalAlignment, flexDir]);
+  const renderedChildren = useMemo(() => {
+    return component.components?.map((comp: TComponent, i: number) => (
+      <View
+        key={comp.id ?? i}
+        style={[
+          styles.fullWidth,
+          i === 0
+            ? null
+            : childSpacingStyle(i, { spacing: component.spacing, direction }, scaleFactor),
+        ]}
+      >
+        <TemplateRenderer
+          component={comp}
+          scaleFactor={scaleFactor}
+          onClose={onClose}
+          parentDirection={direction}
+        />
+      </View>
+    ));
+  }, [component.components, component.spacing, direction, scaleFactor, onClose]);
+
+  const innerContentStyle = useMemo(
+    () => [
+      styles.inner,
+      {
+        flexDirection: flexDir,
+      },
+      inner,
+      contentAlignment,
+    ],
+    [flexDir, inner, contentAlignment],
+  );
+
+  if (!scrollEnabled) {
+    return (
+      <View style={[styles.outer, outer]}>
+        <View style={[styles.scroll, innerContentStyle]}>
+          {renderedChildren}
+        </View>
+      </View>
+    );
+  }
+
+  return (
+    <View style={[styles.outer, outer]}>
+      <ScrollView
+        style={styles.scroll}
+        contentContainerStyle={innerContentStyle}
+        showsVerticalScrollIndicator={false}
+        scrollEnabled
+      >
+        {renderedChildren}
+      </ScrollView>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  outer: {
+    flex: 1,
+    minHeight: 0,
+    zIndex: 2,
+  },
+  scroll: {
+    flex: 1,
+  },
+  inner: {
+    width: '100%',
+    flexGrow: 1,
+  },
+  fullWidth: {
+    width: '100%',
+  },
+});

package/src/components/containers/NamiFooter.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import type { THeaderFooter } from '@namiml/sdk-core';
+import { TemplateRenderer } from '../TemplateRenderer';
+
+interface Props {
+  components: THeaderFooter;
+  scaleFactor: number;
+  onClose?: () => void;
+}
+
+export const NamiFooter: React.FC<Props> = ({ components, scaleFactor, onClose }) => {
+  const list = Array.isArray(components)
+    ? components
+    : (components as any)?.components ?? [components];
+
+  return (
+    <View style={styles.footer}>
+      {list.map((comp: any, i: number) => (
+        <TemplateRenderer key={comp.id ?? i} component={comp} scaleFactor={scaleFactor} onClose={onClose} />
+      ))}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  footer: {
+    position: 'absolute',
+    bottom: 0,
+    width: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+    zIndex: 3,
+  },
+});

package/src/components/containers/NamiHeader.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import type { THeaderFooter } from '@namiml/sdk-core';
+import { usePaywallContext } from '../../context/PaywallContext';
+import { TemplateRenderer } from '../TemplateRenderer';
+
+interface Props {
+  components: THeaderFooter;
+  scaleFactor: number;
+  onClose?: () => void;
+}
+
+export const NamiHeader: React.FC<Props> = ({ components, scaleFactor, onClose }) => {
+  const ctx = usePaywallContext();
+  const formFactor = ctx.state.formFactor;
+  const inFullScreen = ctx.state.fullScreenPresentation ?? false;
+  const marginTop = formFactor === 'phone' && !inFullScreen ? 40 : 0;
+
+  const list = Array.isArray(components)
+    ? components
+    : (components as any)?.components ?? [components];
+  const renderedList = React.useMemo(
+    () => list.map((comp: any, i: number) => (
+      <TemplateRenderer key={comp.id ?? i} component={comp} scaleFactor={scaleFactor} onClose={onClose} />
+    )),
+    [list, scaleFactor, onClose],
+  );
+
+  return (
+    <View style={[styles.header, { marginTop }]}>
+      {renderedList}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  header: {
+    display: 'flex',
+    position: 'relative',
+    width: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+    zIndex: 2,
+  },
+});

package/src/components/containers/NamiProductContainer.tsx

@@ -0,0 +1,248 @@
+import React, { useMemo, useRef, useEffect } from 'react';
+import { View, StyleSheet, ImageBackground, Animated } from 'react-native';
+import { usePaywallContext } from '../../context/PaywallContext';
+import { applyStyles, childSpacingStyle, parseSizeOrPercent, resolveFillImageUrl } from '../../utils/styles';
+import { TemplateRenderer } from '../TemplateRenderer';
+import { getProductDetail, getSkuProductDetailKeys, skuItems, toNamiSKU } from '@namiml/sdk-core';
+import type { TComponent, TProductContainer, PaywallSKU } from '@namiml/sdk-core';
+import { buildSmartTextReplacements, interpolate } from '../../utils/smartText';
+import { FocusedStyleProvider } from '../../context/FocusContext';
+ 
+
+interface Props {
+  component: TProductContainer;
+  scaleFactor: number;
+  onClose?: () => void;
+  parentDirection?: string;
+}
+
+type InjectedSkuContext = {
+  skuActionPayload: any;
+  skuVars: Record<string, any>;
+  replacements: ReturnType<typeof buildSmartTextReplacements>;
+};
+
+const AnimatedImageBackground = Animated.createAnimatedComponent(ImageBackground);
+
+export const NamiProductContainer: React.FC<Props> = ({ component, scaleFactor, onClose, parentDirection }) => {
+  const ctx = usePaywallContext();
+  const containerStyle = useMemo(() => applyStyles(component, scaleFactor, false, parentDirection), [component, scaleFactor, parentDirection]);
+  const opacity = useRef(new Animated.Value(1)).current;
+  const prevGroupId = useRef<string | undefined>(undefined);
+
+  const skus = useMemo(() => {
+    const groupRef = component.subsetGroup ?? ctx.state.currentGroupId;
+    const skuMenus = ctx.state.selectedPaywall?.sku_menus ?? [];
+    return skuItems(ctx.productDetails, skuMenus, groupRef);
+  }, [ctx.productDetails, ctx.state.selectedPaywall, ctx.state.currentGroupId, component.subsetGroup]);
+
+  const currentGroupId = component.subsetGroup ?? ctx.state.currentGroupId;
+  const selectedId = (ctx.state.selectedProducts ?? {})[currentGroupId];
+  const fillImageUrl = resolveFillImageUrl(component.fillImage);
+
+  const sizeKey = component.direction === 'vertical' ? 'width' : 'height';
+  const childSizeStyle = { [sizeKey]: '100%' as const };
+  const direction = component.direction ?? 'vertical';
+
+  useEffect(() => {
+    if (prevGroupId.current != null && prevGroupId.current !== currentGroupId) {
+      opacity.setValue(0);
+      Animated.timing(opacity, {
+        toValue: 1,
+        duration: 300,
+        useNativeDriver: true,
+      }).start();
+    }
+    prevGroupId.current = currentGroupId;
+  }, [currentGroupId, opacity]);
+
+  const content = useMemo(() => (
+    <>
+      {skus.map((sku: PaywallSKU, i: number) => {
+        const isFeatured = sku.featured ?? false;
+        const isSelected = sku.id === selectedId;
+        const useFeaturedFocus = ctx.state.formFactor === 'television' && isFeatured;
+        const injectedSkuContext = buildInjectedSkuContext(sku, isSelected, ctx);
+        const template = isFeatured
+          ? (component.productFeaturedComponents ?? component.components)
+          : (component.productBaseComponents ?? component.components);
+
+        if (!template?.length) return null;
+
+        const spacingStyle = childSpacingStyle(i, { spacing: component.spacing, direction }, scaleFactor);
+        const templatePrimary = template[0] as any;
+        const primaryRawWidth = templatePrimary?.width ?? templatePrimary?.fixedWidth;
+        const wrapperWidth = parseSizeOrPercent(primaryRawWidth, scaleFactor);
+        const shouldShareHorizontal = direction === 'horizontal' && primaryRawWidth == null;
+        const shouldShrinkHorizontal =
+          direction === 'horizontal'
+          && (
+            primaryRawWidth == null
+            || (typeof primaryRawWidth === 'string' && primaryRawWidth.trim().endsWith('%'))
+          );
+
+        return (
+          <View
+            key={sku.id ?? i}
+            style={[
+              childSizeStyle,
+              wrapperWidth != null ? { width: wrapperWidth as any } : null,
+              shouldShareHorizontal ? styles.flexShare : null,
+              shouldShrinkHorizontal ? styles.horizontalShrink : null,
+              spacingStyle,
+            ]}
+          >
+            <FocusedStyleProvider focused={useFeaturedFocus}>
+              {template.map((child: TComponent, j: number) => {
+                const enriched = injectSkuIntoComponent(child, injectedSkuContext, useFeaturedFocus);
+                return (
+                  <TemplateRenderer
+                    key={child.id ? `${child.id}-${sku.id}` : `${i}-${j}`}
+                    component={enriched}
+                    scaleFactor={scaleFactor}
+                    onClose={onClose}
+                    parentDirection={direction}
+                  />
+                );
+              })}
+            </FocusedStyleProvider>
+          </View>
+        );
+      })}
+    </>
+  ), [
+    childSizeStyle,
+    component.components,
+    component.productBaseComponents,
+    component.productFeaturedComponents,
+    component.spacing,
+    ctx,
+    direction,
+    onClose,
+    scaleFactor,
+    selectedId,
+    skus,
+  ]);
+
+  const radiusStyles = pickBorderRadius(containerStyle);
+  const shouldClip = fillImageUrl && Object.keys(radiusStyles).length > 0;
+
+  if (fillImageUrl) {
+    return (
+      <AnimatedImageBackground
+        source={{ uri: fillImageUrl }}
+        resizeMode="cover"
+        imageStyle={shouldClip ? radiusStyles : undefined}
+        style={[styles.relative, containerStyle, shouldClip ? styles.clip : null, { opacity }]}
+      >
+        {content}
+      </AnimatedImageBackground>
+    );
+  }
+
+  return (
+    <Animated.View style={[styles.relative, containerStyle, { opacity }]}>
+      {content}
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  relative: { position: 'relative' },
+  clip: { overflow: 'hidden' },
+  flexShare: { flex: 1 },
+  horizontalShrink: { minWidth: 0, flexShrink: 1 },
+});
+
+function pickBorderRadius(style: any): Record<string, number> {
+  if (!style) return {};
+  const keys = [
+    'borderRadius',
+    'borderTopLeftRadius',
+    'borderTopRightRadius',
+    'borderBottomLeftRadius',
+    'borderBottomRightRadius',
+  ];
+  return keys.reduce((acc, key) => {
+    const value = style[key];
+    if (typeof value === 'number') (acc as any)[key] = value;
+    return acc;
+  }, {} as Record<string, number>);
+}
+
+function injectSkuIntoComponent(
+  component: TComponent,
+  injectedSkuContext: InjectedSkuContext,
+  useFeaturedFocus: boolean,
+): any {
+  const nextComponent: any = {
+    ...component,
+    sku: injectedSkuContext.skuActionPayload,
+    smartTextSku: injectedSkuContext.skuVars,
+    ...(useFeaturedFocus && component.component === 'button' ? { focused: true } : {}),
+  };
+
+  const childComponents = nextComponent.components;
+  const collapseHeader = nextComponent.collapseHeader;
+  const result: any = interpolate(
+    {
+      ...nextComponent,
+      components: undefined,
+      collapseHeader: collapseHeader
+        ? { ...collapseHeader, components: undefined }
+        : undefined,
+    },
+    injectedSkuContext.replacements,
+  );
+  result.__namiSmartTextResolved = true;
+
+  if (childComponents) {
+    result.components = childComponents.map((c: TComponent) =>
+      injectSkuIntoComponent(c, injectedSkuContext, useFeaturedFocus)
+    );
+  }
+  if (collapseHeader?.components) {
+    result.collapseHeader = {
+      ...(result.collapseHeader ?? collapseHeader),
+      components: collapseHeader.components.map((c: TComponent) =>
+        injectSkuIntoComponent(c, injectedSkuContext, useFeaturedFocus)
+      ),
+    };
+  }
+  return result;
+}
+
+function buildInjectedSkuContext(
+  sku: PaywallSKU,
+  isSelected: boolean,
+  ctx: any,
+): InjectedSkuContext {
+  const entitlements = (sku.entitlements ?? []).map((e: any) => e.entitlement_ref_id);
+  const skuActionPayload = toNamiSKU(sku);
+  const detail = (sku as any).product_details ?? (sku as any).productDetails ?? null;
+  const recomputedDetailValues = getSkuProductDetailKeys().reduce((output: Record<string, any>, key: string) => {
+    const value = getProductDetail(key, detail, undefined, [sku]);
+    if (value !== null && value !== undefined) {
+      output[key] = value;
+    }
+    return output;
+  }, {});
+  const skuVars = {
+    ...sku,
+    ...recomputedDetailValues,
+    ...(sku.variables ?? {}),
+    freeTrialEligible: (sku as any).freeTrialEligible ?? false,
+    introEligible: (sku as any).introEligible ?? false,
+    promoEligible: (sku as any).promoEligible ?? false,
+    invalid: (sku as any).invalid ?? false,
+    unavailable: (sku as any).unavailable ?? false,
+    entitlements,
+    selected: isSelected,
+  };
+
+  return {
+    skuActionPayload,
+    skuVars,
+    replacements: buildSmartTextReplacements(ctx.state, ctx.flow, skuVars),
+  };
+}

package/src/components/containers/NamiRepeatingGrid.tsx

@@ -0,0 +1,81 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { Dimensions, LayoutChangeEvent, StyleSheet, View, type ViewStyle } from 'react-native';
+import type { TComponent } from '@namiml/sdk-core';
+import { applyGridStyles, focusedStyleOverrides, parseSize } from '../../utils/styles';
+import { usePaywallContext } from '../../context/PaywallContext';
+import { FocusScope } from '../../context/FocusContext';
+import { TemplateRenderer } from '../TemplateRenderer';
+import { getRepeatingListBlocks } from '../../utils/rendering';
+
+interface Props {
+  component: any;
+  scaleFactor: number;
+  onClose?: () => void;
+  parentDirection?: string;
+}
+
+export const NamiRepeatingGrid: React.FC<Props> = ({ component, scaleFactor, onClose, parentDirection }) => {
+  const ctx = usePaywallContext();
+  const [isFocused, setIsFocused] = useState(false);
+  const [containerWidth, setContainerWidth] = useState<number | null>(null);
+  const columns = Math.max(1, component.columns ?? 2);
+  const columnSpacing = parseSize(component.columnSpacing ?? component.spacing, scaleFactor) ?? 0;
+  const rowSpacing = parseSize(component.rowSpacing ?? component.spacing, scaleFactor) ?? 0;
+  const { width: screenWidth } = Dimensions.get('window');
+  const blocks = useMemo(
+    () => getRepeatingListBlocks(ctx, component),
+    [ctx, component],
+  );
+  const items = useMemo(() => blocks.flat(), [blocks]);
+  const usableWidth = Math.max(1, (containerWidth ?? screenWidth) - columnSpacing * Math.max(0, columns - 1));
+  const itemWidth = usableWidth / columns;
+
+  const onLayout = useCallback((event: LayoutChangeEvent) => {
+    setContainerWidth(event.nativeEvent.layout.width);
+  }, []);
+
+  const containerStyle = useMemo(() => {
+    const base = applyGridStyles(component, scaleFactor, false, parentDirection);
+    Object.assign(base, styles.grid);
+    if (isFocused) {
+      Object.assign(base, focusedStyleOverrides(component, scaleFactor));
+    }
+    return base;
+  }, [component, isFocused, parentDirection, scaleFactor]);
+
+  return (
+    <FocusScope onFocusWithinChange={setIsFocused}>
+      <View style={containerStyle} onLayout={onLayout}>
+        {items.map((child: TComponent, index: number) => {
+          const columnIndex = index % columns;
+          const isLastInRow = columnIndex === columns - 1;
+          const cellStyle: ViewStyle = {
+            width: itemWidth,
+            marginRight: isLastInRow ? 0 : columnSpacing,
+            marginBottom: rowSpacing,
+          };
+
+          return (
+            <View key={child.id ?? index} style={cellStyle}>
+              <TemplateRenderer
+                component={child}
+                scaleFactor={scaleFactor}
+                onClose={onClose}
+                parentDirection={component.direction}
+              />
+            </View>
+          );
+        })}
+      </View>
+    </FocusScope>
+  );
+};
+
+const styles = StyleSheet.create({
+  grid: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/components/containers/NamiResponsiveGrid.tsx

@@ -0,0 +1,75 @@
+import React, { useMemo, useState, useCallback } from 'react';
+import { View, StyleSheet, Dimensions, LayoutChangeEvent, ViewStyle } from 'react-native';
+import { applyGridStyles, focusedStyleOverrides, parseSize } from '../../utils/styles';
+import { TemplateRenderer } from '../TemplateRenderer';
+import type { TComponent } from '@namiml/sdk-core';
+import { usePaywallContext } from '../../context/PaywallContext';
+import { FocusScope } from '../../context/FocusContext';
+import { getRepeatingListBlocks } from '../../utils/rendering';
+
+interface Props {
+  component: any;
+  scaleFactor: number;
+  onClose?: () => void;
+  parentDirection?: string;
+}
+
+export const NamiResponsiveGrid: React.FC<Props> = ({ component, scaleFactor, onClose, parentDirection }) => {
+  const ctx = usePaywallContext();
+  const [isFocused, setIsFocused] = useState(false);
+  const containerStyle = useMemo(() => {
+    const base = applyGridStyles(component, scaleFactor, false, parentDirection);
+    if (isFocused) {
+      Object.assign(base, focusedStyleOverrides(component, scaleFactor));
+    }
+    return base;
+  }, [component, scaleFactor, parentDirection, isFocused]);
+  const isVertical = component.direction === 'vertical';
+  const direction = component.direction ?? 'vertical';
+  const columns = component.columns ?? (isVertical ? 1 : 2);
+  const gap = parseSize(component.spacing ?? component.gap, scaleFactor) ?? 8;
+  const { width: screenWidth } = Dimensions.get('window');
+  const [containerWidth, setContainerWidth] = useState<number | null>(null);
+
+  const onLayout = useCallback((e: LayoutChangeEvent) => {
+    setContainerWidth(e.nativeEvent.layout.width);
+  }, [component, containerStyle, columns, gap]);
+
+  const leftPad = parseSize(component.leftPadding, scaleFactor) ?? 0;
+  const rightPad = parseSize(component.rightPadding, scaleFactor) ?? 0;
+  const usableWidth = (containerWidth ?? screenWidth) - leftPad - rightPad;
+  const itemWidth = (usableWidth - gap * (columns - 1)) / columns;
+
+  const repeatingBlocks = useMemo(() => getRepeatingListBlocks(ctx, component), [ctx, component]);
+  const items: TComponent[] = useMemo(
+    () => (repeatingBlocks.length ? repeatingBlocks.flat() : (component.components ?? [])),
+    [component.components, repeatingBlocks],
+  );
+
+  return (
+    <FocusScope onFocusWithinChange={setIsFocused}>
+      <View style={[containerStyle, styles.grid, isVertical ? styles.vertical : styles.horizontal]} onLayout={onLayout}>
+        {items.map((child: TComponent, i: number) => {
+          const col = i % columns;
+          const isLastInRow = col === columns - 1;
+          const style = {
+            width: isVertical ? '100%' : itemWidth,
+            marginRight: isVertical ? 0 : (isLastInRow ? 0 : gap),
+            marginBottom: gap,
+          };
+          return (
+            <View key={child.id ?? i} style={style as ViewStyle}>
+              <TemplateRenderer component={child} scaleFactor={scaleFactor} onClose={onClose} parentDirection={direction} />
+            </View>
+          );
+        })}
+      </View>
+    </FocusScope>
+  );
+};
+
+const styles = StyleSheet.create({
+  grid: { alignItems: 'center', justifyContent: 'center' },
+  horizontal: { flexDirection: 'row', flexWrap: 'wrap', alignSelf: 'baseline' },
+  vertical: { flexDirection: 'column', flexWrap: 'nowrap', alignSelf: 'baseline' },
+});

package/src/components/containers/NamiStack.tsx

@@ -0,0 +1,69 @@
+import React, { useMemo } from 'react';
+import { View, StyleSheet, ImageBackground } from 'react-native';
+import { usePaywallContext } from '../../context/PaywallContext';
+import { applyStyles, childSpacingStyle, resolveFillImageUrl } from '../../utils/styles';
+import { buildSmartTextReplacements, interpolateSmartText } from '../../utils/smartText';
+import { TemplateRenderer } from '../TemplateRenderer';
+import type { TComponent } from '@namiml/sdk-core';
+import { parseToSemver } from '@namiml/sdk-core';
+
+interface Props {
+  component: any;
+  scaleFactor: number;
+  onClose?: () => void;
+  parentDirection?: string;
+}
+
+export const NamiStack: React.FC<Props> = ({ component, scaleFactor, onClose, parentDirection }) => {
+  const ctx = usePaywallContext();
+  const containerStyle = useMemo(() => applyStyles(component, scaleFactor, false, parentDirection), [component, scaleFactor, parentDirection]);
+
+  const minSdk = parseToSemver(ctx.state.selectedPaywall?.template?.min_sdk_version ?? '0.0.0');
+  const shouldSizeChildren = minSdk.minor < 2;
+  const sizeKey = component.direction === 'vertical' ? 'width' : 'height';
+  const direction = component.direction ?? 'vertical';
+
+  const fillImageUrl = resolveFillImageUrl(component.fillImage)
+    ? (() => {
+      const replacements = buildSmartTextReplacements(ctx.state, ctx.flow, component?.sku);
+      const raw = resolveFillImageUrl(component.fillImage) as string;
+      const resolved = interpolateSmartText(raw, replacements);
+      return resolved == null ? undefined : String(resolved);
+    })()
+    : undefined;
+
+  const textLike = new Set(['text', 'text-list', 'symbol', 'title', 'body', 'legal']);
+
+  return (
+    <View style={[containerStyle, styles.stack]}>
+      {fillImageUrl ? (
+        <ImageBackground
+          source={{ uri: fillImageUrl }}
+          resizeMode="cover"
+          style={StyleSheet.absoluteFill}
+        />
+      ) : null}
+      {component.components?.map((child: TComponent, i: number) => {
+        const isTextLike = textLike.has(child.component);
+        const sizeStyle = shouldSizeChildren ? { [sizeKey]: '100%' as const } : {};
+        const spacingStyle = childSpacingStyle(i, { spacing: component.spacing, direction }, scaleFactor);
+        const wrapperStyle = [
+          isTextLike ? styles.base : styles.overlay,
+          sizeStyle,
+          spacingStyle,
+        ];
+        return (
+          <View key={child.id ?? i} style={wrapperStyle}>
+            <TemplateRenderer component={child} scaleFactor={scaleFactor} onClose={onClose} parentDirection={direction} />
+          </View>
+        );
+      })}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  stack: { alignItems: 'center', justifyContent: 'center' },
+  base: {},
+  overlay: { position: 'absolute', alignSelf: 'center' },
+});