@rocapine/react-native-onboarding-ui 1.6.0 → 1.8.0

package/dist/UI/Pages/ComposableScreen/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/UI/Pages/ComposableScreen/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/UI/Pages/ComposableScreen/types.ts"],"names":[],"mappings":";;;AAAA,6BAAwB;AACxB,oCAA+C;AAC/C,0DAA0F;AAC1F,wDAAuF;AACvF,0DAA0F;AAC1F,4DAA6F;AAC7F,wDAAuF;AACvF,wDAAuF;AACvF,0DAA0F;AAC1F,0DAA0F;AAC1F,4DAA6F;AAC7F,oEAAyG;AAGzG,wDAA6D;AAApD,kHAAA,kBAAkB,OAAA;AA6Ed,QAAA,eAAe,GAAyB,OAAC,CAAC,IAAI,CAAC,GAAG,EAAE,CAC/D,OAAC,CAAC,KAAK,CAAC;IACN,OAAC,CAAC,MAAM,CAAC;QACP,EAAE,EAAE,OAAC,CAAC,MAAM,EAAE;QACd,IAAI,EAAE,OAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE;QAC3B,IAAI,EAAE,OAAC,CAAC,KAAK,CAAC,CAAC,OAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,OAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC;QACzD,KAAK,EAAE,sCAAuB;QAC9B,QAAQ,EAAE,OAAC,CAAC,KAAK,CAAC,uBAAe,CAAC;KACnC,CAAC;IACF,OAAC,CAAC,MAAM,CAAC;QACP,EAAE,EAAE,OAAC,CAAC,MAAM,EAAE;QACd,IAAI,EAAE,OAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE;QAC3B,IAAI,EAAE,OAAC,CAAC,OAAO,CAAC,MAAM,CAAC;QACvB,KAAK,EAAE,oCAAsB;KAC9B,CAAC;IACF,OAAC,CAAC,MAAM,CAAC;QACP,EAAE,EAAE,OAAC,CAAC,MAAM,EAAE;QACd,IAAI,EAAE,OAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE;QAC3B,IAAI,EAAE,OAAC,CAAC,OAAO,CAAC,OAAO,CAAC;QACxB,KAAK,EAAE,sCAAuB;KAC/B,CAAC;IACF,OAAC,CAAC,MAAM,CAAC;QACP,EAAE,EAAE,OAAC,CAAC,MAAM,EAAE;QACd,IAAI,EAAE,OAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE;QAC3B,IAAI,EAAE,OAAC,CAAC,OAAO,CAAC,QAAQ,CAAC;QACzB,KAAK,EAAE,wCAAwB;KAChC,CAAC;IACF,OAAC,CAAC,MAAM,CAAC;QACP,EAAE,EAAE,OAAC,CAAC,MAAM,EAAE;QACd,IAAI,EAAE,OAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE;QAC3B,IAAI,EAAE,OAAC,CAAC,OAAO,CAAC,MAAM,CAAC;QACvB,KAAK,EAAE,oCAAsB;KAC9B,CAAC;IACF,OAAC,CAAC,MAAM,CAAC;QACP,EAAE,EAAE,OAAC,CAAC,MAAM,EAAE;QACd,IAAI,EAAE,OAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE;QAC3B,IAAI,EAAE,OAAC,CAAC,OAAO,CAAC,MAAM,CAAC;QACvB,KAAK,EAAE,oCAAsB;KAC9B,CAAC;IACF,OAAC,CAAC,MAAM,CAAC;QACP,EAAE,EAAE,OAAC,CAAC,MAAM,EAAE;QACd,IAAI,EAAE,OAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE;QAC3B,IAAI,EAAE,OAAC,CAAC,OAAO,CAAC,OAAO,CAAC;QACxB,KAAK,EAAE,sCAAuB;KAC/B,CAAC;IACF,OAAC,CAAC,MAAM,CAAC;QACP,EAAE,EAAE,OAAC,CAAC,MAAM,EAAE;QACd,IAAI,EAAE,OAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE;QAC3B,IAAI,EAAE,OAAC,CAAC,OAAO,CAAC,OAAO,CAAC;QACxB,KAAK,EAAE,sCAAuB;KAC/B,CAAC;IACF,OAAC,CAAC,MAAM,CAAC;QACP,EAAE,EAAE,OAAC,CAAC,MAAM,EAAE;QACd,IAAI,EAAE,OAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE;QAC3B,IAAI,EAAE,OAAC,CAAC,OAAO,CAAC,QAAQ,CAAC;QACzB,KAAK,EAAE,wCAAwB;KAChC,CAAC;IACF,OAAC,CAAC,MAAM,CAAC;QACP,EAAE,EAAE,OAAC,CAAC,MAAM,EAAE;QACd,IAAI,EAAE,OAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE;QAC3B,IAAI,EAAE,OAAC,CAAC,OAAO,CAAC,YAAY,CAAC;QAC7B,KAAK,EAAE,gDAA4B;KACpC,CAAC;CACH,CAAC,CACH,CAAC;AAEW,QAAA,iCAAiC,GAAG,OAAC,CAAC,MAAM,CAAC;IACxD,QAAQ,EAAE,OAAC,CAAC,KAAK,CAAC,uBAAe,CAAC;CACnC,CAAC,CAAC;AAEU,QAAA,8BAA8B,GAAG,OAAC,CAAC,MAAM,CAAC;IACrD,EAAE,EAAE,OAAC,CAAC,MAAM,EAAE;IACd,IAAI,EAAE,OAAC,CAAC,OAAO,CAAC,kBAAkB,CAAC;IACnC,IAAI,EAAE,OAAC,CAAC,MAAM,EAAE;IAChB,qBAAqB,EAAE,OAAC,CAAC,OAAO,EAAE;IAClC,OAAO,EAAE,yCAAiC;IAC1C,aAAa,EAAE,2BAAmB;IAClC,mBAAmB,EAAE,OAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC;IAC9D,QAAQ,EAAE,OAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE;CAChC,CAAC,CAAC"}

