@rocapine/react-native-onboarding 1.24.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",

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"),