@rocapine/react-native-onboarding 1.31.0 → 1.32.0

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

@@ -18,12 +18,20 @@ export type TextSpan = {
   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({
@@ -33,10 +41,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 & {

package/src/steps/ComposableScreen/types.ts

@@ -30,6 +30,20 @@ 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, TextSpan } from "./elements/TextElement";