@rocapine/react-native-onboarding-ui 1.36.2 → 1.38.0

package/dist/UI/Pages/ComposableScreen/elements/runActions.js

@@ -0,0 +1,98 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.runActions = runActions;
+const expression_1 = require("./expression");
+// Decode a multi-select variable's stored value (JSON-encoded string[], as
+// written by CheckboxGroup) into a string array. Tolerates undefined / non-array
+// / unparseable input by returning [].
+function decodeArrayValue(raw) {
+    if (!raw)
+        return [];
+    try {
+        const parsed = JSON.parse(raw);
+        return Array.isArray(parsed) ? parsed.map(String) : [];
+    }
+    catch (_a) {
+        return [];
+    }
+}
+// Sequentially runs a list of press actions against the render context. Shared
+// by `Button` (its `actions`) and the generic `onPress` on every UIElement
+// (wired centrally in renderElement.tsx). Semantics:
+//   - "continue"     → advance the onboarding; terminal (stops the loop).
+//   - {setVariable}  → write a variable (expression-evaluated when valueMode === "expression").
+//   - {custom}       → invoke the host-registered customAction with the requested
+//                      variables; warns if unregistered, aborts the loop on throw.
+async function runActions(actions, ctx) {
+    var _a, _b;
+    const { onContinue, setVariable, customActions, variables } = ctx;
+    for (const act of actions) {
+        if (act === "continue") {
+            onContinue();
+            return;
+        }
+        if (act.type === "setVariable") {
+            let value;
+            let kind;
+            if (act.valueMode === "expression") {
+                const computed = (0, expression_1.evaluateSetVariableExpression)(act.value, variables);
+                value = computed.value;
+                kind = computed.kind;
+            }
+            else {
+                value = act.value;
+                kind = act.kind;
+            }
+            if (act.arrayOp) {
+                // Multi-select set operation on the JSON-encoded string[] used by
+                // CheckboxGroup. value/label are the single member being added/removed.
+                const entry = variables[act.name];
+                const curValues = decodeArrayValue(entry === null || entry === void 0 ? void 0 : entry.value);
+                const curLabels = (entry === null || entry === void 0 ? void 0 : entry.label) ? entry.label.split(", ") : [];
+                const memberLabel = (_a = act.label) !== null && _a !== void 0 ? _a : value;
+                const idx = curValues.indexOf(value);
+                const present = idx !== -1;
+                const add = act.arrayOp === "append" || (act.arrayOp === "toggle" && !present);
+                let nextValues;
+                let nextLabels;
+                if (add) {
+                    // Dedup: appending an already-present member is a no-op.
+                    nextValues = present ? curValues : [...curValues, value];
+                    nextLabels = present ? curLabels : [...curLabels, memberLabel];
+                }
+                else {
+                    // remove, or toggle-when-present
+                    nextValues = curValues.filter((_, i) => i !== idx);
+                    nextLabels =
+                        present && idx < curLabels.length
+                            ? curLabels.filter((_, i) => i !== idx)
+                            : curLabels.filter((l) => l !== memberLabel);
+                }
+                setVariable(act.name, {
+                    value: JSON.stringify(nextValues),
+                    label: nextLabels.join(", "),
+                });
+                continue;
+            }
+            setVariable(act.name, { value, label: act.label, kind });
+            continue;
+        }
+        const handler = customActions[act.function];
+        if (!handler) {
+            console.warn(`[ComposableScreen] No customAction registered for "${act.function}"`);
+            continue;
+        }
+        const requested = (_b = act.variables) !== null && _b !== void 0 ? _b : [];
+        const vars = {};
+        for (const name of requested)
+            vars[name] = variables[name];
+        try {
+            await handler({ variables: vars });
+        }
+        catch (err) {
+            console.error(`[ComposableScreen] customAction "${act.function}" threw:`, err);
+            return;
+        }
+    }
+}
+//# sourceMappingURL=runActions.js.map

