@billdog.io/react-native 1.0.0-beta.2

package/src/ComponentRenderer.tsx

@@ -0,0 +1,1325 @@
+/**
+ * Component Renderer - Maps PaywallComponent types to React Native components
+ * Enhanced with CSS-first rendering, gradient support, and theme-aware color resolution
+ * UPDATED: Comprehensive theme support and fixed stack alignment
+ */
+
+import React, { useMemo, useCallback, useState, useEffect } from 'react';
+import {
+  View,
+  Text,
+  Image,
+  TouchableOpacity,
+  ScrollView,
+  StyleSheet,
+  ViewStyle,
+  ImageStyle,
+} from 'react-native';
+import { PaywallComponent, PaywallConfiguration, ThemeConfig } from './types';
+import { VariableResolver } from './VariableResolver';
+import { LayoutEngine, ThemeColorResolver } from './LayoutEngine';
+import { processFullComponent } from './dynamicValues';
+import { PaywallStateManager } from './PaywallStateManager';
+import { BillDog } from './BillDog';
+import { getDeviceInfo } from './utils/deviceDetection';
+import { CountdownComponent } from './components/CountdownComponent';
+import { CarouselComponent } from './components/CarouselComponent';
+import { AccordionComponent } from './components/AccordionComponent';
+import { SliderComponent } from './components/SliderComponent';
+import { ToggleComponent } from './components/ToggleComponent';
+import { CheckboxComponent } from './components/CheckboxComponent';
+import { SegmentedPickerComponent } from './components/SegmentedPickerComponent';
+import { ConfettiComponent } from './components/ConfettiComponent';
+import { HapticFeedbackComponent } from './components/HapticFeedbackComponent';
+import { DelayedXComponent } from './components/DelayedXComponent';
+import { ProgressLoaderComponent } from './components/ProgressLoaderComponent';
+import { ChartCurveComponent } from './components/ChartCurveComponent';
+import { SingleChoiceGridComponent } from './components/SingleChoiceGridComponent';
+import { MultiChoiceGridComponent } from './components/MultiChoiceGridComponent';
+import { DrawerModalComponent } from './components/DrawerModalComponent';
+import { TimelineComponent } from './components/TimelineComponent';
+import { TextInputComponent } from './components/TextInputComponent';
+import { StarRatingInputComponent } from './components/StarRatingInputComponent';
+import { NPSScaleComponent } from './components/NPSScaleComponent';
+import { OAuthButtonComponent } from './components/OAuthButtonComponent';
+import { ProgressStepperComponent } from './components/ProgressStepperComponent';
+import { ShareCodeComponent } from './components/ShareCodeComponent';
+import { ShareButtonsComponent } from './components/ShareButtonsComponent';
+import { VerticalProductsComponent } from './components/VerticalProductsComponent';
+import { HorizontalProductsComponent } from './components/HorizontalProductsComponent';
+import { AccoladeCpsComponent } from './components/AccoladeCpsComponent';
+import { StickerCompositeComponent } from './components/StickerCompositeComponent';
+
+import { AnimatedWrapper } from './components/AnimatedWrapper';
+import { NavigationComponent } from './components/NavigationComponent';
+import { TabsComponent } from './components/TabsComponent';
+import { GradientView, isGradientSupported } from './components/GradientView';
+import { GradientConfig } from './utils/CSSConverter';
+
+interface ComponentRendererProps {
+  component: PaywallComponent;
+  configuration: PaywallConfiguration;
+  theme?: ThemeConfig;
+  onButtonPress?: (componentId: string, action: string) => void;
+  stateManager?: any;
+  isPreviewMode?: boolean;
+}
+
+export const ComponentRenderer: React.FC<ComponentRendererProps> = ({
+  component,
+  configuration,
+  theme,
+  onButtonPress,
+  stateManager,
+  isPreviewMode = true,
+}) => {
+  // Process full component to evaluate dynamic values across ALL property bags.
+  //
+  // Device variables MUST be merged in. iOS (WallManager) and Android (PaywallManager) both enrich the
+  // bag with `buildDeviceVariables` before resolving dynamic values; React Native was the only native SDK
+  // that did not, so every `device.*` condition (device.osName, device.platform, …) silently resolved to
+  // its default here. buildDeviceVariables emits the canonical flat keys (`device.osName`) the audience
+  // authors target; explicit `configuration.variables` win on any collision.
+  // Live product selection (Phase 2b). Seeded from the store, then kept current via a
+  // subscription, so `products.selectedIndex` / `selectedProduct.*` conditions resolve
+  // against what the user actually picked instead of being pinned to the first package.
+  // Falls back to 0 whenever no state manager is supplied (e.g. standalone renders),
+  // which is exactly the previous behaviour.
+  const [liveSelectedIndex, setLiveSelectedIndex] = useState(0);
+  useEffect(() => {
+    if (!stateManager) return;
+    const key = PaywallStateManager.SELECTED_INDEX_KEY;
+    const initial = stateManager.getState?.(key);
+    if (initial !== undefined && initial !== null) setLiveSelectedIndex(Number(initial) || 0);
+    return stateManager.subscribeToState?.(key, (value: any) => {
+      setLiveSelectedIndex(Number(value) || 0);
+    });
+  }, [stateManager]);
+
+  const [customerInfo, setCustomerInfo] = useState(() => BillDog.customerInfoEmitter.latest);
+  useEffect(() => {
+    const sub = BillDog.customerInfoEmitter.addListener((info) => {
+      setCustomerInfo(info);
+    });
+    return () => {
+      sub.remove();
+    };
+  }, []);
+
+  const resolvedComponent = useMemo(() => {
+    // Full offering-aware render bag (device + product/offer/user + user.seed/
+    // subscription) — parity with iOS/Android Phase 2. Was device + config.variables
+    // only, so every product/user DV condition silently resolved to `default`.
+    // appUserId + customerInfo are read here (sync) and threaded in to avoid an
+    // import cycle.
+    const bag = VariableResolver.buildRenderVariables(configuration, getDeviceInfo(), {
+      selectedIndex: liveSelectedIndex,
+      appUserId: BillDog.getAppUserId(),
+      customerInfo: customerInfo,
+    });
+    const allVariables = { ...bag, ...(configuration.variables || {}) };
+    return processFullComponent(component, allVariables);
+  }, [component, configuration.variables, (configuration as any).packages, liveSelectedIndex, customerInfo]);
+
+  // Create a VariableResolver with full localization support (must be before early returns)
+  const variableResolver = useMemo(() => {
+    return VariableResolver.withLocalization(configuration);
+  }, [configuration]);
+
+  // Resolve variables in text using the full resolver (must be before early returns)
+  const resolveVariable = useCallback((text: string): string => {
+    if (!text) return '';
+    return variableResolver.resolve(text);
+  }, [variableResolver]);
+
+  const processedProperties = resolvedComponent.properties || {};
+
+  // Don't render if not visible (resolved from dynamic values)
+  if (resolvedComponent.visible === false || processedProperties.visible === false) {
+    return null;
+  }
+
+  // Get combined style with absolute position support and custom CSS
+  const style = LayoutEngine.getComponentStyle(
+    resolvedComponent.layout,
+    resolvedComponent.appearance,
+    resolvedComponent.size,
+    resolvedComponent.type,
+    processedProperties,
+    resolvedComponent.absolutePosition,
+    resolvedComponent.zIndex,
+    processedProperties.customCSS
+  );
+
+  /**
+   * Theme-aware color resolution
+   * Resolves CSS variables and color objects using the provided theme
+   */
+  const resolveColor = (color: any, fallback?: string): string => {
+    if (!color) return fallback || 'transparent';
+    
+    if (typeof color === 'string') {
+      // Handle CSS variable references
+      if (color.includes('var(--')) {
+        return resolveCSSVariable(color) || fallback || 'transparent';
+      }
+      return color;
+    }
+    
+    // Handle object format
+    if (typeof color === 'object') {
+      // Check for resolvedColor first (pre-computed by web builder)
+      if (color.resolvedColor) {
+        return resolveColor(color.resolvedColor, fallback);
+      }
+      
+      if (color.type === 'color' && color.color) {
+        return resolveColor(color.color, fallback);
+      }
+      
+      if (color.type === 'gradient' && color.gradient?.stops?.length) {
+        const firstStop = color.gradient.stops[0];
+        if (firstStop?.color) {
+          return resolveColor(firstStop.color, fallback);
+        }
+      }
+      
+      // HSL format
+      if (color.type === 'hsl' || (color.h !== undefined && color.s !== undefined && color.l !== undefined)) {
+        const h = color.h ?? 0;
+        const s = color.s ?? 0;
+        const l = color.l ?? 0;
+        const a = color.a ?? color.opacity ?? 1;
+        if (a < 1) {
+          return `hsla(${h}, ${s}%, ${l}%, ${a})`;
+        }
+        return `hsl(${h}, ${s}%, ${l}%)`;
+      }
+      
+      // RGBA format
+      if (color.type === 'rgba' || (color.r !== undefined && color.g !== undefined && color.b !== undefined)) {
+        const r = color.r ?? 0;
+        const g = color.g ?? 0;
+        const b = color.b ?? 0;
+        const a = color.a ?? color.opacity ?? 1;
+        return `rgba(${r}, ${g}, ${b}, ${a})`;
+      }
+      
+      if (color.hex) return color.hex;
+      if (color.value) return color.value;
+      if (color.color && typeof color.color === 'string') return color.color;
+    }
+    
+    return fallback || 'transparent';
+  };
+
+  /**
+   * Resolve CSS variable to actual color value using theme
+   * UPDATED: Handle themingMode disabled
+   */
+  const resolveCSSVariable = (cssVar: string): string | undefined => {
+    const varMatch = cssVar.match(/var\(--([a-zA-Z-]+)\)/);
+    if (!varMatch) return cssVar;
+    
+    const varName = varMatch[1];
+    
+    // Extract opacity if present
+    const opacityMatch = cssVar.match(/\/\s*([\d.]+)\s*\)?$/);
+    const opacity = opacityMatch ? parseFloat(opacityMatch[1]) : 1;
+    
+    // If theming is disabled, use default colors only
+    if (theme?.themingMode === 'disabled') {
+      const defaultColor = ThemeColorResolver.getDefaultVariableColor(varName);
+      return opacity < 1 ? applyOpacity(defaultColor, opacity) : defaultColor;
+    }
+    
+    // First try theme's resolvedColors (direct lookup)
+    if (theme?.resolvedColors?.[varName]) {
+      const color = parseHexColor(theme.resolvedColors[varName]);
+      return opacity < 1 ? applyOpacity(color, opacity) : color;
+    }
+    
+    // Then try ThemeColorResolver (which was initialized with theme)
+    const resolved = ThemeColorResolver.resolveVariable(varName);
+    if (resolved) {
+      const parsedResolved = parseHexColor(resolved);
+      return opacity < 1 ? applyOpacity(parsedResolved, opacity) : parsedResolved;
+    }
+    
+    // Fallback to defaults
+    const defaultColor = ThemeColorResolver.getDefaultVariableColor(varName);
+    return opacity < 1 ? applyOpacity(defaultColor, opacity) : defaultColor;
+  };
+
+  /**
+   * Parse 8-character hex colors (#AARRGGBB format) to rgba
+   */
+  const parseHexColor = (hex: string): string => {
+    if (!hex || typeof hex !== 'string') return hex;
+    
+    // Handle 8-character hex with alpha prefix (#AARRGGBB format)
+    if (hex.length === 9 && hex.startsWith('#')) {
+      const alpha = parseInt(hex.substring(1, 3), 16) / 255;
+      const r = parseInt(hex.substring(3, 5), 16);
+      const g = parseInt(hex.substring(5, 7), 16);
+      const b = parseInt(hex.substring(7, 9), 16);
+      return `rgba(${r}, ${g}, ${b}, ${alpha.toFixed(2)})`;
+    }
+    
+    return hex;
+  };
+
+  /**
+   * Apply opacity to a color
+   */
+  const applyOpacity = (color: string, opacity: number): string => {
+    if (color.startsWith('#')) {
+      const cleanHex = color.replace('#', '');
+      if (cleanHex.length >= 6) {
+        const r = parseInt(cleanHex.substring(0, 2), 16);
+        const g = parseInt(cleanHex.substring(2, 4), 16);
+        const b = parseInt(cleanHex.substring(4, 6), 16);
+        return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+      }
+    }
+    
+    if (color.startsWith('hsl(')) {
+      const match = color.match(/hsl\(\s*([\d.]+)\s*,?\s*([\d.]+)%?\s*,?\s*([\d.]+)%?\s*\)/);
+      if (match) {
+        return `hsla(${match[1]}, ${match[2]}%, ${match[3]}%, ${opacity})`;
+      }
+    }
+    
+    return color;
+  };
+
+  /**
+   * Universal children rendering function for composite components
+   * Renders children in a stack layout (horizontal, vertical, or layered)
+   */
+  const renderWithChildren = (component: PaywallComponent): JSX.Element => {
+    if (!component.children?.length) {
+      return <View />;
+    }
+    
+    // Build container style from component's containerLayout - uses canonical 'direction'
+    const containerLayout = (component as any).containerLayout || { direction: 'vertical' };
+    const containerStyle: ViewStyle = {
+      flexDirection: containerLayout.direction === 'horizontal' ? 'row' : 'column',
+    };
+    
+    // Add gap (React Native doesn't support gap directly, use margin on children)
+    if (containerLayout.gap) {
+      // Will need to add margin to children instead
+    }
+    
+    // Add alignment
+    if (containerLayout.verticalAlignment) {
+      containerStyle.alignItems = containerLayout.verticalAlignment === 'center' ? 'center' 
+        : containerLayout.verticalAlignment === 'end' ? 'flex-end' 
+        : 'flex-start';
+    }
+    
+    if (containerLayout.horizontalAlignment) {
+      containerStyle.justifyContent = containerLayout.horizontalAlignment === 'center' ? 'center'
+        : containerLayout.horizontalAlignment === 'end' ? 'flex-end'
+        : containerLayout.horizontalAlignment === 'space-between' ? 'space-between'
+        : 'flex-start';
+    }
+    
+    return (
+      <View style={[containerStyle, style]}>
+        {component.children.map((child) => (
+          <ComponentRenderer
+            key={child.id}
+            component={child}
+            configuration={configuration}
+            theme={theme}
+            onButtonPress={onButtonPress}
+            stateManager={stateManager}
+            isPreviewMode={isPreviewMode}
+          />
+        ))}
+      </View>
+    );
+  };
+
+  // Render child component helper for accordion etc.
+  const renderChild = (child: PaywallComponent) => (
+    <ComponentRenderer
+      key={child.id}
+      component={child}
+      configuration={configuration}
+      theme={theme}
+      onButtonPress={onButtonPress}
+      stateManager={stateManager}
+      isPreviewMode={isPreviewMode}
+    />
+  );
+
+  // Animation wrapper helper
+  const wrapWithAnimation = (content: JSX.Element): JSX.Element => {
+    const animationMode = processedProperties.animationMode;
+    const animationPreset = processedProperties.animationPreset;
+    
+    if (animationMode === 'none' || !animationPreset) {
+      return content;
+    }
+    
+    return (
+      <AnimatedWrapper
+        preset={animationPreset}
+        trigger={animationMode === 'loop' ? 'loop' : 'enter'}
+        duration={processedProperties.animationDuration}
+        delay={processedProperties.animationDelay}
+        easing={processedProperties.animationEasing}
+      >
+        {content}
+      </AnimatedWrapper>
+    );
+  };
+
+  /**
+   * Helper to map alignment strings to flex values
+   * FIXED: Proper mapping for both axes
+   */
+  const mapAlignment = (align?: string): 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'space-between' => {
+    switch (align) {
+      case 'start': return 'flex-start';
+      case 'center': return 'center';
+      case 'end': return 'flex-end';
+      case 'stretch': return 'stretch';
+      case 'space-between': return 'space-between';
+      default: return 'flex-start';
+    }
+  };
+
+  // Helper to get gap value from containerLayout
+  const getGapValue = (gap: any): number => {
+    if (typeof gap === 'number') return gap;
+    if (gap && typeof gap === 'object' && 'value' in gap) return gap.value;
+    return 8;
+  };
+
+  // Helper to parse color values (HSL, hex, rgba, gradient, or object format)
+  const parseColorValue = (color: any): string => {
+    return resolveColor(color, 'transparent');
+  };
+
+  // Helper to parse size values (number or { value, unit } format)
+  const parseSizeValue = (size: any): number | undefined => {
+    if (typeof size === 'number') return size;
+    if (size && typeof size === 'object' && 'value' in size) return size.value;
+    return undefined;
+  };
+
+  // Helper to extract gradient config from backgroundColor
+  const extractGradientConfig = (backgroundColor: any): GradientConfig | null => {
+    if (!backgroundColor || typeof backgroundColor !== 'object') return null;
+    
+    if (backgroundColor.type === 'gradient' && backgroundColor.gradient) {
+      const gradient = backgroundColor.gradient;
+      return {
+        type: gradient.type || 'linear',
+        angle: gradient.angle,
+        stops: (gradient.stops || []).map((stop: any) => {
+          const rawPos = stop.position !== undefined ? stop.position : stop.offset;
+          let posD = 0;
+          if (typeof rawPos === 'number') {
+            posD = rawPos;
+          } else if (typeof rawPos === 'string') {
+            const trimmed = rawPos.trim();
+            if (trimmed.endsWith('%')) {
+              const val = parseFloat(trimmed.slice(0, -1));
+              posD = isNaN(val) ? 0 : val / 100;
+            } else {
+              const val = parseFloat(trimmed);
+              posD = isNaN(val) ? 0 : val;
+            }
+          }
+          const position = posD <= 1 ? posD : posD / 100;
+          return {
+            color: parseColorValue(stop.color),
+            position,
+          };
+        }),
+      };
+    }
+    
+    return null;
+  };
+
+  /**
+   * Get text color from properties or theme
+   * Falls back to theme's text color if not specified
+   */
+  const getTextColor = (): string => {
+    // Check component properties first
+    if (processedProperties.color) {
+      return resolveColor(processedProperties.color);
+    }
+    if (processedProperties.textColor) {
+      return resolveColor(processedProperties.textColor);
+    }
+    
+    // Fall back to theme text color
+    if (theme?.textColor) {
+      return theme.textColor;
+    }
+    if (theme?.resolvedColors?.foreground) {
+      return theme.resolvedColors.foreground;
+    }
+    
+    // Default fallback
+    return '#1A1A2E';
+  };
+
+  // Render based on component type
+  switch (component.type) {
+    case 'text':
+      const textColor = getTextColor();
+      return (
+        <Text style={[styles.text, style, { color: textColor }]}>
+          {resolveVariable(processedProperties.text || '')}
+        </Text>
+      );
+
+    case 'image': {
+      const imgUrl = processedProperties.imageUrl
+        || processedProperties.src
+        || processedProperties.source
+        || '';
+      const imgObjectFit = processedProperties.objectFit || 'cover';
+      const imgAlt = processedProperties.altText || processedProperties.alt || '';
+      
+      if (imgUrl) {
+        return (
+          <Image
+            source={{ uri: imgUrl }}
+            // `style` is a shared ViewStyle whose `overflow: 'scroll'` is not valid
+            // for ImageStyle; cast to ImageStyle (RN ignores the extra value).
+            style={[styles.image, style as ImageStyle]}
+            resizeMode={imgObjectFit as 'cover' | 'contain' | 'stretch' | 'center'}
+            accessibilityLabel={imgAlt}
+          />
+        );
+      }
+      return (
+        <View style={[styles.mediaPlaceholder, style]}>
+          <Text style={styles.placeholderIcon}>🖼</Text>
+          <Text style={styles.placeholderText}>No image</Text>
+        </View>
+      );
+    }
+
+    case 'stack': {
+      // Enhanced stack rendering with containerLayout support
+      // Uses canonical 'direction' property
+      const containerLayout = (component as any).containerLayout || {};
+      const direction = containerLayout.direction || 'vertical';
+      const gap = getGapValue(containerLayout.gap);
+      const isHorizontal = direction === 'horizontal';
+      
+      // Layered mode (similar to CSS Grid stacking)
+      if (direction === 'layered') {
+        return (
+          <View style={[style, { position: 'relative' }]}>
+            {component.children?.map((child, index) => {
+              // Size-based inference: fill+fill = non-measuring background layer
+              const childSize = (child as any).size;
+              const isBackground = childSize?.width?.type === 'fill' && childSize?.height?.type === 'fill';
+              return (
+                <View
+                  key={child.id}
+                  // mapAlignment can yield 'space-between' which is valid for
+                  // justifyContent but not the narrower alignItems FlexAlignType;
+                  // cast to ViewStyle (RN ignores an out-of-range alignItems).
+                  style={{
+                    position: isBackground ? 'absolute' : 'relative',
+                    top: isBackground ? 0 : undefined,
+                    left: isBackground ? 0 : undefined,
+                    right: isBackground ? 0 : undefined,
+                    bottom: isBackground ? 0 : undefined,
+                    zIndex: isBackground ? 0 : index + 1,
+                    alignItems: mapAlignment(containerLayout.horizontalAlignment),
+                    justifyContent: mapAlignment(containerLayout.verticalAlignment),
+                  } as ViewStyle}
+                >
+                  <ComponentRenderer
+                    key={child.id}
+                    component={child}
+                    configuration={configuration}
+                    theme={theme}
+                    onButtonPress={onButtonPress}
+                    stateManager={stateManager}
+                    isPreviewMode={isPreviewMode}
+                  />
+                </View>
+              );
+            })}
+          </View>
+        );
+      }
+      
+      /**
+       * Direction-aware alignment mapping
+       * For horizontal direction (row):
+       *   - horizontalAlignment controls justifyContent (main axis)
+       *   - verticalAlignment controls alignItems (cross axis)
+       * For vertical direction (column):
+       *   - verticalAlignment controls justifyContent (main axis)
+       *   - horizontalAlignment controls alignItems (cross axis)
+       */
+      const justifyContent = isHorizontal 
+        ? mapAlignment(containerLayout.horizontalAlignment)
+        : mapAlignment(containerLayout.verticalAlignment);
+        
+      const alignItems = isHorizontal
+        ? mapAlignment(containerLayout.verticalAlignment)
+        : mapAlignment(containerLayout.horizontalAlignment);
+      
+      return (
+        <View style={[styles.stack, style, {
+          flexDirection: isHorizontal ? 'row' : 'column',
+          gap: gap,
+          // justifyContent/alignItems come from mapAlignment whose 'stretch' value
+          // is valid for alignItems but not justifyContent; cast (RN ignores it).
+          justifyContent,
+          alignItems,
+        } as ViewStyle]}>
+          {component.children?.map((child) => (
+            <ComponentRenderer
+              key={child.id}
+              component={child}
+              configuration={configuration}
+              theme={theme}
+              onButtonPress={onButtonPress}
+              stateManager={stateManager}
+              isPreviewMode={isPreviewMode}
+            />
+          ))}
+        </View>
+      );
+    }
+
+    case 'divider':
+      // Use theme border color for divider
+      const dividerColor = resolveColor(
+        resolvedComponent.appearance?.backgroundColor,
+        theme?.borderColor || theme?.resolvedColors?.border || '#E5E7EB'
+      );
+      return (
+        <View
+          style={[
+            styles.divider,
+            style,
+            {
+              backgroundColor: dividerColor,
+              height: processedProperties.orientation === 'vertical' ? '100%' : 1,
+              width: processedProperties.orientation === 'vertical' ? 1 : '100%',
+            },
+          ]}
+        />
+      );
+
+    case 'spacer':
+      return (
+        <View
+          style={[
+            style,
+            {
+              width: processedProperties.size || 16,
+              height: processedProperties.size || 16,
+            },
+          ]}
+        />
+      );
+
+    // Interactive components (keep dedicated handlers)
+    case 'checkbox':
+      return (
+        <CheckboxComponent
+          component={resolvedComponent}
+          stateManager={stateManager}
+          isPreviewMode={isPreviewMode}
+        />
+      );
+
+    case 'toggle':
+      return (
+        <ToggleComponent
+          component={resolvedComponent}
+          stateManager={stateManager}
+          isPreviewMode={isPreviewMode}
+        />
+      );
+
+    case 'segmented-picker':
+      return (
+        <SegmentedPickerComponent
+          component={resolvedComponent}
+          stateManager={stateManager}
+          isPreviewMode={isPreviewMode}
+        />
+      );
+
+    case 'price':
+      const priceColor = getTextColor();
+      return (
+        <View style={[styles.priceContainer, style]}>
+          <Text style={[styles.priceText, { color: priceColor }]}>
+            {processedProperties.currency || '$'}
+            {processedProperties.amount || '0.00'}
+          </Text>
+          {processedProperties.period && (
+            <Text style={[styles.pricePeriod, { color: applyOpacity(priceColor, 0.6) }]}>
+              /{processedProperties.period}
+            </Text>
+          )}
+        </View>
+      );
+
+    case 'countdown':
+      return (
+        <CountdownComponent
+          component={resolvedComponent}
+          configuration={configuration}
+          style={style}
+        />
+      );
+
+    case 'carousel':
+      return (
+        <CarouselComponent
+          component={resolvedComponent}
+          configuration={configuration}
+          style={style}
+          onButtonPress={onButtonPress}
+          stateManager={stateManager}
+        />
+      );
+
+    case 'accordion':
+      return (
+        <AccordionComponent
+          component={resolvedComponent}
+          renderChild={renderChild}
+          stateManager={stateManager}
+          isPreviewMode={isPreviewMode}
+        />
+      );
+
+    case 'slider':
+      return (
+        <SliderComponent
+          component={resolvedComponent}
+          stateManager={stateManager}
+          isPreviewMode={isPreviewMode}
+        />
+      );
+
+    case 'tabs':
+      return (
+        <TabsComponent
+          component={resolvedComponent}
+          children={component.children || []}
+          renderChild={renderChild}
+          stateManager={stateManager}
+          isPreviewMode={isPreviewMode}
+        />
+      );
+
+    case 'navigation':
+      return (
+        <NavigationComponent
+          component={resolvedComponent}
+          children={component.children || []}
+          renderChild={renderChild}
+          stateManager={stateManager}
+          isPreviewMode={isPreviewMode}
+        />
+      );
+
+    case 'confetti':
+      return (
+        <ConfettiComponent
+          component={resolvedComponent}
+          stateManager={stateManager}
+          isPreviewMode={isPreviewMode}
+        />
+      );
+
+    case 'delayed-x':
+      return (
+        <DelayedXComponent
+          component={resolvedComponent}
+          configuration={configuration}
+          renderChild={renderChild}
+          stateManager={stateManager}
+          isPreviewMode={isPreviewMode}
+        />
+      );
+
+    case 'haptic-feedback':
+      return (
+        <HapticFeedbackComponent
+          component={resolvedComponent}
+          isPreviewMode={isPreviewMode}
+        />
+      );
+
+    case 'button': {
+      // Theme-aware button rendering
+      const buttonBgColor = resolveColor(
+        resolvedComponent.appearance?.backgroundColor,
+        theme?.primaryColor || theme?.resolvedColors?.primary || '#007AFF'
+      );
+      const buttonTextColor = processedProperties.textColor 
+        ? resolveColor(processedProperties.textColor)
+        : '#FFFFFF';
+      
+      return (
+        <TouchableOpacity
+          style={[styles.button, style, { backgroundColor: buttonBgColor }]}
+          onPress={() => onButtonPress?.(component.id, processedProperties.action || 'tap')}
+        >
+          <Text style={[styles.buttonText, { color: buttonTextColor }]}>
+            {resolveVariable(processedProperties.text || processedProperties.label || 'Button')}
+          </Text>
+        </TouchableOpacity>
+      );
+    }
+
+    case 'badge': {
+      const badgeBgColor = resolveColor(
+        resolvedComponent.appearance?.backgroundColor,
+        theme?.primaryColor || '#FF3B30'
+      );
+      const badgeTextColor = processedProperties.textColor 
+        ? resolveColor(processedProperties.textColor)
+        : '#FFFFFF';
+        
+      return (
+        <View style={[styles.badge, style, { backgroundColor: badgeBgColor }]}>
+          <Text style={[styles.badgeText, { color: badgeTextColor }]}>
+            {resolveVariable(processedProperties.text || '')}
+          </Text>
+        </View>
+      );
+    }
+
+    case 'feature-list': {
+      const features = processedProperties.features || [];
+      const checkColor = theme?.primaryColor || theme?.resolvedColors?.primary || '#34C759';
+      const textColor = getTextColor();
+      
+      return (
+        <View style={[styles.featureList, style]}>
+          {features.map((feature: string, index: number) => (
+            <View key={index} style={styles.featureItem}>
+              <Text style={[styles.featureIcon, { color: checkColor }]}>✓</Text>
+              <Text style={[styles.featureText, { color: textColor }]}>
+                {resolveVariable(feature)}
+              </Text>
+            </View>
+          ))}
+        </View>
+      );
+    }
+
+
+    case 'shape': {
+      // Render shape primitives (rectangles, circles, etc.)
+      const shapeType = processedProperties.shapeType || 'rectangle';
+      const cornerRadius = resolvedComponent.appearance?.cornerRadius || 0;
+      const backgroundColor = resolvedComponent.appearance?.backgroundColor;
+      const borderWidth = resolvedComponent.appearance?.borderWidth || 0;
+      const borderColor = resolvedComponent.appearance?.borderColor;
+      // backgroundColor may be a plain color string or a structured object;
+      // only the object branch carries an opacity field.
+      const opacity = (typeof backgroundColor === 'object' ? backgroundColor?.opacity : undefined) ?? 1;
+      
+      // Check for gradient background
+      const gradientConfig = extractGradientConfig(backgroundColor);
+      const effectiveBorderRadius = shapeType === 'circle' ? 9999 : cornerRadius;
+      
+      // If gradient is detected and supported, use GradientView
+      if (gradientConfig && isGradientSupported()) {
+        return (
+          <GradientView
+            gradient={gradientConfig}
+            fallbackColor={parseColorValue(backgroundColor)}
+            style={[style, { opacity }]}
+            borderRadius={effectiveBorderRadius}
+            borderWidth={borderWidth}
+            borderColor={parseColorValue(borderColor)}
+          />
+        );
+      }
+      
+      // Fallback to solid color (uses first stop color for gradients)
+      const bgColor = parseColorValue(backgroundColor);
+      
+      return (
+        <View 
+          style={[
+            style,
+            {
+              backgroundColor: bgColor,
+              borderRadius: effectiveBorderRadius,
+              borderWidth,
+              borderColor: parseColorValue(borderColor),
+              opacity,
+            }
+          ]} 
+        />
+      );
+    }
+
+    case 'icon': {
+      // Render icon primitives using Lucide icons (same as web editor)
+      const rawIcon = processedProperties.iconName;
+      let iconName = 'Circle';
+      const { Platform } = require('react-native');
+      
+      if (rawIcon && typeof rawIcon === 'object' && 'iconName' in rawIcon) {
+        if (Platform.OS === 'ios' && (rawIcon as any).iconNameIos) {
+          iconName = (rawIcon as any).iconNameIos;
+        } else if (Platform.OS === 'android' && (rawIcon as any).iconNameAndroid) {
+          iconName = (rawIcon as any).iconNameAndroid;
+        } else {
+          iconName = (rawIcon as any).iconName || 'Circle';
+        }
+      } else if (typeof rawIcon === 'string') {
+        if (Platform.OS === 'ios' && processedProperties.iconNameIos) {
+          iconName = processedProperties.iconNameIos;
+        } else if (Platform.OS === 'android' && processedProperties.iconNameAndroid) {
+          iconName = processedProperties.iconNameAndroid;
+        } else {
+          iconName = rawIcon;
+        }
+      } else {
+        iconName = (processedProperties.name as string) || 'Circle';
+      }
+      const iconSize = parseSizeValue(processedProperties.iconSize) || parseSizeValue(processedProperties.size) || 24;
+      const iconColor = resolveColor(
+        processedProperties.iconColor || processedProperties.color,
+        getTextColor()
+      );
+      const strokeWidth = typeof processedProperties.strokeWidth === 'number'
+        ? processedProperties.strokeWidth
+        : 2;
+      
+      // Use getLucideIcon for SVG icon parity with web editor
+      const { getLucideIcon } = require('./utils/iconMapper');
+      const { component: IconComp, fallback } = getLucideIcon(iconName);
+      
+      if (IconComp) {
+        return (
+          <View style={[style, { alignItems: 'center', justifyContent: 'center' }]}>
+            <IconComp size={iconSize} color={iconColor} strokeWidth={strokeWidth} />
+          </View>
+        );
+      }
+      
+      // Emoji fallback for unmapped icons
+      const fallbackEmoji: Record<string, string> = {
+        'check': '✓', 'x': '✕', 'plus': '+', 'minus': '−',
+        'star': '☆', 'heart': '♡', 'circle': '○',
+      };
+      const emojiChar = fallbackEmoji[iconName.toLowerCase()] || '○';
+      
+      return (
+        <View style={[style, { width: iconSize, height: iconSize, alignItems: 'center', justifyContent: 'center' }]}>
+          <Text style={{ fontSize: iconSize * 0.8, color: iconColor, lineHeight: iconSize }}>
+            {emojiChar}
+          </Text>
+        </View>
+      );
+    }
+
+    case 'webp':
+    case 'gif': {
+      // Render animated/static images — same property chain as 'image'
+      const mediaUrl = processedProperties.imageUrl
+        || processedProperties.src
+        || processedProperties.source
+        || '';
+      const mediaObjectFit = processedProperties.objectFit || 'cover';
+      const mediaAlt = processedProperties.altText || processedProperties.alt || '';
+      
+      return mediaUrl ? (
+        <Image
+          source={{ uri: mediaUrl }}
+          // See note above: cast shared ViewStyle to ImageStyle for Image.
+          style={[styles.image, style as ImageStyle]}
+          resizeMode={mediaObjectFit as 'cover' | 'contain' | 'stretch' | 'center'}
+          accessibilityLabel={mediaAlt}
+        />
+      ) : (
+        <View style={[styles.mediaPlaceholder, style]}>
+          <Text style={styles.placeholderIcon}>🖼</Text>
+          <Text style={styles.placeholderText}>{component.type.toUpperCase()}</Text>
+        </View>
+      );
+    }
+
+    case 'video': {
+      // Video placeholder - in production, use expo-av or react-native-video
+      return (
+        <View style={[styles.mediaPlaceholder, style]}>
+          <Text style={styles.placeholderIcon}>🎬</Text>
+          <Text style={styles.placeholderText}>Video</Text>
+          {processedProperties.source && (
+            <Text style={styles.placeholderHint}>Source: {processedProperties.source}</Text>
+          )}
+        </View>
+      );
+    }
+
+    case 'lottie': {
+      // Lottie animation placeholder - in production, use lottie-react-native
+      return (
+        <View style={[styles.mediaPlaceholder, style]}>
+          <Text style={styles.placeholderIcon}>✨</Text>
+          <Text style={styles.placeholderText}>Lottie Animation</Text>
+          {processedProperties.source && (
+            <Text style={styles.placeholderHint}>Source: {processedProperties.source}</Text>
+          )}
+        </View>
+      );
+    }
+
+    case 'progress-loader':
+      return (
+        <ProgressLoaderComponent
+          component={resolvedComponent}
+          stateManager={stateManager}
+          isPreviewMode={isPreviewMode}
+        />
+      );
+
+    case 'chart-curve':
+      return (
+        <ChartCurveComponent
+          component={resolvedComponent}
+          stateManager={stateManager}
+          isPreviewMode={isPreviewMode}
+        />
+      );
+
+    case 'single-choice-grid':
+      return (
+        <SingleChoiceGridComponent
+          component={resolvedComponent}
+          stateManager={stateManager}
+          isPreviewMode={isPreviewMode}
+        />
+      );
+
+    case 'multi-choice-grid':
+      return (
+        <MultiChoiceGridComponent
+          component={resolvedComponent}
+          stateManager={stateManager}
+          isPreviewMode={isPreviewMode}
+        />
+      );
+
+    case 'drawer-modal':
+      return (
+        <DrawerModalComponent
+          component={resolvedComponent}
+          stateManager={stateManager}
+          isPreviewMode={isPreviewMode}
+          renderComponent={renderChild}
+        />
+      );
+
+    case 'timeline':
+      return (
+        <TimelineComponent
+          component={resolvedComponent}
+          stateManager={stateManager}
+          isPreviewMode={isPreviewMode}
+          renderComponent={renderChild}
+        />
+      );
+
+    case 'text-input':
+      return (
+        <TextInputComponent
+          component={resolvedComponent}
+          stateManager={stateManager}
+          isPreviewMode={isPreviewMode}
+        />
+      );
+
+    case 'star-rating-input':
+      return (
+        <StarRatingInputComponent
+          component={resolvedComponent}
+          stateManager={stateManager}
+          isPreviewMode={isPreviewMode}
+        />
+      );
+
+    case 'nps-scale':
+      return (
+        <NPSScaleComponent
+          component={resolvedComponent}
+          stateManager={stateManager}
+          isPreviewMode={isPreviewMode}
+        />
+      );
+
+    case 'oauth-button':
+      return (
+        <OAuthButtonComponent
+          component={resolvedComponent}
+          stateManager={stateManager}
+          isPreviewMode={isPreviewMode}
+        />
+      );
+
+    case 'progress-stepper':
+      return (
+        <ProgressStepperComponent
+          component={resolvedComponent}
+          stateManager={stateManager}
+          isPreviewMode={isPreviewMode}
+        />
+      );
+
+    case 'share-code':
+      return (
+        <ShareCodeComponent
+          component={resolvedComponent}
+          stateManager={stateManager}
+          isPreviewMode={isPreviewMode}
+        />
+      );
+
+    case 'share-buttons':
+      return (
+        <ShareButtonsComponent
+          component={resolvedComponent}
+          stateManager={stateManager}
+          isPreviewMode={isPreviewMode}
+          renderChild={(child, index) => (
+            <ComponentRenderer
+              key={child.id}
+              component={child}
+              configuration={configuration}
+              theme={theme}
+              onButtonPress={onButtonPress}
+              stateManager={stateManager}
+              isPreviewMode={isPreviewMode}
+            />
+          )}
+        />
+      );
+
+    case 'vertical-products':
+      return (
+        <VerticalProductsComponent
+          component={resolvedComponent}
+          configuration={configuration}
+          renderChild={(child: PaywallComponent) => (
+            <ComponentRenderer
+              key={child.id}
+              component={child}
+              configuration={configuration}
+              theme={theme}
+              onButtonPress={onButtonPress}
+              stateManager={stateManager}
+              isPreviewMode={isPreviewMode}
+            />
+          )}
+          stateManager={stateManager}
+          onAction={onButtonPress}
+        />
+      );
+
+    case 'horizontal-products':
+      return (
+        <HorizontalProductsComponent
+          component={resolvedComponent}
+          configuration={configuration}
+          renderChild={(child: PaywallComponent) => (
+            <ComponentRenderer
+              key={child.id}
+              component={child}
+              configuration={configuration}
+              theme={theme}
+              onButtonPress={onButtonPress}
+              stateManager={stateManager}
+              isPreviewMode={isPreviewMode}
+            />
+          )}
+          stateManager={stateManager}
+          onAction={onButtonPress}
+        />
+      );
+
+    case 'accolade-cps':
+      return (
+        <AccoladeCpsComponent
+          component={resolvedComponent}
+          stateManager={stateManager}
+          isPreviewMode={isPreviewMode}
+        />
+      );
+
+    case 'sticker-composite':
+      return (
+        <StickerCompositeComponent
+          component={resolvedComponent}
+          stateManager={stateManager}
+          isPreviewMode={isPreviewMode}
+        />
+      );
+
+    default:
+      // Fallback for unknown component types - render children if available (composite handling)
+      if (component.children?.length) {
+        return renderWithChildren(component);
+      }
+      return <View style={[styles.fallback, style]} />;
+  }
+};
+
+/**
+ * StyleSheet with minimal defaults
+ * Colors should come from theme, not hardcoded here
+ */
+const styles = StyleSheet.create({
+  text: {
+    fontSize: 16,
+    // Color set dynamically from theme
+  },
+  image: {
+    width: 100,
+    height: 100,
+  },
+  button: {
+    paddingVertical: 12,
+    paddingHorizontal: 24,
+    borderRadius: 8,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  buttonText: {
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  stack: {
+    flexDirection: 'column',
+  },
+  divider: {
+    // backgroundColor set dynamically from theme
+  },
+  badge: {
+    paddingVertical: 4,
+    paddingHorizontal: 8,
+    borderRadius: 4,
+  },
+  badgeText: {
+    fontSize: 12,
+    fontWeight: '600',
+  },
+  featureList: {
+    gap: 8,
+  },
+  featureItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+  featureIcon: {
+    fontSize: 16,
+    fontWeight: 'bold',
+  },
+  featureText: {
+    fontSize: 14,
+  },
+  priceContainer: {
+    flexDirection: 'row',
+    alignItems: 'baseline',
+  },
+  priceText: {
+    fontSize: 32,
+    fontWeight: 'bold',
+  },
+  pricePeriod: {
+    fontSize: 16,
+    marginLeft: 4,
+  },
+  package: {
+    padding: 16,
+    borderRadius: 12,
+    borderWidth: 2,
+  },
+  packageTitle: {
+    fontSize: 18,
+    fontWeight: '600',
+  },
+  packageSubtitle: {
+    fontSize: 14,
+    marginTop: 4,
+  },
+  fallback: {
+    padding: 8,
+  },
+  advancedWarning: {
+    backgroundColor: '#FFF3CD',
+    padding: 16,
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: '#FFE69C',
+    alignItems: 'center',
+  },
+  warningIcon: {
+    fontSize: 32,
+    marginBottom: 8,
+  },
+  warningTitle: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#000000',
+    marginBottom: 4,
+  },
+  warningText: {
+    fontSize: 13,
+    color: '#856404',
+    textAlign: 'center',
+    marginBottom: 4,
+  },
+  warningHint: {
+    fontSize: 11,
+    color: '#0056B3',
+    textAlign: 'center',
+  },
+  mediaPlaceholder: {
+    backgroundColor: '#F0F0F0',
+    padding: 16,
+    borderRadius: 8,
+    alignItems: 'center',
+    justifyContent: 'center',
+    minHeight: 60,
+  },
+  placeholderIcon: {
+    fontSize: 24,
+    marginBottom: 4,
+  },
+  placeholderText: {
+    fontSize: 12,
+    fontWeight: '600',
+    color: '#666666',
+  },
+  placeholderHint: {
+    fontSize: 10,
+    color: '#999999',
+    marginTop: 4,
+  },
+});