noboarding 1.0.1-beta → 1.0.3-beta

package/lib/OnboardingFlow.js

@@ -32,18 +32,39 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.OnboardingFlow = void 0;
 const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
+const async_storage_1 = __importDefault(require("@react-native-async-storage/async-storage"));
 const api_1 = require("./api");
 const analytics_1 = require("./analytics");
 const variableUtils_1 = require("./variableUtils");
 const ElementRenderer_1 = require("./components/ElementRenderer");
-// Generate unique IDs
-const generateUserId = () => {
-    return `user_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+const USER_ID_STORAGE_KEY = '@noboarding_user_id';
+// Get or create persistent user ID
+const getPersistentUserId = async () => {
+    try {
+        // Try to get existing user ID from storage
+        const existingUserId = await async_storage_1.default.getItem(USER_ID_STORAGE_KEY);
+        if (existingUserId) {
+            return existingUserId;
+        }
+        // Generate new user ID if none exists
+        const newUserId = `user_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+        await async_storage_1.default.setItem(USER_ID_STORAGE_KEY, newUserId);
+        return newUserId;
+    }
+    catch (error) {
+        console.error('Failed to get/set user ID from storage:', error);
+        // Fallback to generating a non-persistent ID
+        return `user_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+    }
 };
+// Generate session ID (always new per session)
 const generateSessionId = () => {
     return `session_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
 };
