@namiml/expo-sdk 3.4.0-dev.202605060437

package/src/components/containers/NamiCarousel.tsx

@@ -0,0 +1,217 @@
+import React, { useState, useRef, useMemo, useCallback, useEffect } from 'react';
+import {
+  View, ScrollView, Dimensions, StyleSheet, NativeSyntheticEvent,
+  NativeScrollEvent, TouchableOpacity,
+} from 'react-native';
+import { usePaywallContext } from '../../context/PaywallContext';
+import { applyStyles, parseColor, parseSize } from '../../utils/styles';
+import { TemplateRenderer } from '../TemplateRenderer';
+import type { TComponent, TCarouselContainer, TCarouselSlide } from '@namiml/sdk-core';
+import { skuItems, toNamiSKU } from '@namiml/sdk-core';
+import { buildSmartTextReplacements, interpolate } from '../../utils/smartText';
+
+interface Props {
+  component: TCarouselContainer;
+  scaleFactor: number;
+  onClose?: () => void;
+  parentDirection?: string;
+}
+
+export const NamiCarousel: React.FC<Props> = ({ component, scaleFactor, onClose, parentDirection }) => {
+  const ctx = usePaywallContext();
+  const scrollRef = useRef<ScrollView>(null);
+  const { width: screenWidth } = Dimensions.get('window');
+  const [activeIndex, setActiveIndex] = useState(0);
+
+  const containerStyle = useMemo(
+    () => applyStyles(component, scaleFactor, false, parentDirection),
+    [component, scaleFactor, parentDirection]
+  );
+  const direction = component.direction ?? 'horizontal';
+  const loopSourceKey = typeof component.loopSource === 'string' ? component.loopSource : '';
+
+  const slides = useMemo((): TCarouselSlide[] => {
+    if (Array.isArray(component.loopSource)) {
+      return component.loopSource;
+    }
+
+    const stateSlides = (ctx.state as any).slides;
+    const fromState = loopSourceKey ? stateSlides?.[loopSourceKey]?.carouselName : undefined;
+    if (Array.isArray(fromState)) {
+      const productGroupIds = (ctx.filteredSkuMenus ?? []).map((menu: any) => menu.id);
+      return fromState.filter((slide: any) => (
+        !slide?.productGroupId || productGroupIds.includes(slide.productGroupId)
+      ));
+    }
+
+    if (component.components?.length) {
+      return component.components.map((c, i) => ({ id: c.id ?? String(i), components: [c] })) as any;
+    }
+    return [];
+  }, [component.loopSource, component.components, ctx.state, loopSourceKey, ctx.filteredSkuMenus]);
+
+  const slideSkuPool = useMemo(() => {
+    if (!loopSourceKey) return [];
+    const skuMenus = ctx.state.selectedPaywall?.sku_menus ?? [];
+    return skuItems(ctx.productDetails, skuMenus, loopSourceKey);
+  }, [ctx.productDetails, ctx.state.selectedPaywall, loopSourceKey]);
+
+  const nextPad = parseSize(component.nextSlidePadding, scaleFactor) ?? 0;
+  const prevPad = parseSize(component.previousSlidePadding, scaleFactor) ?? 0;
+  const slideSpacing = parseSize(component.slideSpacing, scaleFactor) ?? 0;
+  const rawCarouselWidth = component.width ?? component.fixedWidth;
+  const viewportWidth = useMemo(() => {
+    if (rawCarouselWidth == null) return screenWidth;
+    if (typeof rawCarouselWidth === 'string' && rawCarouselWidth.trim().endsWith('%')) {
+      const pct = parseFloat(rawCarouselWidth);
+      return Number.isFinite(pct) ? Math.max(1, (screenWidth * pct) / 100) : screenWidth;
+    }
+    const resolved = parseSize(rawCarouselWidth, scaleFactor);
+    return resolved && resolved > 0 ? resolved : screenWidth;
+  }, [rawCarouselWidth, scaleFactor, screenWidth]);
+  const slideWidth = Math.max(1, viewportWidth - nextPad - prevPad);
+
+  const applySlideChange = useCallback((index: number) => {
+    setActiveIndex(index);
+    ctx.setCurrentSlideIndex(index);
+    const slide = slides[index];
+    const selectedProducts = ctx.state.selectedProducts ?? {};
+    const selectedSkuId = slide?.productGroupId ? selectedProducts[slide.productGroupId] : undefined;
+    const selectedSku = selectedSkuId
+      ? slideSkuPool.find((sku: any) => sku.id === selectedSkuId)
+      : undefined;
+    const skuVars = selectedSku
+      ? { ...toNamiSKU(selectedSku), ...(selectedSku.variables ?? {}) }
+      : ctx.state.sku;
+    const replacements = buildSmartTextReplacements(ctx.state, ctx.flow, skuVars);
+    const resolvedOnChange = component.onChange
+      ? interpolate(component.onChange as any, { ...replacements, slide, sku: skuVars })
+      : undefined;
+    const targetGroupId = (resolvedOnChange as any)?.parameters?.partialState?.currentGroupId;
+    if (targetGroupId) {
+      ctx.setCurrentGroupData(targetGroupId, '');
+    }
+  }, [ctx, component.onChange, slides, slideSkuPool]);
+
+  const getSlideComponents = useCallback((slide: any): TComponent[] => {
+    if (Array.isArray(slide?.components) && slide.components.length > 0) {
+      return slide.components as TComponent[];
+    }
+    if (!component.components?.length) return [];
+
+    const selectedProducts = ctx.state.selectedProducts ?? {};
+    const selectedSkuId = slide?.productGroupId ? selectedProducts[slide.productGroupId] : undefined;
+    const selectedSku = selectedSkuId
+      ? slideSkuPool.find((sku: any) => sku.id === selectedSkuId)
+      : undefined;
+
+    const skuVars = selectedSku
+      ? { ...toNamiSKU(selectedSku), ...(selectedSku.variables ?? {}) }
+      : ctx.state.sku;
+
+    const replacements = buildSmartTextReplacements(ctx.state, ctx.flow, skuVars);
+    return interpolate(component.components as any, { ...replacements, slide, sku: skuVars }) as TComponent[];
+  }, [component.components, ctx.state, ctx.flow, slideSkuPool]);
+
+  const onScroll = useCallback((e: NativeSyntheticEvent<NativeScrollEvent>) => {
+    const offset = e.nativeEvent.contentOffset.x;
+    const idx = Math.round(offset / (slideWidth + slideSpacing));
+    if (idx !== activeIndex && idx >= 0 && idx < slides.length) {
+      applySlideChange(idx);
+    }
+  }, [slideWidth, slideSpacing, activeIndex, slides.length, applySlideChange]);
+
+  useEffect(() => {
+    if (!component.autoplay || !component.autoplaySeconds || slides.length <= 1) return;
+    const interval = setInterval(() => {
+      const next = (activeIndex + 1) % slides.length;
+      scrollRef.current?.scrollTo({ x: next * (slideWidth + slideSpacing), animated: true });
+      applySlideChange(next);
+    }, component.autoplaySeconds * 1000);
+    return () => clearInterval(interval);
+  }, [component.autoplay, component.autoplaySeconds, slides.length, slideWidth, slideSpacing, applySlideChange, activeIndex]);
+
+  useEffect(() => {
+    if (slides.length === 0) return;
+    if (activeIndex < slides.length) return;
+    applySlideChange(0);
+    scrollRef.current?.scrollTo({ x: 0, animated: false });
+  }, [slides.length, activeIndex, applySlideChange]);
+
+  const showIndicators = component.showIndicators !== false && slides.length > 1;
+  const activeIndicatorColor = parseColor(component.activeIndicatorColor) ?? '#007AFF';
+  const indicatorColor = parseColor(component.indicatorColor) ?? '#ccc';
+  const indicator = component.indicator;
+
+  return (
+    <View style={[containerStyle, styles.container]}>
+      <ScrollView
+        ref={scrollRef}
+        horizontal
+        pagingEnabled={!nextPad && !prevPad}
+        showsHorizontalScrollIndicator={false}
+        onScroll={onScroll}
+        scrollEventThrottle={16}
+        decelerationRate="fast"
+        snapToInterval={slideWidth + slideSpacing}
+        contentContainerStyle={{ paddingLeft: prevPad, paddingRight: nextPad }}
+      >
+        {slides.map((slide: any, i: number) => (
+          <View key={slide.id ?? i} style={{ width: slideWidth, marginRight: slideSpacing }}>
+            {getSlideComponents(slide).map((child: TComponent, j: number) => (
+              <TemplateRenderer
+                key={child.id ?? `${i}-${j}`}
+                component={child}
+                scaleFactor={scaleFactor}
+                onClose={onClose}
+                parentDirection={direction}
+              />
+            ))}
+          </View>
+        ))}
+      </ScrollView>
+
+      {showIndicators && (
+        <View style={styles.pagination}>
+          {slides.map((_: any, i: number) => (
+            <TouchableOpacity
+              key={i}
+              style={i === 0 ? null : styles.dotSpacing}
+              onPress={() => {
+                scrollRef.current?.scrollTo({ x: i * (slideWidth + slideSpacing), animated: true });
+                applySlideChange(i);
+              }}
+            >
+              <View
+                style={[
+                  styles.dot,
+                  {
+                    backgroundColor: i === activeIndex
+                      ? (parseColor(component.activeIndicator?.fillColor) ?? activeIndicatorColor)
+                      : (parseColor(component.indicator?.fillColor) ?? indicatorColor),
+                    width: i === activeIndex
+                      ? (component.activeIndicator?.width ?? indicator?.width ?? 8)
+                      : (indicator?.width ?? 8),
+                    height: i === activeIndex
+                      ? (component.activeIndicator?.height ?? indicator?.height ?? 8)
+                      : (indicator?.height ?? 8),
+                    borderRadius: i === activeIndex
+                      ? (component.activeIndicator?.borderRadius ?? (component.activeIndicator?.width ?? indicator?.width ?? 8) / 2)
+                      : (indicator?.borderRadius ?? (indicator?.width ?? 8) / 2),
+                  },
+                ]}
+              />
+            </TouchableOpacity>
+          ))}
+        </View>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: { flexDirection: 'column' },
+  pagination: { flexDirection: 'row', justifyContent: 'center', paddingVertical: 8 },
+  dotSpacing: { marginLeft: 6 },
+  dot: {},
+});

package/src/components/containers/NamiCollapseContainer.tsx

@@ -0,0 +1,116 @@
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import { View, Pressable, Animated } from 'react-native';
+import { useFirstFocusReadyContext, usePaywallContext } from '../../context/PaywallContext';
+import { applyStyles, childSpacingStyle, focusedStyleOverrides, parseSizeOrPercent } from '../../utils/styles';
+import { TemplateRenderer } from '../TemplateRenderer';
+import type { TComponent, TCollapseContainer } from '@namiml/sdk-core';
+import { FocusedStyleProvider, FocusScope, useFocusableState, useFocusEnabled, useRegisterPreferredFocus } from '../../context/FocusContext';
+import { useTVPreferredFocus } from '../../utils/tvFocus';
+
+interface Props {
+  component: TCollapseContainer;
+  scaleFactor: number;
+  onClose?: () => void;
+  parentDirection?: string;
+}
+
+export const NamiCollapseContainer: React.FC<Props> = ({ component, scaleFactor, onClose, parentDirection }) => {
+  const ctx = usePaywallContext();
+  const focusReadyCtx = useFirstFocusReadyContext();
+  const [focusWithin, setFocusWithin] = useState(false);
+  const focusEnabled = useFocusEnabled();
+  const initialFocus = Boolean((component as any).focused);
+  const { isFocused: selfFocused, onFocus, onBlur } = useFocusableState(
+    initialFocus,
+    focusEnabled,
+  );
+  const isFocused = selfFocused || focusWithin;
+  const collapseId = component.id ?? '';
+  const openIds = (ctx.state as any).openHeaderIds ?? [];
+  const defaultOpen = component.open === 'open';
+  const isOpen = openIds.includes(collapseId) || (defaultOpen && !openIds.length);
+
+  const animValue = useRef(new Animated.Value(isOpen ? 1 : 0)).current;
+  const pressableRef = useRef<any>(null);
+  useTVPreferredFocus(
+    pressableRef,
+    focusEnabled && initialFocus,
+  );
+  useRegisterPreferredFocus(
+    pressableRef.current,
+    focusEnabled && initialFocus,
+  );
+
+  const toggle = useCallback(() => {
+    ctx.setOpenHeaderIds(collapseId);
+    Animated.timing(animValue, {
+      toValue: isOpen ? 0 : 1,
+      duration: 250,
+      useNativeDriver: false,
+    }).start();
+  }, [collapseId, isOpen, animValue, ctx]);
+
+  const handleFocus = useCallback(() => {
+    onFocus();
+    focusReadyCtx.notifyFirstFocusReady(
+      ctx.state.selectedPaywall?.id ?? 'unknown',
+      ctx.state.currentPage ?? 'unknown',
+      ctx.state.formFactor,
+    );
+  }, [focusReadyCtx, onFocus, ctx.state.selectedPaywall?.id, ctx.state.currentPage, ctx.state.formFactor]);
+
+  const containerStyle = useMemo(() => {
+    const base = applyStyles(component, scaleFactor, false, parentDirection);
+    if (isFocused) {
+      Object.assign(base, focusedStyleOverrides(component, scaleFactor));
+    }
+    return base;
+  }, [component, scaleFactor, isFocused, parentDirection]);
+
+  // TCollapseContainer has `collapseHeader: TContainer` (single container for header)
+  // and `components: TComponent[]` for the body
+  const headerContainer = component.collapseHeader;
+  const bodyComponents = component.components ?? [];
+  const direction = component.direction ?? 'vertical';
+
+  const maxHeight = animValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, 1000],
+  });
+
+  const bodySizeStyle: any = {};
+  const bodyW = parseSizeOrPercent(component.width ?? component.fixedWidth, scaleFactor);
+  const bodyH = parseSizeOrPercent(component.height ?? component.fixedHeight, scaleFactor);
+  if (bodyW != null) bodySizeStyle.width = bodyW as any;
+  if (bodyH != null) bodySizeStyle.height = bodyH as any;
+
+  const headerSpacing = childSpacingStyle(1, { spacing: component.spacing, direction: component.direction }, scaleFactor);
+
+  return (
+    <FocusScope onFocusWithinChange={setFocusWithin}>
+      <View style={containerStyle}>
+        <FocusedStyleProvider focused={isFocused}>
+          <Pressable
+            ref={pressableRef}
+            onPress={toggle}
+            onFocus={handleFocus}
+            onBlur={onBlur}
+            hasTVPreferredFocus={focusEnabled && initialFocus}
+            style={({ pressed }) => [{ opacity: pressed ? 0.7 : 1 }]}
+          >
+            {headerContainer ? (
+              <TemplateRenderer component={headerContainer as any} scaleFactor={scaleFactor} onClose={onClose} parentDirection={direction} />
+            ) : null}
+          </Pressable>
+          <Animated.View style={[{ maxHeight, overflow: 'hidden' }, bodySizeStyle, headerSpacing]}>
+            {bodyComponents.map((child: TComponent, i: number) => (
+              <View key={child.id ?? i} style={childSpacingStyle(i, { spacing: component.spacing, direction: component.direction }, scaleFactor)}>
+                <TemplateRenderer component={child} scaleFactor={scaleFactor} onClose={onClose} parentDirection={direction} />
+              </View>
+            ))}
+          </Animated.View>
+        </FocusedStyleProvider>
+      </View>
+    </FocusScope>
+  );
+};

