@rocapine/react-native-onboarding 1.23.0 → 1.25.0

package/src/onboarding-example.ts

@@ -168,16 +168,102 @@ export const onboardingExample = {
                 },
               },
               {
-                id: "hero-input",
-                type: "Input",
+                id: "kav-input",
+                type: "KeyboardAvoidingView",
+                props: { keyboardVerticalOffset: 24 },
+                children: [
+                  {
+                    id: "hero-input",
+                    type: "Input",
+                    props: {
+                      variableName: "name",
+                      placeholder: "Enter your name",
+                      keyboardType: "default",
+                      returnKeyType: "done",
+                      autoCapitalize: "words",
+                      marginVertical: 8,
+                    },
+                  },
+                ],
+              },
+              {
+                id: "scroll-demo",
+                type: "ScrollView",
                 props: {
-                  variableName: "name",
-                  placeholder: "Enter your name",
-                  keyboardType: "default",
-                  returnKeyType: "done",
-                  autoCapitalize: "words",
-                  marginVertical: 8,
+                  horizontal: true,
+                  showsHorizontalScrollIndicator: false,
+                  contentContainerPadding: 4,
                 },
+                children: [
+                  {
+                    id: "scroll-card-1",
+                    type: "Text",
+                    props: {
+                      content: "Card 1",
+                      width: 160,
+                      height: 100,
+                      marginHorizontal: 6,
+                      borderWidth: 1,
+                      borderRadius: 12,
+                      borderColor: "#00000020",
+                      paddingVertical: 38,
+                      textAlign: "center",
+                      fontSize: 16,
+                      fontWeight: "600",
+                    },
+                  },
+                  {
+                    id: "scroll-card-2",
+                    type: "Text",
+                    props: {
+                      content: "Card 2",
+                      width: 160,
+                      height: 100,
+                      marginHorizontal: 6,
+                      borderWidth: 1,
+                      borderRadius: 12,
+                      borderColor: "#00000020",
+                      paddingVertical: 38,
+                      textAlign: "center",
+                      fontSize: 16,
+                      fontWeight: "600",
+                    },
+                  },
+                  {
+                    id: "scroll-card-3",
+                    type: "Text",
+                    props: {
+                      content: "Card 3",
+                      width: 160,
+                      height: 100,
+                      marginHorizontal: 6,
+                      borderWidth: 1,
+                      borderRadius: 12,
+                      borderColor: "#00000020",
+                      paddingVertical: 38,
+                      textAlign: "center",
+                      fontSize: 16,
+                      fontWeight: "600",
+                    },
+                  },
+                  {
+                    id: "scroll-card-4",
+                    type: "Text",
+                    props: {
+                      content: "Card 4",
+                      width: 160,
+                      height: 100,
+                      marginHorizontal: 6,
+                      borderWidth: 1,
+                      borderRadius: 12,
+                      borderColor: "#00000020",
+                      paddingVertical: 38,
+                      textAlign: "center",
+                      fontSize: 16,
+                      fontWeight: "600",
+                    },
+                  },
+                ],
               },
               {
                 id: "greeting",
@@ -545,6 +631,67 @@ export const onboardingExample = {
                   },
                 },
               },
+              {
+                id: "states-heading",
+                type: "Text",
+                props: {
+                  content: "Button states & shadow",
+                  fontSize: 13,
+                  fontWeight: "700",
+                  marginVertical: 4,
+                  opacity: 0.5,
+                },
+              },
+              {
+                id: "btn-shadow",
+                type: "Button",
+                props: {
+                  label: "Elevated (shadow)",
+                  variant: "filled",
+                  marginVertical: 4,
+                  backgroundColor: "#6C63FF",
+                  shadowColor: "#6C63FF",
+                  shadowOffset: { width: 0, height: 6 },
+                  shadowOpacity: 0.4,
+                  shadowRadius: 12,
+                  elevation: 8,
+                },
+              },
+              {
+                id: "btn-pressed",
+                type: "Button",
+                props: {
+                  label: "Press me (hold)",
+                  variant: "filled",
+                  marginVertical: 4,
+                  backgroundColor: "#10b981",
+                  transitionDurationMs: 300,
+                  pressedStyle: {
+                    opacity: 0.6,
+                    backgroundColor: "#065f46",
+                  },
+                },
+              },
+              {
+                id: "btn-disabled",
+                type: "Button",
+                props: {
+                  label: "Always disabled",
+                  variant: "filled",
+                  marginVertical: 4,
+                  actions: ["continue"],
+                  disabledWhen: {
+                    variable: "never_enabled",
+                    operator: "neq",
+                    value: "yes",
+                  },
+                  disabledStyle: {
+                    backgroundColor: "#fee2e2",
+                    color: "#b91c1c",
+                    borderRadius: 12,
+                  },
+                },
+              },
               {
                 id: "consent-toggle",
                 type: "Button",
@@ -570,6 +717,22 @@ export const onboardingExample = {
                     operator: "neq",
                     value: "yes",
                   },
+                  transitionDurationMs: 180,
+                  shadowColor: "#000",
+                  shadowOffset: { width: 0, height: 4 },
+                  shadowOpacity: 0.18,
+                  shadowRadius: 8,
+                  elevation: 4,
+                  pressedStyle: {
+                    opacity: 0.7,
+                    backgroundColor: "#4f46e5",
+                  },
+                  disabledStyle: {
+                    backgroundColor: "#d1d5db",
+                    color: "#6b7280",
+                    shadowOpacity: 0,
+                    elevation: 0,
+                  },
                 },
               },
             ],

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