package/dist/UI/Provider/OnboardingProgressProvider.d.ts

@@ -3,6 +3,10 @@ export declare const OnboardingProgressProvider: ({ children, initialColorScheme
     children: React.ReactNode;
     initialColorScheme?: ColorScheme;
 }) => import("react/jsx-runtime").JSX.Element;
+export type ComposableVariableEntry = {
+    value: string;
+    label?: string;
+};
 export declare const OnboardingProgressContext: import("react").Context<{
     activeStep: {
         number: number;
@@ -14,7 +18,7 @@ export declare const OnboardingProgressContext: import("react").Context<{
     }) => void;
     totalSteps: number;
     setTotalSteps: (_steps: number) => void;
-    composableVariables: Record<string, string>;
-    setComposableVariable: (_key: string, _value: string) => void;
+    composableVariables: Record<string, ComposableVariableEntry>;
+    setComposableVariable: (_key: string, _entry: ComposableVariableEntry | string) => void;
 }>;
 //# sourceMappingURL=OnboardingProgressProvider.d.ts.map

package/dist/UI/Provider/OnboardingProgressProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OnboardingProgressProvider.d.ts","sourceRoot":"","sources":["../../../src/UI/Provider/OnboardingProgressProvider.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,eAAO,MAAM,0BAA0B,GAAI,mCAGxC;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,kBAAkB,CAAC,EAAE,WAAW,CAAC;CAClC,4CAuBA,CAAC;AAEF,eAAO,MAAM,yBAAyB;;;;;2BAEb;QACrB,MAAM,EAAE,MAAM,CAAC;QACf,qBAAqB,EAAE,OAAO,CAAC;KAChC;;4BAEuB,MAAM;yBACH,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;kCACnB,MAAM,UAAU,MAAM;EACpD,CAAC"}
+{"version":3,"file":"OnboardingProgressProvider.d.ts","sourceRoot":"","sources":["../../../src/UI/Provider/OnboardingProgressProvider.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,eAAO,MAAM,0BAA0B,GAAI,mCAGxC;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,kBAAkB,CAAC,EAAE,WAAW,CAAC;CAClC,4CAwBA,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAExE,eAAO,MAAM,yBAAyB;;;;;2BAEb;QACrB,MAAM,EAAE,MAAM,CAAC;QACf,qBAAqB,EAAE,OAAO,CAAC;KAChC;;4BAEuB,MAAM;yBACH,MAAM,CAAC,MAAM,EAAE,uBAAuB,CAAC;kCACpC,MAAM,UAAU,uBAAuB,GAAG,MAAM;EAC9E,CAAC"}

package/dist/UI/Provider/OnboardingProgressProvider.js

@@ -12,8 +12,9 @@ const OnboardingProgressProvider = ({ children, initialColorScheme = "light", })
     });
     const [totalSteps, setTotalSteps] = (0, react_1.useState)(0);
     const [composableVariables, setComposableVariables] = (0, react_1.useState)({});
