@rocapine/react-native-onboarding 1.1.6 → 1.3.0

package/README.md

@@ -2,19 +2,22 @@
 
 **A CMS-driven onboarding system for React Native mobile apps.**
 
-Build beautiful, customizable onboarding flows that update instantly without app releases.
+Build beautiful, customizable onboarding flows that update instantly without app
+releases.
 
 ---
 
 ## ✨ Features
 
-- 🎨 **Pre-built Components** - Ready-to-use screens (ratings, pickers, carousels, media content, and more)
+- 🎨 **Pre-built Components** - Ready-to-use screens (ratings, pickers,
+  carousels, media content, and more)
 - 🔄 **CMS-Driven** - Update onboarding flows remotely without app releases
 - 📱 **React Native** - Works with Expo and bare React Native projects
 - 🎯 **Type-Safe** - Full TypeScript support with runtime validation
 - 💾 **Offline Support** - Built-in caching with AsyncStorage
 - 🎭 **Themeable** - Customizable colors, typography, and styling
-- 🔧 **Extensible** - Three levels of customization from theme tokens to complete renderer overrides
+- 🔧 **Extensible** - Three levels of customization from theme tokens to
+  complete renderer overrides
 
 ---
 
@@ -58,8 +61,8 @@ export default function RootLayout() {
 
 ```typescript
 import {
-  useOnboardingQuestions,
   OnboardingPage,
+  useOnboardingQuestions,
 } from "@rocapine/react-native-onboarding";
 
 export default function OnboardingScreen() {
@@ -87,29 +90,38 @@ That's it! 🎉
 
 Complete documentation for using the SDK in your app:
 
-- **[Getting Started](./docs/getting-started.mdx)** - Installation, setup, and your first onboarding flow
-- **[Core Concepts](./docs/core-concepts.mdx)** - How the SDK works, caching, progress tracking
+- **[Getting Started](./docs/getting-started.mdx)** - Installation, setup, and
+  your first onboarding flow
+- **[Core Concepts](./docs/core-concepts.mdx)** - How the SDK works, caching,
+  progress tracking
 - **[API Reference](./docs/api-reference.mdx)** - Complete API documentation
-- **[Page Types](./docs/page-types.mdx)** - Available page types and their features
+- **[Page Types](./docs/page-types.mdx)** - Available page types and their
+  features
 
 ### Customization
 
 Learn how to customize your onboarding experience:
 
-- **[Customization Overview](./docs/customization/intro.mdx)** - Choose your customization level
-- **[Level 1: Theming](./docs/customization/theming.mdx)** - Colors, typography, and semantic styles
-- **[Level 2: Custom Components](./docs/customization/custom-components.mdx)** - Replace specific UI components
-- **[Level 3: Custom Renderers](./docs/customization/custom-renderers.mdx)** - Complete screen control
+- **[Customization Overview](./docs/customization/intro.mdx)** - Choose your
+  customization level
+- **[Level 1: Theming](./docs/customization/theming.mdx)** - Colors, typography,
+  and semantic styles
+- **[Level 2: Custom Components](./docs/customization/custom-components.mdx)** -
+  Replace specific UI components
+- **[Level 3: Custom Renderers](./docs/customization/custom-renderers.mdx)** -
+  Complete screen control
 
 ### Support
 
-- **[Troubleshooting](./docs/troubleshooting.mdx)** - Common issues and solutions
+- **[Troubleshooting](./docs/troubleshooting.mdx)** - Common issues and
+  solutions
 
 ### For Contributors
 
 Want to contribute to the SDK?
 
-- **[Contributing Guide](./CONTRIBUTING.md)** - Development setup, architecture, and contribution guidelines
+- **[Contributing Guide](./CONTRIBUTING.md)** - Development setup, architecture,
+  and contribution guidelines
 
 ---
 
@@ -125,7 +137,7 @@ Customize colors, typography, and semantic styles:
     colors: { primary: "#FF5733" },
     typography: { fontFamily: { title: "CustomFont-Bold" } },
   }}
-/>
+/>;
 ```
 
 ### Level 2: Custom Components
@@ -138,7 +150,7 @@ Replace specific UI components:
     QuestionAnswerButton: CustomButton,
     QuestionAnswersList: AnimatedList,
   }}
