flowboard-react 0.1.0

package/src/components/FlowboardRenderer.tsx

@@ -0,0 +1,1957 @@
+import React, { useMemo } from 'react';
+import {
+  Animated,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+  Image,
+  type TextStyle,
+} from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import MaskedView from '@react-native-masked-view/masked-view';
+import LinearGradient from 'react-native-linear-gradient';
+import LottieView from 'lottie-react-native';
+import MaskInput from 'react-native-mask-input';
+import Svg, {
+  Circle,
+  G,
+  Line,
+  Polygon,
+  Text as SvgText,
+} from 'react-native-svg';
+import PagerView, {
+  type PagerViewOnPageSelectedEvent,
+} from 'react-native-pager-view';
+import {
+  insetsToStyle,
+  parseAlignment,
+  parseColor,
+  parseCrossAlignment,
+  parseDimension,
+  parseFlexAlignment,
+  parseFontWeight,
+  parseInsets,
+  parseResizeMode,
+  parseTextAlign,
+  parseTextDecoration,
+  resolveNumericValue,
+  resolveText,
+} from '../utils/flowboardUtils';
+import { resolveFontAwesomeIcon, FontAwesome6 } from '../core/fontAwesome';
+import { useSliderRegistry } from './widgets/sliderRegistry';
+
+const styles = StyleSheet.create({
+  root: { flex: 1 },
+  background: {
+    ...StyleSheet.absoluteFillObject,
+  },
+  safeArea: { flex: 1 },
+  progressWrapper: { width: '100%' },
+});
+
+type FlowboardRendererProps = {
+  screenData: Record<string, any>;
+  onAction: (action: string, data?: Record<string, any>) => void;
+  formData?: Record<string, any>;
+  onInputChange?: (id: string, value: any) => void;
+  enableFontAwesomeIcons?: boolean;
+  currentIndex?: number;
+  totalScreens?: number;
+};
+
+export default function FlowboardRenderer(props: FlowboardRendererProps) {
+  const {
+    screenData,
+    onAction,
+    formData = {},
+    onInputChange,
+    enableFontAwesomeIcons = true,
+    currentIndex = 0,
+    totalScreens = 1,
+  } = props;
+
+  const childrenData: any[] = Array.isArray(screenData.children)
+    ? screenData.children
+    : [];
+
+  const backgroundData = screenData.background;
+  const bgColorCode = screenData.backgroundColor;
+
+  const showProgress = screenData.showProgress === true;
+  const progressColor = parseColor(screenData.progressColor ?? '0xFF000000');
+  const progressThickness = Number(screenData.progressThickness ?? 4);
+  const progressRadius = Number(screenData.progressRadius ?? 0);
+  const progressStyle = screenData.progressStyle ?? 'linear';
+  const scrollable = screenData.scrollable === true;
+  const safeArea = screenData.safeArea !== false;
+
+  const padding = parseInsets(screenData.padding);
+  const paddingStyle = insetsToStyle(padding);
+
+  const content = (
+    <View style={{ flex: 1 }}>
+      {showProgress && (
+        <View style={[paddingStyle, { paddingBottom: 8 }]}>
+          {renderProgressBar(
+            currentIndex,
+            totalScreens,
+            progressColor,
+            progressThickness,
+            progressRadius,
+            progressStyle
+          )}
+        </View>
+      )}
+
+      {scrollable ? (
+        <ScrollView
+          contentContainerStyle={{
+            ...paddingStyle,
+            paddingTop: showProgress ? 0 : padding.top,
+          }}
+        >
+          <View
+            style={{
+              flexGrow: 1,
+              justifyContent: parseFlexAlignment(screenData.mainAxisAlignment),
+              alignItems: parseCrossAlignment(screenData.crossAxisAlignment),
+            }}
+          >
+            {childrenData.map((child, index) =>
+              buildWidget(child, {
+                onAction,
+                formData,
+                onInputChange,
+                allowFlexExpansion: true,
+                screenData,
+                enableFontAwesomeIcons,
+                key: `child-${index}`,
+              })
+            )}
+          </View>
+        </ScrollView>
+      ) : (
+        <View
+          style={{
+            flex: 1,
+            ...paddingStyle,
+            paddingTop: showProgress ? 0 : padding.top,
+            justifyContent: parseFlexAlignment(screenData.mainAxisAlignment),
+            alignItems: parseCrossAlignment(screenData.crossAxisAlignment),
+          }}
+        >
+          {childrenData.map((child, index) =>
+            buildWidget(child, {
+              onAction,
+              formData,
+              onInputChange,
+              allowFlexExpansion: true,
+              screenData,
+              enableFontAwesomeIcons,
+              key: `child-${index}`,
+            })
+          )}
+        </View>
+      )}
+    </View>
+  );
+
+  return (
+    <View style={styles.root}>
+      {renderBackground(backgroundData, bgColorCode)}
+      {safeArea ? (
+        <SafeAreaView style={styles.safeArea}>{content}</SafeAreaView>
+      ) : (
+        content
+      )}
+    </View>
+  );
+}
+
+function renderBackground(bgData: any, legacyColorCode?: string) {
+  if (!bgData) {
+    return (
+      <View
+        style={[
+          styles.background,
+          { backgroundColor: parseColor(legacyColorCode) },
+        ]}
+      />
+    );
+  }
+
+  if (typeof bgData === 'object') {
+    const type = bgData.type;
+    const fit = parseResizeMode(bgData.fit ?? 'cover');
+
+    switch (type) {
+      case 'gradient': {
+        const colors = Array.isArray(bgData.colors)
+          ? bgData.colors.map((c: string) => parseColor(c))
+          : [];
+        if (colors.length === 0) return null;
+        const start = alignmentToGradient(bgData.begin ?? 'topLeft');
+        const end = alignmentToGradient(bgData.end ?? 'bottomRight');
+        const stops = Array.isArray(bgData.stops)
+          ? bgData.stops.map((s: number) => Number(s))
+          : undefined;
+        return (
+          <LinearGradient
+            colors={colors}
+            start={start}
+            end={end}
+            locations={stops}
+            style={styles.background}
+          />
+        );
+      }
+      case 'image': {
+        const url = bgData.url;
+        if (!url) return null;
+        return (
+          <Image
+            source={{ uri: url }}
+            style={styles.background}
+            resizeMode={fit}
+          />
+        );
+      }
+      case 'asset': {
+        const path = bgData.path;
+        if (!path) return null;
+        return (
+          <Image
+            source={{ uri: path }}
+            style={styles.background}
+            resizeMode={fit}
+          />
+        );
+      }
+      case 'color': {
+        return (
+          <View
+            style={[
+              styles.background,
+              { backgroundColor: parseColor(bgData.color) },
+            ]}
+          />
+        );
+      }
+      default:
+        break;
+    }
+  }
+
+  return <View style={[styles.background, { backgroundColor: '#ffffff' }]} />;
+}
+
+function renderProgressBar(
+  currentIndex: number,
+  totalScreens: number,
+  color: string,
+  thickness: number,
+  radius: number,
+  style: string
+) {
+  if (style === 'dotted') {
+    return (
+      <View style={{ flexDirection: 'row' }}>
+        {Array.from({ length: totalScreens }).map((_, index) => {
+          const isActive = index <= currentIndex;
+          return (
+            <View
+              key={`dot-${index}`}
+              style={{
+                flex: 1,
+                height: thickness,
+                marginRight: index < totalScreens - 1 ? 4 : 0,
+                backgroundColor: isActive ? color : withOpacity(color, 0.1),
+                borderRadius: radius,
+              }}
+            />
+          );
+        })}
+      </View>
+    );
+  }
+
+  const progress = totalScreens > 0 ? (currentIndex + 1) / totalScreens : 0;
+  return (
+    <View
+      style={{
+        width: '100%',
+        height: thickness,
+        borderRadius: radius,
+        backgroundColor: withOpacity(color, 0.1),
+        overflow: 'hidden',
+      }}
+    >
+      <View
+        style={{
+          width: `${progress * 100}%`,
+          height: '100%',
+          backgroundColor: color,
+          borderRadius: radius,
+        }}
+      />
+    </View>
+  );
+}
+
+function buildWidget(
+  json: Record<string, any>,
+  params: {
+    onAction: (action: string, data?: Record<string, any>) => void;
+    formData: Record<string, any>;
+    onInputChange?: (id: string, value: any) => void;
+    allowFlexExpansion?: boolean;
+    screenData: Record<string, any>;
+    enableFontAwesomeIcons: boolean;
+    key?: string;
+  }
+): React.ReactNode {
+  if (!json || typeof json !== 'object') return null;
+  const type = json.type;
+  const id = json.id;
+  const props = { ...(json.properties ?? {}) } as Record<string, any>;
+  const childrenJson = Array.isArray(json.children) ? json.children : undefined;
+  const childJson = json.child as Record<string, any> | undefined;
+  const action = json.action as string | undefined;
+  const actionPayload = action ? buildActionPayload(props, json) : undefined;
+
+  let node: React.ReactNode = null;
+
+  switch (type) {
+    case 'column': {
+      const spacing = Number(props.spacing ?? props.gap ?? 0);
+      const mainAxisSize = props.mainAxisSize === 'min' ? 'min' : 'max';
+      const childWidgets = (childrenJson ?? []).map((child, index) => (
+        <React.Fragment key={`column-${index}`}>
+          {buildWidget(child, { ...params, allowFlexExpansion: true })}
+          {spacing > 0 && index < (childrenJson?.length ?? 0) - 1 ? (
+            <View style={{ height: spacing }} />
+          ) : null}
+        </React.Fragment>
+      ));
+      node = (
+        <View
+          style={{
+            flexDirection: 'column',
+            justifyContent: parseFlexAlignment(props.mainAxisAlignment),
+            alignItems: parseCrossAlignment(props.crossAxisAlignment),
+            flexGrow: mainAxisSize === 'max' ? 1 : 0,
+          }}
+        >
+          {childWidgets}
+        </View>
+      );
+      break;
+    }
+    case 'row': {
+      const spacing = Number(props.spacing ?? props.gap ?? 0);
+      const mainAxisSize = props.mainAxisSize === 'min' ? 'min' : 'max';
+      const childWidgets = (childrenJson ?? []).map((child, index) => (
+        <React.Fragment key={`row-${index}`}>
+          {buildWidget(child, { ...params, allowFlexExpansion: true })}
+          {spacing > 0 && index < (childrenJson?.length ?? 0) - 1 ? (
+            <View style={{ width: spacing }} />
+          ) : null}
+        </React.Fragment>
+      ));
+      node = (
+        <View
+          style={{
+            flexDirection: 'row',
+            justifyContent: parseFlexAlignment(props.mainAxisAlignment),
+            alignItems: parseCrossAlignment(props.crossAxisAlignment),
+            flexGrow: mainAxisSize === 'max' ? 1 : 0,
+          }}
+        >
+          {childWidgets}
+        </View>
+      );
+      break;
+    }
+    case 'container': {
+      const gradient = parseGradient(props.background);
+      const width = normalizeDimension(parseDimension(props.width));
+      const height = normalizeDimension(parseDimension(props.height));
+      const borderRadius = props.borderRadius
+        ? Number(props.borderRadius)
+        : undefined;
+      const borderColor = props.borderColor
+        ? parseColor(props.borderColor)
+        : undefined;
+      const borderWidth = borderColor ? 1 : 0;
+      const padding = parseInsets(props.padding);
+
+      const content = childJson
+        ? buildWidget(childJson, { ...params, allowFlexExpansion: false })
+        : null;
+
+      if (gradient) {
+        node = (
+          <LinearGradient
+            colors={gradient.colors}
+            start={gradient.start}
+            end={gradient.end}
+            locations={gradient.stops}
+            style={{
+              width,
+              height,
+              borderRadius,
+              borderColor,
+              borderWidth,
+              overflow: 'hidden',
+              ...insetsToStyle(padding),
+            }}
+          >
+            {content}
+          </LinearGradient>
+        );
+      } else {
+        node = (
+          <View
+            style={{
+              width,
+              height,
+              backgroundColor: parseColor(props.backgroundColor),
+              borderRadius,
+              borderColor,
+              borderWidth,
+              ...insetsToStyle(padding),
+            }}
+          >
+            {content}
+          </View>
+        );
+      }
+      break;
+    }
+    case 'text': {
+      const rawText = props.text ?? '';
+      const resolvedText = resolveText(String(rawText), params.formData);
+      const gradient = parseGradient(props.foreground);
+      const textStyle = getTextStyle(props, 'color');
+      const align = parseTextAlign(props.textAlign);
+      if (gradient) {
+        node = (
+          <GradientText
+            text={resolvedText}
+            gradient={gradient}
+            style={[textStyle, { textAlign: align }]}
+          />
+        );
+      } else {
+        node = (
+          <Text style={[textStyle, { textAlign: align }]}>{resolvedText}</Text>
+        );
+      }
+      break;
+    }
+    case 'rich_text': {
+      const spansList = Array.isArray(props.spans) ? props.spans : [];
+      const richTextGradient = parseGradient(props.foreground);
+      const align = parseTextAlign(props.textAlign);
+      if (richTextGradient) {
+        const combined = spansList
+          .map((span) => resolveText(String(span.text ?? ''), params.formData))
+          .join('');
+        node = (
+          <GradientText
+            text={combined}
+            gradient={richTextGradient}
+            style={{ textAlign: align }}
+          />
+        );
+      } else {
+        node = (
+          <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
+            {spansList.map((span, index) => {
+              const spanText = resolveText(
+                String(span.text ?? ''),
+                params.formData
+              );
+              const spanStyle = getTextStyle(span, 'color');
+              const spanGradient = parseGradient(span.foreground);
+              if (spanGradient) {
+                return (
+                  <GradientText
+                    key={`span-${index}`}
+                    text={spanText}
+                    gradient={spanGradient}
+                    style={[spanStyle, { textAlign: align }]}
+                  />
+                );
+              }
+              return (
+                <Text
+                  key={`span-${index}`}
+                  style={[spanStyle, { textAlign: align }]}
+                >
+                  {spanText}
+                </Text>
+              );
+            })}
+          </View>
+        );
+      }
+      break;
+    }
+    case 'button': {
+      const gradient = parseGradient(props.background);
+      const borderRadius = Number(props.borderRadius ?? 10);
+      const width = normalizeDimension(parseDimension(props.width)) ?? '100%';
+      const height = normalizeDimension(parseDimension(props.height)) ?? 50;
+      const label = props.label ?? 'Button';
+      const textStyle = getTextStyle(
+        { ...props, height: null },
+        'textColor',
+        '0xFFFFFFFF'
+      );
+
+      const content = (
+        <View
+          style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}
+        >
+          <Text style={textStyle}>{label}</Text>
+        </View>
+      );
+
+      if (gradient) {
+        node = (
+          <Pressable
+            onPress={
+              action
+                ? () => params.onAction(action, actionPayload ?? props)
+                : undefined
+            }
+            style={{ width, height }}
+          >
+            <LinearGradient
+              colors={gradient.colors}
+              start={gradient.start}
+              end={gradient.end}
+              locations={gradient.stops}
+              style={{ flex: 1, borderRadius, overflow: 'hidden' }}
+            >
+              {content}
+            </LinearGradient>
+          </Pressable>
+        );
+      } else {
+        node = (
+          <Pressable
+            onPress={
+              action
+                ? () => params.onAction(action, actionPayload ?? props)
+                : undefined
+            }
+            style={{
+              width,
+              height,
+              backgroundColor: parseColor(props.color ?? '0xFF2196F3'),
+              borderRadius,
+              justifyContent: 'center',
+              alignItems: 'center',
+            }}
+          >
+            {content}
+          </Pressable>
+        );
+      }
+      break;
+    }
+    case 'text_input': {
+      node = (
+        <DynamicInput
+          initialValue={params.formData[id ?? ''] ?? ''}
+          properties={props}
+          onChanged={(value) => {
+            if (params.onInputChange && id) {
+              params.onInputChange(id, value);
+            }
+          }}
+        />
+      );
+      break;
+    }
+    case 'spacer': {
+      node = (
+        <View
+          style={{
+            height: normalizeDimension(parseDimension(props.height)),
+            width: normalizeDimension(parseDimension(props.width)),
+          }}
+        />
+      );
+      break;
+    }
+    case 'expanded': {
+      const expandedChild = childJson
+        ? buildWidget(childJson, { ...params, allowFlexExpansion: true })
+        : null;
+      if (params.allowFlexExpansion) {
+        return <View style={{ flex: 1 }}>{expandedChild}</View>;
+      }
+      return expandedChild;
+    }
+    case 'padding': {
+      const padding = parseInsets(props.padding ?? 0);
+      node = (
+        <View style={insetsToStyle(padding)}>
+          {childJson ? buildWidget(childJson, { ...params }) : null}
+        </View>
+      );
+      break;
+    }
+    case 'align': {
+      const alignment = parseAlignment(props.alignment ?? 'center');
+      node = (
+        <View
+          style={{
+            justifyContent: alignment.justifyContent,
+            alignItems: alignment.alignItems,
+          }}
+        >
+          {childJson ? buildWidget(childJson, { ...params }) : null}
+        </View>
+      );
+      break;
+    }
+    case 'selection_list': {
+      node = (
+        <SelectionList
+          properties={props}
+          options={Array.isArray(json.options) ? json.options : []}
+          initialValue={params.formData[id ?? '']}
+          onChanged={(value) => {
+            if (params.onInputChange && id) {
+              params.onInputChange(id, value);
+            }
+          }}
+          onAction={params.onAction}
+          buildWidget={(widgetJson) =>
+            buildWidget(widgetJson, { ...params, allowFlexExpansion: true })
+          }
+        />
+      );
+      break;
+    }
+    case 'image': {
+      const source = props.source;
+      const width = normalizeDimension(parseDimension(props.width, true));
+      const height = normalizeDimension(parseDimension(props.height, true));
+      if (source === 'asset') {
+        node = (
+          <Image
+            source={{ uri: props.path }}
+            style={{ width, height }}
+            resizeMode={parseResizeMode(props.fit)}
+          />
+        );
+      } else if (source === 'network') {
+        if (!props.url) return null;
+        node = (
+          <Image
+            source={{ uri: props.url }}
+            style={{ width, height }}
+            resizeMode={parseResizeMode(props.fit)}
+          />
+        );
+      } else {
+        node = null;
+      }
+      break;
+    }
+    case 'lottie': {
+      const source = props.source;
+      const width = normalizeDimension(parseDimension(props.width, true));
+      const height = normalizeDimension(parseDimension(props.height, true));
+      const loop = props.loop === true;
+      if (source === 'asset') {
+        node = (
+          <LottieView
+            source={{ uri: props.path ?? '' }}
+            style={{ width, height }}
+            autoPlay
+            loop={loop}
+          />
+        );
+      } else if (source === 'network') {
+        if (!props.url) return null;
+        node = (
+          <LottieView
+            source={{ uri: props.url }}
+            style={{ width, height }}
+            autoPlay
+            loop={loop}
+          />
+        );
+      } else {
+        node = null;
+      }
+      break;
+    }
+    case 'grid': {
+      const crossAxisCount = Number(props.crossAxisCount ?? 2);
+      const spacing = Number(props.spacing ?? 8);
+      const mainAxisSpacing = Number(props.mainAxisSpacing ?? spacing);
+      const crossAxisSpacing = Number(props.crossAxisSpacing ?? spacing);
+      const childAspectRatio = Number(props.childAspectRatio ?? 1);
+
+      node = (
+        <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
+          {(childrenJson ?? []).map((child, index) => (
+            <View
+              key={`grid-${index}`}
+              style={{
+                width: `${100 / crossAxisCount}%`,
+                paddingRight:
+                  (index + 1) % crossAxisCount === 0 ? 0 : crossAxisSpacing,
+                paddingBottom: mainAxisSpacing,
+                aspectRatio: childAspectRatio,
+              }}
+            >
+              {buildWidget(child, { ...params })}
+            </View>
+          ))}
+        </View>
+      );
+      break;
+    }
+    case 'fake_progress_bar': {
+      node = (
+        <FakeProgressBar
+          progressColor={parseColor(props.progressColor ?? '0xFF2196F3')}
+          backgroundColor={parseColor(props.backgroundColor ?? '0xFFE0E0E0')}
+          thickness={Number(props.thickness ?? 4)}
+          borderRadius={Number(props.borderRadius ?? 0)}
+          durationMs={Number(props.duration ?? 3000)}
+          startDelayMs={Number(props.startDelay ?? 0)}
+          style={props.style ?? 'linear'}
+          showProgressText={props.showProgressText === true}
+          progressTextStyle={getTextStyle(
+            props.progressTextStyle ?? {},
+            'color'
+          )}
+          progressTextFormat={props.progressTextFormat ?? '{{progress}}%'}
+          size={Number(props.size ?? 50)}
+          onComplete={() => {
+            if (action) {
+              params.onAction(action, actionPayload ?? props);
+            }
+          }}
+        />
+      );
+      break;
+    }
+    case 'slider': {
+      node = (
+        <SliderWidget
+          id={json._internalId}
+          linkedTo={props.linkedTo}
+          direction={props.direction === 'vertical' ? 'vertical' : 'horizontal'}
+          autoPlay={props.autoPlay === true}
+          autoPlayDelay={Number(props.autoPlayDelay ?? 3000)}
+          loop={props.loop === true}
+          height={parseDimension(props.height)}
+          physics={props.physics}
+        >
+          {(childrenJson ?? []).map((child, index) => (
+            <View key={`slider-${index}`} style={{ flex: 1 }}>
+              {buildWidget(child, { ...params })}
+            </View>
+          ))}
+        </SliderWidget>
+      );
+      break;
+    }
+    case 'pageview_indicator': {
+      node = (
+        <PageViewIndicator
+          linkedTo={props.linkedTo}
+          activeColor={parseColor(props.activeColor ?? '0xFF2196F3')}
+          inactiveColor={parseColor(props.inactiveColor ?? '0xFFE0E0E0')}
+          dotSize={Number(props.dotSize ?? 8)}
+          spacing={Number(props.spacing ?? 8)}
+          style={props.style ?? 'dots'}
+        />
+      );
+      break;
+    }
+    case 'radar_chart': {
+      node = <RadarChart properties={props} formData={params.formData} />;
+      break;
+    }
+    case 'icon': {
+      const iconName = props.icon ?? props.name;
+      const iconStyle = props.style ?? 'solid';
+      const size = Number(props.size ?? 24);
+      const color = parseColor(props.color ?? '0xFF000000');
+
+      if (!params.enableFontAwesomeIcons) {
+        node = <Text style={{ fontSize: size, color }}>?</Text>;
+        break;
+      }
+
+      const icon = resolveFontAwesomeIcon(iconName, iconStyle);
+      if (!icon.name) {
+        node = <Text style={{ fontSize: size, color }}>?</Text>;
+      } else {
+        node = (
+          <FontAwesome6
+            name={icon.name}
+            size={size}
+            color={color}
+            {...icon.props}
+          />
+        );
+      }
+      break;
+    }
+    case 'stack': {
+      const alignment = parseAlignment(props.alignment ?? 'topLeft');
+      const fit = props.fit === 'expand' ? 'expand' : 'loose';
+      node = (
+        <View
+          style={{
+            position: 'relative',
+            width: fit === 'expand' ? '100%' : undefined,
+            height: fit === 'expand' ? '100%' : undefined,
+            justifyContent: alignment.justifyContent,
+            alignItems: alignment.alignItems,
+          }}
+        >
+          {(childrenJson ?? []).map((child, index) => (
+            <React.Fragment key={`stack-${index}`}>
+              {buildWidget(child, { ...params })}
+            </React.Fragment>
+          ))}
+        </View>
+      );
+      break;
+    }
+    case 'positioned': {
+      const left = parseDimension(props.left);
+      const top = parseDimension(props.top);
+      const right = parseDimension(props.right);
+      const bottom = parseDimension(props.bottom);
+      const width = parseDimension(props.width);
+      const height = parseDimension(props.height);
+      return (
+        <View
+          style={{
+            position: 'absolute',
+            left,
+            top,
+            right,
+            bottom,
+            width,
+            height,
+          }}
+        >
+          {childJson ? buildWidget(childJson, { ...params }) : null}
+        </View>
+      );
+    }
+    default:
+      node = null;
+  }
+
+  if (!node) return null;
+
+  const marginVal = props.margin;
+  if (marginVal !== undefined && marginVal !== null) {
+    const marginInsets = parseInsets(marginVal);
+    node = <View style={insetsToStyle(marginInsets)}>{node}</View>;
+  } else if (type !== 'container' && type !== 'padding' && props.padding) {
+    const paddingInsets = parseInsets(props.padding);
+    node = <View style={insetsToStyle(paddingInsets)}>{node}</View>;
+  }
+
+  if (params.allowFlexExpansion && params.screenData.scrollable !== true) {
+    let shouldExpand = false;
+    if (type === 'stack' && props.fit === 'expand') {
+      shouldExpand = true;
+    }
+    if (props.height !== undefined) {
+      const heightVal = parseDimension(props.height);
+      if (heightVal === Number.POSITIVE_INFINITY) {
+        shouldExpand = true;
+      }
+    }
+
+    if (shouldExpand) {
+      return <View style={{ flex: 1 }}>{node}</View>;
+    }
+  }
+
+  return node;
+}
+
+function buildActionPayload(
+  props: Record<string, any>,
+  json: Record<string, any>
+) {
+  const payload = { ...props };
+  const actionPermission = json.actionPermission;
+  if (actionPermission !== undefined)
+    payload.actionPermission = actionPermission;
+  const extraData = json.actionData;
+  if (extraData && typeof extraData === 'object') {
+    Object.assign(payload, extraData);
+  }
+  return payload;
+}
+
+function getTextStyle(
+  props: Record<string, any>,
+  colorKey: string,
+  defaultColor?: string
+): TextStyle {
+  const fontFamily = props.fontFamily;
+  const fontSize = Number(props.fontSize ?? 14);
+  const fontWeight = parseFontWeight(props.fontWeight);
+  const fontStyle = props.fontStyle === 'italic' ? 'italic' : 'normal';
+  const color = parseColor(props[colorKey] ?? defaultColor ?? '0xFF000000');
+  const letterSpacing =
+    props.letterSpacing !== undefined ? Number(props.letterSpacing) : undefined;
+  const height = props.height !== undefined ? Number(props.height) : undefined;
+  const textDecoration = parseTextDecoration(props.decoration);
+
+  return {
+    fontFamily,
+    fontSize,
+    fontWeight,
+    fontStyle,
+    color,
+    letterSpacing,
+    lineHeight: height ? height * fontSize : undefined,
+    textDecorationLine: textDecoration,
+  };
+}
+
+function parseGradient(value: any):
+  | {
+      colors: string[];
+      start: { x: number; y: number };
+      end: { x: number; y: number };
+      stops?: number[];
+    }
+  | undefined {
+  if (!value || typeof value !== 'object' || value.type !== 'gradient')
+    return undefined;
+  const colors = Array.isArray(value.colors)
+    ? value.colors.map((c: string) => parseColor(c))
+    : [];
+  if (colors.length === 0) return undefined;
+  const start = alignmentToGradient(value.begin ?? 'topLeft');
+  const end = alignmentToGradient(value.end ?? 'bottomRight');
+  const stops = Array.isArray(value.stops)
+    ? value.stops.map((s: number) => Number(s))
+    : undefined;
+  return { colors, start, end, stops };
+}
+
+function alignmentToGradient(value: string) {
+  switch (value) {
+    case 'topCenter':
+      return { x: 0.5, y: 0 };
+    case 'bottomCenter':
+      return { x: 0.5, y: 1 };
+    case 'centerLeft':
+      return { x: 0, y: 0.5 };
+    case 'centerRight':
+      return { x: 1, y: 0.5 };
+    case 'center':
+      return { x: 0.5, y: 0.5 };
+    case 'bottomLeft':
+      return { x: 0, y: 1 };
+    case 'bottomRight':
+      return { x: 1, y: 1 };
+    case 'topRight':
+      return { x: 1, y: 0 };
+    case 'topLeft':
+    default:
+      return { x: 0, y: 0 };
+  }
+}
+
+function withOpacity(color: string, opacity: number): string {
+  if (color.startsWith('rgba')) {
+    return color.replace(
+      /rgba\((\d+),(\d+),(\d+),([\d.]+)\)/,
+      (_m, r, g, b) => `rgba(${r},${g},${b},${opacity})`
+    );
+  }
+  return color;
+}
+
+function normalizeDimension(
+  value: number | undefined
+): number | string | undefined {
+  if (value === Number.POSITIVE_INFINITY) {
+    return '100%';
+  }
+  return value;
+}
+
+function GradientText({
+  text,
+  gradient,
+  style,
+}: {
+  text: string;
+  gradient: { colors: string[]; start: any; end: any; stops?: number[] };
+  style?: any;
+}) {
+  return (
+    <MaskedView
+      maskElement={
+        <Text style={[style, { backgroundColor: 'transparent' }]}>{text}</Text>
+      }
+    >
+      <LinearGradient
+        colors={gradient.colors}
+        start={gradient.start}
+        end={gradient.end}
+        locations={gradient.stops}
+      >
+        <Text style={[style, { opacity: 0 }]}>{text}</Text>
+      </LinearGradient>
+    </MaskedView>
+  );
+}
+
+function DynamicInput({
+  initialValue,
+  properties,
+  onChanged,
+}: {
+  initialValue: string;
+  properties: Record<string, any>;
+  onChanged: (value: string) => void;
+}) {
+  const [value, setValue] = React.useState(initialValue ?? '');
+
+  React.useEffect(() => {
+    setValue(initialValue ?? '');
+  }, [initialValue]);
+  const keyboardType = mapKeyboardType(properties.keyboardType);
+  const autoCapitalize = mapAutoCapitalize(properties.autoCapitalize);
+  const secureTextEntry = properties.obscureText === true;
+  const multiline = properties.keyboardType === 'multiline';
+  const maxLength = properties.maxLength
+    ? Number(properties.maxLength)
+    : undefined;
+  const mask = properties.mask ? String(properties.mask) : null;
+
+  const label = properties.label;
+  const placeholder = properties.placeholder;
+  const labelStyle = getTextStyle(
+    properties.labelStyle ?? {},
+    'color',
+    '0xFF9E9E9E'
+  );
+  const hintStyle = getTextStyle(
+    properties.hintStyle ?? {},
+    'color',
+    '0xFF9E9E9E'
+  );
+  const inputStyle = getTextStyle({ ...properties, height: null }, 'textColor');
+
+  const backgroundColor = parseColor(
+    properties.backgroundColor ?? '0xFFF0F0F0'
+  );
+  const borderRadius = Number(properties.borderRadius ?? 8);
+
+  return (
+    <View>
+      {label ? <Text style={labelStyle}>{label}</Text> : null}
+      <View
+        style={{
+          backgroundColor,
+          borderRadius,
+          paddingHorizontal: 16,
+          paddingVertical: 10,
+        }}
+      >
+        {mask ? (
+          <MaskInput
+            value={value}
+            onChangeText={(_masked, unmasked) => {
+              setValue(unmasked);
+              onChanged(unmasked);
+            }}
+            autoFocus
+            autoCapitalize={autoCapitalize}
+            keyboardType={keyboardType}
+            secureTextEntry={secureTextEntry}
+            multiline={multiline}
+            maxLength={maxLength}
+            style={inputStyle}
+            mask={mask.split('').map((char) => {
+              if (char === '#') return /\d/;
+              if (char === 'A') return /[a-zA-Z]/;
+              return char;
+            })}
+            placeholder={placeholder}
+            placeholderTextColor={hintStyle.color}
+          />
+        ) : (
+          <TextInput
+            value={value}
+            onChangeText={(text) => {
+              setValue(text);
+              onChanged(text);
+            }}
+            autoFocus
+            autoCapitalize={autoCapitalize}
+            keyboardType={keyboardType}
+            secureTextEntry={secureTextEntry}
+            multiline={multiline}
+            maxLength={maxLength}
+            style={inputStyle}
+            placeholder={placeholder}
+            placeholderTextColor={hintStyle.color}
+          />
+        )}
+      </View>
+    </View>
+  );
+}
+
+function mapKeyboardType(type?: string) {
+  switch (type) {
+    case 'email':
+      return 'email-address';
+    case 'number':
+      return 'numeric';
+    case 'phone':
+      return 'phone-pad';
+    case 'multiline':
+      return 'default';
+    default:
+      return 'default';
+  }
+}
+
+function mapAutoCapitalize(type?: string) {
+  switch (type) {
+    case 'words':
+      return 'words';
+    case 'sentences':
+      return 'sentences';
+    case 'characters':
+      return 'characters';
+    default:
+      return 'none';
+  }
+}
+
+function SelectionList({
+  properties,
+  options,
+  initialValue,
+  onChanged,
+  onAction,
+  buildWidget,
+}: {
+  properties: Record<string, any>;
+  options: Record<string, any>[];
+  initialValue: any;
+  onChanged: (value: string) => void;
+  onAction: (action: string, data?: Record<string, any>) => void;
+  buildWidget: (widgetJson: Record<string, any>) => React.ReactNode;
+}) {
+  const multiSelect = properties.multiSelect === true;
+  const [selectedValues, setSelectedValues] = React.useState<string[]>(() => {
+    if (initialValue === null || initialValue === undefined) return [];
+    if (Array.isArray(initialValue)) return initialValue.map(String);
+    if (typeof initialValue === 'string') {
+      if (multiSelect) {
+        try {
+          return initialValue
+            .replace('[', '')
+            .replace(']', '')
+            .split(',')
+            .map((val) => val.trim());
+        } catch {
+          return [initialValue];
+        }
+      }
+      return [initialValue];
+    }
+    return [];
+  });
+
+  const toggleSelection = (value: string) => {
+    setSelectedValues((prev) => {
+      let next = [...prev];
+      if (multiSelect) {
+        if (next.includes(value)) {
+          next = next.filter((item) => item !== value);
+        } else {
+          next.push(value);
+        }
+        onChanged(next.join(','));
+      } else {
+        next = [value];
+        onChanged(value);
+        if (properties.autoGoNext === true) {
+          onAction('next');
+        }
+      }
+      return next;
+    });
+  };
+
+  const layout = properties.layout ?? 'column';
+  const spacing = Number(properties.spacing ?? 8);
+
+  const renderItem = (option: Record<string, any>, index: number) => {
+    const value = String(option.value ?? '');
+    const isSelected = selectedValues.includes(value);
+    const styleProps = isSelected
+      ? option.selectedStyle ?? properties.selectedStyle ?? {}
+      : option.unselectedStyle ?? properties.unselectedStyle ?? {};
+
+    const backgroundColor = parseColor(styleProps.backgroundColor);
+    const borderColor = parseColor(styleProps.borderColor);
+    const borderRadius = Number(styleProps.borderRadius ?? 8);
+    const borderWidth = Number(styleProps.borderWidth ?? 1);
+
+    return (
+      <Pressable
+        key={`option-${index}`}
+        onPress={() => toggleSelection(value)}
+        style={{
+          width: '100%',
+          backgroundColor,
+          borderColor,
+          borderWidth,
+          borderRadius,
+          padding: 0,
+        }}
+      >
+        {buildWidget(option.child)}
+      </Pressable>
+    );
+  };
+
+  if (layout === 'row') {
+    return (
+      <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
+        {options.map((option, index) => (
+          <View
+            key={`row-option-${index}`}
+            style={{ marginRight: spacing, marginBottom: spacing }}
+          >
+            {renderItem(option, index)}
+          </View>
+        ))}
+      </View>
+    );
+  }
+
+  if (layout === 'grid') {
+    const crossAxisCount = Number(properties.gridCrossAxisCount ?? 2);
+    const aspectRatio = Number(properties.gridAspectRatio ?? 1);
+    return (
+      <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
+        {options.map((option, index) => (
+          <View
+            key={`grid-option-${index}`}
+            style={{
+              width: `${100 / crossAxisCount}%`,
+              paddingRight: (index + 1) % crossAxisCount === 0 ? 0 : spacing,
+              paddingBottom: spacing,
+              aspectRatio,
+            }}
+          >
+            {renderItem(option, index)}
+          </View>
+        ))}
+      </View>
+    );
+  }
+
+  return (
+    <View>
+      {options.map((option, index) => (
+        <View key={`column-option-${index}`} style={{ marginBottom: spacing }}>
+          {renderItem(option, index)}
+        </View>
+      ))}
+    </View>
+  );
+}
+
+function FakeProgressBar({
+  progressColor,
+  backgroundColor,
+  thickness,
+  borderRadius,
+  durationMs,
+  startDelayMs,
+  style,
+  showProgressText,
+  progressTextStyle,
+  progressTextFormat,
+  size,
+  onComplete,
+}: {
+  progressColor: string;
+  backgroundColor: string;
+  thickness: number;
+  borderRadius: number;
+  durationMs: number;
+  startDelayMs: number;
+  style: string;
+  showProgressText: boolean;
+  progressTextStyle: any;
+  progressTextFormat: string;
+  size: number;
+  onComplete?: () => void;
+}) {
+  const animation = useMemo(() => new Animated.Value(0), []);
+  const [progressValue, setProgressValue] = React.useState(0);
+
+  React.useEffect(() => {
+    const listenerId = animation.addListener(({ value }) => {
+      setProgressValue(Math.round(value * 100));
+    });
+    const timeout = setTimeout(() => {
+      Animated.timing(animation, {
+        toValue: 1,
+        duration: durationMs,
+        useNativeDriver: false,
+      }).start(({ finished }) => {
+        if (finished && onComplete) onComplete();
+      });
+    }, startDelayMs);
+
+    return () => {
+      animation.removeListener(listenerId);
+      clearTimeout(timeout);
+      animation.stopAnimation();
+    };
+  }, [animation, durationMs, startDelayMs, onComplete]);
+
+  const progressText = progressTextFormat.replace(
+    '{{progress}}',
+    progressValue.toString()
+  );
+
+  if (style === 'circular') {
+    const radius = size / 2 - thickness;
+    const circumference = 2 * Math.PI * radius;
+    const strokeDashoffset = animation.interpolate({
+      inputRange: [0, 1],
+      outputRange: [circumference, 0],
+    });
+
+    return (
+      <View style={{ alignItems: 'center' }}>
+        <Svg width={size} height={size}>
+          <Circle
+            cx={size / 2}
+            cy={size / 2}
+            r={radius}
+            stroke={backgroundColor}
+            strokeWidth={thickness}
+            fill="none"
+          />
+          <AnimatedCircle
+            cx={size / 2}
+            cy={size / 2}
+            r={radius}
+            stroke={progressColor}
+            strokeWidth={thickness}
+            strokeDasharray={`${circumference} ${circumference}`}
+            strokeDashoffset={strokeDashoffset as any}
+            fill="none"
+            strokeLinecap="round"
+          />
+        </Svg>
+        {showProgressText && (
+          <Text style={progressTextStyle}>{progressText}</Text>
+        )}
+      </View>
+    );
+  }
+
+  return (
+    <View>
+      <View
+        style={{
+          height: thickness,
+          width: '100%',
+          borderRadius,
+          backgroundColor,
+          overflow: 'hidden',
+        }}
+      >
+        <Animated.View
+          style={{
+            height: '100%',
+            width: animation.interpolate({
+              inputRange: [0, 1],
+              outputRange: ['0%', '100%'],
+            }),
+            backgroundColor: progressColor,
+            borderRadius,
+          }}
+        />
+      </View>
+      {showProgressText ? (
+        <Text style={[progressTextStyle, { marginTop: 8 }]}>
+          {progressText}
+        </Text>
+      ) : null}
+    </View>
+  );
+}
+
+const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+
+function SliderWidget({
+  id,
+  linkedTo,
+  direction,
+  autoPlay,
+  autoPlayDelay,
+  loop,
+  height,
+  physics,
+  children,
+}: {
+  id?: string;
+  linkedTo?: string;
+  direction: 'horizontal' | 'vertical';
+  autoPlay: boolean;
+  autoPlayDelay: number;
+  loop: boolean;
+  height?: number;
+  physics?: string;
+  children: React.ReactNode[];
+}) {
+  const registry = useSliderRegistry();
+  const pagerRef = React.useRef<PagerView>(null);
+  const pageLength = children.length;
+  const [currentPage, setCurrentPage] = React.useState(() =>
+    loop && pageLength > 0 ? pageLength * 1000 : 0
+  );
+  const timerRef = React.useRef<NodeJS.Timeout | null>(null);
+
+  React.useEffect(() => {
+    if (autoPlay && !linkedTo) {
+      timerRef.current = setInterval(() => {
+        setCurrentPage((prev) => {
+          if (loop) return prev + 1;
+          if (prev < children.length - 1) return prev + 1;
+          return 0;
+        });
+      }, autoPlayDelay);
+    }
+    return () => {
+      if (timerRef.current) clearInterval(timerRef.current);
+    };
+  }, [autoPlay, autoPlayDelay, loop, linkedTo, children.length]);
+
+  React.useEffect(() => {
+    if (pagerRef.current) {
+      pagerRef.current.setPage(currentPage);
+    }
+  }, [currentPage]);
+
+  React.useEffect(() => {
+    if (registry && id && children.length > 0) {
+      registry.update(id, currentPage % children.length, children.length);
+    }
+  }, [registry, id, currentPage, children.length]);
+
+  React.useEffect(() => {
+    if (!linkedTo || !registry) return;
+    return registry.getNotifier(linkedTo, (value) => {
+      if (pagerRef.current) {
+        pagerRef.current.setPage(value);
+      }
+    });
+  }, [linkedTo, registry]);
+
+  if (pageLength === 0) return null;
+
+  const pageCount = loop ? pageLength * 1000 : pageLength;
+
+  return (
+    <PagerView
+      ref={pagerRef}
+      style={{ height: height ?? 200 }}
+      orientation={direction}
+      scrollEnabled={physics !== 'never'}
+      initialPage={currentPage}
+      onPageSelected={(event: PagerViewOnPageSelectedEvent) => {
+        const page = event.nativeEvent.position;
+        setCurrentPage(page);
+        if (registry && id) {
+          registry.update(id, page % pageLength, pageLength);
+        }
+      }}
+    >
+      {Array.from({ length: pageCount }).map((_, index) => (
+        <View key={`slider-page-${index}`} style={{ flex: 1 }}>
+          {children[index % pageLength]}
+        </View>
+      ))}
+    </PagerView>
+  );
+}
+
+function PageViewIndicator({
+  linkedTo,
+  activeColor,
+  inactiveColor,
+  dotSize,
+  spacing,
+  style,
+}: {
+  linkedTo?: string;
+  activeColor: string;
+  inactiveColor: string;
+  dotSize: number;
+  spacing: number;
+  style?: string;
+}) {
+  const registry = useSliderRegistry();
+  const [current, setCurrent] = React.useState(0);
+  const indicatorStyle = style ?? 'dots';
+  const count = linkedTo && registry ? registry.getPageCount(linkedTo) : 0;
+
+  React.useEffect(() => {
+    if (!linkedTo || !registry) return;
+    return registry.getNotifier(linkedTo, setCurrent);
+  }, [linkedTo, registry]);
+
+  if (!linkedTo || !registry || count <= 1) return null;
+  if (indicatorStyle !== 'dots') {
+    // Only dots are supported currently; fallback to dots.
+  }
+
+  return (
+    <View style={{ flexDirection: 'row', justifyContent: 'center' }}>
+      {Array.from({ length: count }).map((_, index) => (
+        <View
+          key={`dot-${index}`}
+          style={{
+            width: dotSize,
+            height: dotSize,
+            borderRadius: dotSize / 2,
+            marginHorizontal: spacing / 2,
+            backgroundColor: index === current ? activeColor : inactiveColor,
+          }}
+        />
+      ))}
+    </View>
+  );
+}
+
+function RadarChart({
+  properties,
+  formData,
+}: {
+  properties: Record<string, any>;
+  formData: Record<string, any>;
+}) {
+  const animate = properties.animate !== false;
+  const animationDurationMs = Number(properties.animationDurationMs ?? 800);
+  const scale = useMemo(() => new Animated.Value(animate ? 0 : 1), [animate]);
+
+  React.useEffect(() => {
+    if (!animate) return;
+    Animated.timing(scale, {
+      toValue: 1,
+      duration: animationDurationMs,
+      useNativeDriver: true,
+    }).start();
+  }, [animate, animationDurationMs, scale]);
+  const axes = parseRadarAxes(properties.axes);
+  if (axes.length < 3) {
+    return radarPlaceholder('Radar chart requires at least 3 axes.');
+  }
+
+  const datasets = parseRadarDatasets(
+    properties.datasets,
+    axes.length,
+    formData
+  );
+  if (datasets.length === 0) {
+    return radarPlaceholder(
+      'Add at least one dataset with the same number of values as axes.'
+    );
+  }
+
+  const normalizedAxes = normalizeAxisMaximums(axes, datasets);
+  const backgroundColor = parseColor(properties.backgroundColor);
+  const width = parseDimension(properties.width) ?? 300;
+  const rawHeight = parseDimension(properties.height);
+  const height =
+    rawHeight === undefined || rawHeight === Number.POSITIVE_INFINITY
+      ? 300
+      : rawHeight;
+  const padding = parseInsets(properties.padding);
+  const gridLevels = Math.min(
+    Math.max(Number(properties.gridLevels ?? 5), 1),
+    12
+  );
+  const gridColor = parseColor(properties.gridColor ?? '0xFFE0E0E0');
+  const gridStrokeWidth = Number(properties.gridStrokeWidth ?? 1);
+  const axisColor = parseColor(properties.axisColor ?? '0xFF9E9E9E');
+  const axisStrokeWidth = Number(properties.axisStrokeWidth ?? 1);
+  const axisLabelStyle = getTextStyle(
+    properties.axisLabelStyle ?? {},
+    'color',
+    '0xFF424242'
+  );
+  const showLegend = properties.showLegend !== false;
+  const legendPosition = (properties.legendPosition ?? 'bottom').toLowerCase();
+  const legendSpacing = Number(properties.legendSpacing ?? 12);
+  const legendStyle = getTextStyle(
+    properties.legendStyle ?? {},
+    'color',
+    '0xFF212121'
+  );
+  const shape = (properties.shape ?? 'polygon').toLowerCase();
+
+  const chartSize = Math.min(width, height);
+  const radius =
+    chartSize / 2 -
+    Math.max(padding.left, padding.right, padding.top, padding.bottom);
+  const center = { x: width / 2, y: height / 2 };
+
+  const axisAngle = (Math.PI * 2) / axes.length;
+
+  const gridPolygons = Array.from({ length: gridLevels }).map((_, level) => {
+    const ratio = (level + 1) / gridLevels;
+    const points = axes.map((_, index) => {
+      const angle = index * axisAngle - Math.PI / 2;
+      const x = center.x + radius * ratio * Math.cos(angle);
+      const y = center.y + radius * ratio * Math.sin(angle);
+      return `${x},${y}`;
+    });
+    return { points };
+  });
+
+  const datasetPolygons = datasets.map((dataset) => {
+    const points = dataset.values.map((value, index) => {
+      const axis = normalizedAxes[index];
+      const maxValue = axis?.maxValue ?? 0;
+      const ratio = maxValue > 0 ? value / maxValue : 0;
+      const angle = index * axisAngle - Math.PI / 2;
+      const x = center.x + radius * ratio * Math.cos(angle);
+      const y = center.y + radius * ratio * Math.sin(angle);
+      return `${x},${y}`;
+    });
+    return { dataset, points };
+  });
+
+  const legend = (
+    <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
+      {datasets.map((dataset, index) => (
+        <View
+          key={`legend-${index}`}
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            marginRight: legendSpacing,
+            marginBottom: 6,
+          }}
+        >
+          <View
+            style={{
+              width: 12,
+              height: 12,
+              borderRadius: 6,
+              backgroundColor: dataset.borderColor,
+              marginRight: 6,
+            }}
+          />
+          <Text style={legendStyle}>{dataset.label}</Text>
+        </View>
+      ))}
+    </View>
+  );
+
+  const chart = (
+    <Animated.View
+      style={{
+        width,
+        height,
+        paddingLeft: padding.left,
+        paddingRight: padding.right,
+        paddingTop: padding.top,
+        paddingBottom: padding.bottom,
+        transform: [{ scale }],
+      }}
+    >
+      <Svg width={width} height={height}>
+        <G>
+          {shape === 'circle'
+            ? gridPolygons.map((_, level) => (
+                <Circle
+                  key={`grid-circle-${level}`}
+                  cx={center.x}
+                  cy={center.y}
+                  r={radius * ((level + 1) / gridLevels)}
+                  stroke={gridColor}
+                  strokeWidth={gridStrokeWidth}
+                  fill="none"
+                />
+              ))
+            : gridPolygons.map((grid, level) => (
+                <Polygon
+                  key={`grid-${level}`}
+                  points={grid.points.join(' ')}
+                  stroke={gridColor}
+                  strokeWidth={gridStrokeWidth}
+                  fill="none"
+                />
+              ))}
+          {axes.map((_axis, index) => {
+            const angle = index * axisAngle - Math.PI / 2;
+            const x = center.x + radius * Math.cos(angle);
+            const y = center.y + radius * Math.sin(angle);
+            return (
+              <Line
+                key={`axis-${index}`}
+                x1={center.x}
+                y1={center.y}
+                x2={x}
+                y2={y}
+                stroke={axisColor}
+                strokeWidth={axisStrokeWidth}
+              />
+            );
+          })}
+          {axes.map((axis, index) => {
+            const angle = index * axisAngle - Math.PI / 2;
+            const labelX = center.x + (radius + 12) * Math.cos(angle);
+            const labelY = center.y + (radius + 12) * Math.sin(angle);
+            return (
+              <SvgText
+                key={`label-${index}`}
+                x={labelX}
+                y={labelY}
+                fontSize={axisLabelStyle.fontSize ?? 12}
+                fontWeight={axisLabelStyle.fontWeight}
+                fill={axisLabelStyle.color}
+                textAnchor="middle"
+              >
+                {axis.label}
+              </SvgText>
+            );
+          })}
+          {datasetPolygons.map((entry, index) => (
+            <Polygon
+              key={`dataset-${index}`}
+              points={entry.points.join(' ')}
+              stroke={entry.dataset.borderColor}
+              strokeWidth={entry.dataset.borderWidth}
+              fill={entry.dataset.fillColor ?? 'transparent'}
+              strokeDasharray={
+                entry.dataset.borderStyle === 'dotted' ||
+                entry.dataset.borderStyle === 'dashed'
+                  ? entry.dataset.dashArray ?? '6 4'
+                  : undefined
+              }
+            />
+          ))}
+          {datasetPolygons.map((entry, datasetIndex) =>
+            entry.dataset.showPoints
+              ? entry.points.map((point, pointIndex) => {
+                  const [x, y] = point.split(',').map((val) => Number(val));
+                  return (
+                    <Circle
+                      key={`point-${datasetIndex}-${pointIndex}`}
+                      cx={x}
+                      cy={y}
+                      r={entry.dataset.pointRadius}
+                      fill={entry.dataset.pointColor}
+                    />
+                  );
+                })
+              : null
+          )}
+        </G>
+      </Svg>
+    </Animated.View>
+  );
+
+  const composed = (
+    <View style={{ backgroundColor }}>
+      {chart}
+      {showLegend && legendPosition === 'bottom' ? (
+        <View style={{ marginTop: 12 }}>{legend}</View>
+      ) : null}
+    </View>
+  );
+
+  if (!showLegend || legendPosition === 'bottom') return composed;
+
+  if (legendPosition === 'top') {
+    return (
+      <View>
+        {legend}
+        <View style={{ height: 12 }} />
+        {chart}
+      </View>
+    );
+  }
+
+  if (legendPosition === 'left') {
+    return (
+      <View style={{ flexDirection: 'row' }}>
+        {legend}
+        <View style={{ width: 12 }} />
+        {chart}
+      </View>
+    );
+  }
+
+  if (legendPosition === 'right') {
+    return (
+      <View style={{ flexDirection: 'row' }}>
+        {chart}
+        <View style={{ width: 12 }} />
+        {legend}
+      </View>
+    );
+  }
+
+  return composed;
+}
+
+export type RadarAxis = { label: string; maxValue: number };
+
+export type RadarDataset = {
+  label: string;
+  values: number[];
+  borderColor: string;
+  borderWidth: number;
+  borderStyle: string;
+  dashArray?: number[];
+  showPoints: boolean;
+  pointRadius: number;
+  pointColor: string;
+  fillColor?: string;
+};
+
+export function parseRadarAxes(rawAxes: any): RadarAxis[] {
+  if (!Array.isArray(rawAxes)) return [];
+  const axes: RadarAxis[] = [];
+  rawAxes.forEach((axis) => {
+    if (!axis || typeof axis !== 'object') return;
+    const label = axis.label ?? '';
+    if (!label) return;
+    const maxValue = resolveNumericValue(axis.maxValue, {}) ?? 100;
+    axes.push({ label, maxValue: maxValue > 0 ? maxValue : 100 });
+  });
+  return axes;
+}
+
+export function parseRadarDatasets(
+  raw: any,
+  axisLength: number,
+  formData: Record<string, any>
+): RadarDataset[] {
+  if (!Array.isArray(raw) || axisLength === 0) return [];
+  const datasets: RadarDataset[] = [];
+  raw.forEach((dataset) => {
+    if (!dataset || typeof dataset !== 'object') return;
+    const valuesRaw = Array.isArray(dataset.data) ? dataset.data : [];
+    const values: number[] = [];
+    for (let i = 0; i < axisLength; i += 1) {
+      const rawValue = i < valuesRaw.length ? valuesRaw[i] : null;
+      const resolved = resolveNumericValue(rawValue, formData) ?? 0;
+      values.push(resolved);
+    }
+
+    const label = dataset.label ?? `Dataset ${datasets.length + 1}`;
+    const borderColor = parseColor(dataset.borderColor ?? '0xFF2196F3');
+    const fillColor = dataset.fillColor
+      ? parseColor(dataset.fillColor)
+      : undefined;
+    const pointColor = parseColor(
+      dataset.pointColor ?? dataset.borderColor ?? '0xFF2196F3'
+    );
+    const borderWidth = Number(dataset.borderWidth ?? 2);
+    const pointRadius = Number(dataset.pointRadius ?? 4);
+    const borderStyle = (dataset.borderStyle ?? 'solid')
+      .toString()
+      .toLowerCase();
+    const normalizedStyle =
+      borderStyle === 'dotted' || borderStyle === 'dashed'
+        ? borderStyle
+        : 'solid';
+    const dashArray = Array.isArray(dataset.dashArray)
+      ? dataset.dashArray.map((val: any) => Number(val))
+      : undefined;
+    const showPoints = dataset.showPoints !== false;
+
+    datasets.push({
+      label,
+      values,
+      borderColor,
+      borderWidth,
+      borderStyle: normalizedStyle,
+      dashArray,
+      showPoints,
+      pointRadius,
+      pointColor,
+      fillColor,
+    });
+  });
+  return datasets;
+}
+
+export function normalizeAxisMaximums(
+  axes: RadarAxis[],
+  datasets: RadarDataset[]
+): RadarAxis[] {
+  return axes.map((axis, index) => {
+    let maxValue = axis.maxValue;
+    datasets.forEach((dataset) => {
+      const value = dataset.values[index];
+      if (value !== undefined && value > maxValue) maxValue = value;
+    });
+    return { ...axis, maxValue };
+  });
+}
+
+function radarPlaceholder(message: string) {
+  return (
+    <View
+      style={{
+        padding: 16,
+        borderRadius: 8,
+        borderWidth: 1,
+        borderColor: 'rgba(255,0,0,0.2)',
+        backgroundColor: 'rgba(255,0,0,0.05)',
+      }}
+    >
+      <Text
+        style={{
+          color: 'rgba(255,0,0,0.7)',
+          fontSize: 12,
+          textAlign: 'center',
+        }}
+      >
+        {message}
+      </Text>
+    </View>
+  );
+}