@rocapine/react-native-onboarding 1.29.0 → 1.31.0

package/src/index.ts

@@ -12,6 +12,8 @@ export type {
   WheelPickerElementProps,
   WheelPickerItem,
   WheelPickerRange,
+  ProgressIndicatorElementProps,
+  ProgressEasing,
 } from "./steps/ComposableScreen/types";
 export {
   ButtonActionSchema,

package/src/onboarding-example.ts

@@ -163,6 +163,38 @@ export const onboardingExample = {
                   marginVertical: 8,
                 },
               },
+              {
+                id: "progress-linear",
+                type: "ProgressIndicator",
+                props: {
+                  variant: "linear",
+                  autoplay: true,
+                  loop: true,
+                  initialValue: 0,
+                  duration: 2500,
+                  easing: "ease-in-out",
+                  thickness: 10,
+                  showLabel: true,
+                  marginVertical: 8,
+                },
+              },
+              {
+                id: "progress-circular",
+                type: "ProgressIndicator",
+                props: {
+                  variant: "circular",
+                  autoplay: true,
+                  loop: false,
+                  initialValue: 0,
+                  duration: 1800,
+                  delay: 500,
+                  easing: "ease-out",
+                  size: 120,
+                  thickness: 12,
+                  showLabel: true,
+                  alignSelf: "center",
+                },
+              },
               {
                 id: "hero-video",
                 type: "Video",
@@ -209,6 +241,28 @@ export const onboardingExample = {
                   marginVertical: 4,
                 },
               },
