@rocapine/react-native-onboarding 1.32.0 → 1.33.0

package/src/onboarding-example.ts

@@ -273,6 +273,48 @@ export const onboardingExample = {
                   marginVertical: 4,
                 },
               },
+              {
+                // RichText container — a wrapping flex row of `Text` elements.
+                // Each child is a real flex child (not nested `<Text>`), so it
+                // honors box props: the highlighted segment is a padded, rounded,
+                // rotated "chip". Children also keep their own renderWhen.
+                id: "richtext-container-demo",
+                type: "RichText",
+                props: {
+                  alignItems: "center",
+                  justifyContent: "center",
+                  marginVertical: 4,
+                  // Base typography declared once — children inherit it.
+                  fontSize: 22,
+                  fontWeight: "600",
+                },
+                children: [
+                  // Plain-text children split into words → wrap word-by-word.
+                  { id: "rt-1", type: "Text", props: { content: "Boost your" } },
+                  {
+                    id: "rt-2",
+                    type: "Text",
+                    // Chip: box styling keeps it atomic; overrides inherited defaults.
+                    props: {
+                      content: "energy",
+                      fontWeight: "700",
+                      color: "#FFFFFF",
+                      backgroundColor: "#E11D48",
+                      paddingHorizontal: 14,
+                      paddingVertical: 4,
+                      borderRadius: 200,
+                      marginHorizontal: 4,
+                      transform: { rotate: -3 },
+                    },
+                  },
+                  {
+                    id: "rt-3",
+                    type: "Text",
+                    renderWhen: { variable: "name", operator: "is_not_empty" },
+                    props: { content: ", {{name}}!", mode: "expression" },
+                  },
+                ],
+              },
               {
                 id: "scroll-demo",
                 type: "ScrollView",

package/src/steps/ComposableScreen/elements/RichTextElement.ts

@@ -0,0 +1,55 @@
+import { z } from "zod";
+import { BaseBoxProps, BaseBoxPropsSchema } from "./BaseBoxProps";
+
+/**
+ * Multi-element container that lays out child `Text` elements as a **wrapping
+ * flex row** — each child is a full `Text` UIElement that wraps to the next line
+ * as a whole unit (word or styled "chip"). Unlike inline `TextSpan`s (the `Text`
+ * element's `content[]`, which are nested `<Text>` and so cannot carry box
+ * styling), each `RichText` child is a real flex child, so it honors its own box
+ * props — `padding`, `borderRadius`, `borderWidth`, `backgroundColor`, `margin`,
+ * `transform` (e.g. rotated pills), `renderWhen`, and `expression` mode.
+ *
+ * The text-style fields below (`fontSize`, `color`, …) act as **inherited
+ * defaults**: every child `Text` uses them for any matching prop it omits, so a
+ * title's base typography is declared once on the container and only the
+ * highlighted "chip" children override (color, background, weight). Children
+ * always win over the inherited default.
+ *
+ * Use this to compose mixed runs of plain words and padded/rounded chips that
+ * wrap and align together (e.g. a marketing title with highlighted pills). For
+ * pure character-level inline flow with text-only styling, use `Text.content`
+ * spans instead.
+ */
+export type RichTextElementProps = BaseBoxProps & {
+  // Layout (wrapping row)
+  gap?: number;
+  alignItems?: "flex-start" | "center" | "flex-end" | "baseline" | "stretch";
+  justifyContent?: "flex-start" | "center" | "flex-end" | "space-between" | "space-around";
+  /** Defaults to `"wrap"` — the whole point of RichText is multi-line wrapping. */
+  flexWrap?: "wrap" | "nowrap";
+  // Inherited text-style defaults for children
+  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(),
+});

package/src/steps/ComposableScreen/types.ts

@@ -8,6 +8,7 @@ import {
 } from "../common.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";
@@ -48,6 +49,7 @@ export { BaseBoxPropsSchema, GradientBackgroundSchema } from "./elements/BaseBox
 export type { StackElementProps } from "./elements/StackElement";
 export type { TextElementProps, TextSpan } from "./elements/TextElement";
 export { TextSpanSchema } 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";
@@ -106,6 +108,14 @@ 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;
@@ -231,6 +241,17 @@ 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,
+});
+
 const UIElementSchema: z.ZodType<UIElement> = z.lazy(() =>
   z.union([
     z.object({
@@ -241,12 +262,14 @@ 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(),