@namiml/expo-sdk 3.4.0-dev.202605060437

package/src/components/elements/NamiButton.tsx

@@ -0,0 +1,285 @@
+import React, { useCallback, useMemo, useRef } from 'react';
+import { Pressable, ActivityIndicator, StyleSheet, View, Linking as RNLinking } from 'react-native';
+import { useFirstFocusReadyContext, usePaywallContext } from '../../context/PaywallContext';
+import { applyStyles, parseColor, childSpacingStyle, extractPrefixedStyles, focusedStyleOverrides, parseSize } from '../../utils/styles';
+import {
+  handleAction,
+  shouldHoist,
+  ACTION_DEEP_LINK,
+  ACTION_BUY_SKU,
+  ACTION_SELECT_SKU,
+} from '../../utils/actionHandler';
+import { buildSmartTextReplacements, interpolateSmartText } from '../../utils/smartText';
+import { TemplateRenderer } from '../TemplateRenderer';
+import type { TComponent } from '@namiml/sdk-core';
+import { NamiReservedActions, SHOULD_SHOW_LOADING_INDICATOR } from '@namiml/sdk-core';
+import { FocusedStyleProvider, useFocusableState, useFocusEnabled, useRegisterPreferredFocus } from '../../context/FocusContext';
+import { expandRenderableComponents } from '../../utils/rendering';
+import { useTVPreferredFocus } from '../../utils/tvFocus';
+
+interface Props {
+  component: any;
+  scaleFactor: number;
+  onClose?: () => void;
+  parentDirection?: string;
+}
+
+function createFlowButtonHandle(component: any) {
+  return {
+    ...component,
+    firstTextValue(): string | undefined {
+      const { components = [] } = component ?? {};
+      if (!Array.isArray(components)) return undefined;
+
+      for (const child of components) {
+        if (child?.component === 'text' && typeof child?.text === 'string') {
+          return child.text;
+        }
+      }
+
+      return undefined;
+    },
+  };
+}
+
+function openComponentUrl(url?: string) {
+  if (!url) return;
+
+  void RNLinking.canOpenURL(url)
+    .then((canOpen) => {
+      if (canOpen) {
+        return RNLinking.openURL(url);
+      }
+      return undefined;
+    })
+    .catch(() => {});
+}
+
+function withDisabledChildStyles(child: TComponent, disabled: boolean): TComponent {
+  if (!disabled || !child || typeof child !== 'object') {
+    return child;
+  }
+
+  const disabledStyles = extractPrefixedStyles(child as Record<string, any>, 'disabled');
+  const safeDisabledStyles = Object.entries(disabledStyles).reduce((result, [key, value]) => {
+    if (value !== null && value !== undefined) {
+      result[key] = value;
+    }
+    return result;
+  }, {} as Record<string, any>);
+
+  return { ...child, ...safeDisabledStyles } as TComponent;
+}
+
+export const NamiButton: React.FC<Props> = ({ component, scaleFactor, onClose, parentDirection }) => {
+  const ctx = usePaywallContext();
+  const focusReadyCtx = useFirstFocusReadyContext();
+  const focusEnabled = useFocusEnabled();
+  const pressableRef = useRef<any>(null);
+  const { isFocused, onFocus, onBlur } = useFocusableState(
+    Boolean(component.focused),
+    focusEnabled,
+  );
+  useTVPreferredFocus(
+    pressableRef,
+    focusEnabled && Boolean(component.focused),
+  );
+  useRegisterPreferredFocus(
+    pressableRef.current,
+    focusEnabled && Boolean(component.focused),
+  );
+  const smartTextSku = component?.smartTextSku ?? component?.sku;
+  const resolvedChildren = useMemo(
+    () => expandRenderableComponents(ctx, component.components),
+    [ctx, component.components],
+  );
+
+  const disabled = useMemo(() => {
+    if (component.disabled === true) return true;
+    if (!component.disabled) return false;
+    const replacements = buildSmartTextReplacements(ctx.state, ctx.flow, smartTextSku);
+    const resolved = interpolateSmartText(String(component.disabled), replacements);
+    return resolved === true || resolved === 'true';
+  }, [component.disabled, smartTextSku, ctx.state, ctx.flow]);
+
+  const sku = useMemo(() => {
+    if (!component.sku) return undefined;
+    const items = ctx.state.skuItems ?? [];
+    return items.find((s: any) => s.sku_ref_id === component.sku?.sku_ref_id) ?? component.sku;
+  }, [component.sku, ctx.state.skuItems]);
+
+  const onPress = useCallback(() => {
+    if (disabled || !ctx.state.userInteractionEnabled) return;
+    const onTap = component.onTap;
+    const url = component.url;
+    const flowButton = createFlowButtonHandle(component);
+
+    if (url && onTap?.function !== ACTION_DEEP_LINK) {
+      openComponentUrl(url);
+      return;
+    }
+
+    const currentGroupId = onTap?.parameters?.partialState?.currentGroupId;
+    if (currentGroupId) {
+      ctx.setCurrentGroupData(String(currentGroupId), '');
+    }
+
+    if (ctx.flow && component.id) {
+      let actionId = component.id;
+      if (onTap?.function === ACTION_BUY_SKU || onTap?.function === ACTION_SELECT_SKU) {
+        actionId = NamiReservedActions.BUY_SKU;
+      }
+
+      if (ctx.flow.currentStepHasHoistedPrimaryActions(actionId)) {
+        ctx.flow.triggerActions(actionId, flowButton, { sku });
+        return;
+      }
+
+      if (shouldHoist(onTap)) {
+        ctx.flow.triggerBeforeActions(component.id, flowButton, { sku });
+        handleAction({
+          onTap,
+          sku,
+          ctx,
+          onClose,
+          componentChange: {
+            id: component.id,
+            name: component.title ?? component.screenreaderText,
+          },
+        });
+        ctx.flow.triggerAfterActions(component.id, flowButton, { sku });
+        return;
+      }
+    }
+
+    if (onTap) {
+      handleAction({
+        onTap,
+        sku,
+        ctx,
+        onClose,
+        componentChange: {
+          id: component.id,
+          name: component.title ?? component.screenreaderText,
+        },
+      });
+    }
+  }, [component, sku, ctx, disabled, onClose]);
+
+  const handleFocus = useCallback(() => {
+    onFocus();
+    const paywallId = ctx.state.selectedPaywall?.id ?? 'unknown';
+    const page = ctx.state.currentPage ?? 'unknown';
+    const formFactor = ctx.state.formFactor;
+    focusReadyCtx.notifyFirstFocusReady(paywallId, page, formFactor);
+  }, [onFocus, focusReadyCtx, ctx.state.selectedPaywall?.id, ctx.state.currentPage, ctx.state.formFactor]);
+
+  const { backgroundColor, borderOverride } = useMemo(() => {
+    const focused = isFocused;
+    const fill = focused ? (component.focusedFillColor ?? component.focusedFillColorFallback) : component.fillColor;
+    const fallback = focused ? component.focusedFillColorFallback : component.fillColorFallback;
+    const textColor = focused ? parseColor(component.focusedFontColor) ?? parseColor(component.fontColor) : parseColor(component.fontColor);
+    const bgSource = fill ?? fallback;
+    const bgColor = parseColor(bgSource) ?? parseColor(fallback);
+    return {
+      color: textColor,
+      backgroundColor: bgColor,
+      borderOverride: focused ? focusedStyleOverrides(component, scaleFactor) : {},
+    };
+  }, [component, scaleFactor, isFocused]);
+
+  const containerStyle = useMemo(() => {
+    const disabledStyles = extractPrefixedStyles(component, 'disabled');
+    const base = applyStyles(disabled ? { ...component, ...disabledStyles } : component, scaleFactor, isFocused, parentDirection);
+    if (disabled) {
+      const disabledBg = parseColor(disabledStyles.fillColor ?? component.disabledFillColor);
+      if (disabledBg) base.backgroundColor = disabledBg;
+      base.opacity = 0.6;
+    }
+
+    if (base.borderRadius != null) {
+      base.overflow = 'hidden';
+    }
+    return base;
+  }, [component, scaleFactor, disabled, backgroundColor, borderOverride, parentDirection, isFocused ]);
+
+  const showLoading =
+    SHOULD_SHOW_LOADING_INDICATOR &&
+    ctx.state.purchaseInProgress &&
+    component.sku?.id === (ctx.state as any).productBeingPurchased?.id;
+  const renderedChildren = useMemo(() => resolvedChildren.map((child: TComponent, i: number) => {
+    const resolvedChild = withDisabledChildStyles(child, disabled);
+    const buttonDirection = component.direction ?? "vertical";
+    const spacingStyle =
+      i === 0
+        ? {}
+        : childSpacingStyle(
+            i,
+            { spacing: component.spacing, direction: buttonDirection },
+            scaleFactor,
+          );
+    const hasSpacing = Object.keys(spacingStyle).length > 0;
+
+    const childRawWidth =
+      (resolvedChild as any).width ?? (resolvedChild as any).fixedWidth;
+    const needsFlexShare =
+      buttonDirection === "horizontal" && childRawWidth == null;
+
+    const childNode = (
+      <TemplateRenderer
+        key={resolvedChild.id ?? i}
+        component={resolvedChild}
+        scaleFactor={scaleFactor}
+        onClose={onClose}
+        parentDirection={buttonDirection}
+      />
+    );
+
+    if (hasSpacing || needsFlexShare) {
+      return (
+        <View
+          key={resolvedChild.id ?? i}
+          style={[
+            needsFlexShare ? styles.flexShare : null,
+            hasSpacing ? spacingStyle : null,
+          ]}
+        >
+          {childNode}
+        </View>
+      );
+    }
+
+    return childNode;
+  }), [resolvedChildren, component.direction, component.spacing, scaleFactor, onClose, disabled]);
+
+  return (
+    <Pressable
+      ref={pressableRef}
+      onPress={onPress}
+      disabled={disabled}
+      onFocus={handleFocus}
+      onBlur={onBlur}
+      accessibilityRole="button"
+      accessibilityLabel={component.screenreaderText || component.title || ''}
+      accessibilityHint={component.screenreaderHint ?? undefined}
+      accessibilityState={{ disabled, busy: showLoading }}
+      hasTVPreferredFocus={focusEnabled && Boolean(component.focused)}
+      style={({ pressed }) => [containerStyle, pressed && styles.pressed]}
+    >
+      {showLoading ? (
+        <ActivityIndicator
+          color={parseColor(component.loadingIndicatorColor) ?? "#fff"}
+        />
+      ) : (
+        <FocusedStyleProvider focused={isFocused}>
+          {renderedChildren}
+        </FocusedStyleProvider>
+      )}
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  pressed: { opacity: 0.7 },
+  flexShare: { flex: 1 },
+});