-    const setComposableVariable = (0, react_1.useCallback)((key, value) => {
-        setComposableVariables((prev) => (Object.assign(Object.assign({}, prev), { [key]: value })));
+    const setComposableVariable = (0, react_1.useCallback)((key, entry) => {
+        const normalizedEntry = typeof entry === "string" ? { value: entry } : entry;
+        setComposableVariables((prev) => (Object.assign(Object.assign({}, prev), { [key]: normalizedEntry })));
     }, []);
     return ((0, jsx_runtime_1.jsx)(react_native_safe_area_context_1.SafeAreaProvider, { children: (0, jsx_runtime_1.jsx)(ThemeProvider_1.ThemeProvider, { initialColorScheme: initialColorScheme, children: (0, jsx_runtime_1.jsx)(exports.OnboardingProgressContext.Provider, { value: { activeStep, setActiveStep, totalSteps, setTotalSteps, composableVariables, setComposableVariable }, children: children }) }) }));
 };
@@ -24,6 +25,6 @@ exports.OnboardingProgressContext = (0, react_1.createContext)({
     totalSteps: 0,
     setTotalSteps: (_steps) => { },
     composableVariables: {},
-    setComposableVariable: (_key, _value) => { },
+    setComposableVariable: (_key, _entry) => { },
 });
 //# sourceMappingURL=OnboardingProgressProvider.js.map

package/dist/UI/Provider/OnboardingProgressProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"OnboardingProgressProvider.js","sourceRoot":"","sources":["../../../src/UI/Provider/OnboardingProgressProvider.tsx"],"names":[],"mappings":";;;;AAAA,iCAA6D;AAC7D,mFAAkE;AAClE,0DAAuD;AAGhD,MAAM,0BAA0B,GAAG,CAAC,EACzC,QAAQ,EACR,kBAAkB,GAAG,OAAO,GAI7B,EAAE,EAAE;IACH,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,gBAAQ,EAAC;QAC3C,MAAM,EAAE,CAAC;QACT,qBAAqB,EAAE,KAAK;KAC7B,CAAC,CAAC;IACH,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,gBAAQ,EAAC,CAAC,CAAC,CAAC;IAChD,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,IAAA,gBAAQ,EAAyB,EAAE,CAAC,CAAC;IAE3F,MAAM,qBAAqB,GAAG,IAAA,mBAAW,EAAC,CAAC,GAAW,EAAE,KAAa,EAAE,EAAE;QACvE,sBAAsB,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,iCAAM,IAAI,KAAE,CAAC,GAAG,CAAC,EAAE,KAAK,IAAG,CAAC,CAAC;IAChE,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,uBAAC,iDAAgB,cACf,uBAAC,6BAAa,IAAC,kBAAkB,EAAE,kBAAkB,YACnD,uBAAC,iCAAyB,CAAC,QAAQ,IACjC,KAAK,EAAE,EAAE,UAAU,EAAE,aAAa,EAAE,UAAU,EAAE,aAAa,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,YAE1G,QAAQ,GAC0B,GACvB,GACC,CACpB,CAAC;AACJ,CAAC,CAAC;AA7BW,QAAA,0BAA0B,8BA6BrC;AAEW,QAAA,yBAAyB,GAAG,IAAA,qBAAa,EAAC;IACrD,UAAU,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,qBAAqB,EAAE,KAAK,EAAE;IACvD,aAAa,EAAE,CAAC,KAGf,EAAE,EAAE,GAAG,CAAC;IACT,UAAU,EAAE,CAAC;IACb,aAAa,EAAE,CAAC,MAAc,EAAE,EAAE,GAAG,CAAC;IACtC,mBAAmB,EAAE,EAA4B;IACjD,qBAAqB,EAAE,CAAC,IAAY,EAAE,MAAc,EAAE,EAAE,GAAG,CAAC;CAC7D,CAAC,CAAC"}
+{"version":3,"file":"OnboardingProgressProvider.js","sourceRoot":"","sources":["../../../src/UI/Provider/OnboardingProgressProvider.tsx"],"names":[],"mappings":";;;;AAAA,iCAA6D;AAC7D,mFAAkE;AAClE,0DAAuD;AAGhD,MAAM,0BAA0B,GAAG,CAAC,EACzC,QAAQ,EACR,kBAAkB,GAAG,OAAO,GAI7B,EAAE,EAAE;IACH,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,gBAAQ,EAAC;QAC3C,MAAM,EAAE,CAAC;QACT,qBAAqB,EAAE,KAAK;KAC7B,CAAC,CAAC;IACH,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,gBAAQ,EAAC,CAAC,CAAC,CAAC;IAChD,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,IAAA,gBAAQ,EAA0C,EAAE,CAAC,CAAC;IAE5G,MAAM,qBAAqB,GAAG,IAAA,mBAAW,EAAC,CAAC,GAAW,EAAE,KAAuC,EAAE,EAAE;QACjG,MAAM,eAAe,GAA4B,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC;QACtG,sBAAsB,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,iCAAM,IAAI,KAAE,CAAC,GAAG,CAAC,EAAE,eAAe,IAAG,CAAC,CAAC;IAC1E,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,uBAAC,iDAAgB,cACf,uBAAC,6BAAa,IAAC,kBAAkB,EAAE,kBAAkB,YACnD,uBAAC,iCAAyB,CAAC,QAAQ,IACjC,KAAK,EAAE,EAAE,UAAU,EAAE,aAAa,EAAE,UAAU,EAAE,aAAa,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,YAE1G,QAAQ,GAC0B,GACvB,GACC,CACpB,CAAC;AACJ,CAAC,CAAC;AA9BW,QAAA,0BAA0B,8BA8BrC;AAIW,QAAA,yBAAyB,GAAG,IAAA,qBAAa,EAAC;IACrD,UAAU,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,qBAAqB,EAAE,KAAK,EAAE;IACvD,aAAa,EAAE,CAAC,KAGf,EAAE,EAAE,GAAG,CAAC;IACT,UAAU,EAAE,CAAC;IACb,aAAa,EAAE,CAAC,MAAc,EAAE,EAAE,GAAG,CAAC;IACtC,mBAAmB,EAAE,EAA6C;IAClE,qBAAqB,EAAE,CAAC,IAAY,EAAE,MAAwC,EAAE,EAAE,GAAG,CAAC;CACvF,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rocapine/react-native-onboarding-ui",
-  "version": "1.6.0",
+  "version": "1.8.0",
   "description": "UI components and renderers for Rocapine Onboarding Studio - Built on top of the headless SDK",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -43,7 +43,7 @@
   },
   "peerDependencies": {
     "@react-native-picker/picker": "*",
-    "@rocapine/react-native-onboarding": "^1.6.0",
+    "@rocapine/react-native-onboarding": "^1.8.0",
     "@shopify/react-native-skia": ">=1.0.0",
     "@tanstack/react-query": ">=5.0.0",
     "@types/react": "*",

package/src/UI/OnboardingPage.tsx

@@ -35,7 +35,7 @@ export const OnboardingPage = ({ step, onContinue, isSandbox }: OnboardingPagePr
     case 'Question':
       return <QuestionRenderer step={step} onContinue={onContinue} theme={theme} />;
     case 'ComposableScreen':
-      return <ComposableScreenRenderer step={step} onContinue={onContinue} theme={theme} />;
+      return <ComposableScreenRenderer step={step} onContinue={onContinue} />;
     default:
       if (isSandbox) {
         // @ts-ignore

package/src/UI/Pages/ComposableScreen/Renderer.tsx

@@ -1,404 +1,38 @@
-import React, { useState, useEffect, useContext, useMemo } from "react";
-import { View, Text, Image, ScrollView, StyleSheet, TouchableOpacity, TextInput } from "react-native";
+import { useContext, useMemo } from "react";
+import { ScrollView, StyleSheet } from "react-native";
 import { ComposableScreenStepType, ComposableScreenStepTypeSchema, UIElement } from "./types";
-import { Theme } from "../../Theme/types";
-import { defaultTheme } from "../../Theme/defaultTheme";
-import { getTextStyle } from "../../Theme/helpers";
 import { withErrorBoundary } from "../../ErrorBoundary";
 import { OnboardingTemplate } from "../../Templates/OnboardingTemplate";
 import { OnboardingProgressContext } from "../../Provider/OnboardingProgressProvider";
-
-let LottieView: React.ComponentType<{
-  source: string | object;
-  autoPlay?: boolean;
-  loop?: boolean;
-  speed?: number;
-  style?: object;
-}> | null = null;
-try {
-  LottieView = require("lottie-react-native").default;
-} catch {
-  // lottie-react-native not installed
-}
-
-// Metro cannot tree-shake optional peer deps at runtime; the try/catch pattern
-// below is the standard React Native approach for optional native modules.
-type VideoUIElement = Extract<UIElement, { type: "Video" }>;
-let VideoElementComponent: React.ComponentType<{ element: VideoUIElement; style: object }> | null = null;
-try {
-  const { VideoView, useVideoPlayer } = require("expo-video");
-  VideoElementComponent = ({ element, style }: { element: VideoUIElement; style: object }) => {
-    const player = useVideoPlayer(element.props.url, (p: any) => {
-      p.loop = element.props.loop ?? false;
-      p.muted = element.props.muted ?? true;
-      if (element.props.autoPlay) p.play();
-    });
-    return (
-      <VideoView
-        player={player}
-        style={style}
-        allowsFullscreen={false}
-        nativeControls={element.props.controls ?? false}
-      />
-    );
-  };
-} catch {
-  // expo-video not installed
-}
-
-type InputUIElement = Extract<UIElement, { type: "Input" }>;
-const InputElementComponent = ({ element, theme, variables, onVariableChange }: { element: InputUIElement; theme: Theme; variables: Record<string, string>; onVariableChange: (key: string, value: string) => void }) => {
-  const persistedValue = element.props.variableName ? variables[element.props.variableName] : undefined;
-  const [value, setValue] = useState(persistedValue ?? element.props.defaultValue ?? "");
-
-  useEffect(() => {
-    if (element.props.variableName && element.props.defaultValue && persistedValue === undefined) {
-      onVariableChange(element.props.variableName, element.props.defaultValue);
-    }
-  }, []);
-
-  const handleChange = (text: string) => {
-    setValue(text);
-    if (element.props.variableName) {
-      onVariableChange(element.props.variableName, text);
-    }
-  };
-
-  return (
-    <View
-      style={{
-        backgroundColor: element.props.backgroundColor ?? theme.colors.neutral.lowest,
-        borderWidth: element.props.borderWidth ?? 1,
-        borderRadius: element.props.borderRadius ?? 8,
-        borderColor: element.props.borderColor ?? theme.colors.neutral.low,
-        width: element.props.width,
-        height: element.props.height,
-        opacity: element.props.opacity,
-        margin: element.props.margin,
-        marginHorizontal: element.props.marginHorizontal,
-        marginVertical: element.props.marginVertical,
-        overflow: "hidden",
-      }}
-    >
-      <TextInput
-        value={value}
-        onChangeText={handleChange}
-        placeholder={element.props.placeholder}
-        placeholderTextColor={element.props.placeholderColor ?? theme.colors.text.tertiary}
-        keyboardType={element.props.keyboardType ?? "default"}
-        returnKeyType={element.props.returnKeyType ?? "done"}
-        autoCapitalize={element.props.autoCapitalize ?? "sentences"}
-        secureTextEntry={element.props.secureTextEntry ?? false}
-        maxLength={element.props.maxLength}
-        multiline={element.props.multiline ?? false}
-        numberOfLines={element.props.numberOfLines}
-        editable={element.props.editable ?? true}
-        style={{
-          flex: 1,
-          color: element.props.color ?? theme.colors.text.primary,
-          fontSize: element.props.fontSize ?? theme.typography.textStyles.body.fontSize,
-          fontWeight: element.props.fontWeight as any,
-          textAlign: element.props.textAlign,
-          padding: element.props.padding ?? 12,
-          paddingHorizontal: element.props.paddingHorizontal,
-          paddingVertical: element.props.paddingVertical,
-        }}
-      />
-    </View>
-  );
-};
-
-type RiveUIElement = Extract<UIElement, { type: "Rive" }>;
-let RiveElementComponent: React.ComponentType<{ element: RiveUIElement; riveStyle: object }> | null = null;
-try {
-  const riveModule = require("rive-react-native");
-  const Rive = riveModule.default;
-  const { Fit, Alignment } = riveModule;
-  RiveElementComponent = ({ element, riveStyle }: { element: RiveUIElement; riveStyle: object }) => {
-    return (
-      <Rive
-        url={element.props.url}
-        autoplay={element.props.autoplay ?? true}
-        fit={element.props.fit ? Fit[element.props.fit] : Fit.Contain}
-        alignment={element.props.alignment ? Alignment[element.props.alignment] : Alignment.Center}
-        artboardName={element.props.artboardName}
-        stateMachineName={element.props.stateMachineName}
-        style={riveStyle}
-        onError={console.error}
-      />
-    );
-  };
-} catch {
-  // rive-react-native not installed - will show fallback if Rive is used
-}
-
-const interpolate = (template: string, variables: Record<string, string>): string =>
-  template.replace(/\{\{([^}]+?)\}\}/g, (_, key) => variables[key] ?? "");
+import { useTheme } from "../../Theme/useTheme";
+import { RenderContext } from "./elements/shared";
+import { renderElement } from "./elements/renderElement";
 
 type ContentProps = {
   step: ComposableScreenStepType;
   onContinue: () => void;
-  theme?: Theme;
 };
 
-const renderElement = (element: UIElement, theme: Theme, variables: Record<string, string>, setVariable: (key: string, value: string) => void, parentType?: "XStack" | "YStack"): React.ReactNode => {
-  if (element.type === "YStack" || element.type === "XStack") {
-    return (
-      <View
-        key={element.id}
-        style={{
-          flexDirection: element.type === "XStack" ? "row" : "column",
-          gap: element.props.gap,
-          padding: element.props.padding,
-          paddingHorizontal: element.props.paddingHorizontal,
-          paddingVertical: element.props.paddingVertical,
-          margin: element.props.margin,
-          marginHorizontal: element.props.marginHorizontal,
-          marginVertical: element.props.marginVertical,
-          flex: element.props.flex,
-          width: element.props.width,
-          height: element.props.height,
-          minWidth: element.props.minWidth,
-          maxWidth: element.props.maxWidth,
-          minHeight: element.props.minHeight,
-          maxHeight: element.props.maxHeight,
-          flexShrink: element.props.flexShrink ?? (parentType === "XStack" ? 1 : undefined),
-          flexWrap: element.props.flexWrap,
-          alignItems: element.props.alignItems,
-          justifyContent: element.props.justifyContent,
-          backgroundColor: element.props.backgroundColor,
-          borderWidth: element.props.borderWidth,
-          borderRadius: element.props.borderRadius,
-          borderColor: element.props.borderColor,
-          overflow: element.props.overflow,
-          opacity: element.props.opacity,
-        }}
-      >
-        {element.children.map((child) => renderElement(child, theme, variables, setVariable, element.type))}
-      </View>
-    );
-  }
-
-  if (element.type === "Text") {
-    const content = element.props.mode === "expression"
-      ? interpolate(element.props.content, variables)
-      : element.props.content;
-    return (
-      <Text
-        key={element.id}
-        style={{
-          fontSize: element.props.fontSize,
-          fontWeight: element.props.fontWeight as any,
-          color: element.props.color ?? theme.colors.text.primary,
-          textAlign: element.props.textAlign,
-          letterSpacing: element.props.letterSpacing,
-          lineHeight: element.props.lineHeight,
-          backgroundColor: element.props.backgroundColor,
-          padding: element.props.padding,
-          paddingHorizontal: element.props.paddingHorizontal,
-          paddingVertical: element.props.paddingVertical,
-          margin: element.props.margin,
-          marginHorizontal: element.props.marginHorizontal,
-          marginVertical: element.props.marginVertical,
-          borderWidth: element.props.borderWidth,
-          borderRadius: element.props.borderRadius,
-          borderColor: element.props.borderColor,
-          opacity: element.props.opacity,
-          flexShrink: parentType === "XStack" ? 1 : undefined,
-        }}
-      >
-        {content}
-      </Text>
-    );
-  }
-
-  if (element.type === "Image") {
-    const hasExplicitHeight = element.props.height !== undefined;
-    const aspectRatio = hasExplicitHeight
-      ? undefined
-      : (element.props.aspectRatio ?? 16 / 9);
-    return (
-      <Image
-        key={element.id}
-        source={{ uri: element.props.url }}
-        resizeMode={element.props.resizeMode ?? "cover"}
-        style={{
-          width: element.props.width ?? "100%",
-          height: element.props.height,
-          aspectRatio,
-          borderRadius: element.props.borderRadius,
-          borderWidth: element.props.borderWidth,
-          borderColor: element.props.borderColor,
-          opacity: element.props.opacity,
-          margin: element.props.margin,
-          marginHorizontal: element.props.marginHorizontal,
-          marginVertical: element.props.marginVertical,
-          padding: element.props.padding,
-          paddingHorizontal: element.props.paddingHorizontal,
-          paddingVertical: element.props.paddingVertical,
-        }}
-      />
-    );
-  }
-
-  if (element.type === "Lottie") {
-    const wrapperStyle = {
-      width: element.props.width ?? ("100%" as `${number}%`),
-      height: element.props.height ?? 200,
-      opacity: element.props.opacity,
-      margin: element.props.margin,
-      marginHorizontal: element.props.marginHorizontal,
-      marginVertical: element.props.marginVertical,
-      padding: element.props.padding,
-      paddingHorizontal: element.props.paddingHorizontal,
-      paddingVertical: element.props.paddingVertical,
-      borderWidth: element.props.borderWidth,
-      borderRadius: element.props.borderRadius,
-      borderColor: element.props.borderColor,
-      overflow: "hidden" as const,
-    };
-
-    if (!LottieView) {
-      return (
-        <View key={element.id} style={[wrapperStyle, styles.mediaFallback, { backgroundColor: theme.colors.neutral.lowest }]}>
-          <Text style={[styles.mediaFallbackText, getTextStyle(theme, "caption"), { color: theme.colors.text.tertiary }]}>
-            Install lottie-react-native to render Lottie animations.
-          </Text>
-        </View>
-      );
-    }
-
-    return (
-      <View key={element.id} style={wrapperStyle}>
-        <LottieView
-          source={{ uri: element.props.source }}
-          autoPlay={element.props.autoPlay ?? true}
-          loop={element.props.loop ?? true}
-          speed={element.props.speed}
-          style={styles.fill}
-        />
-      </View>
-    );
-  }
-
-  if (element.type === "Rive") {
-    const wrapperStyle = {
-      width: element.props.width ?? ("100%" as `${number}%`),
-      height: element.props.height ?? 200,
-      opacity: element.props.opacity,
-      margin: element.props.margin,
-      marginHorizontal: element.props.marginHorizontal,
-      marginVertical: element.props.marginVertical,
-      padding: element.props.padding,
-      paddingHorizontal: element.props.paddingHorizontal,
-      paddingVertical: element.props.paddingVertical,
-      borderWidth: element.props.borderWidth,
-      borderRadius: element.props.borderRadius,
-      borderColor: element.props.borderColor,
-      overflow: "hidden" as const,
-    };
-
-    if (!RiveElementComponent) {
-      return (
-        <View key={element.id} style={[wrapperStyle, styles.mediaFallback, { backgroundColor: theme.colors.neutral.lowest }]}>
-          <Text style={[styles.mediaFallbackText, getTextStyle(theme, "caption"), { color: theme.colors.text.tertiary }]}>
-            Install rive-react-native to render Rive animations.
-          </Text>
-        </View>
-      );
-    }
-
-    return (
-      <View key={element.id} style={wrapperStyle}>
-        <RiveElementComponent element={element} riveStyle={styles.fill} />
-      </View>
-    );
-  }
-
-  if (element.type === "Icon") {
-    const icons = require("lucide-react-native");
-    const IconComp = icons[element.props.name] as React.ComponentType<{
-      size?: number;
-      color?: string;
-      strokeWidth?: number;
-    }> | undefined;
-    return (
-      <View
-        key={element.id}
-        style={{
-          width: element.props.width,
-          height: element.props.height,
-          margin: element.props.margin,
-          marginHorizontal: element.props.marginHorizontal,
-          marginVertical: element.props.marginVertical,
-          padding: element.props.padding,
-          paddingHorizontal: element.props.paddingHorizontal,
-          paddingVertical: element.props.paddingVertical,
-          borderWidth: element.props.borderWidth,
-          borderRadius: element.props.borderRadius,
-          borderColor: element.props.borderColor,
-          opacity: element.props.opacity,
-        }}
-      >
-        {IconComp ? (
-          <IconComp
-            size={element.props.size ?? 24}
-            color={element.props.color ?? theme.colors.text.primary}
-            strokeWidth={element.props.strokeWidth ?? 2}
-          />
-        ) : null}
-      </View>
-    );
-  }
-
-  if (element.type === "Video") {
-    const wrapperStyle = {
-      width: element.props.width ?? ("100%" as `${number}%`),
-      height: element.props.height ?? 200,
-      opacity: element.props.opacity,
-      margin: element.props.margin,
-      marginHorizontal: element.props.marginHorizontal,
-      marginVertical: element.props.marginVertical,
-      padding: element.props.padding,
-      paddingHorizontal: element.props.paddingHorizontal,
-      paddingVertical: element.props.paddingVertical,
-      borderWidth: element.props.borderWidth,
-      borderRadius: element.props.borderRadius,
-      borderColor: element.props.borderColor,
-      overflow: "hidden" as const,
-    };
-
-    if (!VideoElementComponent) {
-      return (
-        <View key={element.id} style={[wrapperStyle, styles.mediaFallback, { backgroundColor: theme.colors.neutral.lowest }]}>
-          <Text style={[styles.mediaFallbackText, getTextStyle(theme, "caption"), { color: theme.colors.text.tertiary }]}>
-            Install expo-video to render videos.
-          </Text>
-        </View>
-      );
-    }
-
-    return (
-      <View key={element.id} style={wrapperStyle}>
-        <VideoElementComponent element={element} style={styles.fill} />
-      </View>
-    );
-  }
-
-  if (element.type === "Input") {
-    return <InputElementComponent key={element.id} element={element} theme={theme} variables={variables} onVariableChange={setVariable} />;
-  }
-
-  return null;
-};
-
-const ComposableScreenRendererBase = ({ step, onContinue, theme = defaultTheme }: ContentProps) => {
+const ComposableScreenRendererBase = ({ step, onContinue }: ContentProps) => {
+  const { theme } = useTheme();
   const validatedData = useMemo(() => ComposableScreenStepTypeSchema.parse(step), [step]);
   const { elements } = validatedData.payload;
   const { composableVariables, setComposableVariable } = useContext(OnboardingProgressContext);
+
+  const renderChildren = (children: UIElement[], parentType: "XStack" | "YStack") =>
+    children.map((child) => renderElement(child, ctx, parentType));
+
+  const ctx: RenderContext = {
+    theme,
+    variables: composableVariables,
+    setVariable: setComposableVariable,
+    onContinue,
+    renderChildren,
+  };
+
   return (
     <OnboardingTemplate
-      step={step}
+      step={validatedData}
       onContinue={onContinue}
       theme={theme}
     >
@@ -408,58 +42,16 @@ const ComposableScreenRendererBase = ({ step, onContinue, theme = defaultTheme }
         alwaysBounceVertical={false}
         keyboardShouldPersistTaps="handled"
       >
-        {elements.map((element) => renderElement(element, theme, composableVariables, setComposableVariable))}
-        <View style={styles.bottomSection}>
-          <TouchableOpacity
-            style={[styles.ctaButton, { backgroundColor: theme.colors.primary }]}
-            onPress={onContinue}
-            activeOpacity={0.8}
-          >
-            <Text
-              style={[
-                getTextStyle(theme, "button"),
-                { color: theme.colors.text.opposite },
-              ]}
-            >
-              {validatedData.continueButtonLabel}
-            </Text>
-          </TouchableOpacity>
-        </View>
+        {elements.map((element) => renderElement(element, ctx))}
       </ScrollView>
     </OnboardingTemplate>
-  )
+  );
 };
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  fill: {
-    width: "100%",
-    height: "100%",
-  },
   scrollContent: {
     flexGrow: 1,
   },
-  bottomSection: {
-    paddingHorizontal: 32,
-    alignItems: "center",
-  },
-  ctaButton: {
-    borderRadius: 90,
-    paddingVertical: 18,
-    paddingHorizontal: 24,
-    minWidth: 234,
-    alignItems: "center",
-  },
-  mediaFallback: {
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  mediaFallbackText: {
-    textAlign: "center",
-    paddingHorizontal: 16,
-  },
 });
 
 export const ComposableScreenRenderer = withErrorBoundary(ComposableScreenRendererBase, "ComposableScreen");

package/src/UI/Pages/ComposableScreen/elements/BaseBoxProps.ts

@@ -0,0 +1,31 @@
+import { z } from "zod";
+
+export type BaseBoxProps = {
+  width?: number;
+  height?: number;
+  opacity?: number;
+  margin?: number;
+  marginHorizontal?: number;
+  marginVertical?: number;
+  padding?: number;
+  paddingHorizontal?: number;
+  paddingVertical?: number;
+  borderWidth?: number;
+  borderRadius?: number;
+  borderColor?: string;
+};
+
+export const BaseBoxPropsSchema = z.object({
+  width: z.number().min(0).optional(),
+  height: z.number().min(0).optional(),
+  opacity: z.number().min(0).max(1).optional(),
+  margin: z.number().optional(),
+  marginHorizontal: z.number().optional(),
+  marginVertical: z.number().optional(),
+  padding: z.number().min(0).optional(),
+  paddingHorizontal: z.number().min(0).optional(),
+  paddingVertical: z.number().min(0).optional(),
+  borderWidth: z.number().min(0).optional(),
+  borderRadius: z.number().min(0).optional(),
+  borderColor: z.string().optional(),
+});