package/src/components/containers/NamiContainer.tsx

@@ -0,0 +1,315 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { View, ImageBackground, Pressable, StyleSheet } from 'react-native';
+import { usePaywallContext } from '../../context/PaywallContext';
+import {
+  applyStyles,
+  childSpacingStyle,
+  focusedStyleOverrides,
+  parseSizeOrPercent,
+  resolveFillImageUrl,
+} from '../../utils/styles';
+import { handleAction } from '../../utils/actionHandler';
+import { buildSmartTextReplacements, interpolateSmartText } from '../../utils/smartText';
+import { TemplateRenderer } from '../TemplateRenderer';
+import type { TComponent } from '@namiml/sdk-core';
+import { parseToSemver } from '@namiml/sdk-core';
+import { FocusScope, useFocusableState, useRegisterPreferredFocus } from '../../context/FocusContext';
+import { expandRenderableComponents } from '../../utils/rendering';
+import { useTVPreferredFocus } from '../../utils/tvFocus';
+
+interface Props {
+  component: any;
+  scaleFactor: number;
+  onClose?: () => void;
+  parentDirection?: string;
+  parentCrossAxisFitContent?: boolean;
+}
+
+export const NamiContainer: React.FC<Props> = ({
+  component,
+  scaleFactor,
+  onClose,
+  parentDirection,
+  parentCrossAxisFitContent = false,
+}) => {
+  const ctx = usePaywallContext();
+  const { isFocused: selfFocused, onFocus, onBlur } = useFocusableState(Boolean(component.focused));
+  const wrapperRef = useRef<any>(null);
+  const resolvedChildren = useMemo(
+    () => expandRenderableComponents(ctx, component.components),
+    [ctx, component.components],
+  );
+  useTVPreferredFocus(
+    wrapperRef,
+    Boolean(component.onTap && component.focused),
+  );
+  useRegisterPreferredFocus(
+    wrapperRef.current,
+    Boolean(component.onTap && component.focused),
+  );
+  const initialFocusWithin = useMemo(
+    () => hasInitiallyFocusedDescendant(resolvedChildren),
+    [resolvedChildren],
+  );
+  const [focusWithin, setFocusWithin] = useState(initialFocusWithin);
+  const isFocused = selfFocused || focusWithin || initialFocusWithin;
+
+  useEffect(() => {
+    if (initialFocusWithin) {
+      setFocusWithin(true);
+    }
+  }, [initialFocusWithin]);
+
+  const containerStyle = useMemo(
+    () => {
+      const base = applyStyles(component, scaleFactor, false, parentDirection);
+      const rawHeight = component.height ?? component.fixedHeight;
+      const componentId = String(component.id ?? '');
+      const componentType = String(component.namiComponentType ?? '');
+      const isDividerLike = componentType === 'divider' || /^divider/i.test(componentId);
+
+      if (
+        parentDirection === 'horizontal'
+        && parentCrossAxisFitContent
+        && rawHeight === '100%'
+        && !isDividerLike
+      ) {
+        delete (base as any).height;
+      }
+
+      return base;
+    },
+    [component, scaleFactor, parentDirection, parentCrossAxisFitContent]
+  );
+
+  const direction = component.direction ?? 'vertical';
+  const parentRawHeight = component.height ?? component.fixedHeight;
+  const minSdk = parseToSemver(ctx.state.selectedPaywall?.template?.min_sdk_version ?? '0.0.0');
+  const shouldSizeChildren = minSdk.minor < 2;
+  const sizeKey = direction === 'vertical' ? 'width' : 'height';
+  const shouldApplyLegacyChildSizing = shouldSizeChildren && direction !== 'horizontal';
+
+  const children = useMemo(() => resolvedChildren.map((child: TComponent, i: number) => {
+    const spacingStyle = i === 0
+      ? {}
+      : childSpacingStyle(i, { spacing: component.spacing, direction }, scaleFactor);
+    const hasSpacing = Object.keys(spacingStyle).length > 0;
+    const childRawWidth = (child as any).width ?? (child as any).fixedWidth;
+    const childRawHeight = (child as any).height ?? (child as any).fixedHeight;
+    const childType = (child as any).component;
+    const childId = String((child as any).id ?? '');
+    const childNamiType = String((child as any).namiComponentType ?? '');
+    const isDividerLike = childNamiType === 'divider' || /^divider/i.test(childId);
+    const conditionFirstChild = childType === 'condition'
+      ? (child as any).components?.[0]
+      : undefined;
+    const resolvedChildWidth =
+      childRawWidth
+      ?? conditionFirstChild?.width
+      ?? conditionFirstChild?.fixedWidth;
+    const resolvedChildHeight =
+      childRawHeight
+      ?? conditionFirstChild?.height
+      ?? conditionFirstChild?.fixedHeight;
+    const needsFlexShare =
+      direction === 'horizontal'
+      && resolvedChildWidth == null;
+    const shouldShrinkWrapper =
+      direction === 'horizontal'
+      && (
+        resolvedChildWidth == null
+        || (typeof resolvedChildWidth === 'string' && resolvedChildWidth.trim().endsWith('%'))
+      );
+    const hasExplicitPercentWidthSibling =
+      direction === 'horizontal'
+      && resolvedChildren.some((candidate, candidateIndex) => {
+        if (candidateIndex === i) return false;
+        const candidateRawWidth =
+          (candidate as any).width
+          ?? (candidate as any).fixedWidth
+          ?? ((candidate as any).component === 'condition'
+            ? (candidate as any).components?.[0]?.width ?? (candidate as any).components?.[0]?.fixedWidth
+            : undefined);
+        return typeof candidateRawWidth === 'string' && candidateRawWidth.trim().endsWith('%');
+      });
+    const shouldShareFullWidthColumn =
+      direction === 'horizontal'
+      && typeof resolvedChildWidth === 'string'
+      && resolvedChildWidth.trim() === '100%'
+      && !hasExplicitPercentWidthSibling;
+    const wrapWidth = parseSizeOrPercent(resolvedChildWidth, scaleFactor);
+    const wrapHeight = parseSizeOrPercent(resolvedChildHeight, scaleFactor);
+    const shouldStretchDivider =
+      direction === 'horizontal'
+      && isDividerLike
+      && resolvedChildHeight === '100%';
+    const shouldIgnoreCrossAxisFullHeight =
+      direction === 'horizontal'
+      && parentRawHeight === 'fitContent'
+      && resolvedChildHeight === '100%'
+      && !isDividerLike;
+    const wrapperSizeStyle = {
+      ...(!shouldShareFullWidthColumn && wrapWidth != null ? { width: wrapWidth as any } : {}),
+      ...(!shouldStretchDivider && !shouldIgnoreCrossAxisFullHeight && wrapHeight != null
+        ? { height: wrapHeight as any }
+        : {}),
+      ...(shouldStretchDivider ? { alignSelf: 'stretch' as const, minHeight: 1 } : {}),
+    };
+
+    const childNode = (
+      <TemplateRenderer
+        key={child.id ?? i}
+        component={child}
+        scaleFactor={scaleFactor}
+        onClose={onClose}
+        parentDirection={direction}
+        parentCrossAxisFitContent={direction === 'horizontal' && parentRawHeight === 'fitContent'}
+      />
+    );
+
+    const shouldWrap = shouldSizeChildren || needsFlexShare || hasSpacing || direction === 'horizontal';
+
+    if (shouldWrap) {
+      return (
+        <View
+          key={`wrap-${child.id ?? i}`}
+          style={[
+            shouldApplyLegacyChildSizing ? { [sizeKey]: '100%' as const } : null,
+            needsFlexShare ? styles.flexShare : null,
+            shouldShareFullWidthColumn ? styles.rowPercentColumn : null,
+            wrapperSizeStyle,
+            shouldShrinkWrapper ? styles.horizontalShrink : null,
+            spacingStyle,
+          ]}
+        >
+          {childNode}
+        </View>
+      );
+    }
+
+    return childNode;
+  }), [resolvedChildren, component.spacing, direction, scaleFactor, sizeKey, shouldApplyLegacyChildSizing, onClose, parentRawHeight]);
+
+  const fillImageUrl = resolveFillImageUrl(component.fillImage)
+    ? (() => {
+      const replacements = buildSmartTextReplacements(
+        ctx.state,
+        ctx.flow,
+        component?.smartTextSku ?? component?.sku
+      );
+      const raw = resolveFillImageUrl(component.fillImage) as string;
+      const resolved = interpolateSmartText(raw, replacements);
+      return resolved == null ? undefined : String(resolved);
+    })()
+    : undefined;
+
+  const borderOverride = useMemo(() => {
+    if (!isFocused) return {};
+    return focusedStyleOverrides(component, scaleFactor);
+  }, [component, isFocused, scaleFactor]);
+
+  const Wrapper = component.onTap ? Pressable : View;
+
+  const radiusStyles = pickBorderRadius(containerStyle);
+  const shouldClip = fillImageUrl && Object.keys(radiusStyles).length > 0;
+
+  const wrapperStyle = [
+    styles.relative,
+    containerStyle,
+    borderOverride,
+    shouldClip ? styles.clip : null,
+  ];
+
+  const wrapperPropsFinal = component.onTap
+    ? {
+      onPress: () => handleAction({
+        onTap: component.onTap,
+        ctx,
+        onClose,
+        componentChange: {
+          id: component.id,
+          name: component.title,
+        },
+      }),
+      onFocus,
+      onBlur,
+      ref: wrapperRef,
+      hasTVPreferredFocus: Boolean(component.focused),
+      style: ({ pressed }: any) => [wrapperStyle, pressed && styles.pressed],
+    }
+    : { style: wrapperStyle };
+
+  if (fillImageUrl) {
+    return (
+      <FocusScope onFocusWithinChange={setFocusWithin}>
+        <Wrapper {...wrapperPropsFinal}>
+          <ImageBackground
+            source={{ uri: fillImageUrl }}
+            style={StyleSheet.absoluteFill}
+            imageStyle={shouldClip ? radiusStyles : undefined}
+            resizeMode={
+              component.fillImage?.imageCropping === 'fit' ? 'contain' : 'cover'
+            }
+          />
+          {children}
+        </Wrapper>
+      </FocusScope>
+    );
+  }
+
+  return (
+    <FocusScope onFocusWithinChange={setFocusWithin}>
+      <Wrapper {...wrapperPropsFinal}>
+        {children}
+      </Wrapper>
+    </FocusScope>
+  );
+};
+
+const styles = StyleSheet.create({
+  pressed: { opacity: 0.7 },
+  relative: { position: 'relative' },
+  clip: { overflow: 'hidden' },
+  flexShare: { flex: 1 },
+  horizontalShrink: { minWidth: 0, flexShrink: 1 },
+  rowPercentColumn: { flexGrow: 1, flexBasis: 0, minWidth: 0 },
+});
+
+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 hasInitiallyFocusedDescendant(components: TComponent[] = []): boolean {
+  for (const component of components) {
+    if ((component as any)?.focused) {
+      return true;
+    }
+
+    const childGroups = [
+      (component as any)?.components,
+      (component as any)?.collapseHeader,
+      (component as any)?.productBaseComponents,
+      (component as any)?.productFeaturedComponents,
+    ];
+
+    for (const group of childGroups) {
+      if (Array.isArray(group) && hasInitiallyFocusedDescendant(group as TComponent[])) {
+        return true;
+      }
+    }
+  }
+
+  return false;
+}