@@ -40,6 +40,16 @@ export const GradientBackgroundSchema = z.discriminatedUnion("type", [
   }),
 ]);
 
+export type ShadowOffset = {
+  width: number;
+  height: number;
+};
+
+export const ShadowOffsetSchema = z.object({
+  width: z.number(),
+  height: z.number(),
+});
+
 export type BaseBoxProps = {
   width?: number | string;
   height?: number | string;
@@ -64,6 +74,11 @@ export type BaseBoxProps = {
   borderWidth?: number;
   borderRadius?: number;
   borderColor?: string;
+  shadowColor?: string;
+  shadowOffset?: ShadowOffset;
+  shadowOpacity?: number;
+  shadowRadius?: number;
+  elevation?: number;
 };
 
 export const BaseBoxPropsSchema = z.object({
@@ -90,4 +105,9 @@ export const BaseBoxPropsSchema = z.object({
   borderWidth: z.number().min(0).optional(),
   borderRadius: z.number().min(0).optional(),
   borderColor: z.string().optional(),
+  shadowColor: z.string().optional(),
+  shadowOffset: ShadowOffsetSchema.optional(),
+  shadowOpacity: z.number().min(0).max(1).optional(),
+  shadowRadius: z.number().min(0).optional(),
+  elevation: z.number().min(0).optional(),
 });

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

@@ -26,6 +26,20 @@ export const ButtonActionSchema = z.union([
   CustomButtonActionSchema,
 ]);
 
+type ButtonOverridableProps = BaseBoxProps & {
+  variant?: "filled" | "outlined" | "ghost";
+  backgroundColor?: string;
+  color?: string;
+  fontSize?: number;
+  fontWeight?: string;
+  fontFamily?: string | "inherit";
+  fontStyle?: "normal" | "italic";
+  textAlign?: "left" | "center" | "right";
+};
+
+/** Subset of ButtonElementProps that can be overridden per-state. */
+export type ButtonStyleOverride = Partial<ButtonOverridableProps>;
+
 export type ButtonElementProps = BaseBoxProps & {
   label: string;
   /**
@@ -56,12 +70,29 @@ export type ButtonElementProps = BaseBoxProps & {
    * the same condition schema as `Branch.condition`.
    */
   disabledWhen?: LeafCondition | ConditionGroup;
-  /** Override background color in the disabled state (filled variant). Defaults to `theme.colors.disable`. */
+  /** @deprecated Use `disabledStyle.backgroundColor`. Falls back when `disabledStyle` omitted. */
   disabledBackgroundColor?: string;
-  /** Override text color in the disabled state. Defaults to `theme.colors.text.disable`. */
+  /** @deprecated Use `disabledStyle.color`. Falls back when `disabledStyle` omitted. */
   disabledColor?: string;
+  /** Style overrides merged on top of base props while pressed. */
+  pressedStyle?: ButtonStyleOverride;
+  /** Style overrides merged on top of base props while disabled. Wins over deprecated `disabled*` fields. */
+  disabledStyle?: ButtonStyleOverride;
+  /** Animation duration (ms) between rest/pressed/disabled. Default 150. */
+  transitionDurationMs?: number;
 };
 
+export const ButtonStyleOverrideSchema = BaseBoxPropsSchema.extend({
+  variant: z.enum(["filled", "outlined", "ghost"]).optional(),
+  backgroundColor: z.string().optional(),
+  color: z.string().optional(),
+  fontSize: z.number().optional(),
+  fontWeight: z.string().optional(),
+  fontFamily: z.string().optional(),
+  fontStyle: z.enum(["normal", "italic"]).optional(),
+  textAlign: z.enum(["left", "center", "right"]).optional(),
+}).partial();
+
 export const ButtonElementPropsSchema = BaseBoxPropsSchema.extend({
   label: z.string().min(1, "label must not be empty"),
   actions: z.array(ButtonActionSchema).optional(),
@@ -77,4 +108,7 @@ export const ButtonElementPropsSchema = BaseBoxPropsSchema.extend({
   disabledWhen: z.union([LeafConditionSchema, ConditionGroupSchema]).optional(),
   disabledBackgroundColor: z.string().optional(),
   disabledColor: z.string().optional(),
+  pressedStyle: ButtonStyleOverrideSchema.optional(),
+  disabledStyle: ButtonStyleOverrideSchema.optional(),
+  transitionDurationMs: z.number().min(0).optional(),
 });

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

@@ -0,0 +1,16 @@
+import { z } from "zod";
+import { BaseBoxPropsSchema, type BaseBoxProps } from "./BaseBoxProps";
+
+export type KeyboardAvoidingBehavior = "padding" | "height" | "position";
+
+export type KeyboardAvoidingViewElementProps = BaseBoxProps & {
+  behavior?: KeyboardAvoidingBehavior;
+  keyboardVerticalOffset?: number;
+  enabled?: boolean;
+};
+
+export const KeyboardAvoidingViewElementPropsSchema = BaseBoxPropsSchema.extend({
+  behavior: z.enum(["padding", "height", "position"]).optional(),
+  keyboardVerticalOffset: z.number().optional(),
+  enabled: z.boolean().optional(),
+});

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

@@ -0,0 +1,40 @@
+import { z } from "zod";
+import { BaseBoxPropsSchema, type BaseBoxProps } from "./BaseBoxProps";
+
+export type ScrollViewContentInset = {
+  top?: number;
+  right?: number;
+  bottom?: number;
+  left?: number;
+};
+
+export type ScrollViewElementProps = BaseBoxProps & {
+  horizontal?: boolean;
+  bounces?: boolean;
+  showsVerticalScrollIndicator?: boolean;
+  showsHorizontalScrollIndicator?: boolean;
+  alwaysBounceVertical?: boolean;
+  alwaysBounceHorizontal?: boolean;
+  contentInset?: ScrollViewContentInset;
+  contentContainerPadding?: number;
+  keyboardShouldPersistTaps?: "always" | "never" | "handled";
+};
+
+const ContentInsetSchema = z.object({
+  top: z.number().optional(),
+  right: z.number().optional(),
+  bottom: z.number().optional(),
+  left: z.number().optional(),
+});
+
+export const ScrollViewElementPropsSchema = BaseBoxPropsSchema.extend({
+  horizontal: z.boolean().optional(),
+  bounces: z.boolean().optional(),
+  showsVerticalScrollIndicator: z.boolean().optional(),
+  showsHorizontalScrollIndicator: z.boolean().optional(),
+  alwaysBounceVertical: z.boolean().optional(),
+  alwaysBounceHorizontal: z.boolean().optional(),
+  contentInset: ContentInsetSchema.optional(),
+  contentContainerPadding: z.number().min(0).optional(),
+  keyboardShouldPersistTaps: z.enum(["always", "never", "handled"]).optional(),
+});

package/src/steps/ComposableScreen/types.ts

@@ -21,6 +21,11 @@ import { type DatePickerElementProps, DatePickerElementPropsSchema } from "./ele
 import { type CarouselElementProps, CarouselElementPropsSchema } from "./elements/CarouselElement";
 import { type ZStackElementProps, ZStackElementPropsSchema } from "./elements/ZStackElement";
 import { type SafeAreaViewElementProps, SafeAreaViewElementPropsSchema } from "./elements/SafeAreaViewElement";
+import { type ScrollViewElementProps, ScrollViewElementPropsSchema } from "./elements/ScrollViewElement";
+import {
+  type KeyboardAvoidingViewElementProps,
+  KeyboardAvoidingViewElementPropsSchema,
+} from "./elements/KeyboardAvoidingViewElement";
 
 export type { BaseBoxProps, GradientBackground, GradientEdge, GradientStop, LinearGradientConfig } from "./elements/BaseBoxProps";
 export { BaseBoxPropsSchema, GradientBackgroundSchema } from "./elements/BaseBoxProps";
@@ -40,6 +45,11 @@ export type { DatePickerElementProps } from "./elements/DatePickerElement";
 export type { CarouselElementProps } from "./elements/CarouselElement";
 export type { ZStackElementProps } from "./elements/ZStackElement";
 export type { SafeAreaViewElementProps, SafeAreaEdge, SafeAreaEdgeMode } from "./elements/SafeAreaViewElement";
+export type { ScrollViewElementProps, ScrollViewContentInset } from "./elements/ScrollViewElement";
+export type {
+  KeyboardAvoidingViewElementProps,
+  KeyboardAvoidingBehavior,
+} from "./elements/KeyboardAvoidingViewElement";
 
 /**
  * Type tag for a ComposableScreen variable. Drives expression-mode coercion
@@ -169,6 +179,22 @@ type UIElement =
       type: "SafeAreaView";
       props: SafeAreaViewElementProps;
       children: UIElement[];
+    }
+  | {
+      id: string;
+      name?: string;
+      renderWhen?: LeafCondition | ConditionGroup;
+      type: "ScrollView";
+      props: ScrollViewElementProps;
+      children: UIElement[];
+    }
+  | {
+      id: string;
+      name?: string;
+      renderWhen?: LeafCondition | ConditionGroup;
+      type: "KeyboardAvoidingView";
+      props: KeyboardAvoidingViewElementProps;
+      children: UIElement[];
     };
 
 const UIElementSchema: z.ZodType<UIElement> = z.lazy(() =>
@@ -282,12 +308,67 @@ const UIElementSchema: z.ZodType<UIElement> = z.lazy(() =>
       props: SafeAreaViewElementPropsSchema,
       children: z.array(UIElementSchema),
     }),
+    z.object({
+      id: z.string(),
+      name: z.string().optional(),
+      renderWhen: z.union([LeafConditionSchema, ConditionGroupSchema]).optional(),
+      type: z.literal("ScrollView"),
+      props: ScrollViewElementPropsSchema,
+      children: z.array(UIElementSchema),
+    }),
+    z.object({
+      id: z.string(),
+      name: z.string().optional(),
+      renderWhen: z.union([LeafConditionSchema, ConditionGroupSchema]).optional(),
+      type: z.literal("KeyboardAvoidingView"),
+      props: KeyboardAvoidingViewElementPropsSchema,
+      children: z.array(UIElementSchema),
+    }),
   ])
 );
 
-export const ComposableScreenStepPayloadSchema = z.object({
-  elements: z.array(UIElementSchema),
-});
+// Walk a UIElement tree; flag any KeyboardAvoidingView descendant of another KeyboardAvoidingView.
+// RN behavior is undefined when a KAV nests another; KAV adjusts the layout of the host view, and
+// stacking adjusters produces drift and clip artifacts on iOS + double height insets on Android.
+const collectNestedKeyboardAvoidingViews = (
+  nodes: UIElement[],
+  insideKav: boolean,
+  out: string[]
+): void => {
+  for (const node of nodes) {
+    if (node.type === "KeyboardAvoidingView") {
+      if (insideKav) out.push(node.id);
+      collectNestedKeyboardAvoidingViews(node.children, true, out);
+      continue;
+    }
+    if (
+      node.type === "YStack" ||
+      node.type === "XStack" ||
+      node.type === "ZStack" ||
+      node.type === "SafeAreaView" ||
+      node.type === "ScrollView" ||
+      node.type === "Carousel"
+    ) {
+      collectNestedKeyboardAvoidingViews(node.children, insideKav, out);
+    }
+  }
+};
+
+export const ComposableScreenStepPayloadSchema = z
+  .object({
+    elements: z.array(UIElementSchema),
+  })
+  .superRefine((payload, ctx) => {
+    const offenders: string[] = [];
+    collectNestedKeyboardAvoidingViews(payload.elements, false, offenders);
+    for (const id of offenders) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        path: ["elements"],
+        message: `KeyboardAvoidingView (id="${id}") cannot be nested inside another KeyboardAvoidingView.`,
+      });
+    }
+  });
 
 export const ComposableScreenStepTypeSchema = BaseStepTypeSchema.extend({
   type: z.literal("ComposableScreen"),