@rocapine/react-native-onboarding 1.30.0 → 1.32.0

package/src/index.ts

@@ -14,6 +14,18 @@ export type {
   WheelPickerRange,
   ProgressIndicatorElementProps,
   ProgressEasing,
+  AnimationEasing,
+  SpringConfig,
+  EnteringPreset,
+  ExitingPreset,
+  LayoutPreset,
+  EffectPreset,
+  EnteringAnimation,
+  ExitingAnimation,
+  LayoutAnimation,
+  ElementEffect,
+  ElementAnimation,
+  ElementTransform,
 } from "./steps/ComposableScreen/types";
 export {
   ButtonActionSchema,

package/src/onboarding-example.ts

@@ -149,6 +149,10 @@ export const onboardingExample = {
                   height: 180,
                   resizeMode: "cover",
                   borderRadius: 16,
+                  // Slide + fade in on mount (reanimated builder name + modifiers).
+                  animation: {
+                    entering: { preset: "FadeInDown", duration: 500, delay: 100, easing: "ease-out" },
+                  },
                 },
               },
               {
@@ -161,6 +165,12 @@ export const onboardingExample = {
                   fill: "#007AFF",
                   fillOpacity: 0.2,
                   marginVertical: 8,
+                  // Static tilt + continuous breathing pulse.
+                  transform: { rotate: -8 },
+                  animation: {
+                    entering: { preset: "ZoomIn", duration: 400, spring: { damping: 10, stiffness: 160 } },
+                    effect: { preset: "pulse", duration: 1200, minScale: 0.92, maxScale: 1.08 },
+                  },
                 },
               },
               {
@@ -241,6 +251,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/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/steps/ComposableScreen/elements/TextElement.ts

@@ -1,8 +1,65 @@
 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;
+  lineHeight?: number;
+  color?: string;
+  /** Inline highlight behind the span text. */
+  backgroundColor?: string;
+  /** Per-span opacity (0–1). */
+  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;
+  /**
+   * 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 +76,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

@@ -30,9 +30,24 @@ import {
 import { type ProgressIndicatorElementProps, ProgressIndicatorElementPropsSchema } from "./elements/ProgressIndicatorElement";
 
 export type { BaseBoxProps, GradientBackground, GradientEdge, GradientStop, LinearGradientConfig } from "./elements/BaseBoxProps";
+export type {
+  AnimationEasing,
+  SpringConfig,
+  EnteringPreset,
+  ExitingPreset,
+  LayoutPreset,
+  EffectPreset,
+  EnteringAnimation,
+  ExitingAnimation,
+  LayoutAnimation,
+  ElementEffect,
+  ElementAnimation,
+  ElementTransform,
+} 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";