package/src/components/elements/NamiCountdownTimer.tsx

@@ -0,0 +1,123 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { View, Text } from 'react-native';
+import { usePaywallContext } from '../../context/PaywallContext';
+import { applyStyles, parseColor, parseSize } from '../../utils/styles';
+import { NamiEventEmitter, PAYWALL_ACTION_EVENT, NamiPaywallAction } from '@namiml/sdk-core';
+import type { TCountdownTimerTextComponent } from '@namiml/sdk-core';
+
+interface Props {
+  component: TCountdownTimerTextComponent;
+  scaleFactor: number;
+  parentDirection?: string;
+}
+
+export const NamiCountdownTimer: React.FC<Props> = ({ component, scaleFactor, parentDirection }) => {
+  const ctx = usePaywallContext();
+  const timerId = component.id ?? 'default';
+  const mode = component.mode ?? 'duration';
+
+  const computeInitialSeconds = (): number => {
+    const saved = ctx.getTimerState(timerId);
+    if (saved) return Math.max(0, saved.remainingSeconds);
+
+    if (mode === 'targetDateTime' && component.targetDateTime) {
+      const target = new Date(component.targetDateTime).getTime();
+      const diff = Math.floor((target - Date.now()) / 1000);
+      return Math.max(0, diff);
+    }
+    return component.durationSeconds ?? 60;
+  };
+
+  const [remaining, setRemaining] = useState(computeInitialSeconds);
+  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  useEffect(() => {
+    if (remaining <= 0) {
+      if (intervalRef.current) clearInterval(intervalRef.current);
+      const saved = ctx.getTimerState(timerId);
+      if (!saved?.hasEmittedCompletion) {
+        const eventData = ctx.getPaywallActionEventData();
+        NamiEventEmitter.getInstance().emit(PAYWALL_ACTION_EVENT, {
+          ...eventData,
+          action: NamiPaywallAction.COUNTDOWN_TIMER_COMPLETED,
+        });
+        ctx.setTimerState(timerId, 0, Date.now(), true);
+      }
+      return;
+    }
+
+    intervalRef.current = setInterval(() => {
+      setRemaining(prev => {
+        const next = prev - 1;
+        ctx.setTimerState(timerId, next, Date.now(), false);
+        return next;
+      });
+    }, 1000);
+
+    return () => { if (intervalRef.current) clearInterval(intervalRef.current); };
+  }, [remaining <= 0]);
+
+  // Handle showWhenCompleted
+  if (remaining <= 0 && component.showWhenCompleted === 'hidden') return null;
+
+  const containerStyle = applyStyles(component, scaleFactor, false, parentDirection);
+
+  const units = component.units ?? { hours: true, minutes: true, seconds: true };
+  const labels = component.labels;
+  const zeroPad = component.zeroPad !== false;
+  const separator = component.separator ?? ':';
+  const isHorizontal = (component.direction ?? 'horizontal') === 'horizontal';
+  const labelPosition = component.labelPosition ?? 'none';
+
+  const hrs = Math.floor(remaining / 3600);
+  const mins = Math.floor((remaining % 3600) / 60);
+  const secs = remaining % 60;
+
+  const parts: { value: number; label?: string }[] = [];
+  if (units.days) {
+    const days = Math.floor(remaining / 86400);
+    parts.push({ value: days, label: labels?.days });
+  }
+  if (units.hours) parts.push({ value: hrs, label: labels?.hours });
+  if (units.minutes) parts.push({ value: mins, label: labels?.minutes });
+  if (units.seconds) parts.push({ value: secs, label: labels?.seconds });
+
+  const valueFontStyle = {
+    fontSize: parseSize(component.fontSize, scaleFactor) ?? 24,
+    color: parseColor(component.fontColor) ?? '#000',
+    fontFamily: component.fontName,
+    includeFontPadding: false,
+  };
+
+  const labelFontStyle = {
+    fontSize: parseSize(component.labelFontSize, scaleFactor) ?? 12,
+    color: parseColor(component.labelFontColor) ?? '#666',
+    fontFamily: component.labelFontName,
+    marginTop: labelPosition === 'bottom' || labelPosition === 'below' ? 2 : 0,
+    marginBottom: labelPosition === 'top' || labelPosition === 'above' ? 2 : 0,
+    includeFontPadding: false,
+  };
+
+  return (
+    <View style={[containerStyle, { flexDirection: isHorizontal ? 'row' : 'column', alignItems: 'center' }]}>
+      {parts.map((part, i) => (
+        <View key={i} style={{ flexDirection: isHorizontal ? 'row' : 'column', alignItems: 'center' }}>
+          {i > 0 && isHorizontal && (
+            <Text style={valueFontStyle} allowFontScaling={false}>{separator}</Text>
+          )}
+          <View style={{ alignItems: 'center' }}>
+            {labelPosition === 'top' || labelPosition === 'above' ? (
+              <Text style={labelFontStyle} allowFontScaling={false}>{part.label}</Text>
+            ) : null}
+            <Text style={valueFontStyle} allowFontScaling={false}>
+              {zeroPad ? String(part.value).padStart(2, '0') : String(part.value)}
+            </Text>
+            {labelPosition === 'bottom' || labelPosition === 'below' ? (
+              <Text style={labelFontStyle} allowFontScaling={false}>{part.label}</Text>
+            ) : null}
+          </View>
+        </View>
+      ))}
+    </View>
+  );
+};

