@rocapine/react-native-onboarding-ui 1.31.0 → 1.33.0

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

@@ -1,9 +1,11 @@
 import React from "react";
 import { evaluateCondition } from "@rocapine/react-native-onboarding";
 import { UIElement } from "../types";
+import { BaseBoxProps } from "./BaseBoxProps";
 import { RenderContext } from "./shared";
 import { StackElementComponent } from "./StackElement";
 import { TextElementComponent } from "./TextElement";
+import { RichTextElementComponent } from "./RichTextElement";
 import { ImageElementComponent } from "./ImageElement";
 import { LottieElementComponent } from "./LottieElement";
 import { RiveElementRenderer } from "./RiveElement";
@@ -21,11 +23,12 @@ import { SafeAreaViewElementComponent } from "./SafeAreaViewElement";
 import { ScrollViewElementComponent } from "./ScrollViewElement";
 import { KeyboardAvoidingViewElementComponent } from "./KeyboardAvoidingViewElement";
 import { ProgressIndicatorElementComponent } from "./ProgressIndicatorElement";
+import { AnimatedBox } from "./AnimatedBox";
 
 export const renderElement = (
   element: UIElement,
   ctx: RenderContext,
-  parentType?: "XStack" | "YStack" | "ZStack"
+  parentType?: "XStack" | "YStack" | "ZStack" | "RichText"
 ): React.ReactNode => {
   if (element.renderWhen) {
     const flatVars = Object.fromEntries(
@@ -34,6 +37,9 @@ export const renderElement = (
     if (!evaluateCondition(element.renderWhen, flatVars)) return null;
   }
 
+  // Dispatch to the concrete element renderer. Captured into `node` so a single
+  // AnimatedBox wrapper can apply animation/transform to any of the 15 types.
+  const node = ((): React.ReactNode => {
   if (element.type === "YStack" || element.type === "XStack") {
     return <StackElementComponent key={element.id} element={element} ctx={ctx} parentType={parentType} />;
   }
@@ -42,6 +48,10 @@ export const renderElement = (
     return <TextElementComponent key={element.id} element={element} ctx={ctx} parentType={parentType} />;
   }
 
+  if (element.type === "RichText") {
+    return <RichTextElementComponent key={element.id} element={element} ctx={ctx} parentType={parentType} />;
+  }
+
   if (element.type === "Image") {
     return <ImageElementComponent key={element.id} element={element} ctx={ctx} />;
   }
@@ -110,5 +120,27 @@ export const renderElement = (
     return <ProgressIndicatorElementComponent key={element.id} element={element} ctx={ctx} />;
   }
 
-  return null;
+    return null;
+  })();
+
+  // 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)) {
+    return (
+      <AnimatedBox
+        key={element.id}
+        animation={p.animation}
+        transform={p.transform}
+        flex={p.flex}
+        alignSelf={p.alignSelf}
+      >
+        {node}
+      </AnimatedBox>
+    );
+  }
+
+  return node;
 };

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

@@ -11,9 +11,27 @@ export type RenderContext = {
   setVariable: (key: string, entry: ComposableVariableEntry) => void;
   onContinue: () => void;
   customActions: CustomActions;
-  renderChildren: (elements: UIElement[], parentType: "XStack" | "YStack" | "ZStack") => React.ReactNode;
+  renderChildren: (elements: UIElement[], parentType: "XStack" | "YStack" | "ZStack" | "RichText") => React.ReactNode;
 };
 
+// Text-style defaults a `RichText` container hands down to its child `Text`
+// elements. A `<View>` doesn't propagate text style to nested `<Text>`, so the
+// RichText renderer publishes these via context and `TextElementComponent`
+// merges them under its own props (child always wins). Empty default ({}) means
+// Text elements outside a RichText behave unchanged.
+export type InheritedTextStyle = {
+  fontSize?: number;
+  fontWeight?: string;
+  fontFamily?: string | "inherit";
+  fontStyle?: "normal" | "italic";
+  color?: string;
+  textAlign?: "left" | "center" | "right";
+  letterSpacing?: number;
+  lineHeight?: number;
+};
+
+export const RichTextStyleContext = React.createContext<InheritedTextStyle>({});
+
 export const interpolate = (template: string, variables: Record<string, ComposableVariableEntry>): string =>
   template.replace(/\{\{([^}]+?)\}\}/g, (_, key) => variables[key]?.label ?? variables[key]?.value ?? "");
 

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

@@ -10,6 +10,7 @@ import {
 import { CustomPayloadSchema } from "../types";
 import { type StackElementProps, StackElementPropsSchema } from "./elements/StackElement";
 import { type TextElementProps, TextElementPropsSchema } from "./elements/TextElement";
+import { type RichTextElementProps, RichTextElementPropsSchema } from "./elements/RichTextElement";
 import { type ImageElementProps, ImageElementPropsSchema } from "./elements/ImageElement";
 import { type LottieElementProps, LottieElementPropsSchema } from "./elements/LottieElement";
 import { type RiveElementProps, RiveElementPropsSchema } from "./elements/RiveElement";
@@ -37,6 +38,7 @@ export type { BaseBoxProps } from "./elements/BaseBoxProps";
 export { BaseBoxPropsSchema } from "./elements/BaseBoxProps";
 export type { StackElementProps } from "./elements/StackElement";
 export type { TextElementProps } from "./elements/TextElement";
+export type { RichTextElementProps } from "./elements/RichTextElement";
 export type { ImageElementProps } from "./elements/ImageElement";
 export type { LottieElementProps } from "./elements/LottieElement";
 export type { RiveElementProps } from "./elements/RiveElement";
@@ -76,6 +78,14 @@ export type UIElement =
       type: "Text";
       props: TextElementProps;
     }
+  | {
+      id: string;
+      name?: string;
+      renderWhen?: LeafCondition | ConditionGroup;
+      type: "RichText";
+      props: RichTextElementProps;
+      children: Array<Extract<UIElement, { type: "Text" }>>;
+    }
   | {
       id: string;
       name?: string;
@@ -201,6 +211,17 @@ export type UIElement =
       props: ProgressIndicatorElementProps;
     };
 
+// The `Text` variant, extracted so `RichText` can restrict its children to
+// Text-only (children: z.array(TextUIElementSchema)) while the union references
+// the same object.
+const TextUIElementSchema = z.object({
+  id: z.string(),
+  name: z.string().optional(),
+  renderWhen: z.union([LeafConditionSchema, ConditionGroupSchema]).optional(),
+  type: z.literal("Text"),
+  props: TextElementPropsSchema,
+});
+
 export const UIElementSchema: z.ZodType<UIElement> = z.lazy(() =>
   z.union([
     z.object({
@@ -211,12 +232,14 @@ export const UIElementSchema: z.ZodType<UIElement> = z.lazy(() =>
       props: StackElementPropsSchema,
       children: z.array(UIElementSchema),
     }),
+    TextUIElementSchema,
     z.object({
       id: z.string(),
       name: z.string().optional(),
       renderWhen: z.union([LeafConditionSchema, ConditionGroupSchema]).optional(),
-      type: z.literal("Text"),
-      props: TextElementPropsSchema,
+      type: z.literal("RichText"),
+      props: RichTextElementPropsSchema,
+      children: z.array(TextUIElementSchema),
     }),
     z.object({
       id: z.string(),