@@ -80,14 +101,22 @@ const OnboardingFlow = ({ apiKey, testKey, productionKey, onComplete, onSkip, ba
     const [variables, setVariables] = (0, react_1.useState)(initialVariables || {});
     const apiRef = (0, react_1.useRef)(null);
     const analyticsRef = (0, react_1.useRef)(null);
-    const userIdRef = (0, react_1.useRef)(generateUserId());
+    const userIdRef = (0, react_1.useRef)(null);
     const sessionIdRef = (0, react_1.useRef)(generateSessionId());
+    const flowIdRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
-        // Notify parent of the generated user ID
-        if (onUserIdGenerated) {
-            onUserIdGenerated(userIdRef.current);
-        }
-        initializeFlow();
+        const initialize = async () => {
+            // Get or create persistent user ID
+            const userId = await getPersistentUserId();
+            userIdRef.current = userId;
+            // Notify parent of the user ID
+            if (onUserIdGenerated) {
+                onUserIdGenerated(userId);
+            }
+            // Initialize the flow
+            await initializeFlow();
+        };
+        initialize();
         return () => {
             // Cleanup: flush remaining analytics
             if (analyticsRef.current) {
@@ -95,26 +124,65 @@ const OnboardingFlow = ({ apiKey, testKey, productionKey, onComplete, onSkip, ba
             }
         };
     }, []);
+    // Track screen views whenever user navigates to a different screen
+    (0, react_1.useEffect)(() => {
+        if (screens.length > 0 && analyticsRef.current && currentIndex > 0) {
+            const currentScreen = screens[currentIndex];
+            analyticsRef.current.track('screen_viewed', {
+                flow_id: flowIdRef.current,
+                screen_id: currentScreen.id,
+                screen_index: currentIndex,
+            });
+        }
+    }, [currentIndex, screens]);
     const initializeFlow = async () => {
+        var _a, _b, _c;
         try {
             setLoading(true);
             setError(null);
+            // Ensure user ID is set
+            if (!userIdRef.current) {
+                throw new Error('User ID not initialized');
+            }
             // Initialize API client with detected API key
             const api = new api_1.API(activeApiKey, baseUrl);
             apiRef.current = api;
             // Initialize analytics
             const analytics = new analytics_1.AnalyticsManager(api, userIdRef.current, sessionIdRef.current);
             analyticsRef.current = analytics;
-            // Track onboarding start
-            analytics.track('onboarding_started');
             // Fetch configuration
             const configResponse = await api.getConfig();
+            // Store flow_id for analytics
+            flowIdRef.current = configResponse.config_id;
+            // Handle A/B test experiment assignment
+            let screensToUse = configResponse.config.screens;
+            if (configResponse.experiments && configResponse.experiments.length > 0) {
+                // Assign user to the first active experiment
+                const experiment = configResponse.experiments[0];
+                try {
+                    const assignment = await api.assignVariant(experiment.id, userIdRef.current);
+                    // Set experiment context so all events get tagged
+                    analytics.setExperimentContext(experiment.id, assignment.variant_id);
+                    // Use variant screens if available
+                    if (((_b = (_a = assignment.variant_config) === null || _a === void 0 ? void 0 : _a.screens) === null || _b === void 0 ? void 0 : _b.length) > 0) {
+                        screensToUse = assignment.variant_config.screens;
+                    }
+                }
+                catch (err) {
+                    console.warn('Failed to assign experiment variant, using default flow:', err);
+                }
+            }
             // Backward compatibility: normalize legacy 'custom_screen' (with elements) to 'noboard_screen'
-            const normalizedScreens = configResponse.config.screens
+            const normalizedScreens = screensToUse
                 .map(s => (Object.assign(Object.assign({}, s), { type: (s.type === 'custom_screen' && s.elements) ? 'noboard_screen' : s.type })))
                 // Filter out hidden screens (dashboard show/hide feature)
                 .filter(s => !s.hidden);
             setScreens(normalizedScreens);
+            // Track onboarding start with first screen
+            analytics.track('onboarding_started', {
+                flow_id: flowIdRef.current,
+                screen_id: (_c = normalizedScreens[0]) === null || _c === void 0 ? void 0 : _c.id,
+            });
             setLoading(false);
         }
         catch (err) {
@@ -155,18 +223,25 @@ const OnboardingFlow = ({ apiKey, testKey, productionKey, onComplete, onSkip, ba
         setVariables(prev => (Object.assign(Object.assign({}, prev), { [name]: value })));
     }, []);
     const handleComplete = async (lastScreenData) => {
+        var _a;
         const finalData = Object.assign(Object.assign(Object.assign({}, collectedData), (lastScreenData || {})), { _variables: variables });
         // Track completion
         if (analyticsRef.current) {
-            analyticsRef.current.track('onboarding_completed');
+            analyticsRef.current.track('onboarding_completed', {
+                flow_id: flowIdRef.current,
+                screen_id: (_a = screens[currentIndex]) === null || _a === void 0 ? void 0 : _a.id,
+            });
             await analyticsRef.current.flush();
         }
         // Call developer's completion callback with collected data
         onComplete(finalData);
     };
     const handleSkipAll = async () => {
+        var _a;
         if (analyticsRef.current) {
             analyticsRef.current.track('onboarding_abandoned', {
+                flow_id: flowIdRef.current,
+                screen_id: (_a = screens[currentIndex]) === null || _a === void 0 ? void 0 : _a.id,
                 current_screen_index: currentIndex,
             });
             await analyticsRef.current.flush();
@@ -194,8 +269,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 +302,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/analytics.d.ts

@@ -5,7 +5,13 @@ export declare class AnalyticsManager {
     private userId;
     private sessionId;
     private flushTimer;
+    private experimentId;
+    private variantId;
     constructor(api: API, userId: string, sessionId: string);
+    /**
+     * Set experiment context — all subsequent events will be tagged
+     */
+    setExperimentContext(experimentId: string, variantId: string): void;
     /**
      * Track an analytics event
      */

package/lib/analytics.js

@@ -7,22 +7,39 @@ class AnalyticsManager {
     constructor(api, userId, sessionId) {
         this.events = [];
         this.flushTimer = null;
+        this.experimentId = null;
+        this.variantId = null;
         this.api = api;
         this.userId = userId;
         this.sessionId = sessionId;
         // Start auto-flush timer
         this.startFlushTimer();
     }
+    /**
+     * Set experiment context — all subsequent events will be tagged
+     */
+    setExperimentContext(experimentId, variantId) {
+        this.experimentId = experimentId;
+        this.variantId = variantId;
+    }
     /**
      * Track an analytics event
      */
     track(eventName, properties) {
+        const mergedProperties = Object.assign({}, (properties || {}));
+        // Auto-inject experiment context if set
+        if (this.experimentId) {
+            mergedProperties.experiment_id = this.experimentId;
+        }
+        if (this.variantId) {
+            mergedProperties.variant_id = this.variantId;
+        }
         const event = {
             event: eventName,
             user_id: this.userId,
             session_id: this.sessionId,
             timestamp: Date.now(),
-            properties: properties || {},
+            properties: mergedProperties,
         };
         this.events.push(event);
         // Auto-flush if batch size reached

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/lib/types.d.ts

@@ -141,6 +141,7 @@ export interface AnalyticsEvent {
 export interface GetConfigResponse {
     config: OnboardingConfig;
     version: string;
+    config_id: string | null;
     experiments: Experiment[];
     organization_id: string;
 }

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.3-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

@@ -1,16 +1,36 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { View, ActivityIndicator, StyleSheet, Text, TouchableOpacity } from 'react-native';
+import AsyncStorage from '@react-native-async-storage/async-storage';
 import { API } from './api';
 import { AnalyticsManager } from './analytics';
 import { OnboardingFlowProps, ScreenConfig, ConditionalDestination, ConditionalRoutes } from './types';
 import { resolveDestination } from './variableUtils';
 import { ElementRenderer } from './components/ElementRenderer';
 
-// Generate unique IDs
-const generateUserId = (): string => {
-  return `user_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+const USER_ID_STORAGE_KEY = '@noboarding_user_id';
+
+// Get or create persistent user ID
+const getPersistentUserId = async (): Promise<string> => {
+  try {
+    // Try to get existing user ID from storage
+    const existingUserId = await AsyncStorage.getItem(USER_ID_STORAGE_KEY);
+
+    if (existingUserId) {
+      return existingUserId;
+    }
+
+    // Generate new user ID if none exists
+    const newUserId = `user_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+    await AsyncStorage.setItem(USER_ID_STORAGE_KEY, newUserId);
+    return newUserId;
+  } catch (error) {
+    console.error('Failed to get/set user ID from storage:', error);
+    // Fallback to generating a non-persistent ID
+    return `user_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+  }
 };
 
+// Generate session ID (always new per session)
 const generateSessionId = (): string => {
   return `session_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
 };
@@ -60,16 +80,26 @@ export const OnboardingFlow: React.FC<OnboardingFlowProps> = ({
 
   const apiRef = useRef<API | null>(null);
   const analyticsRef = useRef<AnalyticsManager | null>(null);
-  const userIdRef = useRef<string>(generateUserId());
+  const userIdRef = useRef<string | null>(null);
   const sessionIdRef = useRef<string>(generateSessionId());
+  const flowIdRef = useRef<string | null>(null);
 
   useEffect(() => {
-    // Notify parent of the generated user ID
-    if (onUserIdGenerated) {
-      onUserIdGenerated(userIdRef.current);
-    }
+    const initialize = async () => {
+      // Get or create persistent user ID
+      const userId = await getPersistentUserId();
+      userIdRef.current = userId;
+
+      // Notify parent of the user ID
+      if (onUserIdGenerated) {
+        onUserIdGenerated(userId);
+      }
 
-    initializeFlow();
+      // Initialize the flow
+      await initializeFlow();
+    };
+
+    initialize();
 
     return () => {
       // Cleanup: flush remaining analytics
@@ -79,11 +109,28 @@ export const OnboardingFlow: React.FC<OnboardingFlowProps> = ({
     };
   }, []);
 
+  // Track screen views whenever user navigates to a different screen
+  useEffect(() => {
+    if (screens.length > 0 && analyticsRef.current && currentIndex > 0) {
+      const currentScreen = screens[currentIndex];
+      analyticsRef.current.track('screen_viewed', {
+        flow_id: flowIdRef.current,
+        screen_id: currentScreen.id,
+        screen_index: currentIndex,
+      });
+    }
+  }, [currentIndex, screens]);
+
   const initializeFlow = async () => {
     try {
       setLoading(true);
       setError(null);
 
+      // Ensure user ID is set
+      if (!userIdRef.current) {
+        throw new Error('User ID not initialized');
+      }
+
       // Initialize API client with detected API key
       const api = new API(activeApiKey, baseUrl);
       apiRef.current = api;
@@ -96,13 +143,38 @@ export const OnboardingFlow: React.FC<OnboardingFlowProps> = ({
       );
       analyticsRef.current = analytics;
 
-      // Track onboarding start
-      analytics.track('onboarding_started');
-
       // Fetch configuration
       const configResponse = await api.getConfig();
+
+      // Store flow_id for analytics
+      flowIdRef.current = configResponse.config_id;
+
+      // Handle A/B test experiment assignment
+      let screensToUse = configResponse.config.screens;
+
+      if (configResponse.experiments && configResponse.experiments.length > 0) {
+        // Assign user to the first active experiment
+        const experiment = configResponse.experiments[0];
+        try {
+          const assignment = await api.assignVariant(
+            experiment.id,
+            userIdRef.current!
+          );
+
+          // Set experiment context so all events get tagged
+          analytics.setExperimentContext(experiment.id, assignment.variant_id);
+
+          // Use variant screens if available
+          if (assignment.variant_config?.screens?.length > 0) {
+            screensToUse = assignment.variant_config.screens;
+          }
+        } catch (err) {
+          console.warn('Failed to assign experiment variant, using default flow:', err);
+        }
+      }
+
       // Backward compatibility: normalize legacy 'custom_screen' (with elements) to 'noboard_screen'
-      const normalizedScreens = configResponse.config.screens
+      const normalizedScreens = screensToUse
         .map(s => ({
           ...s,
           type: (s.type === ('custom_screen' as any) && s.elements) ? 'noboard_screen' as ScreenConfig['type'] : s.type,
@@ -111,6 +183,12 @@ export const OnboardingFlow: React.FC<OnboardingFlowProps> = ({
         .filter(s => !s.hidden);
       setScreens(normalizedScreens);
 
+      // Track onboarding start with first screen
+      analytics.track('onboarding_started', {
+        flow_id: flowIdRef.current,
+        screen_id: normalizedScreens[0]?.id,
+      });
+
       setLoading(false);
     } catch (err) {
       console.error('Failed to initialize onboarding flow:', err);
@@ -162,7 +240,10 @@ export const OnboardingFlow: React.FC<OnboardingFlowProps> = ({
 
     // Track completion
     if (analyticsRef.current) {
-      analyticsRef.current.track('onboarding_completed');
+      analyticsRef.current.track('onboarding_completed', {
+        flow_id: flowIdRef.current,
+        screen_id: screens[currentIndex]?.id,
+      });
       await analyticsRef.current.flush();
     }
 
@@ -173,6 +254,8 @@ export const OnboardingFlow: React.FC<OnboardingFlowProps> = ({
   const handleSkipAll = async () => {
     if (analyticsRef.current) {
       analyticsRef.current.track('onboarding_abandoned', {
+        flow_id: flowIdRef.current,
+        screen_id: screens[currentIndex]?.id,
         current_screen_index: currentIndex,
       });
       await analyticsRef.current.flush();
@@ -212,8 +295,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 +337,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/analytics.ts

@@ -10,6 +10,8 @@ export class AnalyticsManager {
   private userId: string;
   private sessionId: string;
   private flushTimer: NodeJS.Timeout | null = null;
+  private experimentId: string | null = null;
+  private variantId: string | null = null;
 
   constructor(api: API, userId: string, sessionId: string) {
     this.api = api;
@@ -20,16 +22,36 @@ export class AnalyticsManager {
     this.startFlushTimer();
   }
 
+  /**
+   * Set experiment context — all subsequent events will be tagged
+   */
+  setExperimentContext(experimentId: string, variantId: string): void {
+    this.experimentId = experimentId;
+    this.variantId = variantId;
+  }
+
   /**
    * Track an analytics event
    */
   track(eventName: string, properties?: Record<string, any>): void {
+    const mergedProperties: Record<string, any> = {
+      ...(properties || {}),
+    };
+
+    // Auto-inject experiment context if set
+    if (this.experimentId) {
+      mergedProperties.experiment_id = this.experimentId;
+    }
+    if (this.variantId) {
+      mergedProperties.variant_id = this.variantId;
+    }
+
     const event: AnalyticsEvent = {
       event: eventName,
       user_id: this.userId,
       session_id: this.sessionId,
       timestamp: Date.now(),
-      properties: properties || {},
+      properties: mergedProperties,
     };
 
     this.events.push(event);

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 }} />;

package/src/types.ts

@@ -189,6 +189,7 @@ export interface AnalyticsEvent {
 export interface GetConfigResponse {
   config: OnboardingConfig;
   version: string;
+  config_id: string | null;
   experiments: Experiment[];
   organization_id: string;
 }