+              {
+                // Inline rich text — `content` as an array of styled spans.
+                // Each span inherits the parent Text style and overrides only
+                // what it sets (here: weight, color, underline).
+                id: "richtext-demo",
+                type: "Text",
+                props: {
+                  content: [
+                    { text: "Lose " },
+                    { text: "5kg", fontWeight: "700", color: "#E11D48" },
+                    { text: " in 30 days — " },
+                    {
+                      text: "guaranteed",
+                      fontStyle: "italic",
+                      textDecorationLine: "underline",
+                    },
+                  ],
+                  fontSize: 16,
+                  textAlign: "center",
+                  marginVertical: 4,
+                },
+              },
               {
                 id: "scroll-demo",
                 type: "ScrollView",

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

@@ -0,0 +1,66 @@
+import { z } from "zod";
+import { BaseBoxProps, BaseBoxPropsSchema } from "./BaseBoxProps";
+
+/**
+ * Easing curve names selectable for the progress animation. Mapped to the
+ * matching CSS-style cubic-bezier curves in the renderer.
+ */
+export type ProgressEasing = "linear" | "ease-in" | "ease-out" | "ease-in-out";
+
+export type ProgressIndicatorElementProps = BaseBoxProps & {
+  /** Visual style of the indicator. */
+  variant?: "linear" | "circular";
+  /**
+   * Variable bound to the indicator (int 0-100). When `autoplay` is on, the
+   * current rounded progress is written to this variable on each frame; when
+   * `autoplay` is off, the indicator reflects (and animates to) this variable's
+   * value.
+   */
+  variableName?: string;
+  /** Static value (0-100) used when no `variableName` is provided. */
+  value?: number;
+  /** Animate from `initialValue` to 100 automatically on mount. */
+  autoplay?: boolean;
+  /** Repeat the autoplay animation indefinitely. */
+  loop?: boolean;
+  /** Starting value (0-100). Defaults to 0. */
+  initialValue?: number;
+  /** Animation duration in milliseconds. Defaults to 1000. */
+  duration?: number;
+  /** Delay in milliseconds before the animation starts. Defaults to 0. */
+  delay?: number;
+  /** Easing curve for the animation. Defaults to "ease-in-out". */
+  easing?: ProgressEasing;
+  /** Progress fill color. Defaults to theme primary. */
+  color?: string;
+  /** Track (unfilled) color. Defaults to theme neutral.lower. */
+  trackColor?: string;
+  /** Bar height (linear) / ring stroke width (circular). */
+  thickness?: number;
+  /** Diameter of the circular variant in px. Defaults to 120. */
+  size?: number;
+  /** Show the percentage label (centered for circular, alongside for linear). */
+  showLabel?: boolean;
+  /** Label text color. Defaults to theme text.primary. */
+  labelColor?: string;
+};
+
+const ProgressEasingSchema = z.enum(["linear", "ease-in", "ease-out", "ease-in-out"]);
+
+export const ProgressIndicatorElementPropsSchema = BaseBoxPropsSchema.extend({
+  variant: z.enum(["linear", "circular"]).optional(),
+  variableName: z.string().min(1).optional(),
+  value: z.number().min(0).max(100).optional(),
+  autoplay: z.boolean().optional(),
+  loop: z.boolean().optional(),
+  initialValue: z.number().min(0).max(100).optional(),
+  duration: z.number().min(0).optional(),
+  delay: z.number().min(0).optional(),
+  easing: ProgressEasingSchema.optional(),
+  color: z.string().optional(),
+  trackColor: z.string().optional(),
+  thickness: z.number().min(0).optional(),
+  size: z.number().min(0).optional(),
+  showLabel: z.boolean().optional(),
+  labelColor: z.string().optional(),
+});

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

@@ -1,8 +1,51 @@
 import { z } from "zod";
 import { BaseBoxProps, BaseBoxPropsSchema } from "./BaseBoxProps";
 
+/**
+ * A styled inline run of text. Used to compose rich text inside a single
+ * `Text` element — spans render as nested `<Text>` and inherit any prop they
+ * omit from the parent `Text` (React Native nested-`<Text>` inheritance), so a
+ * span only declares the styling it overrides.
+ */
+export type TextSpan = {
+  text: string;
+  fontWeight?: string;
+  fontStyle?: "normal" | "italic";
+  /**
+   * Font family name. Omit or set to `"inherit"` to inherit the parent
+   * `Text` element's resolved font family.
+   */
+  fontFamily?: string | "inherit";
+  fontSize?: number;
+  letterSpacing?: number;
+  color?: string;
+  textDecorationLine?:
+    | "none"
+    | "underline"
+    | "line-through"
+    | "underline line-through";
+};
+
+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(),
+  color: z.string().optional(),
+  textDecorationLine: z
+    .enum(["none", "underline", "line-through", "underline line-through"])
+    .optional(),
+});
+
 export type TextElementProps = BaseBoxProps & {
-  content: string;
+  /**
+   * Plain string, or an array of styled spans for inline rich text. In
+   * `expression` mode `{{variable}}` interpolation applies to the string or to
+   * each span's `text`.
+   */
+  content: string | TextSpan[];
   mode?: "plain" | "expression";
   fontSize?: number;
   fontWeight?: string;
@@ -19,7 +62,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(),

package/src/steps/ComposableScreen/types.ts

@@ -27,11 +27,13 @@ import {
   type KeyboardAvoidingViewElementProps,
   KeyboardAvoidingViewElementPropsSchema,
 } from "./elements/KeyboardAvoidingViewElement";
+import { type ProgressIndicatorElementProps, ProgressIndicatorElementPropsSchema } from "./elements/ProgressIndicatorElement";
 
 export type { BaseBoxProps, GradientBackground, GradientEdge, GradientStop, LinearGradientConfig } from "./elements/BaseBoxProps";
 export { BaseBoxPropsSchema, GradientBackgroundSchema } from "./elements/BaseBoxProps";
 export type { StackElementProps } from "./elements/StackElement";
-export type { TextElementProps } from "./elements/TextElement";
+export type { TextElementProps, TextSpan } from "./elements/TextElement";
+export { TextSpanSchema } from "./elements/TextElement";
 export type { ImageElementProps } from "./elements/ImageElement";
 export type { LottieElementProps } from "./elements/LottieElement";
 export type { RiveElementProps } from "./elements/RiveElement";
@@ -53,6 +55,7 @@ export type {
   KeyboardAvoidingViewElementProps,
   KeyboardAvoidingBehavior,
 } from "./elements/KeyboardAvoidingViewElement";
+export type { ProgressIndicatorElementProps, ProgressEasing } from "./elements/ProgressIndicatorElement";
 
 /**
  * Type tag for a ComposableScreen variable. Drives expression-mode coercion
@@ -205,6 +208,13 @@ type UIElement =
       type: "KeyboardAvoidingView";
       props: KeyboardAvoidingViewElementProps;
       children: UIElement[];
+    }
+  | {
+      id: string;
+      name?: string;
+      renderWhen?: LeafCondition | ConditionGroup;
+      type: "ProgressIndicator";
+      props: ProgressIndicatorElementProps;
     };
 
 const UIElementSchema: z.ZodType<UIElement> = z.lazy(() =>
@@ -341,6 +351,13 @@ const UIElementSchema: z.ZodType<UIElement> = z.lazy(() =>
       props: KeyboardAvoidingViewElementPropsSchema,
       children: z.array(UIElementSchema),
     }),
+    z.object({
+      id: z.string(),
+      name: z.string().optional(),
+      renderWhen: z.union([LeafConditionSchema, ConditionGroupSchema]).optional(),
+      type: z.literal("ProgressIndicator"),
+      props: ProgressIndicatorElementPropsSchema,
+    }),
   ])
 );