package/dist/UI/Pages/ComposableScreen/elements/runActions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"runActions.js","sourceRoot":"","sources":["../../../../../src/UI/Pages/ComposableScreen/elements/runActions.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rocapine/react-native-onboarding-ui",
-  "version": "1.36.2",
+  "version": "1.38.0",
   "description": "UI components and renderers for Rocapine Onboarding Studio - Built on top of the headless SDK",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

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

@@ -1,4 +1,5 @@
 import { z } from "zod";
+import { type ButtonAction, ButtonActionSchema } from "./actions";
 
 export type GradientStop = {
   color: string;
@@ -289,6 +290,7 @@ export type BaseBoxProps = {
   elevation?: number;
   transform?: ElementTransform;
   animation?: ElementAnimation;
+  onPress?: ButtonAction[];
 };
 
 export const BaseBoxPropsSchema = z.object({
@@ -323,4 +325,5 @@ export const BaseBoxPropsSchema = z.object({
   elevation: z.number().min(0).optional(),
   transform: TransformSchema.optional(),
   animation: ElementAnimationSchema.optional(),
+  onPress: z.array(ButtonActionSchema).optional(),
 });

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

@@ -6,7 +6,6 @@ import {
   evaluateCondition,
   type LeafCondition,
   type ConditionGroup,
-  type ComposableVariableKind,
   LeafConditionSchema,
   ConditionGroupSchema,
 } from "@rocapine/react-native-onboarding";
@@ -14,59 +13,23 @@ import { BaseBoxProps, BaseBoxPropsSchema } from "./BaseBoxProps";
 import { UIElement } from "../types";
 import { RenderContext, buildShadowStyle, dim, resolveInheritedFontFamily } from "./shared";
 import { GradientBox } from "./GradientBox";
-import { ComposableVariableEntry } from "../../../Provider/OnboardingProgressProvider";
-import { evaluateSetVariableExpression } from "./expression";
 import { triggerHaptic, type HapticStyle } from "./haptics";
+import {
+  type ButtonAction,
+  ButtonActionSchema,
+} from "./actions";
+import { runActions } from "./runActions";
 
-export type CustomButtonAction = {
-  type: "custom";
-  function: string;
-  variables?: string[];
-};
-
-export const CustomButtonActionSchema = z.object({
-  type: z.literal("custom"),
-  function: z.string().min(1, "function must not be empty"),
-  variables: z.array(z.string()).optional(),
-});
-
-export type SetVariableButtonAction = {
-  type: "setVariable";
-  name: string;
-  value: string;
-  label?: string;
-  /**
-   * When `"expression"`, `value` is parsed as an arithmetic expression with
-   * `{{var}}` references, numeric literals, and `+ - * /` (parens supported).
-   * On parse failure, falls back to plain interpolation (string).
-   * Defaults to `"literal"` — `value` stored verbatim.
-   */
-  valueMode?: "literal" | "expression";
-  /**
-   * Tags the stored variable's underlying type. In `"literal"` mode this is
-   * used as-is. In `"expression"` mode the inferred result kind is used
-   * unless `kind` is explicitly set (ignored — expression mode derives kind
-   * from evaluation).
-   */
-  kind?: ComposableVariableKind;
-};
-
-export const SetVariableButtonActionSchema = z.object({
-  type: z.literal("setVariable"),
-  name: z.string().min(1, "name must not be empty"),
-  value: z.string(),
-  label: z.string().optional(),
-  valueMode: z.enum(["literal", "expression"]).optional(),
-  kind: z.enum(["int", "float", "string"]).optional(),
-});
-
-export type ButtonAction = "continue" | CustomButtonAction | SetVariableButtonAction;
-
-export const ButtonActionSchema = z.union([
-  z.literal("continue"),
+// `ButtonAction` and its variants live in `./actions` (shared with the generic
+// `onPress` on BaseBoxProps). Re-exported for back-compat.
+export {
+  type CustomButtonAction,
   CustomButtonActionSchema,
+  type SetVariableButtonAction,
   SetVariableButtonActionSchema,
-]);
+} from "./actions";
+export type { ButtonAction };
+export { ButtonActionSchema };
 
 type ButtonOverridableProps = BaseBoxProps & {
   variant?: "filled" | "outlined" | "ghost";
@@ -145,7 +108,7 @@ type Props = {
 };
 
 export const ButtonElementComponent = ({ element, ctx }: Props): React.ReactElement => {
-  const { theme, onContinue, customActions, variables, setVariable } = ctx;
+  const { theme, variables } = ctx;
   const flatVariables = useMemo(
     () =>
       Object.fromEntries(
@@ -164,46 +127,7 @@ export const ButtonElementComponent = ({ element, ctx }: Props): React.ReactElem
     const { actions, action } = element.props;
     const effective: ButtonAction[] =
       actions ?? (action === "continue" ? ["continue"] : []);
-
-    for (const act of effective) {
-      if (act === "continue") {
-        onContinue();
-        return;
-      }
-      if (act.type === "setVariable") {
-        let value: string;
-        let kind: ComposableVariableKind | undefined;
-        if (act.valueMode === "expression") {
-          const computed = evaluateSetVariableExpression(act.value, variables);
-          value = computed.value;
-          kind = computed.kind;
-        } else {
-          value = act.value;
-          kind = act.kind;
-        }
-        setVariable(act.name, { value, label: act.label, kind });
-        continue;
-      }
-      const handler = customActions[act.function];
-      if (!handler) {
-        console.warn(
-          `[ComposableScreen] No customAction registered for "${act.function}"`
-        );
-        continue;
-      }
-      const requested = act.variables ?? [];
-      const vars: Record<string, ComposableVariableEntry | undefined> = {};
-      for (const name of requested) vars[name] = variables[name];
-      try {
-        await handler({ variables: vars });
-      } catch (err) {
-        console.error(
-          `[ComposableScreen] customAction "${act.function}" threw:`,
-          err
-        );
-        return;
-      }
-    }
+    await runActions(effective, ctx);
   };
 
   // State overrides are merged over base props. disabledStyle wins over the

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

@@ -27,6 +27,10 @@ export type ProgressIndicatorElementProps = BaseBoxProps & {
   autoplay?: boolean;
   loop?: boolean;
   initialValue?: number;
+  minValue?: number;
+  maxValue?: number;
+  step?: number;
+  labelSuffix?: string;
   duration?: number;
   delay?: number;
   easing?: ProgressEasing;
@@ -43,10 +47,14 @@ const ProgressEasingSchema = z.enum(["linear", "ease-in", "ease-out", "ease-in-o
 export const ProgressIndicatorElementPropsSchema = BaseBoxPropsSchema.extend({
   variant: z.enum(["linear", "circular"]).optional(),
   variableName: z.string().min(1).optional(),
-  value: z.number().min(0).max(100).optional(),
+  value: z.number().optional(),
   autoplay: z.boolean().optional(),
   loop: z.boolean().optional(),
-  initialValue: z.number().min(0).max(100).optional(),
+  initialValue: z.number().optional(),
+  minValue: z.number().optional(),
+  maxValue: z.number().optional(),
+  step: z.number().gt(0).optional(),
+  labelSuffix: z.string().optional(),
   duration: z.number().min(0).optional(),
   delay: z.number().min(0).optional(),
   easing: ProgressEasingSchema.optional(),
@@ -60,7 +68,7 @@ export const ProgressIndicatorElementPropsSchema = BaseBoxPropsSchema.extend({
 
 const AnimatedCircle = Animated.createAnimatedComponent(Circle);
 
-const clamp = (n: number): number => Math.max(0, Math.min(100, n));
+const clamp = (n: number, min: number, max: number): number => Math.max(min, Math.min(max, n));
 
 type ProgressUIElement = Extract<UIElement, { type: "ProgressIndicator" }>;
 
@@ -74,7 +82,12 @@ export const ProgressIndicatorElementComponent = ({ element, ctx }: Props): Reac
   const { props } = element;
 
   const variant = props.variant ?? "linear";
-  const initialValue = clamp(props.initialValue ?? 0);
+  const minValue = props.minValue ?? 0;
+  const maxValue = props.maxValue ?? 100;
+  const range = maxValue - minValue;
+  const step = props.step && props.step > 0 ? props.step : 1;
+  const labelSuffix = props.labelSuffix ?? "%";
+  const initialValue = clamp(props.initialValue ?? minValue, minValue, maxValue);
   const duration = props.duration ?? 1000;
   const delay = props.delay ?? 0;
   const easing = EASING_MAP[props.easing ?? "ease-in-out"];
@@ -85,55 +98,67 @@ export const ProgressIndicatorElementComponent = ({ element, ctx }: Props): Reac
   const trackColor = props.trackColor ?? theme.colors.neutral.lower;
   const labelColor = props.labelColor ?? theme.colors.text.primary;
 
-  // Bound variable value (input mode, non-autoplay) or static value.
+  // Snap a raw value to `step` within [minValue, maxValue]. The label and the
+  // written variable carry the snapped value, not a percentage.
+  const snap = (v: number): number =>
+    clamp(minValue + Math.round((v - minValue) / step) * step, minValue, maxValue);
+
+  // Bound variable value (input mode, non-autoplay) or static value. `progress`
+  // is the value in [minValue, maxValue]; the fill fraction is derived from it.
   const boundRaw = props.variableName ? variables[props.variableName]?.value : undefined;
-  const boundValue = boundRaw !== undefined ? clamp(Number(boundRaw) || 0) : undefined;
-  const target = autoplay ? 100 : clamp(boundValue ?? props.value ?? initialValue);
+  const boundValue = boundRaw !== undefined ? clamp(Number(boundRaw) || 0, minValue, maxValue) : undefined;
+  const target = autoplay ? maxValue : clamp(boundValue ?? props.value ?? initialValue, minValue, maxValue);
 
   const progress = useSharedValue(initialValue);
-  const [percentage, setPercentage] = useState(Math.round(initialValue));
+  const [displayValue, setDisplayValue] = useState(snap(initialValue));
 
   // Mirror the animated value into a label + (autoplay) the bound variable.
-  // Reaction input is the *rounded* percent, so the JS callback fires only when
-  // the integer changes (≤100 hops/sweep) rather than every frame — avoids a
-  // per-frame context write storm (setVariable re-renders all variable consumers).
+  // Reaction input is the *step-snapped* value, so the JS callback fires only
+  // when the snapped value changes ((maxValue-minValue)/step hops/sweep) rather
+  // than every frame — avoids a per-frame context write storm (setVariable
+  // re-renders all variable consumers). Coarse `step` for large ranges.
   const showLabel = props.showLabel ?? false;
   const variableName = props.variableName;
   const writeVariable = (v: number) => {
     if (autoplay && variableName) {
-      setVariable(variableName, { value: String(v), kind: "int" });
+      setVariable(variableName, { value: String(v), kind: Number.isInteger(v) ? "int" : "float" });
     }
   };
   const writesVariable = autoplay && !!variableName;
   // The dependency array is REQUIRED. Without it reanimated tears down and
   // rebuilds this mapper on EVERY render. A looping `showLabel` indicator
-  // re-renders ~40×/s forever (one setPercentage per frame), so its mapper would
-  // be start/stopped ~40×/s indefinitely — perpetual churn on the UI-thread mapper
+  // re-renders continuously (one setDisplayValue per step hop), so its mapper
+  // would be start/stopped indefinitely — perpetual churn on the UI-thread mapper
   // scheduler that destabilizes *other* running animations on the same screen
   // (they visibly reset mid/after a sweep — "finishes then resets for no reason").
-  // Recreating also resets `prev` to undefined, defeating the `rounded === prev`
+  // Recreating also resets `prev` to undefined, defeating the `snapped === prev`
   // guard so the JS callbacks over-fire. Keying on the values the worklet branches
-  // on keeps the mapper stable; the JS fns it calls (setPercentage, setVariable via
-  // writeVariable) are already stable across renders.
+  // on (incl. minValue/maxValue/step) keeps the mapper stable; the JS fns it calls
+  // (setDisplayValue, setVariable via writeVariable) are already stable across renders.
   useAnimatedReaction(
-    () => Math.round(progress.value),
-    (rounded, prev) => {
-      if (rounded === prev) return;
-      if (showLabel) runOnJS(setPercentage)(rounded);
-      if (writesVariable) runOnJS(writeVariable)(rounded);
+    () => {
+      // Inline snap (worklet — can't call the JS `snap` closure). Captures the
+      // primitive minValue/maxValue/step (re-keyed via the deps array below).
+      const snapped = minValue + Math.round((progress.value - minValue) / step) * step;
+      return Math.max(minValue, Math.min(maxValue, snapped));
+    },
+    (snapped, prev) => {
+      if (snapped === prev) return;
+      if (showLabel) runOnJS(setDisplayValue)(snapped);
+      if (writesVariable) runOnJS(writeVariable)(snapped);
     },
-    [showLabel, writesVariable, variableName]
+    [showLabel, writesVariable, variableName, minValue, maxValue, step]
   );
 
-  // Autoplay: animate initialValue -> 100, optionally looping, after `delay`.
+  // Autoplay: animate initialValue -> maxValue, optionally looping, after `delay`.
   useEffect(() => {
     if (!autoplay) return;
     progress.value = initialValue;
-    const anim = withTiming(100, { duration, easing });
+    const anim = withTiming(maxValue, { duration, easing });
     const looped = loop ? withRepeat(anim, -1, false) : anim;
     progress.value = delay > 0 ? withDelay(delay, looped) : looped;
     return () => cancelAnimation(progress);
-  }, [autoplay, loop, duration, delay, easing, initialValue]);
+  }, [autoplay, loop, duration, delay, easing, initialValue, maxValue]);
 
   // Bound / static (non-autoplay): animate toward the current target after `delay`.
   useEffect(() => {
@@ -149,12 +174,14 @@ export const ProgressIndicatorElementComponent = ({ element, ctx }: Props): Reac
   const radius = (size - strokeWidth) / 2;
   const circumference = 2 * Math.PI * radius;
 
-  const animatedCircleProps = useAnimatedProps(() => ({
-    strokeDashoffset: circumference * (1 - progress.value / 100),
-  }));
-  const animatedFillStyle = useAnimatedStyle(() => ({
-    width: `${progress.value}%`,
-  }));
+  const animatedCircleProps = useAnimatedProps(() => {
+    const frac = range > 0 ? (progress.value - minValue) / range : 0;
+    return { strokeDashoffset: circumference * (1 - frac) };
+  });
+  const animatedFillStyle = useAnimatedStyle(() => {
+    const frac = range > 0 ? (progress.value - minValue) / range : 0;
+    return { width: `${frac * 100}%` };
+  });
 
   const containerStyle = {
     alignSelf: props.alignSelf,
@@ -212,7 +239,7 @@ export const ProgressIndicatorElementComponent = ({ element, ctx }: Props): Reac
                 fontFamily: theme.typography.textStyles.heading2.fontFamily,
               }}
             >
-              {percentage}%
+              {displayValue}{labelSuffix}
             </Text>
           </View>
         ) : null}
@@ -253,7 +280,7 @@ export const ProgressIndicatorElementComponent = ({ element, ctx }: Props): Reac
             textAlign: "right",
           }}
         >
-          {percentage}%
+          {displayValue}{labelSuffix}
         </Text>
       ) : null}
     </View>

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

@@ -0,0 +1,53 @@
+import { z } from "zod";
+
+// Self-contained UI mirror of the headless `ButtonAction` (packages/onboarding
+// src/steps/common.types.ts). Kept here as a leaf module (imports only zod) so
+// both BaseBoxProps.ts (schema) and shared.ts (runActions dispatch) can depend
+// on it without an import cycle. Shared by `Button.actions` and the generic
+// `onPress` on every UIElement.
+
+export type CustomButtonAction = {
+  type: "custom";
+  function: string;
+  variables?: string[];
+};
+
+export const CustomButtonActionSchema = z.object({
+  type: z.literal("custom"),
+  function: z.string().min(1, "function must not be empty"),
+  variables: z.array(z.string()).optional(),
+});
+
+export type SetVariableButtonAction = {
+  type: "setVariable";
+  name: string;
+  value: string;
+  label?: string;
+  valueMode?: "literal" | "expression";
+  kind?: "int" | "float" | "string";
+  /**
+   * Treat the target variable as the JSON-encoded `string[]` multi-select
+   * collection used by `CheckboxGroup` and apply `value` as a set operation
+   * (`"append"` / `"remove"` / `"toggle"`) instead of overwriting. `kind` is
+   * ignored in this mode. Omit for the default overwrite behavior.
+   */
+  arrayOp?: "append" | "remove" | "toggle";
+};
+
+export const SetVariableButtonActionSchema = z.object({
+  type: z.literal("setVariable"),
+  name: z.string().min(1, "name must not be empty"),
+  value: z.string(),
+  label: z.string().optional(),
+  valueMode: z.enum(["literal", "expression"]).optional(),
+  kind: z.enum(["int", "float", "string"]).optional(),
+  arrayOp: z.enum(["append", "remove", "toggle"]).optional(),
+});
+
+export type ButtonAction = "continue" | CustomButtonAction | SetVariableButtonAction;
+
+export const ButtonActionSchema = z.union([
+  z.literal("continue"),
+  CustomButtonActionSchema,
+  SetVariableButtonActionSchema,
+]);

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

@@ -1,8 +1,10 @@
 import React from "react";
+import { Pressable } from "react-native";
 import { evaluateCondition } from "@rocapine/react-native-onboarding";
 import { UIElement } from "../types";
 import { BaseBoxProps } from "./BaseBoxProps";
 import { RenderContext } from "./shared";
+import { runActions } from "./runActions";
 import { StackElementComponent } from "./StackElement";
 import { TextElementComponent } from "./TextElement";
 import { RichTextElementComponent } from "./RichTextElement";
@@ -26,6 +28,19 @@ import { KeyboardAvoidingViewElementComponent } from "./KeyboardAvoidingViewElem
 import { ProgressIndicatorElementComponent } from "./ProgressIndicatorElement";
 import { AnimatedBox } from "./AnimatedBox";
 
+// Element types that own their own press / focus / scroll handling. The generic
+// `onPress` (BaseBoxProps) is NOT wired for these — Button/RadioGroup/Checkbox/
+// DatePicker already dispatch actions or selections; Input/WheelPicker would have
+// their focus / scroll-selection intercepted by an outer Pressable.
+const PRESS_HANDLED_TYPES = new Set<UIElement["type"]>([
+  "Button",
+  "RadioGroup",
+  "CheckboxGroup",
+  "DatePicker",
+  "Input",
+  "WheelPicker",
+]);
+
 export const renderElement = (
   element: UIElement,
   ctx: RenderContext,
@@ -128,12 +143,52 @@ export const renderElement = (
     return null;
   })();
 
+  // Cast to BaseBoxProps: not every element's props type extends it (e.g.
+  // WheelPicker), but the onPress/animation/transform/flex/alignSelf fields are
+  // all optional BaseBoxProps members and simply read as undefined when absent.
+  const p = element.props as BaseBoxProps;
+
+  // Generic onPress: make any non-pressable element tappable, dispatching the
+  // same action list as Button via runActions. Skipped for PRESS_HANDLED_TYPES.
+  // A Pressable around a scroll/carousel keeps inner scrolling working — RN's
+  // gesture responder gives the scroll the touch when it pans.
+  let content: React.ReactNode = node;
+  if (
+    content !== null &&
+    p.onPress &&
+    p.onPress.length > 0 &&
+    !PRESS_HANDLED_TYPES.has(element.type)
+  ) {
+    const onPress = p.onPress;
+    // The Pressable must be layout-transparent (like AnimatedBox): forward the
+    // element's flex sizing so the wrapper participates in its parent's flex
+    // context exactly as the element would. Without this, the style-less
+    // Pressable sizes to content while the element's `flex`/`flexShrink` sit on
+    // the inner node — breaking row splits (cards overflow) and column flow.
+    // Mirror StackElement's `parentType === "XStack"` flexShrink:1 default.
+    content = (
+      <Pressable
+        key={element.id}
+        onPress={() => {
+          void runActions(onPress, ctx);
+        }}
+        style={{
+          flex: p.flex,
+          flexGrow: p.flexGrow,
+          flexShrink: p.flexShrink ?? (parentType === "XStack" ? 1 : undefined),
+          alignSelf: p.alignSelf,
+        }}
+      >
+        {content}
+      </Pressable>
+    );
+  }
+
   // Wrap only when motion is requested — zero overhead (no extra view) otherwise.
   // Cast to BaseBoxProps: not every element's props type extends it (e.g.
   // WheelPicker), but the animation/transform/flex/alignSelf fields are all
   // optional BaseBoxProps members and simply read as undefined when absent.
-  const p = element.props as BaseBoxProps;
-  if (node !== null && (p.animation || p.transform)) {
+  if (content !== null && (p.animation || p.transform)) {
     return (
       <AnimatedBox
         key={element.id}
@@ -142,10 +197,10 @@ export const renderElement = (
         flex={p.flex}
         alignSelf={p.alignSelf}
       >
-        {node}
+        {content}
       </AnimatedBox>
     );
   }
 
-  return node;
+  return content;
 };