-/>
+/>;
 ```
 
 ### Level 3: Custom Renderers
@@ -168,6 +180,10 @@ export default function OnboardingScreen() {
 - **Loader** - Sequential progress animation with optional carousel
 - **Ratings** - App store rating prompts with social proof
 - **Commitment** - User commitment and agreement screens
+- **ComposableScreen** _(under development)_ - Declarative layout system driven
+  entirely from the CMS. Build arbitrary screens by composing `YStack`,
+  `XStack`, and `Text` elements with full layout, spacing, border, and
+  typography control — no custom renderer needed.
 
 [Learn more about page types →](./docs/page-types.mdx)
 
@@ -199,7 +215,8 @@ npm start
 
 ## 🤝 Contributing
 
-We welcome contributions! Please see our [Contributing Guide](./CONTRIBUTING.md) for details.
+We welcome contributions! Please see our [Contributing Guide](./CONTRIBUTING.md)
+for details.
 
 ### Publishing:
 
@@ -214,7 +231,8 @@ We welcome contributions! Please see our [Contributing Guide](./CONTRIBUTING.md)
 ## 📧 Support
 
 - **Email:** support@rocapine.com
-- **Issues:** [GitHub Issues](https://github.com/rocapine/react-native-onboarding-studio/issues)
+- **Issues:**
+  [GitHub Issues](https://github.com/rocapine/react-native-onboarding-studio/issues)
 - **Documentation:** [Rocapine Docs](https://docs.rocapine.com)
 
 ---

package/dist/onboarding-example.d.ts

@@ -27,6 +27,7 @@ export declare const onboardingExample: {
             variant?: undefined;
             duration?: undefined;
             didYouKnowImages?: undefined;
+            elements?: undefined;
             socialProofs?: undefined;
             rateTheAppButtonLabel?: undefined;
         };
@@ -54,6 +55,7 @@ export declare const onboardingExample: {
             variant?: undefined;
             duration?: undefined;
             didYouKnowImages?: undefined;
+            elements?: undefined;
             socialProofs?: undefined;
             rateTheAppButtonLabel?: undefined;
         };
@@ -78,6 +80,7 @@ export declare const onboardingExample: {
             variant?: undefined;
             duration?: undefined;
             didYouKnowImages?: undefined;
+            elements?: undefined;
             socialProofs?: undefined;
             rateTheAppButtonLabel?: undefined;
         };
@@ -108,6 +111,7 @@ export declare const onboardingExample: {
             subtitle?: undefined;
             multipleAnswer?: undefined;
             pickerType?: undefined;
+            elements?: undefined;
             socialProofs?: undefined;
             rateTheAppButtonLabel?: undefined;
         };
@@ -115,6 +119,84 @@ export declare const onboardingExample: {
         customPayload: {};
         continueButtonLabel: string;
         displayProgressHeader: false;
+    } | {
+        id: string;
+        name: string;
+        type: string;
+        displayProgressHeader: true;
+        payload: {
+            elements: {
+                id: string;
+                type: string;
+                props: {
+                    gap: number;
+                    padding: number;
+                };
+                children: ({
+                    id: string;
+                    type: string;
+                    props: {
+                        url: string;
+                        height: number;
+                        resizeMode: string;
+                        borderRadius: number;
+                        content?: undefined;
+                        fontSize?: undefined;
+                        fontWeight?: undefined;
+                        textAlign?: undefined;
+                        lineHeight?: undefined;
+                        opacity?: undefined;
+                    };
+                } | {
+                    id: string;
+                    type: string;
+                    props: {
+                        content: string;
+                        fontSize: number;
+                        fontWeight: string;
+                        textAlign: string;
+                        url?: undefined;
+                        height?: undefined;
+                        resizeMode?: undefined;
+                        borderRadius?: undefined;
+                        lineHeight?: undefined;
+                        opacity?: undefined;
+                    };
+                } | {
+                    id: string;
+                    type: string;
+                    props: {
+                        content: string;
+                        fontSize: number;
+                        textAlign: string;
+                        lineHeight: number;
+                        opacity: number;
+                        url?: undefined;
+                        height?: undefined;
+                        resizeMode?: undefined;
+                        borderRadius?: undefined;
+                        fontWeight?: undefined;
+                    };
+                })[];
+            }[];
+            title?: undefined;
+            description?: undefined;
+            mediaSource?: undefined;
+            answers?: undefined;
+            infoBox?: undefined;
+            subtitle?: undefined;
+            multipleAnswer?: undefined;
+            pickerType?: undefined;
+            steps?: undefined;
+            variant?: undefined;
+            duration?: undefined;
+            didYouKnowImages?: undefined;
+            socialProofs?: undefined;
+            rateTheAppButtonLabel?: undefined;
+        };
+        figmaUrl: null;
+        customPayload: {};
+        continueButtonLabel: string;
     } | {
         id: string;
         name: string;
@@ -138,6 +220,7 @@ export declare const onboardingExample: {
             variant?: undefined;
             duration?: undefined;
             didYouKnowImages?: undefined;
+            elements?: undefined;
         };
         figmaUrl: null;
         customPayload: {};

package/dist/onboarding-example.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"onboarding-example.d.ts","sourceRoot":"","sources":["../src/onboarding-example.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgHR,CAAC"}
+{"version":3,"file":"onboarding-example.d.ts","sourceRoot":"","sources":["../src/onboarding-example.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoKR,CAAC"}

package/dist/onboarding-example.js

@@ -89,6 +89,57 @@ exports.onboardingExample = {
             continueButtonLabel: "Continue",
             displayProgressHeader: false,
         },
+        {
+            id: "composable-screen-demo",
+            name: "Composable Screen",
+            type: "ComposableScreen",
+            displayProgressHeader: true,
+            payload: {
+                elements: [
+                    {
+                        id: "root",
+                        type: "YStack",
+                        props: { gap: 24, padding: 24 },
+                        children: [
+                            {
+                                id: "hero-image",
+                                type: "Image",
+                                props: {
+                                    url: "https://picsum.photos/800/400?grayscale",
+                                    height: 180,
+                                    resizeMode: "cover",
+                                    borderRadius: 16,
+                                },
+                            },
+                            {
+                                id: "headline",
+                                type: "Text",
+                                props: {
+                                    content: "Built from the CMS",
+                                    fontSize: 28,
+                                    fontWeight: "700",
+                                    textAlign: "center",
+                                },
+                            },
+                            {
+                                id: "subheadline",
+                                type: "Text",
+                                props: {
+                                    content: "This screen is composed entirely from a JSON payload — no custom renderer needed.",
+                                    fontSize: 15,
+                                    textAlign: "center",
+                                    lineHeight: 22,
+                                    opacity: 0.6,
+                                },
+                            },
+                        ],
+                    },
+                ],
+            },
+            figmaUrl: null,
+            customPayload: {},
+            continueButtonLabel: "Continue",
+        },
         {
             id: "ratings-app",
             name: "Rate the App",

package/dist/onboarding-example.js.map

@@ -1 +1 @@
-{"version":3,"file":"onboarding-example.js","sourceRoot":"","sources":["../src/onboarding-example.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"onboarding-example.js","sourceRoot":"","sources":["../src/onboarding-example.ts"],"names":[],"mappings":"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"}

package/dist/steps/ComposableScreen/types.d.ts

@@ -0,0 +1,96 @@
+import { z } from "zod";
+type UIElement = {
+    id: string;
+    name?: string;
+    type: "YStack" | "XStack";
+    props: {
+        gap?: number;
+        padding?: number;
+        paddingHorizontal?: number;
+        paddingVertical?: number;
+        margin?: number;
+        marginHorizontal?: number;
+        marginVertical?: number;
+        flex?: number;
+        width?: number;
+        height?: number;
+        minWidth?: number;
+        maxWidth?: number;
+        minHeight?: number;
+        maxHeight?: number;
+        alignItems?: "flex-start" | "center" | "flex-end" | "stretch";
+        justifyContent?: "flex-start" | "center" | "flex-end" | "space-between" | "space-around";
+        backgroundColor?: string;
+        flexWrap?: "wrap" | "nowrap";
+        flexShrink?: number;
+        borderWidth?: number;
+        borderRadius?: number;
+        borderColor?: string;
+        overflow?: "hidden" | "visible" | "scroll";
+        opacity?: number;
+    };
+    children: UIElement[];
+} | {
+    id: string;
+    name?: string;
+    type: "Text";
+    props: {
+        content: string;
+        fontSize?: number;
+        fontWeight?: string;
+        color?: string;
+        textAlign?: "left" | "center" | "right";
+        letterSpacing?: number;
+        lineHeight?: number;
+        backgroundColor?: string;
+        padding?: number;
+        paddingHorizontal?: number;
+        paddingVertical?: number;
+        margin?: number;
+        marginHorizontal?: number;
+        marginVertical?: number;
+        borderWidth?: number;
+        borderRadius?: number;
+        borderColor?: string;
+        opacity?: number;
+    };
+} | {
+    id: string;
+    name?: string;
+    type: "Image";
+    props: {
+        url: string;
+        width?: number;
+        height?: number;
+        aspectRatio?: number;
+        resizeMode?: "cover" | "contain" | "stretch" | "center";
+        borderRadius?: number;
+        borderWidth?: number;
+        borderColor?: string;
+        opacity?: number;
+        margin?: number;
+        marginHorizontal?: number;
+        marginVertical?: number;
+        padding?: number;
+        paddingHorizontal?: number;
+        paddingVertical?: number;
+    };
+};
+export declare const ComposableScreenStepPayloadSchema: z.ZodObject<{
+    elements: z.ZodArray<z.ZodType<UIElement, unknown, z.core.$ZodTypeInternals<UIElement, unknown>>>;
+}, z.core.$strip>;
+export declare const ComposableScreenStepTypeSchema: z.ZodObject<{
+    id: z.ZodString;
+    type: z.ZodLiteral<"ComposableScreen">;
+    name: z.ZodString;
+    displayProgressHeader: z.ZodBoolean;
+    payload: z.ZodObject<{
+        elements: z.ZodArray<z.ZodType<UIElement, unknown, z.core.$ZodTypeInternals<UIElement, unknown>>>;
+    }, z.core.$strip>;
+    customPayload: z.ZodOptional<z.ZodNullable<z.ZodRecord<z.ZodString, z.ZodAny>>>;
+    continueButtonLabel: z.ZodDefault<z.ZodOptional<z.ZodString>>;
+    figmaUrl: z.ZodNullable<z.ZodString>;
+}, z.core.$strip>;
+export type ComposableScreenStepType = z.infer<typeof ComposableScreenStepTypeSchema>;
+export {};
+//# sourceMappingURL=types.d.ts.map

package/dist/steps/ComposableScreen/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/steps/ComposableScreen/types.ts"],"names":[],"mappings":"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"}

package/dist/steps/ComposableScreen/types.js

@@ -0,0 +1,103 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComposableScreenStepTypeSchema = exports.ComposableScreenStepPayloadSchema = void 0;
+const zod_1 = require("zod");
+const common_types_1 = require("../common.types");
+const StackElementPropsSchema = zod_1.z.object({
+    gap: zod_1.z.number().optional(),
+    padding: zod_1.z.number().optional(),
+    paddingHorizontal: zod_1.z.number().optional(),
+    paddingVertical: zod_1.z.number().optional(),
+    margin: zod_1.z.number().optional(),
+    marginHorizontal: zod_1.z.number().optional(),
+    marginVertical: zod_1.z.number().optional(),
+    flex: zod_1.z.number().optional(),
+    width: zod_1.z.number().optional(),
+    height: zod_1.z.number().optional(),
+    minWidth: zod_1.z.number().optional(),
+    maxWidth: zod_1.z.number().optional(),
+    minHeight: zod_1.z.number().optional(),
+    maxHeight: zod_1.z.number().optional(),
+    alignItems: zod_1.z.enum(["flex-start", "center", "flex-end", "stretch"]).optional(),
+    justifyContent: zod_1.z.enum(["flex-start", "center", "flex-end", "space-between", "space-around"]).optional(),
+    backgroundColor: zod_1.z.string().optional(),
+    flexWrap: zod_1.z.enum(["wrap", "nowrap"]).optional(),
+    flexShrink: zod_1.z.number().optional(),
+    borderWidth: zod_1.z.number().optional(),
+    borderRadius: zod_1.z.number().optional(),
+    borderColor: zod_1.z.string().optional(),
+    overflow: zod_1.z.enum(["hidden", "visible", "scroll"]).optional(),
+    opacity: zod_1.z.number().min(0).max(1).optional(),
+});
+const TextElementPropsSchema = zod_1.z.object({
+    content: zod_1.z.string(),
+    fontSize: zod_1.z.number().optional(),
+    fontWeight: zod_1.z.string().optional(),
+    color: zod_1.z.string().optional(),
+    textAlign: zod_1.z.enum(["left", "center", "right"]).optional(),
+    letterSpacing: zod_1.z.number().optional(),
+    lineHeight: zod_1.z.number().optional(),
+    backgroundColor: zod_1.z.string().optional(),
+    padding: zod_1.z.number().optional(),
+    paddingHorizontal: zod_1.z.number().optional(),
+    paddingVertical: zod_1.z.number().optional(),
+    margin: zod_1.z.number().optional(),
+    marginHorizontal: zod_1.z.number().optional(),
+    marginVertical: zod_1.z.number().optional(),
+    borderWidth: zod_1.z.number().optional(),
+    borderRadius: zod_1.z.number().optional(),
+    borderColor: zod_1.z.string().optional(),
+    opacity: zod_1.z.number().min(0).max(1).optional(),
+});
+const ImageElementPropsSchema = zod_1.z.object({
+    url: zod_1.z.string(),
+    width: zod_1.z.number().optional(),
+    height: zod_1.z.number().optional(),
+    aspectRatio: zod_1.z.number().optional(),
+    resizeMode: zod_1.z.enum(["cover", "contain", "stretch", "center"]).optional(),
+    borderRadius: zod_1.z.number().optional(),
+    borderWidth: zod_1.z.number().optional(),
+    borderColor: zod_1.z.string().optional(),
+    opacity: zod_1.z.number().min(0).max(1).optional(),
+    margin: zod_1.z.number().optional(),
+    marginHorizontal: zod_1.z.number().optional(),
+    marginVertical: zod_1.z.number().optional(),
+    padding: zod_1.z.number().optional(),
+    paddingHorizontal: zod_1.z.number().optional(),
+    paddingVertical: zod_1.z.number().optional(),
+});
+const UIElementSchema = zod_1.z.lazy(() => zod_1.z.union([
+    zod_1.z.object({
+        id: zod_1.z.string(),
+        name: zod_1.z.string().optional(),
+        type: zod_1.z.union([zod_1.z.literal("YStack"), zod_1.z.literal("XStack")]),
+        props: StackElementPropsSchema,
+        children: zod_1.z.array(UIElementSchema),
+    }),
+    zod_1.z.object({
+        id: zod_1.z.string(),
+        name: zod_1.z.string().optional(),
+        type: zod_1.z.literal("Text"),
+        props: TextElementPropsSchema,
+    }),
+    zod_1.z.object({
+        id: zod_1.z.string(),
+        name: zod_1.z.string().optional(),
+        type: zod_1.z.literal("Image"),
+        props: ImageElementPropsSchema,
+    }),
+]));
+exports.ComposableScreenStepPayloadSchema = zod_1.z.object({
+    elements: zod_1.z.array(UIElementSchema),
+});
+exports.ComposableScreenStepTypeSchema = zod_1.z.object({
+    id: zod_1.z.string(),
+    type: zod_1.z.literal("ComposableScreen"),
+    name: zod_1.z.string(),
+    displayProgressHeader: zod_1.z.boolean(),
+    payload: exports.ComposableScreenStepPayloadSchema,
+    customPayload: common_types_1.CustomPayloadSchema,
+    continueButtonLabel: zod_1.z.string().optional().default("Continue"),
+    figmaUrl: zod_1.z.string().nullable(),
+});
+//# sourceMappingURL=types.js.map

package/dist/steps/ComposableScreen/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/steps/ComposableScreen/types.ts"],"names":[],"mappings":"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"}

package/dist/steps/types.d.ts

@@ -2,8 +2,9 @@ import { CarouselStepType } from "./Carousel/types";
 import { CommitmentStepType } from "./Commitment/types";
 import { LoaderStepType } from "./Loader/types";
 import { MediaContentStepType } from "./MediaContent/types";
+import { ComposableScreenStepType } from "./ComposableScreen/types";
 import { PickerStepType } from "./Picker/types";
 import { QuestionStepType } from "./Question/types";
 import { RatingsStepType } from "./Ratings/types";
-export type OnboardingStepType = CarouselStepType | CommitmentStepType | LoaderStepType | MediaContentStepType | PickerStepType | QuestionStepType | RatingsStepType;
+export type OnboardingStepType = CarouselStepType | CommitmentStepType | LoaderStepType | MediaContentStepType | ComposableScreenStepType | PickerStepType | QuestionStepType | RatingsStepType;
 //# sourceMappingURL=types.d.ts.map

package/dist/steps/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/steps/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,MAAM,kBAAkB,GAC1B,gBAAgB,GAChB,kBAAkB,GAClB,cAAc,GACd,oBAAoB,GACpB,cAAc,GACd,gBAAgB,GAChB,eAAe,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/steps/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAC5D,OAAO,EAAE,wBAAwB,EAAE,MAAM,0BAA0B,CAAC;AACpE,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,MAAM,kBAAkB,GAC1B,gBAAgB,GAChB,kBAAkB,GAClB,cAAc,GACd,oBAAoB,GACpB,wBAAwB,GACxB,cAAc,GACd,gBAAgB,GAChB,eAAe,CAAC"}

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@rocapine/react-native-onboarding",
-  "version": "1.1.6",
+  "version": "1.3.0",
   "description": "Headless React Native SDK for Rocapine Onboarding Studio - Data fetching, state management, and hooks",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
     "build": "tsc",
     "watch": "tsc --watch",
+    "type:check": "tsc --noEmit",
     "patch": "npm version patch && npm run build && npm publish"
   },
   "keywords": [

package/src/onboarding-example.ts

@@ -88,6 +88,58 @@ export const onboardingExample = {
       continueButtonLabel: "Continue",
       displayProgressHeader: false,
     },
+    {
+      id: "composable-screen-demo",
+      name: "Composable Screen",
+      type: "ComposableScreen",
+      displayProgressHeader: true,
+      payload: {
+        elements: [
+          {
+            id: "root",
+            type: "YStack",
+            props: { gap: 24, padding: 24 },
+            children: [
+              {
+                id: "hero-image",
+                type: "Image",
+                props: {
+                  url: "https://picsum.photos/800/400?grayscale",
+                  height: 180,
+                  resizeMode: "cover",
+                  borderRadius: 16,
+                },
+              },
+              {
+                id: "headline",
+                type: "Text",
+                props: {
+                  content: "Built from the CMS",
+                  fontSize: 28,
+                  fontWeight: "700",
+                  textAlign: "center",
+                },
+              },
+              {
+                id: "subheadline",
+                type: "Text",
+                props: {
+                  content:
+                    "This screen is composed entirely from a JSON payload — no custom renderer needed.",
+                  fontSize: 15,
+                  textAlign: "center",
+                  lineHeight: 22,
+                  opacity: 0.6,
+                },
+              },
+            ],
+          },
+        ],
+      },
+      figmaUrl: null,
+      customPayload: {},
+      continueButtonLabel: "Continue",
+    },
     {
       id: "ratings-app",
       name: "Rate the App",

package/src/steps/ComposableScreen/types.ts

@@ -0,0 +1,190 @@
+import { z } from "zod";
+import { CustomPayloadSchema } from "../common.types";
+
+type UIElement =
+  | {
+      id: string;
+      name?: string;
+      type: "YStack" | "XStack";
+      props: {
+        gap?: number;
+        padding?: number;
+        paddingHorizontal?: number;
+        paddingVertical?: number;
+        margin?: number;
+        marginHorizontal?: number;
+        marginVertical?: number;
+        flex?: number;
+        width?: number;
+        height?: number;
+        minWidth?: number;
+        maxWidth?: number;
+        minHeight?: number;
+        maxHeight?: number;
+        alignItems?: "flex-start" | "center" | "flex-end" | "stretch";
+        justifyContent?: "flex-start" | "center" | "flex-end" | "space-between" | "space-around";
+        backgroundColor?: string;
+        flexWrap?: "wrap" | "nowrap";
+        flexShrink?: number;
+        borderWidth?: number;
+        borderRadius?: number;
+        borderColor?: string;
+        overflow?: "hidden" | "visible" | "scroll";
+        opacity?: number;
+      };
+      children: UIElement[];
+    }
+  | {
+      id: string;
+      name?: string;
+      type: "Text";
+      props: {
+        content: string;
+        fontSize?: number;
+        fontWeight?: string;
+        color?: string;
+        textAlign?: "left" | "center" | "right";
+        letterSpacing?: number;
+        lineHeight?: number;
+        backgroundColor?: string;
+        padding?: number;
+        paddingHorizontal?: number;
+        paddingVertical?: number;
+        margin?: number;
+        marginHorizontal?: number;
+        marginVertical?: number;
+        borderWidth?: number;
+        borderRadius?: number;
+        borderColor?: string;
+        opacity?: number;
+      };
+    }
+  | {
+      id: string;
+      name?: string;
+      type: "Image";
+      props: {
+        url: string;
+        width?: number;
+        height?: number;
+        aspectRatio?: number;
+        resizeMode?: "cover" | "contain" | "stretch" | "center";
+        borderRadius?: number;
+        borderWidth?: number;
+        borderColor?: string;
+        opacity?: number;
+        margin?: number;
+        marginHorizontal?: number;
+        marginVertical?: number;
+        padding?: number;
+        paddingHorizontal?: number;
+        paddingVertical?: number;
+      };
+    };
+
+const StackElementPropsSchema = z.object({
+  gap: z.number().optional(),
+  padding: z.number().optional(),
+  paddingHorizontal: z.number().optional(),
+  paddingVertical: z.number().optional(),
+  margin: z.number().optional(),
+  marginHorizontal: z.number().optional(),
+  marginVertical: z.number().optional(),
+  flex: z.number().optional(),
+  width: z.number().optional(),
+  height: z.number().optional(),
+  minWidth: z.number().optional(),
+  maxWidth: z.number().optional(),
+  minHeight: z.number().optional(),
+  maxHeight: z.number().optional(),
+  alignItems: z.enum(["flex-start", "center", "flex-end", "stretch"]).optional(),
+  justifyContent: z.enum(["flex-start", "center", "flex-end", "space-between", "space-around"]).optional(),
+  backgroundColor: z.string().optional(),
+  flexWrap: z.enum(["wrap", "nowrap"]).optional(),
+  flexShrink: z.number().optional(),
+  borderWidth: z.number().optional(),
+  borderRadius: z.number().optional(),
+  borderColor: z.string().optional(),
+  overflow: z.enum(["hidden", "visible", "scroll"]).optional(),
+  opacity: z.number().min(0).max(1).optional(),
+});
+
+const TextElementPropsSchema = z.object({
+  content: z.string(),
+  fontSize: z.number().optional(),
+  fontWeight: z.string().optional(),
+  color: z.string().optional(),
+  textAlign: z.enum(["left", "center", "right"]).optional(),
+  letterSpacing: z.number().optional(),
+  lineHeight: z.number().optional(),
+  backgroundColor: z.string().optional(),
+  padding: z.number().optional(),
+  paddingHorizontal: z.number().optional(),
+  paddingVertical: z.number().optional(),
+  margin: z.number().optional(),
+  marginHorizontal: z.number().optional(),
+  marginVertical: z.number().optional(),
+  borderWidth: z.number().optional(),
+  borderRadius: z.number().optional(),
+  borderColor: z.string().optional(),
+  opacity: z.number().min(0).max(1).optional(),
+});
+
+const ImageElementPropsSchema = z.object({
+  url: z.string(),
+  width: z.number().optional(),
+  height: z.number().optional(),
+  aspectRatio: z.number().optional(),
+  resizeMode: z.enum(["cover", "contain", "stretch", "center"]).optional(),
+  borderRadius: z.number().optional(),
+  borderWidth: z.number().optional(),
+  borderColor: z.string().optional(),
+  opacity: z.number().min(0).max(1).optional(),
+  margin: z.number().optional(),
+  marginHorizontal: z.number().optional(),
+  marginVertical: z.number().optional(),
+  padding: z.number().optional(),
+  paddingHorizontal: z.number().optional(),
+  paddingVertical: z.number().optional(),
+});
+
+const UIElementSchema: z.ZodType<UIElement> = z.lazy(() =>
+  z.union([
+    z.object({
+      id: z.string(),
+      name: z.string().optional(),
+      type: z.union([z.literal("YStack"), z.literal("XStack")]),
+      props: StackElementPropsSchema,
+      children: z.array(UIElementSchema),
+    }),
+    z.object({
+      id: z.string(),
+      name: z.string().optional(),
+      type: z.literal("Text"),
+      props: TextElementPropsSchema,
+    }),
+    z.object({
+      id: z.string(),
+      name: z.string().optional(),
+      type: z.literal("Image"),
+      props: ImageElementPropsSchema,
+    }),
+  ])
+);
+
+export const ComposableScreenStepPayloadSchema = z.object({
+  elements: z.array(UIElementSchema),
+});
+
+export const ComposableScreenStepTypeSchema = z.object({
+  id: z.string(),
+  type: z.literal("ComposableScreen"),
+  name: z.string(),
+  displayProgressHeader: z.boolean(),
+  payload: ComposableScreenStepPayloadSchema,
+  customPayload: CustomPayloadSchema,
+  continueButtonLabel: z.string().optional().default("Continue"),
+  figmaUrl: z.string().nullable(),
+});
+
+export type ComposableScreenStepType = z.infer<typeof ComposableScreenStepTypeSchema>;

package/src/steps/types.ts

@@ -2,6 +2,7 @@ import { CarouselStepType } from "./Carousel/types";
 import { CommitmentStepType } from "./Commitment/types";
 import { LoaderStepType } from "./Loader/types";
 import { MediaContentStepType } from "./MediaContent/types";
+import { ComposableScreenStepType } from "./ComposableScreen/types";
 import { PickerStepType } from "./Picker/types";
 import { QuestionStepType } from "./Question/types";
 import { RatingsStepType } from "./Ratings/types";
@@ -11,6 +12,7 @@ export type OnboardingStepType =
   | CommitmentStepType
   | LoaderStepType
   | MediaContentStepType
+  | ComposableScreenStepType
   | PickerStepType
   | QuestionStepType
   | RatingsStepType;