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

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

@@ -50,6 +50,213 @@ export const ShadowOffsetSchema = z.object({
   height: z.number(),
 });
 
+// ---------------------------------------------------------------------------
+// Animation / Transform surface
+//
+// Schema stays intentionally close to react-native-reanimated: `preset` values
+// are the *exact* reanimated builder names (e.g. `FadeInDown`, `SlideOutLeft`,
+// `LinearTransition`), so the UI renderer resolves them by direct namespace
+// lookup (`Reanimated[preset]`) rather than a translation table. Modifier fields
+// (`duration`/`delay`/`spring`/`easing`) map to reanimated builder methods
+// (`.duration().delay().springify().easing()`).
+// ---------------------------------------------------------------------------
+
+// Reuses the easing-name convention from ProgressIndicatorElement.
+export type AnimationEasing = "linear" | "ease-in" | "ease-out" | "ease-in-out";
+
+const AnimationEasingSchema = z.enum(["linear", "ease-in", "ease-out", "ease-in-out"]);
+
+// Mirrors reanimated's `.springify(config)` — only the fields it accepts.
+// When `spring` is present it wins over `easing` (matches reanimated semantics).
+export type SpringConfig = {
+  damping?: number;
+  stiffness?: number;
+  mass?: number;
+};
+
+const SpringConfigSchema = z.object({
+  damping: z.number().positive().optional(),
+  stiffness: z.number().positive().optional(),
+  mass: z.number().positive().optional(),
+});
+
+// Exact reanimated entering builder names.
+export type EnteringPreset =
+  | "FadeIn" | "FadeInUp" | "FadeInDown" | "FadeInLeft" | "FadeInRight"
+  | "SlideInUp" | "SlideInDown" | "SlideInLeft" | "SlideInRight"
+  | "ZoomIn" | "ZoomInRotate" | "ZoomInUp" | "ZoomInDown" | "ZoomInLeft" | "ZoomInRight"
+  | "ZoomInEasyUp" | "ZoomInEasyDown"
+  | "BounceIn" | "BounceInUp" | "BounceInDown" | "BounceInLeft" | "BounceInRight"
+  | "FlipInXUp" | "FlipInYLeft" | "FlipInXDown" | "FlipInYRight" | "FlipInEasyX" | "FlipInEasyY"
+  | "StretchInX" | "StretchInY"
+  | "RotateInDownLeft" | "RotateInDownRight" | "RotateInUpLeft" | "RotateInUpRight"
+  | "RollInLeft" | "RollInRight"
+  | "PinwheelIn"
+  | "LightSpeedInLeft" | "LightSpeedInRight";
+
+const EnteringPresetSchema = z.enum([
+  "FadeIn", "FadeInUp", "FadeInDown", "FadeInLeft", "FadeInRight",
+  "SlideInUp", "SlideInDown", "SlideInLeft", "SlideInRight",
+  "ZoomIn", "ZoomInRotate", "ZoomInUp", "ZoomInDown", "ZoomInLeft", "ZoomInRight",
+  "ZoomInEasyUp", "ZoomInEasyDown",
+  "BounceIn", "BounceInUp", "BounceInDown", "BounceInLeft", "BounceInRight",
+  "FlipInXUp", "FlipInYLeft", "FlipInXDown", "FlipInYRight", "FlipInEasyX", "FlipInEasyY",
+  "StretchInX", "StretchInY",
+  "RotateInDownLeft", "RotateInDownRight", "RotateInUpLeft", "RotateInUpRight",
+  "RollInLeft", "RollInRight",
+  "PinwheelIn",
+  "LightSpeedInLeft", "LightSpeedInRight",
+]);
+
+// Exact reanimated exiting builder names.
+export type ExitingPreset =
+  | "FadeOut" | "FadeOutUp" | "FadeOutDown" | "FadeOutLeft" | "FadeOutRight"
+  | "SlideOutUp" | "SlideOutDown" | "SlideOutLeft" | "SlideOutRight"
+  | "ZoomOut" | "ZoomOutRotate" | "ZoomOutUp" | "ZoomOutDown" | "ZoomOutLeft" | "ZoomOutRight"
+  | "ZoomOutEasyUp" | "ZoomOutEasyDown"
+  | "BounceOut" | "BounceOutUp" | "BounceOutDown" | "BounceOutLeft" | "BounceOutRight"
+  | "FlipOutXUp" | "FlipOutYLeft" | "FlipOutXDown" | "FlipOutYRight" | "FlipOutEasyX" | "FlipOutEasyY"
+  | "StretchOutX" | "StretchOutY"
+  | "RotateOutDownLeft" | "RotateOutDownRight" | "RotateOutUpLeft" | "RotateOutUpRight"
+  | "RollOutLeft" | "RollOutRight"
+  | "PinwheelOut"
+  | "LightSpeedOutLeft" | "LightSpeedOutRight";
+
+const ExitingPresetSchema = z.enum([
+  "FadeOut", "FadeOutUp", "FadeOutDown", "FadeOutLeft", "FadeOutRight",
+  "SlideOutUp", "SlideOutDown", "SlideOutLeft", "SlideOutRight",
+  "ZoomOut", "ZoomOutRotate", "ZoomOutUp", "ZoomOutDown", "ZoomOutLeft", "ZoomOutRight",
+  "ZoomOutEasyUp", "ZoomOutEasyDown",
+  "BounceOut", "BounceOutUp", "BounceOutDown", "BounceOutLeft", "BounceOutRight",
+  "FlipOutXUp", "FlipOutYLeft", "FlipOutXDown", "FlipOutYRight", "FlipOutEasyX", "FlipOutEasyY",
+  "StretchOutX", "StretchOutY",
+  "RotateOutDownLeft", "RotateOutDownRight", "RotateOutUpLeft", "RotateOutUpRight",
+  "RollOutLeft", "RollOutRight",
+  "PinwheelOut",
+  "LightSpeedOutLeft", "LightSpeedOutRight",
+]);
+
+// Exact reanimated layout-transition builder names.
+export type LayoutPreset =
+  | "LinearTransition" | "FadingTransition" | "SequencedTransition"
+  | "JumpingTransition" | "CurvedTransition" | "EntryExitTransition";
+
+const LayoutPresetSchema = z.enum([
+  "LinearTransition", "FadingTransition", "SequencedTransition",
+  "JumpingTransition", "CurvedTransition", "EntryExitTransition",
+]);
+
+export type EnteringAnimation = {
+  preset: EnteringPreset;
+  duration?: number;
+  delay?: number;
+  easing?: AnimationEasing;
+  spring?: SpringConfig;
+};
+
+const EnteringAnimationSchema = z.object({
+  preset: EnteringPresetSchema,
+  duration: z.number().min(0).optional(),
+  delay: z.number().min(0).optional(),
+  easing: AnimationEasingSchema.optional(),
+  spring: SpringConfigSchema.optional(),
+});
+
+export type ExitingAnimation = {
+  preset: ExitingPreset;
+  duration?: number;
+  delay?: number;
+  easing?: AnimationEasing;
+  spring?: SpringConfig;
+};
+
+const ExitingAnimationSchema = z.object({
+  preset: ExitingPresetSchema,
+  duration: z.number().min(0).optional(),
+  delay: z.number().min(0).optional(),
+  easing: AnimationEasingSchema.optional(),
+  spring: SpringConfigSchema.optional(),
+});
+
+export type LayoutAnimation = {
+  preset: LayoutPreset;
+  duration?: number;
+  spring?: SpringConfig;
+};
+
+const LayoutAnimationSchema = z.object({
+  preset: LayoutPresetSchema,
+  duration: z.number().min(0).optional(),
+  spring: SpringConfigSchema.optional(),
+});
+
+// Continuous looping effects — the one piece not named after a reanimated
+// builder. Rendered imperatively with `withRepeat` over `withTiming`.
+export type EffectPreset = "pulse" | "fade" | "rotate" | "shimmer" | "bounce";
+
+const EffectPresetSchema = z.enum(["pulse", "fade", "rotate", "shimmer", "bounce"]);
+
+export type ElementEffect = {
+  preset: EffectPreset;
+  duration?: number;
+  delay?: number;
+  easing?: AnimationEasing;
+  loop?: boolean;
+  /** pulse: scale bounds (default 0.95 / 1.05). */
+  minScale?: number;
+  maxScale?: number;
+  /** fade: lower opacity bound (default 0.4). */
+  minOpacity?: number;
+  /** rotate: sweep in degrees (default 360). */
+  degrees?: number;
+};
+
+const EffectSchema = z.object({
+  preset: EffectPresetSchema,
+  duration: z.number().min(0).optional(),
+  delay: z.number().min(0).optional(),
+  easing: AnimationEasingSchema.optional(),
+  loop: z.boolean().optional(),
+  minScale: z.number().positive().optional(),
+  maxScale: z.number().positive().optional(),
+  minOpacity: z.number().min(0).max(1).optional(),
+  degrees: z.number().optional(),
+});
+
+export type ElementAnimation = {
+  entering?: EnteringAnimation;
+  exiting?: ExitingAnimation;
+  layout?: LayoutAnimation;
+  effect?: ElementEffect;
+};
+
+const ElementAnimationSchema = z.object({
+  entering: EnteringAnimationSchema.optional(),
+  exiting: ExitingAnimationSchema.optional(),
+  layout: LayoutAnimationSchema.optional(),
+  effect: EffectSchema.optional(),
+});
+
+// Static transform surface — also what `effect` animates at runtime.
+export type ElementTransform = {
+  translateX?: number;
+  translateY?: number;
+  scale?: number;
+  scaleX?: number;
+  scaleY?: number;
+  /** degrees */
+  rotate?: number;
+};
+
+const TransformSchema = z.object({
+  translateX: z.number().optional(),
+  translateY: z.number().optional(),
+  scale: z.number().optional(),
+  scaleX: z.number().optional(),
+  scaleY: z.number().optional(),
+  rotate: z.number().optional(),
+});
+
 export type BaseBoxProps = {
   width?: number | string;
   height?: number | string;
@@ -80,6 +287,8 @@ export type BaseBoxProps = {
   shadowOpacity?: number;
   shadowRadius?: number;
   elevation?: number;
+  transform?: ElementTransform;
+  animation?: ElementAnimation;
 };
 
 export const BaseBoxPropsSchema = z.object({
@@ -112,4 +321,6 @@ export const BaseBoxPropsSchema = z.object({
   shadowOpacity: z.number().min(0).max(1).optional(),
   shadowRadius: z.number().min(0).optional(),
   elevation: z.number().min(0).optional(),
+  transform: TransformSchema.optional(),
+  animation: ElementAnimationSchema.optional(),
 });

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

@@ -10,13 +10,13 @@ import Animated, {
   withRepeat,
   withDelay,
   runOnJS,
-  Easing,
   cancelAnimation,
 } from "react-native-reanimated";
 import Svg, { Circle } from "react-native-svg";
 import { BaseBoxProps, BaseBoxPropsSchema } from "./BaseBoxProps";
 import { UIElement } from "../types";
 import { RenderContext, dim } from "./shared";
+import { EASING_MAP } from "./buildAnimation";
 
 export type ProgressEasing = "linear" | "ease-in" | "ease-out" | "ease-in-out";
 
@@ -60,14 +60,6 @@ export const ProgressIndicatorElementPropsSchema = BaseBoxPropsSchema.extend({
 
 const AnimatedCircle = Animated.createAnimatedComponent(Circle);
 
-// CSS-style cubic-bezier curves matching the selectable easing names.
-const EASING_MAP: Record<ProgressEasing, ReturnType<typeof Easing.bezier> | typeof Easing.linear> = {
-  linear: Easing.linear,
-  "ease-in": Easing.bezier(0.42, 0, 1, 1),
-  "ease-out": Easing.bezier(0, 0, 0.58, 1),
-  "ease-in-out": Easing.bezier(0.42, 0, 0.58, 1),
-};
-
 const clamp = (n: number): number => Math.max(0, Math.min(100, n));
 
 type ProgressUIElement = Extract<UIElement, { type: "ProgressIndicator" }>;

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

@@ -0,0 +1,177 @@
+import React from "react";
+import { z } from "zod";
+import { evaluateCondition } from "@rocapine/react-native-onboarding";
+import { BaseBoxProps, BaseBoxPropsSchema } from "./BaseBoxProps";
+import { UIElement } from "../types";
+import { RenderContext, dim, interpolate, RichTextStyleContext, InheritedTextStyle } from "./shared";
+import { GradientBox } from "./GradientBox";
+
+// Mirror of the headless RichTextElement schema. Kept in lockstep with
+// packages/onboarding/src/steps/ComposableScreen/elements/RichTextElement.ts —
+// TS won't catch drift because this re-declares its own type.
+export type RichTextElementProps = BaseBoxProps & {
+  gap?: number;
+  alignItems?: "flex-start" | "center" | "flex-end" | "baseline" | "stretch";
+  justifyContent?: "flex-start" | "center" | "flex-end" | "space-between" | "space-around";
+  flexWrap?: "wrap" | "nowrap";
+  fontSize?: number;
+  fontWeight?: string;
+  fontFamily?: string | "inherit";
+  fontStyle?: "normal" | "italic";
+  color?: string;
+  textAlign?: "left" | "center" | "right";
+  letterSpacing?: number;
+  lineHeight?: number;
+};
+
+export const RichTextElementPropsSchema = BaseBoxPropsSchema.extend({
+  gap: z.number().optional(),
+  alignItems: z.enum(["flex-start", "center", "flex-end", "baseline", "stretch"]).optional(),
+  justifyContent: z.enum(["flex-start", "center", "flex-end", "space-between", "space-around"]).optional(),
+  flexWrap: z.enum(["wrap", "nowrap"]).optional(),
+  fontSize: z.number().optional(),
+  fontWeight: z.string().optional(),
+  fontFamily: z.string().optional(),
+  fontStyle: z.enum(["normal", "italic"]).optional(),
+  color: z.string().optional(),
+  textAlign: z.enum(["left", "center", "right"]).optional(),
+  letterSpacing: z.number().optional(),
+  lineHeight: z.number().optional(),
+});
+
+type RichTextUIElement = Extract<UIElement, { type: "RichText" }>;
+type TextChild = Extract<UIElement, { type: "Text" }>;
+
+type Props = {
+  element: RichTextUIElement;
+  ctx: RenderContext;
+  parentType?: "XStack" | "YStack" | "ZStack" | "RichText";
+};
+
+// A plain-text child (no box styling, no motion) is split into one flex item per
+// word so the row wraps word-by-word like real text — the chip pattern from
+// host apps (parseTitleWithChips). A child carrying box styling (backgroundColor
+// / borderRadius / border / padding) or motion is a "chip" and stays atomic so
+// its box renders as a single rounded unit.
+const isFlowingText = (child: TextChild): boolean => {
+  const p = child.props;
+  return (
+    typeof p.content === "string" &&
+    p.backgroundColor == null &&
+    p.backgroundGradient == null &&
+    p.borderRadius == null &&
+    p.borderWidth == null &&
+    p.padding == null &&
+    p.paddingHorizontal == null &&
+    p.paddingVertical == null &&
+    // margin / explicit size would be applied to *every* word if split, so a
+    // child carrying any of them is treated as an atomic chip too.
+    p.margin == null &&
+    p.marginHorizontal == null &&
+    p.marginVertical == null &&
+    p.width == null &&
+    p.height == null &&
+    p.minWidth == null &&
+    p.maxWidth == null &&
+    p.minHeight == null &&
+    p.maxHeight == null &&
+    p.animation == null &&
+    p.transform == null
+  );
+};
+
+/**
+ * Wrapping flex row of child `Text` elements. Plain-text children are split into
+ * per-word flex items so text wraps word-by-word (like a paragraph); box-styled
+ * children render as atomic "chips" (padded/rounded/rotated pills) that honor
+ * their own box props, `renderWhen`, `expression`, and motion. The result is a
+ * title where chips sit inline with naturally-wrapping words.
+ *
+ * The container's text-style props are published via `RichTextStyleContext` so
+ * every child `Text` inherits them as defaults (child overrides win).
+ */
+export const RichTextElementComponent = ({ element, ctx, parentType }: Props): React.ReactElement => {
+  const p = element.props;
+
+  const inheritedTextStyle: InheritedTextStyle = {
+    fontSize: p.fontSize,
+    fontWeight: p.fontWeight,
+    fontFamily: p.fontFamily,
+    fontStyle: p.fontStyle,
+    color: p.color,
+    textAlign: p.textAlign,
+    letterSpacing: p.letterSpacing,
+    lineHeight: p.lineHeight,
+  };
+
+  // Expand children into the actual flex items to render: split flowing text into
+  // words, keep chips whole. renderWhen is evaluated once per source child here
+  // (flowing-text words then render unconditionally); chips keep their renderWhen
+  // and are gated by renderElement.
+  const flatVars = Object.fromEntries(
+    Object.entries(ctx.variables).map(([k, v]) => [k, v?.value])
+  );
+  const expanded: UIElement[] = [];
+  for (const child of element.children) {
+    if (child.renderWhen && !evaluateCondition(child.renderWhen, flatVars)) continue;
+
+    if (isFlowingText(child)) {
+      const raw = child.props.content as string;
+      const text = child.props.mode === "expression" ? interpolate(raw, ctx.variables) : raw;
+      const tokens = text.split(/(\s+)/).filter((t) => t.length > 0);
+      tokens.forEach((tok, i) => {
+        expanded.push({
+          ...child,
+          id: `${child.id}-w${i}`,
+          renderWhen: undefined,
+          // mode dropped (undefined): content is already interpolated above, and
+          // undefined is truer to the schema than the non-enum "plain".
+          props: { ...child.props, content: tok, mode: undefined },
+        });
+      });
+    } else {
+      // Chip: renderWhen already passed above; null it so renderElement doesn't
+      // re-evaluate the same condition (symmetry with the word path).
+      expanded.push({ ...child, renderWhen: undefined });
+    }
+  }
+
+  return (
+    <GradientBox
+      gradient={p.backgroundGradient}
+      style={{
+        flexDirection: "row",
+        flexWrap: p.flexWrap ?? "wrap",
+        gap: p.gap,
+        alignItems: p.alignItems ?? "center",
+        justifyContent: p.justifyContent ?? "center",
+        flex: p.flex,
+        flexShrink: p.flexShrink ?? (parentType === "XStack" ? 1 : undefined),
+        flexGrow: p.flexGrow,
+        alignSelf: p.alignSelf,
+        width: dim(p.width),
+        height: dim(p.height),
+        minWidth: p.minWidth,
+        maxWidth: p.maxWidth,
+        minHeight: p.minHeight,
+        maxHeight: p.maxHeight,
+        padding: p.padding,
+        paddingHorizontal: p.paddingHorizontal,
+        paddingVertical: p.paddingVertical,
+        margin: p.margin,
+        marginHorizontal: p.marginHorizontal,
+        marginVertical: p.marginVertical,
+        backgroundColor: p.backgroundGradient ? undefined : p.backgroundColor,
+        borderWidth: p.borderWidth,
+        borderRadius: p.borderRadius,
+        borderColor: p.borderColor,
+        overflow: p.overflow,
+        opacity: p.opacity,
+      }}
+    >
+      <RichTextStyleContext.Provider value={inheritedTextStyle}>
+        {ctx.renderChildren(expanded, "RichText")}
+      </RichTextStyleContext.Provider>
+    </GradientBox>
+  );
+};

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

@@ -24,7 +24,7 @@ type StackUIElement = Extract<UIElement, { type: "YStack" | "XStack" }>;
 type Props = {
   element: StackUIElement;
   ctx: RenderContext;
-  parentType?: "XStack" | "YStack" | "ZStack";
+  parentType?: "XStack" | "YStack" | "ZStack" | "RichText";
 };
 
 export const StackElementComponent = ({ element, ctx, parentType }: Props): React.ReactElement => {

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

@@ -4,7 +4,7 @@ import { Text } from "react-native";
 import { useResolvedFontStyle } from "@rocapine/react-native-onboarding";
 import { BaseBoxProps, BaseBoxPropsSchema } from "./BaseBoxProps";
 import { UIElement } from "../types";
-import { RenderContext, interpolate, dim, resolveInheritedFontFamily } from "./shared";
+import { RenderContext, interpolate, dim, resolveInheritedFontFamily, RichTextStyleContext } from "./shared";
 import { GradientBox } from "./GradientBox";
 
 export type TextSpan = {
@@ -14,12 +14,18 @@ export type TextSpan = {
   fontFamily?: string | "inherit";
   fontSize?: number;
   letterSpacing?: number;
+  lineHeight?: number;
   color?: string;
+  backgroundColor?: string;
+  opacity?: number;
+  textTransform?: "none" | "uppercase" | "lowercase" | "capitalize";
   textDecorationLine?:
     | "none"
     | "underline"
     | "line-through"
     | "underline line-through";
+  textDecorationColor?: string;
+  textDecorationStyle?: "solid" | "double" | "dotted" | "dashed";
 };
 
 export const TextSpanSchema = z.object({
@@ -29,10 +35,16 @@ export const TextSpanSchema = z.object({
   fontFamily: z.string().optional(),
   fontSize: z.number().optional(),
   letterSpacing: z.number().optional(),
+  lineHeight: z.number().optional(),
   color: z.string().optional(),
+  backgroundColor: z.string().optional(),
+  opacity: z.number().min(0).max(1).optional(),
+  textTransform: z.enum(["none", "uppercase", "lowercase", "capitalize"]).optional(),
   textDecorationLine: z
     .enum(["none", "underline", "line-through", "underline line-through"])
     .optional(),
+  textDecorationColor: z.string().optional(),
+  textDecorationStyle: z.enum(["solid", "double", "dotted", "dashed"]).optional(),
 });
 
 export type TextElementProps = BaseBoxProps & {
@@ -86,8 +98,14 @@ const RichTextSpan = ({
         fontStyle: span.fontStyle,
         fontSize: span.fontSize,
         letterSpacing: span.letterSpacing,
+        lineHeight: span.lineHeight,
         color: span.color,
+        backgroundColor: span.backgroundColor,
+        opacity: span.opacity,
+        textTransform: span.textTransform,
         textDecorationLine: span.textDecorationLine,
+        textDecorationColor: span.textDecorationColor,
+        textDecorationStyle: span.textDecorationStyle,
       }}
     >
       {span.text}
@@ -100,12 +118,22 @@ type TextUIElement = Extract<UIElement, { type: "Text" }>;
 type Props = {
   element: TextUIElement;
   ctx: RenderContext;
-  parentType?: "XStack" | "YStack" | "ZStack";
+  parentType?: "XStack" | "YStack" | "ZStack" | "RichText";
 };
 
 export const TextElementComponent = ({ element, ctx, parentType }: Props): React.ReactElement => {
   const { theme, variables } = ctx;
   const p = element.props;
+  // Text-style defaults inherited from a parent `RichText` container (empty when
+  // this Text isn't inside one). Element props always win over inherited values.
+  const inherited = React.useContext(RichTextStyleContext);
+  const fontSize = p.fontSize ?? inherited.fontSize;
+  const fontWeight = p.fontWeight ?? inherited.fontWeight;
+  const fontStyle = p.fontStyle ?? inherited.fontStyle;
+  const color = p.color ?? inherited.color;
+  const textAlign = p.textAlign ?? inherited.textAlign;
+  const letterSpacing = p.letterSpacing ?? inherited.letterSpacing;
+  const lineHeight = p.lineHeight ?? inherited.lineHeight;
   const isExpression = p.mode === "expression";
   const content: string | TextSpan[] = Array.isArray(p.content)
     ? isExpression
@@ -115,10 +143,10 @@ export const TextElementComponent = ({ element, ctx, parentType }: Props): React
       ? interpolate(p.content, variables)
       : p.content;
   const inheritedFontFamily = resolveInheritedFontFamily(
-    p.fontFamily,
+    p.fontFamily ?? inherited.fontFamily,
     theme.typography.defaultFontFamily
   );
-  const resolvedFont = useResolvedFontStyle(inheritedFontFamily, p.fontWeight);
+  const resolvedFont = useResolvedFontStyle(inheritedFontFamily, fontWeight);
 
   const textNode = (
     <Text
@@ -133,14 +161,14 @@ export const TextElementComponent = ({ element, ctx, parentType }: Props): React
         maxWidth: p.backgroundGradient ? undefined : p.maxWidth,
         minHeight: p.backgroundGradient ? undefined : p.minHeight,
         maxHeight: p.backgroundGradient ? undefined : p.maxHeight,
-        fontSize: p.fontSize,
-        fontWeight: resolvedFont.resolvedToVariant ? undefined : (p.fontWeight as any),
+        fontSize,
+        fontWeight: resolvedFont.resolvedToVariant ? undefined : (fontWeight as any),
         fontFamily: resolvedFont.fontFamily,
-        fontStyle: p.fontStyle,
-        color: p.color ?? theme.colors.text.primary,
-        textAlign: p.textAlign,
-        letterSpacing: p.letterSpacing,
-        lineHeight: p.lineHeight,
+        fontStyle,
+        color: color ?? theme.colors.text.primary,
+        textAlign,
+        letterSpacing,
+        lineHeight,
         backgroundColor: p.backgroundGradient ? undefined : p.backgroundColor,
         padding: p.backgroundGradient ? undefined : p.padding,
         paddingHorizontal: p.backgroundGradient ? undefined : p.paddingHorizontal,

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

@@ -0,0 +1,83 @@
+import * as Reanimated from "react-native-reanimated";
+import { Easing } from "react-native-reanimated";
+import type {
+  AnimationEasing,
+  EnteringAnimation,
+  ExitingAnimation,
+  LayoutAnimation,
+} from "@rocapine/react-native-onboarding";
+
+// CSS-style cubic-bezier curves matching the selectable easing names. Shared by
+// the animation builders here and by ProgressIndicatorElement (single source).
+export const EASING_MAP: Record<
+  AnimationEasing,
+  ReturnType<typeof Easing.bezier> | typeof Easing.linear
+> = {
+  linear: Easing.linear,
+  "ease-in": Easing.bezier(0.42, 0, 1, 1),
+  "ease-out": Easing.bezier(0, 0, 0.58, 1),
+  "ease-in-out": Easing.bezier(0.42, 0, 0.58, 1),
+};
+
+// Reanimated builders are exported by name off the namespace. Looking them up by
+// the schema's `preset` string is what keeps the JSON 1:1 with reanimated — the
+// preset value *is* the builder name. Unknown/typo presets degrade to `undefined`
+// (no animation) instead of crashing, so a payload referencing a preset the host's
+// installed reanimated version lacks still mounts.
+type AnyBuilder = any;
+
+const resolveBuilder = (preset: string): AnyBuilder | undefined => {
+  const b = (Reanimated as unknown as Record<string, AnyBuilder>)[preset];
+  return b ?? undefined;
+};
+
+const applySpringOrEasing = (
+  builder: AnyBuilder,
+  spring?: { damping?: number; stiffness?: number; mass?: number },
+  easing?: AnimationEasing
+): AnyBuilder => {
+  // reanimated: `spring` (`.springify()`) and `.easing()` are mutually exclusive.
+  // Spring wins, matching the schema contract.
+  if (spring) {
+    let b = builder.springify();
+    if (spring.damping != null) b = b.damping(spring.damping);
+    if (spring.stiffness != null) b = b.stiffness(spring.stiffness);
+    if (spring.mass != null) b = b.mass(spring.mass);
+    return b;
+  }
+  if (easing) return builder.easing(EASING_MAP[easing]);
+  return builder;
+};
+
+const buildTransition = (
+  cfg: EnteringAnimation | ExitingAnimation | undefined
+): AnyBuilder | undefined => {
+  if (!cfg) return undefined;
+  let b = resolveBuilder(cfg.preset);
+  if (!b) return undefined;
+  if (cfg.duration != null) b = b.duration(cfg.duration);
+  if (cfg.delay != null) b = b.delay(cfg.delay);
+  return applySpringOrEasing(b, cfg.spring, cfg.easing);
+};
+
+export const buildEntering = (cfg: EnteringAnimation | undefined): AnyBuilder | undefined =>
+  buildTransition(cfg);
+
+export const buildExiting = (cfg: ExitingAnimation | undefined): AnyBuilder | undefined =>
+  buildTransition(cfg);
+
+export const buildLayout = (cfg: LayoutAnimation | undefined): AnyBuilder | undefined => {
+  if (!cfg) return undefined;
+  let b = resolveBuilder(cfg.preset);
+  if (!b) return undefined;
+  // Layout transitions are referenced as static builder objects; calling a
+  // modifier returns a configured instance.
+  if (cfg.duration != null) b = b.duration(cfg.duration);
+  if (cfg.spring) {
+    b = b.springify();
+    if (cfg.spring.damping != null) b = b.damping(cfg.spring.damping);
+    if (cfg.spring.stiffness != null) b = b.stiffness(cfg.spring.stiffness);
+    if (cfg.spring.mass != null) b = b.mass(cfg.spring.mass);
+  }
+  return b;
+};