noboarding 1.0.1-beta → 1.0.2-beta

package/lib/OnboardingFlow.js

@@ -194,8 +194,19 @@ const OnboardingFlow = ({ apiKey, testKey, productionKey, onComplete, onSkip, ba
     const currentScreen = screens[currentIndex];
     // Handle noboard_screen type — render with ElementRenderer
     if (currentScreen.type === 'noboard_screen' && currentScreen.elements) {
+        // Merge collectedData (from custom screens) + variables (from noboard screens)
+        // This allows noboard screens to reference custom screen data in templates like {height_cm}
+        const allVariables = Object.assign(Object.assign({}, collectedData), variables);
+        // Warn about conflicts (same key in both sources)
+        if (__DEV__) {
+            Object.keys(collectedData).forEach(key => {
+                if (variables[key] !== undefined) {
+                    console.warn(`[Noboarding] Variable conflict: "${key}" exists in both custom screen data and noboard variables. Using noboard value.`);
+                }
+            });
+        }
         const handleElementNavigate = (destination) => {
-            const resolved = (0, variableUtils_1.resolveDestination)(destination, variables);
+            const resolved = (0, variableUtils_1.resolveDestination)(destination, allVariables);
             if (!resolved)
                 return;
             if (resolved === 'next') {
@@ -216,7 +227,7 @@ const OnboardingFlow = ({ apiKey, testKey, productionKey, onComplete, onSkip, ba
             }
         };
         return (<react_native_1.View style={styles.container}>
-        <ElementRenderer_1.ElementRenderer elements={currentScreen.elements} analytics={analyticsRef.current} screenId={currentScreen.id} onNavigate={handleElementNavigate} onDismiss={onSkip ? handleSkipAll : handleNext} variables={variables} onSetVariable={handleSetVariable}/>
+        <ElementRenderer_1.ElementRenderer elements={currentScreen.elements} analytics={analyticsRef.current} screenId={currentScreen.id} onNavigate={handleElementNavigate} onDismiss={onSkip ? handleSkipAll : handleNext} variables={allVariables} onSetVariable={handleSetVariable}/>
       </react_native_1.View>);
     }
     // Handle custom_screen type — developer-registered React Native components

package/lib/components/ElementRenderer.js

@@ -48,36 +48,17 @@ exports.ElementRenderer = void 0;
 const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const variableUtils_1 = require("../variableUtils");
-// Try to import LinearGradient — optional peer dependency
-let LinearGradient = null;
-try {
-    LinearGradient = require('expo-linear-gradient').LinearGradient;
-}
-catch (_a) {
-    try {
-        LinearGradient = require('react-native-linear-gradient').default;
-    }
-    catch (_b) {
-        // Neither available — gradients will fall back to first color
-    }
-}
-// Try to import vector icons — optional peer dependency
-let IconSets = {};
-try {
-    const icons = require('@expo/vector-icons');
-    IconSets = {
-        lucide: icons.Feather, // Closest match to Lucide
-        feather: icons.Feather,
-        material: icons.MaterialIcons,
-        'material-community': icons.MaterialCommunityIcons,
-        ionicons: icons.Ionicons,
-        fontawesome: icons.FontAwesome,
-        'sf-symbols': icons.Ionicons, // Closest match to SF Symbols
-    };
-}
-catch (_c) {
-    // Not available — icons will fall back to text placeholder
-}
+const expo_linear_gradient_1 = require("expo-linear-gradient");
+const vector_icons_1 = require("@expo/vector-icons");
+const IconSets = {
+    lucide: vector_icons_1.Feather,
+    feather: vector_icons_1.Feather,
+    material: vector_icons_1.MaterialIcons,
+    'material-community': vector_icons_1.MaterialCommunityIcons,
+    ionicons: vector_icons_1.Ionicons,
+    fontawesome: vector_icons_1.FontAwesome,
+    'sf-symbols': vector_icons_1.Ionicons,
+};
 const ElementRenderer = ({ elements, analytics, screenId, onNavigate, onDismiss, variables = {}, onSetVariable, }) => {
     // Track toggled element IDs for toggle actions
     const [toggledIds, setToggledIds] = (0, react_1.useState)(new Set());
@@ -169,8 +150,8 @@ const ElementRenderer = ({ elements, analytics, screenId, onNavigate, onDismiss,
     </>);
 };
 exports.ElementRenderer = ElementRenderer;
-const RenderNode = ({ element, toggledIds, groupSelections, onAction, variables }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5;
+const RenderNode = ({ element, toggledIds, groupSelections, onAction, variables, onSetVariable }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6;
     // Variable-based conditions — hide element if condition is not met
     if ((_a = element.conditions) === null || _a === void 0 ? void 0 : _a.show_if) {
         const shouldShow = (0, variableUtils_1.evaluateCondition)(element.conditions.show_if, variables);
@@ -215,7 +196,7 @@ const RenderNode = ({ element, toggledIds, groupSelections, onAction, variables
         {content}
       </react_native_1.TouchableOpacity>);
     };
-    const childProps = { toggledIds, groupSelections, onAction, variables };
+    const childProps = { toggledIds, groupSelections, onAction, variables, onSetVariable };
     switch (element.type) {
         // ─── Containers ───
         case 'vstack': {
@@ -346,7 +327,7 @@ const RenderNode = ({ element, toggledIds, groupSelections, onAction, variables
               {element.props.animationDescription}
             </react_native_1.Text>)}
         </react_native_1.View>);
-        case 'input':
+        case 'input': {
             // Only apply default border if borderWidth is not explicitly defined (including 0)
             const inputStyle = style;
             const defaultInputStyle = {};
@@ -354,7 +335,15 @@ const RenderNode = ({ element, toggledIds, groupSelections, onAction, variables
                 defaultInputStyle.borderWidth = 1;
                 defaultInputStyle.borderColor = '#E5E5E5';
             }
-            return (<react_native_1.TextInput style={[defaultInputStyle, inputStyle]} placeholder={((_2 = element.props) === null || _2 === void 0 ? void 0 : _2.placeholder) || 'Enter text...'} keyboardType={getKeyboardType((_3 = element.props) === null || _3 === void 0 ? void 0 : _3.type)} secureTextEntry={((_4 = element.props) === null || _4 === void 0 ? void 0 : _4.type) === 'password'} autoCapitalize={((_5 = element.props) === null || _5 === void 0 ? void 0 : _5.type) === 'email' ? 'none' : 'sentences'}/>);
+            // Get the variable name - use props.variable if specified, otherwise use element.id
+            const variableName = ((_2 = element.props) === null || _2 === void 0 ? void 0 : _2.variable) || element.id;
+            const currentValue = variables[variableName] || '';
+            return (<react_native_1.TextInput style={[defaultInputStyle, inputStyle]} placeholder={((_3 = element.props) === null || _3 === void 0 ? void 0 : _3.placeholder) || 'Enter text...'} keyboardType={getKeyboardType((_4 = element.props) === null || _4 === void 0 ? void 0 : _4.type)} secureTextEntry={((_5 = element.props) === null || _5 === void 0 ? void 0 : _5.type) === 'password'} autoCapitalize={((_6 = element.props) === null || _6 === void 0 ? void 0 : _6.type) === 'email' ? 'none' : 'sentences'} value={currentValue} onChangeText={(text) => {
+                    if (onSetVariable) {
+                        onSetVariable(variableName, text);
+                    }
+                }}/>);
+        }
         case 'spacer':
             return <react_native_1.View style={style || { flex: 1 }}/>;
         case 'divider':
@@ -469,7 +458,7 @@ function convertStyle(style) {
         rnStyle.textDecorationLine = style.textDecorationLine;
     // backgroundGradient is handled by wrapWithGradient at the component level.
     // If LinearGradient is not available, fall back to the first gradient color.
-    if (style.backgroundGradient && !LinearGradient && ((_a = style.backgroundGradient.colors) === null || _a === void 0 ? void 0 : _a.length)) {
+    if (style.backgroundGradient && !expo_linear_gradient_1.LinearGradient && ((_a = style.backgroundGradient.colors) === null || _a === void 0 ? void 0 : _a.length)) {
         const firstColor = style.backgroundGradient.colors[0];
         rnStyle.backgroundColor = typeof firstColor === 'string' ? firstColor : firstColor.color;
     }
@@ -487,7 +476,7 @@ function angleToCoords(angle) {
 function wrapWithGradient(content, elementStyle, viewStyle) {
     var _a, _b;
     const gradient = elementStyle === null || elementStyle === void 0 ? void 0 : elementStyle.backgroundGradient;
-    if (!gradient || !LinearGradient || !((_a = gradient.colors) === null || _a === void 0 ? void 0 : _a.length))
+    if (!gradient || !expo_linear_gradient_1.LinearGradient || !((_a = gradient.colors) === null || _a === void 0 ? void 0 : _a.length))
         return content;
     // Handle both { color, position } objects and plain color strings
     const colors = gradient.colors.map((c) => typeof c === 'string' ? c : c.color);
@@ -517,9 +506,9 @@ function wrapWithGradient(content, elementStyle, viewStyle) {
     else {
         coords = angleToCoords((_b = gradient.angle) !== null && _b !== void 0 ? _b : 180);
     }
-    return (<LinearGradient colors={colors} locations={locations} start={coords.start} end={coords.end} style={gradientStyle}>
+    return (<expo_linear_gradient_1.LinearGradient colors={colors} locations={locations} start={coords.start} end={coords.end} style={gradientStyle}>
       {content.props.children}
-    </LinearGradient>);
+    </expo_linear_gradient_1.LinearGradient>);
 }
 // ─── Helpers ───
 function getKeyboardType(type) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "noboarding",
-  "version": "1.0.1-beta",
-  "description": "React Native SDK for remote onboarding flow management",
+  "version": "1.0.2-beta",
+  "description": "Expo SDK for remote onboarding flow management",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "exports": {
@@ -26,20 +26,12 @@
   "license": "MIT",
   "peerDependencies": {
     "react": ">=16.8.0",
-    "react-native": ">=0.60.0",
-    "expo-linear-gradient": ">=12.0.0",
-    "@expo/vector-icons": ">=14.0.0"
-  },
-  "peerDependenciesMeta": {
-    "expo-linear-gradient": {
-      "optional": true
-    },
-    "@expo/vector-icons": {
-      "optional": true
-    }
+    "react-native": ">=0.60.0"
   },
   "dependencies": {
-    "@react-native-async-storage/async-storage": "^1.19.0"
+    "@react-native-async-storage/async-storage": "^1.19.0",
+    "expo-linear-gradient": ">=12.0.0",
+    "@expo/vector-icons": ">=14.0.0"
   },
   "devDependencies": {
     "@types/node": "^25.2.3",

package/src/OnboardingFlow.tsx

@@ -212,8 +212,23 @@ export const OnboardingFlow: React.FC<OnboardingFlowProps> = ({
 
   // Handle noboard_screen type — render with ElementRenderer
   if (currentScreen.type === 'noboard_screen' && currentScreen.elements) {
+    // Merge collectedData (from custom screens) + variables (from noboard screens)
+    // This allows noboard screens to reference custom screen data in templates like {height_cm}
+    const allVariables = { ...collectedData, ...variables };
+
+    // Warn about conflicts (same key in both sources)
+    if (__DEV__) {
+      Object.keys(collectedData).forEach(key => {
+        if (variables[key] !== undefined) {
+          console.warn(
+            `[Noboarding] Variable conflict: "${key}" exists in both custom screen data and noboard variables. Using noboard value.`
+          );
+        }
+      });
+    }
+
     const handleElementNavigate = (destination: string | ConditionalDestination | ConditionalRoutes) => {
-      const resolved = resolveDestination(destination, variables);
+      const resolved = resolveDestination(destination, allVariables);
       if (!resolved) return;
 
       if (resolved === 'next') {
@@ -239,7 +254,7 @@ export const OnboardingFlow: React.FC<OnboardingFlowProps> = ({
           screenId={currentScreen.id}
           onNavigate={handleElementNavigate}
           onDismiss={onSkip ? handleSkipAll : handleNext}
-          variables={variables}
+          variables={allVariables}
           onSetVariable={handleSetVariable}
         />
       </View>

package/src/components/ElementRenderer.tsx

@@ -14,35 +14,18 @@ import {
 } from 'react-native';
 import { ElementNode, ElementStyle, ElementAction, Analytics, ConditionalDestination, ConditionalRoutes } from '../types';
 import { resolveTemplate, evaluateCondition } from '../variableUtils';
-
-// Try to import LinearGradient — optional peer dependency
-let LinearGradient: any = null;
-try {
-  LinearGradient = require('expo-linear-gradient').LinearGradient;
-} catch {
-  try {
-    LinearGradient = require('react-native-linear-gradient').default;
-  } catch {
-    // Neither available — gradients will fall back to first color
-  }
-}
-
-// Try to import vector icons — optional peer dependency
-let IconSets: Record<string, any> = {};
-try {
-  const icons = require('@expo/vector-icons');
-  IconSets = {
-    lucide: icons.Feather,          // Closest match to Lucide
-    feather: icons.Feather,
-    material: icons.MaterialIcons,
-    'material-community': icons.MaterialCommunityIcons,
-    ionicons: icons.Ionicons,
-    fontawesome: icons.FontAwesome,
-    'sf-symbols': icons.Ionicons,   // Closest match to SF Symbols
-  };
-} catch {
-  // Not available — icons will fall back to text placeholder
-}
+import { LinearGradient } from 'expo-linear-gradient';
+import { Feather, MaterialIcons, MaterialCommunityIcons, Ionicons, FontAwesome } from '@expo/vector-icons';
+
+const IconSets: Record<string, any> = {
+  lucide: Feather,
+  feather: Feather,
+  material: MaterialIcons,
+  'material-community': MaterialCommunityIcons,
+  ionicons: Ionicons,
+  fontawesome: FontAwesome,
+  'sf-symbols': Ionicons,
+};
 
 interface ElementRendererProps {
   elements: ElementNode[];
@@ -179,9 +162,10 @@ interface RenderNodeProps {
   groupSelections: Record<string, string>;
   onAction: (element: ElementNode) => void;
   variables: Record<string, any>;
+  onSetVariable?: (name: string, value: any) => void;
 }
 
-const RenderNode: React.FC<RenderNodeProps> = ({ element, toggledIds, groupSelections, onAction, variables }) => {
+const RenderNode: React.FC<RenderNodeProps> = ({ element, toggledIds, groupSelections, onAction, variables, onSetVariable }) => {
   // Variable-based conditions — hide element if condition is not met
   if (element.conditions?.show_if) {
     const shouldShow = evaluateCondition(element.conditions.show_if, variables);
@@ -235,7 +219,7 @@ const RenderNode: React.FC<RenderNodeProps> = ({ element, toggledIds, groupSelec
     );
   };
 
-  const childProps = { toggledIds, groupSelections, onAction, variables };
+  const childProps = { toggledIds, groupSelections, onAction, variables, onSetVariable };
 
   switch (element.type) {
     // ─── Containers ───
@@ -446,7 +430,7 @@ const RenderNode: React.FC<RenderNodeProps> = ({ element, toggledIds, groupSelec
         </View>
       );
 
-    case 'input':
+    case 'input': {
       // Only apply default border if borderWidth is not explicitly defined (including 0)
       const inputStyle = style as TextStyle;
       const defaultInputStyle: TextStyle = {};
@@ -455,6 +439,10 @@ const RenderNode: React.FC<RenderNodeProps> = ({ element, toggledIds, groupSelec
         defaultInputStyle.borderColor = '#E5E5E5';
       }
 
+      // Get the variable name - use props.variable if specified, otherwise use element.id
+      const variableName = element.props?.variable || element.id;
+      const currentValue = variables[variableName] || '';
+
       return (
         <TextInput
           style={[defaultInputStyle, inputStyle]}
@@ -462,8 +450,15 @@ const RenderNode: React.FC<RenderNodeProps> = ({ element, toggledIds, groupSelec
           keyboardType={getKeyboardType(element.props?.type)}
           secureTextEntry={element.props?.type === 'password'}
           autoCapitalize={element.props?.type === 'email' ? 'none' : 'sentences'}
+          value={currentValue}
+          onChangeText={(text) => {
+            if (onSetVariable) {
+              onSetVariable(variableName, text);
+            }
+          }}
         />
       );
+    }
 
     case 'spacer':
       return <View style={style || { flex: 1 }} />;