@rocapine/react-native-onboarding-ui 1.11.1 → 1.12.0

package/dist/UI/Pages/ComposableScreen/Renderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Renderer.d.ts","sourceRoot":"","sources":["../../../../src/UI/Pages/ComposableScreen/Renderer.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,wBAAwB,EAA6C,MAAM,SAAS,CAAC;AAQ9F,KAAK,YAAY,GAAG;IAClB,IAAI,EAAE,wBAAwB,CAAC;IAC/B,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB,CAAC;AA2CF,eAAO,MAAM,wBAAwB;;;CAAsE,CAAC"}
+{"version":3,"file":"Renderer.d.ts","sourceRoot":"","sources":["../../../../src/UI/Pages/ComposableScreen/Renderer.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,wBAAwB,EAA6C,MAAM,SAAS,CAAC;AAQ9F,KAAK,YAAY,GAAG;IAClB,IAAI,EAAE,wBAAwB,CAAC;IAC/B,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB,CAAC;AAoDF,eAAO,MAAM,wBAAwB;;;CAAsE,CAAC"}

package/dist/UI/Pages/ComposableScreen/Renderer.js

@@ -4,6 +4,7 @@ exports.ComposableScreenRenderer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_native_1 = require("react-native");
+const react_native_onboarding_1 = require("@rocapine/react-native-onboarding");
 const types_1 = require("./types");
 const ErrorBoundary_1 = require("../../ErrorBoundary");
 const OnboardingTemplate_1 = require("../../Templates/OnboardingTemplate");
@@ -15,11 +16,16 @@ const ComposableScreenRendererBase = ({ step, onContinue }) => {
     const validatedData = (0, react_1.useMemo)(() => types_1.ComposableScreenStepTypeSchema.parse(step), [step]);
     const { elements } = validatedData.payload;
     const { composableVariables, setComposableVariable } = (0, react_1.useContext)(OnboardingProgressProvider_1.OnboardingProgressContext);
+    const { setVariable: setHeadlessVariable } = (0, react_1.useContext)(react_native_onboarding_1.OnboardingProgressContext);
+    const setVariableAndSync = (0, react_1.useCallback)((key, entry) => {
+        setComposableVariable(key, entry);
+        setHeadlessVariable(key, entry.value);
+    }, [setComposableVariable, setHeadlessVariable]);
     const renderChildren = (children, parentType) => children.map((child) => (0, renderElement_1.renderElement)(child, ctx, parentType));
     const ctx = {
         theme,
         variables: composableVariables,
-        setVariable: setComposableVariable,
+        setVariable: setVariableAndSync,
         onContinue,
         renderChildren,
     };

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

@@ -1 +1 @@
-{"version":3,"file":"Renderer.js","sourceRoot":"","sources":["../../../../src/UI/Pages/ComposableScreen/Renderer.tsx"],"names":[],"mappings":";;;;AAAA,iCAA4C;AAC5C,+CAAsD;AACtD,mCAA8F;AAC9F,uDAAwD;AACxD,2EAAwE;AACxE,0FAAsF;AACtF,mDAAgD;AAEhD,4DAAyD;AAOzD,MAAM,4BAA4B,GAAG,CAAC,EAAE,IAAI,EAAE,UAAU,EAAgB,EAAE,EAAE;IAC1E,MAAM,EAAE,KAAK,EAAE,GAAG,IAAA,mBAAQ,GAAE,CAAC;IAC7B,MAAM,aAAa,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,sCAA8B,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IACxF,MAAM,EAAE,QAAQ,EAAE,GAAG,aAAa,CAAC,OAAO,CAAC;IAC3C,MAAM,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,GAAG,IAAA,kBAAU,EAAC,sDAAyB,CAAC,CAAC;IAE7F,MAAM,cAAc,GAAG,CAAC,QAAqB,EAAE,UAA+B,EAAE,EAAE,CAChF,QAAQ,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,IAAA,6BAAa,EAAC,KAAK,EAAE,GAAG,EAAE,UAAU,CAAC,CAAC,CAAC;IAEjE,MAAM,GAAG,GAAkB;QACzB,KAAK;QACL,SAAS,EAAE,mBAAmB;QAC9B,WAAW,EAAE,qBAAqB;QAClC,UAAU;QACV,cAAc;KACf,CAAC;IAEF,OAAO,CACL,uBAAC,uCAAkB,IACjB,IAAI,EAAE,aAAa,EACnB,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,YAEZ,uBAAC,yBAAU,IACT,qBAAqB,EAAE,MAAM,CAAC,aAAa,EAC3C,4BAA4B,EAAE,KAAK,EACnC,oBAAoB,EAAE,KAAK,EAC3B,yBAAyB,EAAC,SAAS,YAElC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,IAAA,6BAAa,EAAC,OAAO,EAAE,GAAG,CAAC,CAAC,GAC5C,GACM,CACtB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,MAAM,GAAG,yBAAU,CAAC,MAAM,CAAC;IAC/B,aAAa,EAAE;QACb,QAAQ,EAAE,CAAC;KACZ;CACF,CAAC,CAAC;AAEU,QAAA,wBAAwB,GAAG,IAAA,iCAAiB,EAAC,4BAA4B,EAAE,kBAAkB,CAAC,CAAC"}
+{"version":3,"file":"Renderer.js","sourceRoot":"","sources":["../../../../src/UI/Pages/ComposableScreen/Renderer.tsx"],"names":[],"mappings":";;;;AAAA,iCAAyD;AACzD,+CAAsD;AACtD,+EAAyG;AACzG,mCAA8F;AAC9F,uDAAwD;AACxD,2EAAwE;AACxE,0FAA+G;AAC/G,mDAAgD;AAEhD,4DAAyD;AAOzD,MAAM,4BAA4B,GAAG,CAAC,EAAE,IAAI,EAAE,UAAU,EAAgB,EAAE,EAAE;IAC1E,MAAM,EAAE,KAAK,EAAE,GAAG,IAAA,mBAAQ,GAAE,CAAC;IAC7B,MAAM,aAAa,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,sCAA8B,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IACxF,MAAM,EAAE,QAAQ,EAAE,GAAG,aAAa,CAAC,OAAO,CAAC;IAC3C,MAAM,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,GAAG,IAAA,kBAAU,EAAC,sDAAyB,CAAC,CAAC;IAC7F,MAAM,EAAE,WAAW,EAAE,mBAAmB,EAAE,GAAG,IAAA,kBAAU,EAAC,mDAAuB,CAAC,CAAC;IAEjF,MAAM,kBAAkB,GAAG,IAAA,mBAAW,EACpC,CAAC,GAAW,EAAE,KAA8B,EAAE,EAAE;QAC9C,qBAAqB,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;QAClC,mBAAmB,CAAC,GAAG,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;IACxC,CAAC,EACD,CAAC,qBAAqB,EAAE,mBAAmB,CAAC,CAC7C,CAAC;IAEF,MAAM,cAAc,GAAG,CAAC,QAAqB,EAAE,UAA+B,EAAE,EAAE,CAChF,QAAQ,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,IAAA,6BAAa,EAAC,KAAK,EAAE,GAAG,EAAE,UAAU,CAAC,CAAC,CAAC;IAEjE,MAAM,GAAG,GAAkB;QACzB,KAAK;QACL,SAAS,EAAE,mBAAmB;QAC9B,WAAW,EAAE,kBAAkB;QAC/B,UAAU;QACV,cAAc;KACf,CAAC;IAEF,OAAO,CACL,uBAAC,uCAAkB,IACjB,IAAI,EAAE,aAAa,EACnB,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,YAEZ,uBAAC,yBAAU,IACT,qBAAqB,EAAE,MAAM,CAAC,aAAa,EAC3C,4BAA4B,EAAE,KAAK,EACnC,oBAAoB,EAAE,KAAK,EAC3B,yBAAyB,EAAC,SAAS,YAElC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,IAAA,6BAAa,EAAC,OAAO,EAAE,GAAG,CAAC,CAAC,GAC5C,GACM,CACtB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,MAAM,GAAG,yBAAU,CAAC,MAAM,CAAC;IAC/B,aAAa,EAAE;QACb,QAAQ,EAAE,CAAC;KACZ;CACF,CAAC,CAAC;AAEU,QAAA,wBAAwB,GAAG,IAAA,iCAAiB,EAAC,4BAA4B,EAAE,kBAAkB,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rocapine/react-native-onboarding-ui",
-  "version": "1.11.1",
+  "version": "1.12.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",

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

@@ -1,9 +1,10 @@
-import { useContext, useMemo } from "react";
+import { useCallback, useContext, useMemo } from "react";
 import { ScrollView, StyleSheet } from "react-native";
+import { OnboardingProgressContext as HeadlessProgressContext } from "@rocapine/react-native-onboarding";
 import { ComposableScreenStepType, ComposableScreenStepTypeSchema, UIElement } from "./types";
 import { withErrorBoundary } from "../../ErrorBoundary";
 import { OnboardingTemplate } from "../../Templates/OnboardingTemplate";
-import { OnboardingProgressContext } from "../../Provider/OnboardingProgressProvider";
+import { OnboardingProgressContext, ComposableVariableEntry } from "../../Provider/OnboardingProgressProvider";
 import { useTheme } from "../../Theme/useTheme";
 import { RenderContext } from "./elements/shared";
 import { renderElement } from "./elements/renderElement";
@@ -18,6 +19,15 @@ const ComposableScreenRendererBase = ({ step, onContinue }: ContentProps) => {
   const validatedData = useMemo(() => ComposableScreenStepTypeSchema.parse(step), [step]);
   const { elements } = validatedData.payload;
   const { composableVariables, setComposableVariable } = useContext(OnboardingProgressContext);
+  const { setVariable: setHeadlessVariable } = useContext(HeadlessProgressContext);
+
+  const setVariableAndSync = useCallback(
+    (key: string, entry: ComposableVariableEntry) => {
+      setComposableVariable(key, entry);
+      setHeadlessVariable(key, entry.value);
+    },
+    [setComposableVariable, setHeadlessVariable]
+  );
 
   const renderChildren = (children: UIElement[], parentType: "XStack" | "YStack") =>
     children.map((child) => renderElement(child, ctx, parentType));
@@ -25,7 +35,7 @@ const ComposableScreenRendererBase = ({ step, onContinue }: ContentProps) => {
   const ctx: RenderContext = {
     theme,
     variables: composableVariables,
-    setVariable: setComposableVariable,
+    setVariable: setVariableAndSync,
     onContinue,
     renderChildren,
   };