@rocapine/react-native-onboarding-ui 1.20.0 → 1.23.0

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

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { View, type LayoutChangeEvent } from "react-native";
 import { z } from "zod";
 import { useSharedValue } from "react-native-reanimated";
@@ -20,6 +20,8 @@ export type CarouselElementProps = BaseBoxProps & {
   dotHeight?: number;
   dotsGap?: number;
   dotsMarginTop?: number;
+  defaultIndex?: number | null;
+  variableName?: string;
 };
 
 export const CarouselElementPropsSchema = BaseBoxPropsSchema.extend({
@@ -34,6 +36,8 @@ export const CarouselElementPropsSchema = BaseBoxPropsSchema.extend({
   dotHeight: z.number().nonnegative().optional().default(4),
   dotsGap: z.number().nonnegative().optional().default(8),
   dotsMarginTop: z.number().optional().default(12),
+  defaultIndex: z.number().int().nonnegative().nullable().optional(),
+  variableName: z.string().min(1).optional(),
 });
 
 type CarouselUIElement = Extract<UIElement, { type: "Carousel" }>;
@@ -54,6 +58,39 @@ export function CarouselElementComponent({ element, ctx }: Props): React.ReactEl
 
   const carouselType = props.carouselType ?? "normal";
 
+  const variableName = props.variableName;
+  const variableValue = variableName ? ctx.variables[variableName]?.value : undefined;
+  const childrenCount = children.length;
+  const clampIndex = (n: number) => Math.max(0, Math.min(n, Math.max(0, childrenCount - 1)));
+
+  // Frozen on first mount — RNRC `defaultIndex` only applies at mount.
+  const initialIndexRef = useRef<number | null>(null);
+  if (initialIndexRef.current === null) {
+    const parsed = variableValue !== undefined ? parseInt(variableValue, 10) : NaN;
+    const fromVar = Number.isFinite(parsed) ? parsed : null;
+    initialIndexRef.current = clampIndex(fromVar ?? props.defaultIndex ?? 0);
+  }
+  const lastSyncedIndexRef = useRef<number>(initialIndexRef.current);
+
+  useEffect(() => {
+    if (!variableName) return;
+    const parsed = parseInt(variableValue ?? "", 10);
+    if (!Number.isFinite(parsed)) return;
+    const target = clampIndex(parsed);
+    if (target === lastSyncedIndexRef.current) return;
+    lastSyncedIndexRef.current = target;
+    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) {
@@ -132,6 +169,7 @@ export function CarouselElementComponent({ element, ctx }: Props): React.ReactEl
             loop={props.loop}
             autoPlay={props.autoPlay}
             autoPlayInterval={props.autoPlayInterval}
+            defaultIndex={initialIndexRef.current ?? 0}
             snapEnabled={true}
             pagingEnabled={true}
             data={children}
@@ -142,6 +180,12 @@ export function CarouselElementComponent({ element, ctx }: Props): React.ReactEl
             onProgressChange={(_: number, absoluteProgress: number) => {
               progress.value = absoluteProgress;
             }}
+            onSnapToItem={(index: number) => {
+              if (!variableName) return;
+              if (index === lastSyncedIndexRef.current) return;
+              lastSyncedIndexRef.current = index;
+              ctx.setVariable(variableName, { value: String(index) });
+            }}
             {...(modeProps as any)}
           />
         )}

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/expression.ts

@@ -0,0 +1,199 @@
+import type { ComposableVariableEntry, ComposableVariableKind } from "@rocapine/react-native-onboarding";
+import { interpolate } from "./shared";
+
+type Token =
+  | { kind: "num"; value: number; isInt: boolean }
+  | { kind: "var"; name: string }
+  | { kind: "op"; op: "+" | "-" | "*" | "/" }
+  | { kind: "lparen" }
+  | { kind: "rparen" }
+  | { kind: "eof" };
+
+type Value =
+  | { kind: "number"; n: number; isInt: boolean }
+  | { kind: "string"; s: string };
+
+const isDigit = (c: string) => c >= "0" && c <= "9";
+const isSpace = (c: string) => c === " " || c === "\t" || c === "\n" || c === "\r";
+
+function tokenize(input: string): Token[] | null {
+  const tokens: Token[] = [];
+  let i = 0;
+  while (i < input.length) {
+    const c = input[i];
+    if (isSpace(c)) {
+      i++;
+      continue;
+    }
+    if (c === "{" && input[i + 1] === "{") {
+      const end = input.indexOf("}}", i + 2);
+      if (end === -1) return null;
+      const name = input.slice(i + 2, end).trim();
+      if (!name) return null;
+      tokens.push({ kind: "var", name });
+      i = end + 2;
+      continue;
+    }
+    if (c === "(") { tokens.push({ kind: "lparen" }); i++; continue; }
+    if (c === ")") { tokens.push({ kind: "rparen" }); i++; continue; }
+    if (c === "+" || c === "-" || c === "*" || c === "/") {
+      tokens.push({ kind: "op", op: c });
+      i++;
+      continue;
+    }
+    if (isDigit(c) || (c === "." && isDigit(input[i + 1] ?? ""))) {
+      let j = i;
+      let dot = false;
+      while (j < input.length && (isDigit(input[j]) || input[j] === ".")) {
+        if (input[j] === ".") {
+          if (dot) return null;
+          dot = true;
+        }
+        j++;
+      }
+      const num = parseFloat(input.slice(i, j));
+      if (!Number.isFinite(num)) return null;
+      tokens.push({ kind: "num", value: num, isInt: !dot });
+      i = j;
+      continue;
+    }
+    return null;
+  }
+  tokens.push({ kind: "eof" });
+  return tokens;
+}
+
+function resolveVar(name: string, vars: Record<string, ComposableVariableEntry>): Value {
+  const entry = vars[name];
+  // Missing variable in arithmetic context defaults to numeric 0 so increment
+  // / decrement patterns work on first click before the variable is seeded.
+  if (!entry) return { kind: "number", n: 0, isInt: true };
+  const raw = entry.value;
+  const k = entry.kind;
+  if (k === "string") return { kind: "string", s: raw };
+  if (k === "int") {
+    const n = parseInt(raw, 10);
+    return Number.isFinite(n) ? { kind: "number", n, isInt: true } : { kind: "string", s: raw };
+  }
+  if (k === "float") {
+    const n = parseFloat(raw);
+    return Number.isFinite(n) ? { kind: "number", n, isInt: false } : { kind: "string", s: raw };
+  }
+  // No kind tag — infer from string content.
+  const trimmed = raw.trim();
+  if (trimmed !== "" && /^-?\d+(\.\d+)?$/.test(trimmed)) {
+    const n = parseFloat(trimmed);
+    if (Number.isFinite(n)) return { kind: "number", n, isInt: Number.isInteger(n) && !trimmed.includes(".") };
+  }
+  return { kind: "string", s: raw };
+}
+
+function valueToString(v: Value): string {
+  if (v.kind === "string") return v.s;
+  if (v.isInt) return Math.trunc(v.n).toString();
+  return v.n.toString();
+}
+
+function parse(tokens: Token[], vars: Record<string, ComposableVariableEntry>): Value | null {
+  let pos = 0;
+  const peek = () => tokens[pos];
+  const advance = () => tokens[pos++];
+
+  const factor = (): Value | null => {
+    const t = peek();
+    if (t.kind === "lparen") {
+      advance();
+      const v = expr();
+      if (!v) return null;
+      if (peek().kind !== "rparen") return null;
+      advance();
+      return v;
+    }
+    if (t.kind === "op" && t.op === "-") {
+      advance();
+      const v = factor();
+      if (!v || v.kind !== "number") return null;
+      return { kind: "number", n: -v.n, isInt: v.isInt };
+    }
+    if (t.kind === "num") {
+      advance();
+      return { kind: "number", n: t.value, isInt: t.isInt };
+    }
+    if (t.kind === "var") {
+      advance();
+      return resolveVar(t.name, vars);
+    }
+    return null;
+  };
+
+  const term = (): Value | null => {
+    let left = factor();
+    if (!left) return null;
+    while (peek().kind === "op" && ((peek() as any).op === "*" || (peek() as any).op === "/")) {
+      const op = (advance() as any).op as "*" | "/";
+      const right = factor();
+      if (!right) return null;
+      if (left.kind !== "number" || right.kind !== "number") return null;
+      if (op === "/" && right.n === 0) return null;
+      const result: number = op === "*" ? left.n * right.n : left.n / right.n;
+      if (!Number.isFinite(result)) return null;
+      const isInt: boolean = op === "*" ? left.isInt && right.isInt : Number.isInteger(result);
+      left = { kind: "number", n: result, isInt };
+    }
+    return left;
+  };
+
+  const expr = (): Value | null => {
+    let left = term();
+    if (!left) return null;
+    while (peek().kind === "op" && ((peek() as any).op === "+" || (peek() as any).op === "-")) {
+      const op = (advance() as any).op as "+" | "-";
+      const right = term();
+      if (!right) return null;
+      if (op === "+") {
+        if (left.kind === "number" && right.kind === "number") {
+          left = { kind: "number", n: left.n + right.n, isInt: left.isInt && right.isInt };
+        } else {
+          left = { kind: "string", s: valueToString(left) + valueToString(right) };
+        }
+      } else {
+        if (left.kind !== "number" || right.kind !== "number") return null;
+        left = { kind: "number", n: left.n - right.n, isInt: left.isInt && right.isInt };
+      }
+    }
+    return left;
+  };
+
+  const result = expr();
+  if (!result) return null;
+  if (peek().kind !== "eof") return null;
+  return result;
+}
+
+/**
+ * Evaluate a `setVariable` expression-mode value template.
+ *
+ * Accepts `{{var}}` references, numeric literals (int / float), `+ - * /` and
+ * parentheses. Variable values are coerced according to their `kind` tag
+ * (string / int / float), or inferred from their string content when no tag
+ * is present. `+` on any non-numeric operand becomes string concat.
+ *
+ * On any parse or evaluation failure, falls back to plain interpolation
+ * (existing `interpolate()` semantics, returns a string).
+ */
+export function evaluateSetVariableExpression(
+  template: string,
+  vars: Record<string, ComposableVariableEntry>
+): { value: string; kind: ComposableVariableKind } {
+  const tokens = tokenize(template);
+  if (tokens) {
+    const result = parse(tokens, vars);
+    if (result) {
+      if (result.kind === "number") {
+        return { value: valueToString(result), kind: result.isInt ? "int" : "float" };
+      }
+      return { value: result.s, kind: "string" };
+    }
+  }
+  return { value: interpolate(template, vars), kind: "string" };
+}

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),