package/src/components/elements/NamiImage.tsx

@@ -0,0 +1,177 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { Image as RNImage, View } from 'react-native';
+import { applyStyles, parseSizeOrPercent } from '../../utils/styles';
+import { usePaywallContext } from '../../context/PaywallContext';
+import { buildSmartTextReplacements, interpolateSmartText } from '../../utils/smartText';
+
+// Prefer expo-image when available; fall back to react-native Image
+let ImageComponent: typeof RNImage;
+let supportsContentPosition = false;
+let supportsContentFit = false;
+try {
+  const expoImage = require('expo-image');
+  ImageComponent = expoImage.Image;
+  supportsContentPosition = true;
+  supportsContentFit = true;
+} catch {
+  ImageComponent = RNImage;
+}
+
+interface Props {
+  component: any;
+  scaleFactor: number;
+  parentDirection?: string;
+}
+
+const aspectRatioCache = new Map<string, number>();
+
+export const NamiImage: React.FC<Props> = ({ component, scaleFactor, parentDirection }) => {
+  const ctx = usePaywallContext();
+  const [sourceAspectRatio, setSourceAspectRatio] = useState<number | null>(() => {
+    const raw = component?.url ?? component?.imageUrl;
+    if (!raw || typeof raw !== 'string') {
+      return null;
+    }
+
+    return aspectRatioCache.get(raw) ?? null;
+  });
+  const smartTextSku = component?.smartTextSku ?? component?.sku;
+
+  const url = useMemo(() => {
+    const raw = component.url ?? component.imageUrl ?? '';
+    const replacements = buildSmartTextReplacements(ctx.state, ctx.flow, smartTextSku);
+    const resolved = interpolateSmartText(raw, replacements);
+    return resolved == null ? '' : String(resolved);
+  }, [component.url, component.imageUrl, smartTextSku, ctx.state, ctx.flow]);
+
+  if (!url) return null;
+
+  const rawW = component.width ?? component.fixedWidth;
+  const rawH = component.height ?? component.fixedHeight;
+  const h = parseSizeOrPercent(rawH ?? '100%', scaleFactor);
+  const w = rawW === 'fitContent' && h ? h : parseSizeOrPercent(rawW ?? '100%', scaleFactor);
+  const hasPercentWidth = typeof rawW === 'string' && rawW.trim().endsWith('%');
+  const numericHeight = typeof h === 'number' ? h : null;
+  const prefersEdgeAlignment =
+    component.alignment === 'left'
+    || component.alignment === 'leading'
+    || component.alignment === 'right'
+    || component.alignment === 'trailing';
+  const shouldUseNativeEdgeFit =
+    component.imageCropping === 'fit'
+    && hasPercentWidth
+    && numericHeight != null
+    && prefersEdgeAlignment;
+  // On Vega/TV targets, contentPosition alone can still visually center a contained image
+  // inside a full-width slot. For left/right aligned fit images, render them at measured
+  // fitted width and let the parent container anchor them to the edge.
+  const containerStyle: any = applyStyles(component, scaleFactor, false, parentDirection);
+  const horizontalAlignment =
+    component.alignment === 'left' || component.alignment === 'leading'
+      ? 'flex-start'
+      : component.alignment === 'right' || component.alignment === 'trailing'
+        ? 'flex-end'
+        : 'center';
+  const contentPosition =
+    component.alignment === 'left' || component.alignment === 'leading'
+      ? { left: 0, top: '50%' as const }
+      : component.alignment === 'right' || component.alignment === 'trailing'
+        ? { right: 0, top: '50%' as const }
+        : 'center';
+  containerStyle.alignItems = horizontalAlignment;
+  const imageStyle: any = {
+    height: h ?? '100%',
+    flexShrink: typeof rawW === 'number' ? 0 : 1,
+    marginRight: component.rightMargin ?? component.spacing ?? 0,
+    maxWidth: '100%',
+    alignSelf: horizontalAlignment,
+    width:
+      shouldUseNativeEdgeFit && sourceAspectRatio != null
+        ? numericHeight! * sourceAspectRatio
+        : (w ?? '100%'),
+  };
+  const contentFit = component.imageCropping === 'fit' ? 'contain' : 'cover';
+  const edgeFitReady = !shouldUseNativeEdgeFit || sourceAspectRatio != null;
+
+  useEffect(() => {
+    if (!shouldUseNativeEdgeFit || !url) {
+      return;
+    }
+
+    const cachedRatio = aspectRatioCache.get(url);
+    if (cachedRatio != null) {
+      setSourceAspectRatio((prev) => (prev === cachedRatio ? prev : cachedRatio));
+      return;
+    }
+
+    let cancelled = false;
+    RNImage.getSize(
+      url,
+      (width, height) => {
+        if (cancelled || !height) return;
+        const next = width / height;
+        if (!Number.isFinite(next) || next <= 0) return;
+        aspectRatioCache.set(url, next);
+        setSourceAspectRatio((prev) => (prev === next ? prev : next));
+      },
+      () => {
+        // Fall back to onLoad when size prefetch is unavailable on the target runtime.
+      },
+    );
+
+    return () => {
+      cancelled = true;
+    };
+  }, [shouldUseNativeEdgeFit, url]);
+
+  const applyLoadedSource = useCallback((source: any) => {
+    if (!shouldUseNativeEdgeFit) {
+      return;
+    }
+
+    const width = source?.width;
+    const height = source?.height;
+    if (typeof width !== 'number' || typeof height !== 'number' || height <= 0) return;
+    const next = width / height;
+    if (!Number.isFinite(next) || next <= 0) return;
+    aspectRatioCache.set(url, next);
+    setSourceAspectRatio((prev) => (prev === next ? prev : next));
+  }, [shouldUseNativeEdgeFit, url]);
+
+  const onNativeImageLoad = useCallback((event: any) => {
+    applyLoadedSource(event?.nativeEvent?.source);
+  }, [applyLoadedSource]);
+
+  const onExpoImageLoad = useCallback((event: any) => {
+    applyLoadedSource(event?.source);
+  }, [applyLoadedSource]);
+
+  return (
+    <View style={containerStyle} pointerEvents="none">
+      {shouldUseNativeEdgeFit ? (
+        <RNImage
+          source={{ uri: url }}
+          style={[imageStyle, !edgeFitReady ? styles.hidden : null]}
+          blurRadius={component.blur}
+          onLoad={shouldUseNativeEdgeFit ? onNativeImageLoad : undefined}
+          resizeMode={contentFit}
+        />
+      ) : (
+        <ImageComponent
+          source={{ uri: url }}
+          style={imageStyle}
+          blurRadius={component.blur}
+          onLoad={shouldUseNativeEdgeFit ? onExpoImageLoad : undefined}
+          {...(supportsContentPosition ? { contentPosition } : {})}
+          {...(supportsContentFit ? { contentFit } : { resizeMode: contentFit })}
+        />
+      )}
+    </View>
+  );
+};
+
+const styles = {
+  hidden: {
+    opacity: 0,
+  },
+};

