flowboard-react 0.1.0 → 0.3.0

package/src/components/FlowboardRenderer.tsx

@@ -27,6 +27,7 @@ import PagerView, {
 } from 'react-native-pager-view';
 import {
   insetsToStyle,
+  insetsToMarginStyle,
   parseAlignment,
   parseColor,
   parseCrossAlignment,
@@ -44,10 +45,13 @@ import { resolveFontAwesomeIcon, FontAwesome6 } from '../core/fontAwesome';
 import { useSliderRegistry } from './widgets/sliderRegistry';
 
 const styles = StyleSheet.create({
-  root: { flex: 1 },
+  root: { flex: 1, backgroundColor: '#ffffff' },
   background: {
     ...StyleSheet.absoluteFillObject,
   },
+  whiteBg: {
+    backgroundColor: '#ffffff',
+  },
   safeArea: { flex: 1 },
   progressWrapper: { width: '100%' },
 });
@@ -89,12 +93,19 @@ export default function FlowboardRenderer(props: FlowboardRendererProps) {
   const safeArea = screenData.safeArea !== false;
 
   const padding = parseInsets(screenData.padding);
-  const paddingStyle = insetsToStyle(padding);
+  const contentPaddingStyle = insetsToStyle(padding);
+  const progressPaddingStyle = {
+    paddingTop: padding.top,
+    paddingRight: padding.right,
+    paddingLeft: padding.left,
+  };
+  const rootCrossAxisAlignment =
+    screenData.crossAxisAlignment ?? screenData.crossAxis;
 
   const content = (
     <View style={{ flex: 1 }}>
       {showProgress && (
-        <View style={[paddingStyle, { paddingBottom: 8 }]}>
+        <View style={[progressPaddingStyle, { paddingBottom: 8 }]}>
           {renderProgressBar(
             currentIndex,
             totalScreens,
@@ -109,7 +120,7 @@ export default function FlowboardRenderer(props: FlowboardRendererProps) {
       {scrollable ? (
         <ScrollView
           contentContainerStyle={{
-            ...paddingStyle,
+            ...contentPaddingStyle,
             paddingTop: showProgress ? 0 : padding.top,
           }}
         >
@@ -117,7 +128,7 @@ export default function FlowboardRenderer(props: FlowboardRendererProps) {
             style={{
               flexGrow: 1,
               justifyContent: parseFlexAlignment(screenData.mainAxisAlignment),
-              alignItems: parseCrossAlignment(screenData.crossAxisAlignment),
+              alignItems: parseRootCrossAlignment(rootCrossAxisAlignment),
             }}
           >
             {childrenData.map((child, index) =>
@@ -137,10 +148,10 @@ export default function FlowboardRenderer(props: FlowboardRendererProps) {
         <View
           style={{
             flex: 1,
-            ...paddingStyle,
+            ...contentPaddingStyle,
             paddingTop: showProgress ? 0 : padding.top,
             justifyContent: parseFlexAlignment(screenData.mainAxisAlignment),
-            alignItems: parseCrossAlignment(screenData.crossAxisAlignment),
+            alignItems: parseRootCrossAlignment(rootCrossAxisAlignment),
           }}
         >
           {childrenData.map((child, index) =>
@@ -163,7 +174,13 @@ export default function FlowboardRenderer(props: FlowboardRendererProps) {
     <View style={styles.root}>
       {renderBackground(backgroundData, bgColorCode)}
       {safeArea ? (
-        <SafeAreaView style={styles.safeArea}>{content}</SafeAreaView>
+        <SafeAreaView
+          style={styles.safeArea}
+          mode="padding"
+          edges={['top', 'right', 'bottom', 'left']}
+        >
+          {content}
+        </SafeAreaView>
       ) : (
         content
       )}
@@ -173,11 +190,17 @@ export default function FlowboardRenderer(props: FlowboardRendererProps) {
 
 function renderBackground(bgData: any, legacyColorCode?: string) {
   if (!bgData) {
+    const fallbackBackground = parseColor(legacyColorCode);
     return (
       <View
         style={[
           styles.background,
-          { backgroundColor: parseColor(legacyColorCode) },
+          {
+            backgroundColor:
+              fallbackBackground === 'transparent'
+                ? 'rgba(255,255,255,1)'
+                : fallbackBackground,
+          },
         ]}
       />
     );
@@ -210,25 +233,17 @@ function renderBackground(bgData: any, legacyColorCode?: string) {
       }
       case 'image': {
         const url = bgData.url;
-        if (!url) return null;
-        return (
-          <Image
-            source={{ uri: url }}
-            style={styles.background}
-            resizeMode={fit}
-          />
-        );
+        if (!hasImageUri(url)) {
+          return <View style={[styles.background, styles.whiteBg]} />;
+        }
+        return <BackgroundImageLayer uri={String(url)} fit={fit} />;
       }
       case 'asset': {
         const path = bgData.path;
-        if (!path) return null;
-        return (
-          <Image
-            source={{ uri: path }}
-            style={styles.background}
-            resizeMode={fit}
-          />
-        );
+        if (!hasImageUri(path)) {
+          return <View style={[styles.background, styles.whiteBg]} />;
+        }
+        return <BackgroundImageLayer uri={String(path)} fit={fit} />;
       }
       case 'color': {
         return (
@@ -248,6 +263,46 @@ function renderBackground(bgData: any, legacyColorCode?: string) {
   return <View style={[styles.background, { backgroundColor: '#ffffff' }]} />;
 }
 
+function BackgroundImageLayer({ uri, fit }: { uri: string; fit: any }) {
+  const [hasError, setHasError] = React.useState(false);
+  const opacity = React.useRef(new Animated.Value(0)).current;
+
+  React.useEffect(() => {
+    opacity.setValue(0);
+  }, [uri, opacity]);
+
+  const fadeIn = React.useCallback(() => {
+    Animated.timing(opacity, {
+      toValue: 1,
+      duration: 160,
+      useNativeDriver: true,
+    }).start();
+  }, [opacity]);
+
+  if (hasError) {
+    return <View style={[styles.background, styles.whiteBg]} />;
+  }
+  return (
+    <Animated.Image
+      source={{ uri }}
+      style={[styles.background, { opacity }]}
+      resizeMode={fit}
+      onLoad={fadeIn}
+      onError={() => setHasError(true)}
+    />
+  );
+}
+
+function hasImageUri(value: unknown): value is string {
+  if (typeof value !== 'string') return false;
+  return value.trim().length > 0;
+}
+
+function isNetworkLikeUri(value: unknown): value is string {
+  if (!hasImageUri(value)) return false;
+  return /^(https?:|file:|content:|data:)/i.test(value.trim());
+}
+
 function renderProgressBar(
   currentIndex: number,
   totalScreens: number,
@@ -377,8 +432,8 @@ function buildWidget(
     }
     case 'container': {
       const gradient = parseGradient(props.background);
-      const width = normalizeDimension(parseDimension(props.width));
-      const height = normalizeDimension(parseDimension(props.height));
+      const width = normalizeDimension(parseLayoutDimension(props.width));
+      const height = normalizeDimension(parseLayoutDimension(props.height));
       const borderRadius = props.borderRadius
         ? Number(props.borderRadius)
         : undefined;
@@ -504,8 +559,10 @@ function buildWidget(
     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 width =
+        normalizeDimension(parseLayoutDimension(props.width)) ?? '100%';
+      const height =
+        normalizeDimension(parseLayoutDimension(props.height)) ?? 50;
       const label = props.label ?? 'Button';
       const textStyle = getTextStyle(
         { ...props, height: null },
@@ -583,8 +640,8 @@ function buildWidget(
       node = (
         <View
           style={{
-            height: normalizeDimension(parseDimension(props.height)),
-            width: normalizeDimension(parseDimension(props.width)),
+            height: normalizeDimension(parseLayoutDimension(props.height)),
+            width: normalizeDimension(parseLayoutDimension(props.width)),
           }}
         />
       );
@@ -594,10 +651,12 @@ function buildWidget(
       const expandedChild = childJson
         ? buildWidget(childJson, { ...params, allowFlexExpansion: true })
         : null;
-      if (params.allowFlexExpansion) {
-        return <View style={{ flex: 1 }}>{expandedChild}</View>;
-      }
-      return expandedChild;
+      node = params.allowFlexExpansion ? (
+        <View style={{ flex: 1 }}>{expandedChild}</View>
+      ) : (
+        expandedChild
+      );
+      break;
     }
     case 'padding': {
       const padding = parseInsets(props.padding ?? 0);
@@ -633,7 +692,62 @@ function buildWidget(
               params.onInputChange(id, value);
             }
           }}
-          onAction={params.onAction}
+          onAction={(actionName, payload) => {
+            if (
+              actionName === 'next' &&
+              params.onInputChange &&
+              id &&
+              Object.prototype.hasOwnProperty.call(
+                payload ?? {},
+                'selectedValue'
+              )
+            ) {
+              params.onInputChange(id, payload?.selectedValue);
+            }
+
+            params.onAction(actionName, {
+              ...(payload ?? {}),
+              ...(id ? { fieldId: id } : {}),
+            });
+          }}
+          buildWidget={(widgetJson) =>
+            buildWidget(widgetJson, { ...params, allowFlexExpansion: true })
+          }
+        />
+      );
+      break;
+    }
+    case 'wheel_picker': {
+      node = (
+        <WheelPicker
+          properties={props}
+          options={Array.isArray(json.options) ? json.options : []}
+          itemTemplate={json.itemTemplate ?? props.itemTemplate}
+          formData={params.formData}
+          initialValue={params.formData[id ?? '']}
+          onChanged={(value) => {
+            if (params.onInputChange && id) {
+              params.onInputChange(id, value);
+            }
+          }}
+          onAction={(actionName, payload) => {
+            if (
+              actionName === 'next' &&
+              params.onInputChange &&
+              id &&
+              Object.prototype.hasOwnProperty.call(
+                payload ?? {},
+                'selectedValue'
+              )
+            ) {
+              params.onInputChange(id, payload?.selectedValue);
+            }
+
+            params.onAction(actionName, {
+              ...(payload ?? {}),
+              ...(id ? { fieldId: id } : {}),
+            });
+          }}
           buildWidget={(widgetJson) =>
             buildWidget(widgetJson, { ...params, allowFlexExpansion: true })
           }
@@ -643,23 +757,28 @@ function buildWidget(
     }
     case 'image': {
       const source = props.source;
-      const width = normalizeDimension(parseDimension(props.width, true));
-      const height = normalizeDimension(parseDimension(props.height, true));
+      const width = normalizeDimension(parseLayoutDimension(props.width, true));
+      const height = normalizeDimension(
+        parseLayoutDimension(props.height, true)
+      );
       if (source === 'asset') {
+        if (!hasImageUri(props.path)) return null;
         node = (
-          <Image
-            source={{ uri: props.path }}
-            style={{ width, height }}
-            resizeMode={parseResizeMode(props.fit)}
+          <SduiImage
+            uri={String(props.path)}
+            fit={parseResizeMode(props.fit)}
+            width={width}
+            height={height}
           />
         );
       } else if (source === 'network') {
-        if (!props.url) return null;
+        if (!isNetworkLikeUri(props.url)) return null;
         node = (
-          <Image
-            source={{ uri: props.url }}
-            style={{ width, height }}
-            resizeMode={parseResizeMode(props.fit)}
+          <SduiImage
+            uri={String(props.url)}
+            fit={parseResizeMode(props.fit)}
+            width={width}
+            height={height}
           />
         );
       } else {
@@ -669,8 +788,10 @@ function buildWidget(
     }
     case 'lottie': {
       const source = props.source;
-      const width = normalizeDimension(parseDimension(props.width, true));
-      const height = normalizeDimension(parseDimension(props.height, true));
+      const width = normalizeDimension(parseLayoutDimension(props.width, true));
+      const height = normalizeDimension(
+        parseLayoutDimension(props.height, true)
+      );
       const loop = props.loop === true;
       if (source === 'asset') {
         node = (
@@ -758,7 +879,7 @@ function buildWidget(
           autoPlay={props.autoPlay === true}
           autoPlayDelay={Number(props.autoPlayDelay ?? 3000)}
           loop={props.loop === true}
-          height={parseDimension(props.height)}
+          height={parseLayoutDimension(props.height)}
           physics={props.physics}
         >
           {(childrenJson ?? []).map((child, index) => (
@@ -836,13 +957,13 @@ function buildWidget(
       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 (
+      const left = parseLayoutDimension(props.left);
+      const top = parseLayoutDimension(props.top);
+      const right = parseLayoutDimension(props.right);
+      const bottom = parseLayoutDimension(props.bottom);
+      const width = parseLayoutDimension(props.width);
+      const height = parseLayoutDimension(props.height);
+      node = (
         <View
           style={{
             position: 'absolute',
@@ -857,6 +978,7 @@ function buildWidget(
           {childJson ? buildWidget(childJson, { ...params }) : null}
         </View>
       );
+      break;
     }
     default:
       node = null;
@@ -867,7 +989,7 @@ function buildWidget(
   const marginVal = props.margin;
   if (marginVal !== undefined && marginVal !== null) {
     const marginInsets = parseInsets(marginVal);
-    node = <View style={insetsToStyle(marginInsets)}>{node}</View>;
+    node = <View style={insetsToMarginStyle(marginInsets)}>{node}</View>;
   } else if (type !== 'container' && type !== 'padding' && props.padding) {
     const paddingInsets = parseInsets(props.padding);
     node = <View style={insetsToStyle(paddingInsets)}>{node}</View>;
@@ -879,14 +1001,22 @@ function buildWidget(
       shouldExpand = true;
     }
     if (props.height !== undefined) {
-      const heightVal = parseDimension(props.height);
+      const heightVal = parseLayoutDimension(props.height);
       if (heightVal === Number.POSITIVE_INFINITY) {
         shouldExpand = true;
       }
     }
 
     if (shouldExpand) {
-      return <View style={{ flex: 1 }}>{node}</View>;
+      node = <View style={{ flex: 1 }}>{node}</View>;
+    }
+  }
+
+  if (params.key !== undefined && params.key !== null) {
+    if (React.isValidElement(node)) {
+      node = React.cloneElement(node, { key: params.key });
+    } else {
+      node = <React.Fragment key={params.key}>{node}</React.Fragment>;
     }
   }
 
@@ -992,7 +1122,7 @@ function withOpacity(color: string, opacity: number): string {
 }
 
 function normalizeDimension(
-  value: number | undefined
+  value: number | string | undefined
 ): number | string | undefined {
   if (value === Number.POSITIVE_INFINITY) {
     return '100%';
@@ -1000,6 +1130,126 @@ function normalizeDimension(
   return value;
 }
 
+function parseRootCrossAlignment(value?: string): any {
+  if (!value) return 'stretch';
+  return parseCrossAlignment(value);
+}
+
+function parseLayoutDimension(
+  value: any,
+  zeroIsNull = false
+): number | string | undefined {
+  if (typeof value === 'string') {
+    const trimmed = value.trim();
+    const lowered = trimmed.toLowerCase();
+
+    if (
+      lowered === 'double.infinity' ||
+      lowered === 'infinity' ||
+      lowered === '+infinity'
+    ) {
+      return Number.POSITIVE_INFINITY;
+    }
+
+    if (trimmed.endsWith('%')) {
+      const numeric = Number(trimmed.slice(0, -1));
+      if (!Number.isNaN(numeric) && Number.isFinite(numeric)) {
+        if (zeroIsNull && numeric === 0) return undefined;
+        return `${numeric}%`;
+      }
+    }
+  }
+
+  return parseDimension(value, zeroIsNull);
+}
+
+function SduiImage({
+  uri,
+  fit,
+  width,
+  height,
+}: {
+  uri: string;
+  fit: any;
+  width: number | string | undefined;
+  height: number | string | undefined;
+}) {
+  const hasExplicitWidth = width !== undefined;
+  const hasExplicitHeight = height !== undefined;
+  const [aspectRatio, setAspectRatio] = React.useState<number | undefined>(
+    undefined
+  );
+  const [hasError, setHasError] = React.useState(false);
+  const opacity = React.useRef(new Animated.Value(0)).current;
+
+  const updateAspectRatio = (w?: number, h?: number) => {
+    if (!w || !h) return;
+    if (!Number.isFinite(w) || !Number.isFinite(h) || h <= 0) return;
+    const ratio = w / h;
+    if (Number.isFinite(ratio) && ratio > 0) {
+      setAspectRatio(ratio);
+    }
+  };
+
+  React.useEffect(() => {
+    if (hasExplicitWidth && hasExplicitHeight) return;
+    Image.getSize(
+      uri,
+      (w, h) => updateAspectRatio(w, h),
+      () => null
+    );
+  }, [uri, hasExplicitWidth, hasExplicitHeight]);
+
+  React.useEffect(() => {
+    opacity.setValue(0);
+  }, [uri, opacity]);
+
+  if (hasError) {
+    return null;
+  }
+
+  const style: any = { width, height };
+
+  if (!hasExplicitWidth && !hasExplicitHeight) {
+    style.width = '100%';
+    if (aspectRatio) {
+      style.aspectRatio = aspectRatio;
+    } else {
+      style.minHeight = 160;
+    }
+  } else if (hasExplicitWidth && !hasExplicitHeight) {
+    if (aspectRatio) {
+      style.aspectRatio = aspectRatio;
+    } else {
+      style.minHeight = 100;
+    }
+  } else if (!hasExplicitWidth && hasExplicitHeight) {
+    if (aspectRatio) {
+      style.aspectRatio = aspectRatio;
+    } else {
+      style.width = '100%';
+    }
+  }
+
+  return (
+    <Animated.Image
+      source={{ uri }}
+      style={[style, { opacity }]}
+      resizeMode={fit}
+      onLoad={(event) => {
+        const source = event?.nativeEvent?.source;
+        updateAspectRatio(source?.width, source?.height);
+        Animated.timing(opacity, {
+          toValue: 1,
+          duration: 160,
+          useNativeDriver: true,
+        }).start();
+      }}
+      onError={() => setHasError(true)}
+    />
+  );
+}
+
 function GradientText({
   text,
   gradient,
@@ -1083,7 +1333,7 @@ function DynamicInput({
         {mask ? (
           <MaskInput
             value={value}
-            onChangeText={(_masked, unmasked) => {
+            onChangeText={(_masked: string, unmasked: string) => {
               setValue(unmasked);
               onChanged(unmasked);
             }}
@@ -1203,7 +1453,9 @@ function SelectionList({
         next = [value];
         onChanged(value);
         if (properties.autoGoNext === true) {
-          onAction('next');
+          requestAnimationFrame(() =>
+            onAction('next', { selectedValue: value })
+          );
         }
       }
       return next;
@@ -1291,6 +1543,364 @@ function SelectionList({
   );
 }
 
+function WheelPicker({
+  properties,
+  options,
+  itemTemplate,
+  formData,
+  initialValue,
+  onChanged,
+  onAction,
+  buildWidget,
+}: {
+  properties: Record<string, any>;
+  options: Record<string, any>[];
+  itemTemplate: unknown;
+  formData: 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())
+            .filter((val) => val.length > 0);
+        } catch {
+          return [initialValue];
+        }
+      }
+      return [initialValue];
+    }
+    return [];
+  });
+
+  const resolvedOptions = React.useMemo(
+    () =>
+      buildWheelPickerOptions({
+        options,
+        properties,
+        formData,
+        itemTemplate,
+      }),
+    [formData, itemTemplate, options, properties]
+  );
+
+  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) {
+          requestAnimationFrame(() =>
+            onAction('next', { selectedValue: value })
+          );
+        }
+      }
+      return next;
+    });
+  };
+
+  const layout = properties.layout ?? 'wheel';
+  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 ?? {
+          backgroundColor: properties.wheelSelectedBackgroundColor,
+          borderColor: properties.wheelSelectedBorderColor,
+        }
+      : option.unselectedStyle ??
+        properties.unselectedStyle ?? {
+          backgroundColor: properties.wheelUnselectedBackgroundColor,
+          borderColor: properties.wheelUnselectedBorderColor,
+        };
+
+    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={`wheel-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' }}>
+        {resolvedOptions.map((option, index) => (
+          <View
+            key={`wheel-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' }}>
+        {resolvedOptions.map((option, index) => (
+          <View
+            key={`wheel-grid-option-${index}`}
+            style={{
+              width: `${100 / crossAxisCount}%`,
+              paddingRight: (index + 1) % crossAxisCount === 0 ? 0 : spacing,
+              paddingBottom: spacing,
+              aspectRatio,
+            }}
+          >
+            {renderItem(option, index)}
+          </View>
+        ))}
+      </View>
+    );
+  }
+
+  if (layout === 'wheel') {
+    const itemHeight = Math.max(1, Number(properties.wheelItemHeight ?? 48));
+    const requestedVisible = Math.max(
+      3,
+      Math.floor(Number(properties.visibleItems ?? 5))
+    );
+    const visibleItems =
+      requestedVisible % 2 === 0 ? requestedVisible + 1 : requestedVisible;
+    const containerHeight = itemHeight * visibleItems;
+    const centerPadding = Math.max(0, (containerHeight - itemHeight) / 2);
+
+    return (
+      <View style={{ height: containerHeight }}>
+        <ScrollView
+          showsVerticalScrollIndicator={false}
+          contentContainerStyle={{ paddingVertical: centerPadding }}
+        >
+          {resolvedOptions.map((option, index) => (
+            <View
+              key={`wheel-column-option-${index}`}
+              style={{
+                minHeight: itemHeight,
+                justifyContent: 'center',
+                marginBottom:
+                  spacing > 0 && index < resolvedOptions.length - 1 ? spacing : 0,
+              }}
+            >
+              {renderItem(option, index)}
+            </View>
+          ))}
+        </ScrollView>
+      </View>
+    );
+  }
+
+  return (
+    <View>
+      {resolvedOptions.map((option, index) => (
+        <View key={`wheel-list-option-${index}`} style={{ marginBottom: spacing }}>
+          {renderItem(option, index)}
+        </View>
+      ))}
+    </View>
+  );
+}
+
+function buildWheelPickerOptions({
+  options,
+  properties,
+  formData,
+  itemTemplate,
+}: {
+  options: Record<string, any>[];
+  properties: Record<string, any>;
+  formData: Record<string, any>;
+  itemTemplate: unknown;
+}): Record<string, any>[] {
+  const templateContext = buildWheelTemplateBaseContext(formData, properties);
+  const itemCountRaw = properties.itemCount ?? properties.item_count;
+  const itemCountResolved = resolveNumericValue(itemCountRaw, templateContext);
+  const itemCount = normalizeItemCount(itemCountResolved);
+
+  if (itemCount > 0) {
+    const generatedTemplate = normalizeWheelOptionTemplate(
+      itemTemplate ?? properties.itemTemplate ?? options[0]
+    );
+    if (!generatedTemplate) return [];
+
+    const start =
+      resolveNumericValue(
+        properties.start ?? properties.itemStart ?? 0,
+        templateContext
+      ) ?? 0;
+    const step =
+      resolveNumericValue(
+        properties.step ?? properties.itemStep ?? 1,
+        templateContext
+      ) ?? 1;
+
+    return Array.from({ length: itemCount }).map((_, index) => {
+      const itemValue = start + step * index;
+      const context = {
+        ...templateContext,
+        start,
+        step,
+        index,
+        item: itemValue,
+      };
+      const resolvedOption = resolveWheelTemplateValue(
+        generatedTemplate,
+        context
+      );
+      return ensureWheelOptionShape(resolvedOption, String(itemValue));
+    });
+  }
+
+  return options.map((option, index) => {
+    const itemValue = option?.value ?? index;
+    const context = {
+      ...templateContext,
+      index,
+      item: itemValue,
+    };
+    const resolvedOption = resolveWheelTemplateValue(option, context);
+    return ensureWheelOptionShape(resolvedOption, String(itemValue));
+  });
+}
+
+function normalizeItemCount(value: number | null): number {
+  if (value === null || !Number.isFinite(value)) return 0;
+  return Math.max(0, Math.floor(value));
+}
+
+function buildWheelTemplateBaseContext(
+  formData: Record<string, any>,
+  properties: Record<string, any>
+): Record<string, any> {
+  const context = { ...formData };
+  const start = resolveNumericValue(
+    properties.start ?? properties.itemStart,
+    context
+  );
+  const step = resolveNumericValue(properties.step ?? properties.itemStep, context);
+
+  if (start !== null) context.start = start;
+  if (step !== null) context.step = step;
+  return context;
+}
+
+function normalizeWheelOptionTemplate(
+  template: unknown
+): Record<string, any> | null {
+  if (!template || typeof template !== 'object') return null;
+  const asMap = template as Record<string, any>;
+  if (
+    Object.prototype.hasOwnProperty.call(asMap, 'value') ||
+    Object.prototype.hasOwnProperty.call(asMap, 'child')
+  ) {
+    return { ...asMap };
+  }
+  if (typeof asMap.type === 'string') {
+    return {
+      value: '{{item}}',
+      child: asMap,
+    };
+  }
+  return null;
+}
+
+function ensureWheelOptionShape(
+  option: unknown,
+  fallbackValue: string
+): Record<string, any> {
+  if (!option || typeof option !== 'object') {
+    return {
+      value: fallbackValue,
+      child: {
+        type: 'text',
+        properties: { text: fallbackValue },
+      },
+    };
+  }
+
+  const normalized = { ...(option as Record<string, any>) };
+  const rawValue = normalized.value ?? fallbackValue;
+  const value = String(rawValue);
+
+  const child =
+    normalized.child && typeof normalized.child === 'object'
+      ? normalized.child
+      : {
+          type: 'text',
+          properties: { text: value },
+        };
+
+  return {
+    ...normalized,
+    value,
+    child,
+  };
+}
+
+function resolveWheelTemplateValue(
+  value: unknown,
+  context: Record<string, any>
+): unknown {
+  if (typeof value === 'string') {
+    return resolveText(value, context);
+  }
+  if (Array.isArray(value)) {
+    return value.map((entry) => resolveWheelTemplateValue(entry, context));
+  }
+  if (value && typeof value === 'object') {
+    const result: Record<string, any> = {};
+    Object.keys(value as Record<string, any>).forEach((key) => {
+      result[key] = resolveWheelTemplateValue(
+        (value as Record<string, any>)[key],
+        context
+      );
+    });
+    return result;
+  }
+  return value;
+}
+
 function FakeProgressBar({
   progressColor,
   backgroundColor,
@@ -1436,38 +2046,42 @@ function SliderWidget({
   autoPlay: boolean;
   autoPlayDelay: number;
   loop: boolean;
-  height?: number;
+  height?: number | string;
   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 pageCount = pageLength;
+  const [currentPage, setCurrentPage] = React.useState(0);
   const timerRef = React.useRef<NodeJS.Timeout | null>(null);
 
   React.useEffect(() => {
-    if (autoPlay && !linkedTo) {
+    setCurrentPage((prev) => clampSliderPage(prev, pageCount));
+  }, [pageCount]);
+
+  React.useEffect(() => {
+    if (autoPlay && !linkedTo && pageLength > 0) {
       timerRef.current = setInterval(() => {
         setCurrentPage((prev) => {
-          if (loop) return prev + 1;
-          if (prev < children.length - 1) return prev + 1;
-          return 0;
+          const safePrev = clampSliderPage(prev, pageCount);
+          if (safePrev < pageLength - 1) return safePrev + 1;
+          if (loop) return 0;
+          return safePrev;
         });
       }, autoPlayDelay);
     }
     return () => {
       if (timerRef.current) clearInterval(timerRef.current);
     };
-  }, [autoPlay, autoPlayDelay, loop, linkedTo, children.length]);
+  }, [autoPlay, autoPlayDelay, linkedTo, loop, pageCount, pageLength]);
 
   React.useEffect(() => {
-    if (pagerRef.current) {
-      pagerRef.current.setPage(currentPage);
+    if (pagerRef.current && pageCount > 0) {
+      pagerRef.current.setPage(clampSliderPage(currentPage, pageCount));
     }
-  }, [currentPage]);
+  }, [currentPage, pageCount]);
 
   React.useEffect(() => {
     if (registry && id && children.length > 0) {
@@ -1478,28 +2092,30 @@ function SliderWidget({
   React.useEffect(() => {
     if (!linkedTo || !registry) return;
     return registry.getNotifier(linkedTo, (value) => {
+      const normalized = normalizeLoopIndex(value, pageLength);
+      const targetPage = clampSliderPage(normalized, pageCount);
+      setCurrentPage(targetPage);
       if (pagerRef.current) {
-        pagerRef.current.setPage(value);
+        pagerRef.current.setPage(targetPage);
       }
     });
-  }, [linkedTo, registry]);
+  }, [linkedTo, pageCount, pageLength, registry]);
 
   if (pageLength === 0) return null;
 
-  const pageCount = loop ? pageLength * 1000 : pageLength;
-
   return (
     <PagerView
       ref={pagerRef}
-      style={{ height: height ?? 200 }}
+      style={height === undefined ? { flex: 1 } : { height }}
       orientation={direction}
       scrollEnabled={physics !== 'never'}
-      initialPage={currentPage}
+      initialPage={clampSliderPage(currentPage, pageCount)}
       onPageSelected={(event: PagerViewOnPageSelectedEvent) => {
         const page = event.nativeEvent.position;
-        setCurrentPage(page);
+        const safePage = clampSliderPage(page, pageCount);
+        setCurrentPage(safePage);
         if (registry && id) {
-          registry.update(id, page % pageLength, pageLength);
+          registry.update(id, safePage % pageLength, pageLength);
         }
       }}
     >
@@ -1512,6 +2128,20 @@ function SliderWidget({
   );
 }
 
+function clampSliderPage(page: number, pageCount: number): number {
+  if (pageCount <= 0) return 0;
+  if (!Number.isFinite(page)) return 0;
+  if (page < 0) return 0;
+  if (page >= pageCount) return pageCount - 1;
+  return Math.floor(page);
+}
+
+function normalizeLoopIndex(index: number, size: number): number {
+  if (size <= 0 || !Number.isFinite(index)) return 0;
+  const normalized = Math.floor(index) % size;
+  return normalized < 0 ? normalized + size : normalized;
+}
+
 function PageViewIndicator({
   linkedTo,
   activeColor,
@@ -1569,16 +2199,39 @@ function RadarChart({
 }) {
   const animate = properties.animate !== false;
   const animationDurationMs = Number(properties.animationDurationMs ?? 800);
-  const scale = useMemo(() => new Animated.Value(animate ? 0 : 1), [animate]);
+  const reveal = useMemo(() => new Animated.Value(animate ? 0 : 1), [animate]);
+  const [lineProgress, setLineProgress] = React.useState(animate ? 0 : 1);
 
   React.useEffect(() => {
-    if (!animate) return;
-    Animated.timing(scale, {
+    if (!animate) {
+      reveal.setValue(1);
+      setLineProgress(1);
+      return;
+    }
+
+    reveal.setValue(0);
+    setLineProgress(0);
+
+    const listenerId = reveal.addListener(({ value }) => {
+      setLineProgress(Math.max(0, Math.min(1, value)));
+    });
+
+    Animated.timing(reveal, {
       toValue: 1,
       duration: animationDurationMs,
-      useNativeDriver: true,
+      useNativeDriver: false,
     }).start();
-  }, [animate, animationDurationMs, scale]);
+
+    return () => {
+      reveal.removeListener(listenerId);
+    };
+  }, [animate, animationDurationMs, reveal]);
+
+  const parsedWidth = parseLayoutDimension(properties.width);
+  const normalizedWidth = normalizeDimension(parsedWidth);
+  const [measuredWidth, setMeasuredWidth] = React.useState(0);
+  const width = resolveRadarWidth(parsedWidth, measuredWidth);
+
   const axes = parseRadarAxes(properties.axes);
   if (axes.length < 3) {
     return radarPlaceholder('Radar chart requires at least 3 axes.');
@@ -1597,12 +2250,11 @@ function RadarChart({
 
   const normalizedAxes = normalizeAxisMaximums(axes, datasets);
   const backgroundColor = parseColor(properties.backgroundColor);
-  const width = parseDimension(properties.width) ?? 300;
-  const rawHeight = parseDimension(properties.height);
+  const rawHeight = parseLayoutDimension(properties.height);
   const height =
-    rawHeight === undefined || rawHeight === Number.POSITIVE_INFINITY
-      ? 300
-      : rawHeight;
+    typeof rawHeight === 'number' && Number.isFinite(rawHeight) && rawHeight > 0
+      ? rawHeight
+      : 300;
   const padding = parseInsets(properties.padding);
   const gridLevels = Math.min(
     Math.max(Number(properties.gridLevels ?? 5), 1),
@@ -1628,9 +2280,11 @@ function RadarChart({
   const shape = (properties.shape ?? 'polygon').toLowerCase();
 
   const chartSize = Math.min(width, height);
-  const radius =
+  const radius = Math.max(
     chartSize / 2 -
-    Math.max(padding.left, padding.right, padding.top, padding.bottom);
+      Math.max(padding.left, padding.right, padding.top, padding.bottom),
+    8
+  );
   const center = { x: width / 2, y: height / 2 };
 
   const axisAngle = (Math.PI * 2) / axes.length;
@@ -1650,7 +2304,7 @@ function RadarChart({
     const points = dataset.values.map((value, index) => {
       const axis = normalizedAxes[index];
       const maxValue = axis?.maxValue ?? 0;
-      const ratio = maxValue > 0 ? value / maxValue : 0;
+      const ratio = (maxValue > 0 ? value / maxValue : 0) * lineProgress;
       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);
@@ -1689,13 +2343,19 @@ function RadarChart({
   const chart = (
     <Animated.View
       style={{
-        width,
+        width: normalizedWidth ?? width,
         height,
         paddingLeft: padding.left,
         paddingRight: padding.right,
         paddingTop: padding.top,
         paddingBottom: padding.bottom,
-        transform: [{ scale }],
+        opacity: reveal,
+      }}
+      onLayout={(event) => {
+        const nextWidth = Math.floor(event.nativeEvent.layout.width);
+        if (nextWidth > 0 && nextWidth !== measuredWidth) {
+          setMeasuredWidth(nextWidth);
+        }
       }}
     >
       <Svg width={width} height={height}>
@@ -1932,6 +2592,19 @@ export function normalizeAxisMaximums(
   });
 }
 
+function resolveRadarWidth(
+  parsedWidth: number | string | undefined,
+  measuredWidth: number
+): number {
+  if (typeof parsedWidth === 'number' && Number.isFinite(parsedWidth)) {
+    return parsedWidth;
+  }
+  if (measuredWidth > 0) {
+    return measuredWidth;
+  }
+  return 300;
+}
+
 function radarPlaceholder(message: string) {
   return (
     <View