@rocapine/react-native-onboarding-ui 1.22.0 → 1.24.0

package/src/UI/Pages/ComposableScreen/elements/ButtonElement.tsx

@@ -1,6 +1,6 @@
-import React, { useMemo } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import { z } from "zod";
-import { Text, TouchableOpacity } from "react-native";
+import { Animated, Pressable, Text } from "react-native";
 import {
   useResolvedFontStyle,
   evaluateCondition,
@@ -67,12 +67,21 @@ export const ButtonActionSchema = z.union([
   SetVariableButtonActionSchema,
 ]);
 
+type ButtonOverridableProps = BaseBoxProps & {
+  variant?: "filled" | "outlined" | "ghost";
+  backgroundColor?: string;
+  color?: string;
+  fontSize?: number;
+  fontWeight?: string;
+  fontFamily?: string | "inherit";
+  fontStyle?: "normal" | "italic";
+  textAlign?: "left" | "center" | "right";
+};
+
+export type ButtonStyleOverride = Partial<ButtonOverridableProps>;
+
 export type ButtonElementProps = BaseBoxProps & {
   label: string;
-  /**
-   * Ordered list of actions to run on press. Sequential, await async handlers,
-   * abort on error, `"continue"` is terminal.
-   */
   actions?: ButtonAction[];
   /** @deprecated Use `actions` instead. */
   action?: "continue";
@@ -85,10 +94,26 @@ export type ButtonElementProps = BaseBoxProps & {
   fontStyle?: "normal" | "italic";
   textAlign?: "left" | "center" | "right";
   disabledWhen?: LeafCondition | ConditionGroup;
+  /** @deprecated Use `disabledStyle.backgroundColor`. */
   disabledBackgroundColor?: string;
+  /** @deprecated Use `disabledStyle.color`. */
   disabledColor?: string;
+  pressedStyle?: ButtonStyleOverride;
+  disabledStyle?: ButtonStyleOverride;
+  transitionDurationMs?: number;
 };
 
+export const ButtonStyleOverrideSchema = BaseBoxPropsSchema.extend({
+  variant: z.enum(["filled", "outlined", "ghost"]).optional(),
+  backgroundColor: z.string().optional(),
+  color: z.string().optional(),
+  fontSize: z.number().optional(),
+  fontWeight: z.string().optional(),
+  fontFamily: z.string().optional(),
+  fontStyle: z.enum(["normal", "italic"]).optional(),
+  textAlign: z.enum(["left", "center", "right"]).optional(),
+}).partial();
+
 export const ButtonElementPropsSchema = BaseBoxPropsSchema.extend({
   label: z.string().min(1, "label must not be empty"),
   actions: z.array(ButtonActionSchema).optional(),
@@ -104,6 +129,9 @@ export const ButtonElementPropsSchema = BaseBoxPropsSchema.extend({
   disabledWhen: z.union([LeafConditionSchema, ConditionGroupSchema]).optional(),
   disabledBackgroundColor: z.string().optional(),
   disabledColor: z.string().optional(),
+  pressedStyle: ButtonStyleOverrideSchema.optional(),
+  disabledStyle: ButtonStyleOverrideSchema.optional(),
+  transitionDurationMs: z.number().min(0).optional(),
 });
 
 type ButtonUIElement = Extract<UIElement, { type: "Button" }>;
@@ -113,6 +141,14 @@ type Props = {
   ctx: RenderContext;
 };
 
+const buildShadowStyle = (p: Pick<BaseBoxProps, "shadowColor" | "shadowOffset" | "shadowOpacity" | "shadowRadius" | "elevation">) => ({
+  shadowColor: p.shadowColor,
+  shadowOffset: p.shadowOffset,
+  shadowOpacity: p.shadowOpacity,
+  shadowRadius: p.shadowRadius,
+  elevation: p.elevation,
+});
+
 export const ButtonElementComponent = ({ element, ctx }: Props): React.ReactElement => {
   const { theme, onContinue, customActions, variables, setVariable } = ctx;
   const flatVariables = useMemo(
@@ -125,6 +161,8 @@ export const ButtonElementComponent = ({ element, ctx }: Props): React.ReactElem
   const isDisabled = element.props.disabledWhen
     ? evaluateCondition(element.props.disabledWhen, flatVariables)
     : false;
+  const [isPressed, setIsPressed] = useState(false);
+
   const handlePress = async () => {
     if (isDisabled) return;
     const { actions, action } = element.props;
@@ -171,119 +209,181 @@ export const ButtonElementComponent = ({ element, ctx }: Props): React.ReactElem
       }
     }
   };
-  const variant = element.props.variant ?? "filled";
+
+  // State overrides are merged over base props. disabledStyle wins over the
+  // deprecated `disabledBackgroundColor`/`disabledColor` fields; falls back to
+  // those when only the legacy fields are set.
+  const stateOverride: ButtonStyleOverride = isDisabled
+    ? (element.props.disabledStyle ?? {})
+    : isPressed
+      ? (element.props.pressedStyle ?? {})
+      : {};
+  const eff = { ...element.props, ...stateOverride };
+
+  const variant = eff.variant ?? "filled";
   const isFilled = variant === "filled";
   const isOutlined = variant === "outlined";
-  const disabledBg =
-    element.props.disabledBackgroundColor ?? theme.colors.disable;
-  const disabledText =
-    element.props.disabledColor ?? theme.colors.text.disable;
+
+  const legacyDisabledBg =
+    isDisabled && !element.props.disabledStyle
+      ? (element.props.disabledBackgroundColor ?? theme.colors.disable)
+      : undefined;
+  const legacyDisabledText =
+    isDisabled && !element.props.disabledStyle
+      ? (element.props.disabledColor ?? theme.colors.text.disable)
+      : undefined;
+
   const bgColor = isDisabled
     ? isFilled
-      ? disabledBg
+      ? (eff.backgroundColor ?? legacyDisabledBg ?? theme.colors.disable)
       : "transparent"
     : isFilled
-      ? (element.props.backgroundColor ?? theme.colors.primary)
+      ? (eff.backgroundColor ?? theme.colors.primary)
       : "transparent";
   const textColor = isDisabled
-    ? disabledText
+    ? (eff.color ?? legacyDisabledText ?? theme.colors.text.disable)
     : isFilled
-      ? (element.props.color ?? theme.colors.text.opposite)
-      : (element.props.color ?? theme.colors.primary);
+      ? (eff.color ?? theme.colors.text.opposite)
+      : (eff.color ?? theme.colors.primary);
   const outlinedBorderColor = isDisabled
-    ? disabledBg
-    : (element.props.borderColor ?? theme.colors.primary);
+    ? (eff.borderColor ?? legacyDisabledBg ?? theme.colors.disable)
+    : (eff.borderColor ?? theme.colors.primary);
 
-  const hasGradient = isFilled && !isDisabled && !!element.props.backgroundGradient;
-  const borderRadius = element.props.borderRadius ?? 90;
+  const hasGradient = isFilled && !isDisabled && !!eff.backgroundGradient;
+  const borderRadius = eff.borderRadius ?? 90;
   const inheritedFontFamily = resolveInheritedFontFamily(
-    element.props.fontFamily,
+    eff.fontFamily,
     theme.typography.defaultFontFamily
   );
   const resolvedFont = useResolvedFontStyle(
     inheritedFontFamily,
-    element.props.fontWeight
+    eff.fontWeight
   );
 
+  // Animate opacity between rest/pressed/disabled. Uses native driver — color
+  // and shadow* changes apply instantly on state transition (acceptable for
+  // tap-feedback timescales). transitionDurationMs gates animation length.
+  const opacityAnim = useRef(new Animated.Value(eff.opacity ?? 1)).current;
+  const duration = element.props.transitionDurationMs ?? 150;
+  const restOpacity = element.props.opacity ?? 1;
+  const pressedOpacity = element.props.pressedStyle?.opacity ?? 0.8;
+  const disabledOpacity =
+    element.props.disabledStyle?.opacity ?? element.props.opacity ?? 1;
+  const targetOpacity = isDisabled
+    ? disabledOpacity
+    : isPressed
+      ? pressedOpacity
+      : restOpacity;
+
+  useEffect(() => {
+    Animated.timing(opacityAnim, {
+      toValue: targetOpacity,
+      duration,
+      useNativeDriver: true,
+    }).start();
+  }, [targetOpacity, duration, opacityAnim]);
+
+  const shadowStyle = buildShadowStyle(eff);
+
   const labelNode = (
     <Text
       style={{
         color: textColor,
-        fontSize: element.props.fontSize ?? theme.typography.textStyles.button.fontSize,
+        fontSize: eff.fontSize ?? theme.typography.textStyles.button.fontSize,
         fontWeight: resolvedFont.resolvedToVariant
           ? undefined
           : ((resolvedFont.fontWeight as any) ?? theme.typography.textStyles.button.fontWeight),
         fontFamily: resolvedFont.fontFamily,
-        fontStyle: element.props.fontStyle,
-        textAlign: element.props.textAlign ?? "center",
+        fontStyle: eff.fontStyle,
+        textAlign: eff.textAlign ?? "center",
       }}
     >
       {element.props.label}
     </Text>
   );
 
+  const onPressIn = () => setIsPressed(true);
+  const onPressOut = () => setIsPressed(false);
+
   if (hasGradient) {
     return (
-      <GradientBox
-        gradient={element.props.backgroundGradient}
+      <Animated.View
         style={{
+          ...shadowStyle,
+          opacity: opacityAnim,
+          width: dim(eff.width),
+          height: dim(eff.height),
+          margin: eff.margin,
+          marginHorizontal: eff.marginHorizontal,
+          marginVertical: eff.marginVertical,
+          alignSelf: eff.alignSelf ?? (eff.width ? undefined : "stretch"),
           borderRadius,
-          borderWidth: isOutlined ? (element.props.borderWidth ?? 1) : (element.props.borderWidth ?? 0),
-          borderColor: isOutlined ? outlinedBorderColor : element.props.borderColor,
-          width: dim(element.props.width),
-          height: dim(element.props.height),
-          margin: element.props.margin,
-          marginHorizontal: element.props.marginHorizontal,
-          marginVertical: element.props.marginVertical,
-          opacity: element.props.opacity,
-          alignSelf: element.props.alignSelf ?? (element.props.width ? undefined : "stretch"),
-          overflow: "hidden",
         }}
       >
-        <TouchableOpacity
-          activeOpacity={0.8}
-          onPress={handlePress}
-          disabled={isDisabled}
+        <GradientBox
+          gradient={eff.backgroundGradient}
           style={{
+            borderRadius,
+            borderWidth: isOutlined ? (eff.borderWidth ?? 1) : (eff.borderWidth ?? 0),
+            borderColor: isOutlined ? outlinedBorderColor : eff.borderColor,
+            overflow: "hidden",
             flex: 1,
-            padding: element.props.padding,
-            paddingVertical: element.props.paddingVertical ?? 14,
-            paddingHorizontal: element.props.paddingHorizontal ?? 24,
-            alignItems: "center",
-            justifyContent: "center",
           }}
         >
-          {labelNode}
-        </TouchableOpacity>
-      </GradientBox>
+          <Pressable
+            onPress={handlePress}
+            onPressIn={onPressIn}
+            onPressOut={onPressOut}
+            disabled={isDisabled}
+            style={{
+              flex: 1,
+              padding: eff.padding,
+              paddingVertical: eff.paddingVertical ?? 14,
+              paddingHorizontal: eff.paddingHorizontal ?? 24,
+              alignItems: "center",
+              justifyContent: "center",
+            }}
+          >
+            {labelNode}
+          </Pressable>
+        </GradientBox>
+      </Animated.View>
     );
   }
 
   return (
-    <TouchableOpacity
-      activeOpacity={0.8}
-      onPress={handlePress}
-      disabled={isDisabled}
+    <Animated.View
       style={{
+        ...shadowStyle,
+        opacity: opacityAnim,
         backgroundColor: bgColor,
         borderRadius,
-        borderWidth: isOutlined ? (element.props.borderWidth ?? 1) : (element.props.borderWidth ?? 0),
-        borderColor: isOutlined ? outlinedBorderColor : element.props.borderColor,
-        padding: element.props.padding,
-        paddingVertical: element.props.paddingVertical ?? 14,
-        paddingHorizontal: element.props.paddingHorizontal ?? 24,
-        width: dim(element.props.width),
-        height: dim(element.props.height),
-        margin: element.props.margin,
-        marginHorizontal: element.props.marginHorizontal,
-        marginVertical: element.props.marginVertical,
-        opacity: element.props.opacity,
-        alignSelf: element.props.alignSelf ?? (element.props.width ? undefined : "stretch"),
-        alignItems: "center",
-        justifyContent: "center",
+        borderWidth: isOutlined ? (eff.borderWidth ?? 1) : (eff.borderWidth ?? 0),
+        borderColor: isOutlined ? outlinedBorderColor : eff.borderColor,
+        width: dim(eff.width),
+        height: dim(eff.height),
+        margin: eff.margin,
+        marginHorizontal: eff.marginHorizontal,
+        marginVertical: eff.marginVertical,
+        alignSelf: eff.alignSelf ?? (eff.width ? undefined : "stretch"),
       }}
     >
-      {labelNode}
-    </TouchableOpacity>
+      <Pressable
+        onPress={handlePress}
+        onPressIn={onPressIn}
+        onPressOut={onPressOut}
+        disabled={isDisabled}
+        style={{
+          padding: eff.padding,
+          paddingVertical: eff.paddingVertical ?? 14,
+          paddingHorizontal: eff.paddingHorizontal ?? 24,
+          alignItems: "center",
+          justifyContent: "center",
+          borderRadius,
+        }}
+      >
+        {labelNode}
+      </Pressable>
+    </Animated.View>
   );
 };

package/src/UI/Pages/ComposableScreen/elements/CarouselElement.tsx

@@ -82,6 +82,15 @@ export function CarouselElementComponent({ element, ctx }: Props): React.ReactEl
     ref.current?.scrollTo({ count: target - progress.value, animated: true });
   }, [variableName, variableValue, childrenCount]);
 
+  // Persist the initial index into ctx.variables when no value exists yet, so the
+  // default reaches downstream renderWhen / interpolation across renders.
+  useEffect(() => {
+    if (!variableName) return;
+    if (variableValue !== undefined) return;
+    if (props.defaultIndex == null) return;
+    ctx.setVariable(variableName, { value: String(clampIndex(props.defaultIndex)) });
+  }, [variableName, variableValue, props.defaultIndex, childrenCount]);
+
   const onLayout = (e: LayoutChangeEvent) => {
     const { width, height } = e.nativeEvent.layout;
     if (!size || size.width !== width || size.height !== height) {

package/src/UI/Pages/ComposableScreen/elements/collectDefaults.ts

@@ -0,0 +1,76 @@
+import { UIElement } from "../types";
+import { ComposableVariableEntry } from "../../../Provider/OnboardingProgressProvider";
+
+/**
+ * Walks the element tree and returns the initial variable map declared via
+ * element-level defaults (`defaultIndex`, `defaultValue`, `defaultValues`).
+ * Used by `Renderer` to overlay defaults onto `ctx.variables` so
+ * `renderWhen` / expressions evaluate against them on first render — before
+ * per-element seeding effects run.
+ */
+export function collectElementDefaults(
+  elements: UIElement[]
+): Record<string, ComposableVariableEntry> {
+  const out: Record<string, ComposableVariableEntry> = {};
+  const visit = (el: UIElement) => {
+    switch (el.type) {
+      case "Carousel": {
+        const name = el.props.variableName;
+        if (name && el.props.defaultIndex != null) {
+          // Mirror CarouselElementComponent's clampIndex so the overlaid default
+          // matches the index the carousel actually mounts at.
+          const raw = Number(el.props.defaultIndex);
+          const safe = Number.isFinite(raw) ? raw : 0;
+          const maxIdx = Math.max(0, el.children.length - 1);
+          const clamped = Math.max(0, Math.min(safe, maxIdx));
+          out[name] = { value: String(clamped) };
+        }
+        el.children.forEach(visit);
+        break;
+      }
+      case "RadioGroup": {
+        const name = el.props.variableName;
+        const dv = el.props.defaultValue;
+        if (name && dv !== undefined) {
+          const item = el.props.items.find((i) => i.value === dv);
+          out[name] = { value: dv, label: item?.label };
+        }
+        break;
+      }
+      case "CheckboxGroup": {
+        const name = el.props.variableName;
+        const dvs = el.props.defaultValues;
+        if (name && dvs !== undefined) {
+          const labels = dvs.map(
+            (dv) => el.props.items.find((i) => i.value === dv)?.label ?? dv
+          );
+          out[name] = { value: JSON.stringify(dvs), label: labels.join(", ") };
+        }
+        break;
+      }
+      case "Input": {
+        const name = el.props.variableName;
+        if (name && el.props.defaultValue !== undefined) {
+          out[name] = { value: el.props.defaultValue };
+        }
+        break;
+      }
+      case "DatePicker": {
+        const name = el.props.variableName;
+        if (name && el.props.defaultValue !== undefined) {
+          const d = new Date(el.props.defaultValue);
+          if (!isNaN(d.getTime())) out[name] = { value: d.toISOString() };
+        }
+        break;
+      }
+      case "YStack":
+      case "XStack":
+      case "ZStack":
+      case "SafeAreaView":
+        el.children.forEach(visit);
+        break;
+    }
+  };
+  elements.forEach(visit);
+  return out;
+}

package/src/UI/Pages/ComposableScreen/elements/renderElement.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { evaluateCondition } from "@rocapine/react-native-onboarding";
 import { UIElement } from "../types";
 import { RenderContext } from "./shared";
 import { StackElementComponent } from "./StackElement";
@@ -22,6 +23,13 @@ export const renderElement = (
   ctx: RenderContext,
   parentType?: "XStack" | "YStack" | "ZStack"
 ): React.ReactNode => {
+  if (element.renderWhen) {
+    const flatVars = Object.fromEntries(
+      Object.entries(ctx.variables).map(([k, v]) => [k, v?.value])
+    );
+    if (!evaluateCondition(element.renderWhen, flatVars)) return null;
+  }
+
   if (element.type === "YStack" || element.type === "XStack") {
     return <StackElementComponent key={element.id} element={element} ctx={ctx} parentType={parentType} />;
   }

package/src/UI/Pages/ComposableScreen/types.ts

@@ -1,4 +1,10 @@
 import { z } from "zod";
+import {
+  type LeafCondition,
+  type ConditionGroup,
+  LeafConditionSchema,
+  ConditionGroupSchema,
+} from "@rocapine/react-native-onboarding";
 import { CustomPayloadSchema } from "../types";
 import { type StackElementProps, StackElementPropsSchema } from "./elements/StackElement";
 import { type TextElementProps, TextElementPropsSchema } from "./elements/TextElement";
@@ -40,6 +46,7 @@ export type UIElement =
   | {
       id: string;
       name?: string;
+      renderWhen?: LeafCondition | ConditionGroup;
       type: "YStack" | "XStack";
       props: StackElementProps;
       children: UIElement[];
@@ -47,72 +54,84 @@ export type UIElement =
   | {
       id: string;
       name?: string;
+      renderWhen?: LeafCondition | ConditionGroup;
       type: "Text";
       props: TextElementProps;
     }
   | {
       id: string;
       name?: string;
+      renderWhen?: LeafCondition | ConditionGroup;
       type: "Image";
       props: ImageElementProps;
     }
   | {
       id: string;
       name?: string;
+      renderWhen?: LeafCondition | ConditionGroup;
       type: "Lottie";
       props: LottieElementProps;
     }
   | {
       id: string;
       name?: string;
+      renderWhen?: LeafCondition | ConditionGroup;
       type: "Rive";
       props: RiveElementProps;
     }
   | {
       id: string;
       name?: string;
+      renderWhen?: LeafCondition | ConditionGroup;
       type: "Icon";
       props: IconElementProps;
     }
   | {
       id: string;
       name?: string;
+      renderWhen?: LeafCondition | ConditionGroup;
       type: "Video";
       props: VideoElementProps;
     }
   | {
       id: string;
       name?: string;
+      renderWhen?: LeafCondition | ConditionGroup;
       type: "Input";
       props: InputElementProps;
     }
   | {
       id: string;
       name?: string;
+      renderWhen?: LeafCondition | ConditionGroup;
       type: "Button";
       props: ButtonElementProps;
     }
   | {
       id: string;
       name?: string;
+      renderWhen?: LeafCondition | ConditionGroup;
       type: "RadioGroup";
       props: RadioGroupElementProps;
     }
   | {
       id: string;
       name?: string;
+      renderWhen?: LeafCondition | ConditionGroup;
       type: "CheckboxGroup";
       props: CheckboxGroupElementProps;
     }
   | {
       id: string;
       name?: string;
+      renderWhen?: LeafCondition | ConditionGroup;
       type: "DatePicker";
       props: DatePickerElementProps;
     }
   | {
       id: string;
       name?: string;
+      renderWhen?: LeafCondition | ConditionGroup;
       type: "Carousel";
       props: CarouselElementProps;
       children: UIElement[];
@@ -120,6 +139,7 @@ export type UIElement =
   | {
       id: string;
       name?: string;
+      renderWhen?: LeafCondition | ConditionGroup;
       type: "ZStack";
       props: ZStackElementProps;
       children: UIElement[];
@@ -127,6 +147,7 @@ export type UIElement =
   | {
       id: string;
       name?: string;
+      renderWhen?: LeafCondition | ConditionGroup;
       type: "SafeAreaView";
       props: SafeAreaViewElementProps;
       children: UIElement[];
@@ -137,6 +158,7 @@ export const UIElementSchema: z.ZodType<UIElement> = z.lazy(() =>
     z.object({
       id: z.string(),
       name: z.string().optional(),
+      renderWhen: z.union([LeafConditionSchema, ConditionGroupSchema]).optional(),
       type: z.union([z.literal("YStack"), z.literal("XStack")]),
       props: StackElementPropsSchema,
       children: z.array(UIElementSchema),
@@ -144,72 +166,84 @@ export const UIElementSchema: z.ZodType<UIElement> = z.lazy(() =>
     z.object({
       id: z.string(),
       name: z.string().optional(),
+      renderWhen: z.union([LeafConditionSchema, ConditionGroupSchema]).optional(),
       type: z.literal("Text"),
       props: TextElementPropsSchema,
     }),
     z.object({
       id: z.string(),
       name: z.string().optional(),
+      renderWhen: z.union([LeafConditionSchema, ConditionGroupSchema]).optional(),
       type: z.literal("Image"),
       props: ImageElementPropsSchema,
     }),
     z.object({
       id: z.string(),
       name: z.string().optional(),
+      renderWhen: z.union([LeafConditionSchema, ConditionGroupSchema]).optional(),
       type: z.literal("Lottie"),
       props: LottieElementPropsSchema,
     }),
     z.object({
       id: z.string(),
       name: z.string().optional(),
+      renderWhen: z.union([LeafConditionSchema, ConditionGroupSchema]).optional(),
       type: z.literal("Rive"),
       props: RiveElementPropsSchema,
     }),
     z.object({
       id: z.string(),
       name: z.string().optional(),
+      renderWhen: z.union([LeafConditionSchema, ConditionGroupSchema]).optional(),
       type: z.literal("Icon"),
       props: IconElementPropsSchema,
     }),
     z.object({
       id: z.string(),
       name: z.string().optional(),
+      renderWhen: z.union([LeafConditionSchema, ConditionGroupSchema]).optional(),
       type: z.literal("Video"),
       props: VideoElementPropsSchema,
     }),
     z.object({
       id: z.string(),
       name: z.string().optional(),
+      renderWhen: z.union([LeafConditionSchema, ConditionGroupSchema]).optional(),
       type: z.literal("Input"),
       props: InputElementPropsSchema,
     }),
     z.object({
       id: z.string(),
       name: z.string().optional(),
+      renderWhen: z.union([LeafConditionSchema, ConditionGroupSchema]).optional(),
       type: z.literal("Button"),
       props: ButtonElementPropsSchema,
     }),
     z.object({
       id: z.string(),
       name: z.string().optional(),
+      renderWhen: z.union([LeafConditionSchema, ConditionGroupSchema]).optional(),
       type: z.literal("RadioGroup"),
       props: RadioGroupElementPropsSchema,
     }),
     z.object({
       id: z.string(),
       name: z.string().optional(),
+      renderWhen: z.union([LeafConditionSchema, ConditionGroupSchema]).optional(),
       type: z.literal("CheckboxGroup"),
       props: CheckboxGroupElementPropsSchema,
     }),
     z.object({
       id: z.string(),
       name: z.string().optional(),
+      renderWhen: z.union([LeafConditionSchema, ConditionGroupSchema]).optional(),
       type: z.literal("DatePicker"),
       props: DatePickerElementPropsSchema,
     }),
     z.object({
       id: z.string(),
       name: z.string().optional(),
+      renderWhen: z.union([LeafConditionSchema, ConditionGroupSchema]).optional(),
       type: z.literal("Carousel"),
       props: CarouselElementPropsSchema,
       children: z.array(UIElementSchema),
@@ -217,6 +251,7 @@ export const UIElementSchema: z.ZodType<UIElement> = z.lazy(() =>
     z.object({
       id: z.string(),
       name: z.string().optional(),
+      renderWhen: z.union([LeafConditionSchema, ConditionGroupSchema]).optional(),
       type: z.literal("ZStack"),
       props: ZStackElementPropsSchema,
       children: z.array(UIElementSchema),
@@ -224,6 +259,7 @@ export const UIElementSchema: z.ZodType<UIElement> = z.lazy(() =>
     z.object({
       id: z.string(),
       name: z.string().optional(),
+      renderWhen: z.union([LeafConditionSchema, ConditionGroupSchema]).optional(),
       type: z.literal("SafeAreaView"),
       props: SafeAreaViewElementPropsSchema,
       children: z.array(UIElementSchema),