@rocapine/react-native-onboarding-ui 1.30.0 → 1.32.0

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

@@ -7,8 +7,48 @@ import { UIElement } from "../types";
 import { RenderContext, interpolate, dim, resolveInheritedFontFamily } from "./shared";
 import { GradientBox } from "./GradientBox";
 
+export type TextSpan = {
+  text: string;
+  fontWeight?: string;
+  fontStyle?: "normal" | "italic";
+  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({
+  text: z.string(),
+  fontWeight: z.string().optional(),
+  fontStyle: z.enum(["normal", "italic"]).optional(),
+  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 & {
-  content: string;
+  content: string | TextSpan[];
   mode?: "plain" | "expression";
   fontSize?: number;
   fontWeight?: string;
@@ -21,7 +61,7 @@ export type TextElementProps = BaseBoxProps & {
 };
 
 export const TextElementPropsSchema = BaseBoxPropsSchema.extend({
-  content: z.string(),
+  content: z.union([z.string(), z.array(TextSpanSchema)]),
   mode: z.enum(["plain", "expression"]).optional(),
   fontSize: z.number().optional(),
   fontWeight: z.string().optional(),
@@ -33,6 +73,46 @@ export const TextElementPropsSchema = BaseBoxPropsSchema.extend({
   lineHeight: z.number().optional(),
 });
 
+/**
+ * Renders one inline span. Isolated as its own component so the
+ * `useResolvedFontStyle` hook is called once per stable component instance —
+ * calling the hook in a `.map` loop inside the parent would break rules of
+ * hooks when the span count changes.
+ */
+const RichTextSpan = ({
+  span,
+  baseFontFamily,
+}: {
+  span: TextSpan;
+  baseFontFamily: string | undefined;
+}): React.ReactElement => {
+  const fontFamily = resolveInheritedFontFamily(span.fontFamily, baseFontFamily);
+  const resolved = useResolvedFontStyle(fontFamily, span.fontWeight);
+  return (
+    <Text
+      style={{
+        fontFamily: resolved.fontFamily,
+        fontWeight: resolved.resolvedToVariant
+          ? undefined
+          : (span.fontWeight as any),
+        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}
+    </Text>
+  );
+};
+
 type TextUIElement = Extract<UIElement, { type: "Text" }>;
 
 type Props = {
@@ -44,8 +124,12 @@ type Props = {
 export const TextElementComponent = ({ element, ctx, parentType }: Props): React.ReactElement => {
   const { theme, variables } = ctx;
   const p = element.props;
-  const content =
-    p.mode === "expression"
+  const isExpression = p.mode === "expression";
+  const content: string | TextSpan[] = Array.isArray(p.content)
+    ? isExpression
+      ? p.content.map((s) => ({ ...s, text: interpolate(s.text, variables) }))
+      : p.content
+    : isExpression
       ? interpolate(p.content, variables)
       : p.content;
   const inheritedFontFamily = resolveInheritedFontFamily(
@@ -88,7 +172,11 @@ export const TextElementComponent = ({ element, ctx, parentType }: Props): React
         opacity: p.backgroundGradient ? undefined : p.opacity,
       }}
     >
-      {content}
+      {typeof content === "string"
+        ? content
+        : content.map((s, i) => (
+            <RichTextSpan key={i} span={s} baseFontFamily={inheritedFontFamily} />
+          ))}
     </Text>
   );
 

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;
+};

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

@@ -1,6 +1,7 @@
 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";
@@ -21,6 +22,7 @@ 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,
@@ -34,6 +36,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} />;
   }
@@ -110,5 +115,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;
 };