@rocapine/react-native-onboarding-ui 1.23.0 → 1.25.0

package/src/UI/Pages/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 } from "./elements/BaseBoxProps";
 export { BaseBoxPropsSchema } from "./elements/BaseBoxProps";
@@ -39,6 +44,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";
 
 // UIElement union — must live here (not in elements/) to avoid circular deps
 // because the Stack variant's children: UIElement[] references itself.
@@ -151,6 +161,22 @@ export 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[];
     };
 
 export const UIElementSchema: z.ZodType<UIElement> = z.lazy(() =>
@@ -264,12 +290,66 @@ export 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),
-});
+// See packages/onboarding for the canonical comment; mirror nesting guard here because
+// the UI re-parses the step with `ComposableScreenStepTypeSchema.parse(step)` in Renderer.tsx.
+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 = z.object({
   id: z.string(),