package/src/components/elements/NamiPlayPauseButton.tsx

@@ -0,0 +1,93 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { Pressable, StyleSheet, View } from 'react-native';
+import { applyStyles, childSpacingStyle, focusedStyleOverrides } from '../../utils/styles';
+import { TemplateRenderer } from '../TemplateRenderer';
+import { usePaywallContext } from '../../context/PaywallContext';
+import { handleAction } from '../../utils/actionHandler';
+import { getVideoControlState, subscribeVideoControls } from '../../utils/videoControls';
+import type { TComponent } from '@namiml/sdk-core';
+import { FocusedStyleProvider, useFocusableState, useFocusEnabled, useRegisterPreferredFocus } from '../../context/FocusContext';
+import { useTVPreferredFocus } from '../../utils/tvFocus';
+
+interface Props {
+  component: any;
+  scaleFactor: number;
+  onClose?: () => void;
+  parentDirection?: string;
+}
+
+export const NamiPlayPauseButton: React.FC<Props> = ({
+  component,
+  scaleFactor,
+  onClose,
+  parentDirection,
+}) => {
+  const ctx = usePaywallContext();
+  const focusEnabled = useFocusEnabled();
+  const pressableRef = useRef<any>(null);
+  const { isFocused, onFocus, onBlur } = useFocusableState(
+    Boolean(component.focused),
+    focusEnabled,
+  );
+  useTVPreferredFocus(
+    pressableRef,
+    focusEnabled && Boolean(component.focused),
+  );
+  useRegisterPreferredFocus(
+    pressableRef.current,
+    focusEnabled && Boolean(component.focused),
+  );
+  const [playing, setPlaying] = useState(getVideoControlState().playing);
+
+  useEffect(() => subscribeVideoControls((next) => setPlaying(next.playing)), []);
+
+  const containerStyle = useMemo(() => {
+    const base = applyStyles(component, scaleFactor, false, parentDirection);
+    if (isFocused) {
+      Object.assign(base, focusedStyleOverrides(component, scaleFactor));
+    }
+    return base;
+  }, [component, scaleFactor, parentDirection, isFocused]);
+
+  const onPress = () => {
+    handleAction({
+      onTap: playing ? component.playingOnTap : component.pausedOnTap,
+      ctx,
+      onClose,
+    });
+  };
+
+  const direction = component.direction ?? 'horizontal';
+  const children = (playing ? component.playingComponents : component.pausedComponents) ?? [];
+
+  return (
+    <Pressable
+      ref={pressableRef}
+      onPress={onPress}
+      onFocus={onFocus}
+      onBlur={onBlur}
+      hasTVPreferredFocus={focusEnabled && Boolean(component.focused)}
+      style={({ pressed }) => [containerStyle, pressed ? styles.pressed : null]}
+    >
+      <FocusedStyleProvider focused={isFocused}>
+        {children.map((child: TComponent, i: number) => (
+          <View
+            key={child.id ?? i}
+            style={i === 0 ? null : childSpacingStyle(i, { spacing: component.spacing, direction }, scaleFactor)}
+          >
+            <TemplateRenderer
+              component={child}
+              scaleFactor={scaleFactor}
+              onClose={onClose}
+              parentDirection={direction}
+            />
+          </View>
+        ))}
+      </FocusedStyleProvider>
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  pressed: { opacity: 0.7 },
+});