noboarding 0.1.0-beta → 1.0.2-beta

package/AI_CUSTOM_SCREEN_GUIDE.md

@@ -237,7 +237,11 @@ export const SummaryScreen: React.FC<CustomScreenProps> = ({
 
 ```typescript
 <OnboardingFlow
-  apiKey="sk_live_..."
+  // Dual API keys for automatic environment detection
+  testKey="nb_test_..."
+  productionKey="nb_live_..."
+  // SDK auto-detects __DEV__ and uses appropriate key
+
   customComponents={{
     NameScreen,
     AgeScreen,
@@ -543,7 +547,12 @@ import { AgeScreen } from './screens/AgeScreen';
 import { PreferencesScreen } from './screens/PreferencesScreen';
 
 <OnboardingFlow
-  apiKey="sk_live_your_api_key"
+  // Use dual API keys for automatic environment detection
+  testKey="nb_test_your_test_key"
+  productionKey="nb_live_your_production_key"
+  // The SDK automatically uses testKey when __DEV__ is true
+  // and productionKey in production builds
+
   customComponents={{
     NameScreen: NameScreen,           // Component name MUST match exactly
     AgeScreen: AgeScreen,             // Case-sensitive!
@@ -593,10 +602,14 @@ npm start
 
 ### Step 5: Deploy & Publish
 
-1. Build production app
-2. Submit to App Store / Google Play
-3. **WAIT for approval**
-4. **After app is live:** Publish flow in dashboard
+1. Test locally with Test API Key (development mode)
+2. In dashboard: **Publish → Publish for Testing**
+3. Build production app
+4. Submit to App Store / Google Play
+5. **WAIT for approval**
+6. **After app is live:** In dashboard, **Publish → Publish to Production**
+
+**Note:** Test and Production environments are separate. You can safely test changes using the Test API Key before rolling them out to production users with the Production API Key.
 
 ---
 
@@ -831,7 +844,10 @@ const styles = StyleSheet.create({
 
 ```typescript
 <OnboardingFlow
-  apiKey="sk_live_..."
+  // Dual API keys - SDK auto-detects environment
+  testKey="nb_test_..."
+  productionKey="nb_live_..."
+
   customComponents={{
     Step1EmailScreen,
     Step2GoalsScreen,

package/README.md

@@ -513,6 +513,8 @@ import { API, AnalyticsManager } from 'noboarding';
 
 ## Development
 
+### Building the SDK
+
 The TestApp imports the SDK from the compiled `lib/` directory (`"main": "lib/index.js"`), not from `src/` directly. After making any changes to files in `sdk/src/`, you must rebuild before testing:
 
 ```bash
@@ -522,6 +524,63 @@ npm run build
 
 Then restart the TestApp. If you skip this step, the TestApp will still be running the old compiled code and your changes won't take effect.
 
+### Dashboard Preview Integration
+
+The dashboard uses **local copies** of SDK source files for the preview feature. When you modify SDK source files, they need to be synced to the dashboard.
+
+**Why copies?** Next.js/Turbopack doesn't support importing from external directories with the react-native-web setup, so the dashboard maintains local copies in `dashboard/lib/sdk/`.
+
+#### Files That Need Syncing
+
+When you modify these SDK files:
+- `src/types.ts` → Auto-synced to `dashboard/lib/sdk/types.ts`
+- `src/variableUtils.ts` → Auto-synced to `dashboard/lib/sdk/variableUtils.ts`
+- `src/components/ElementRenderer.tsx` → ⚠️ **NOT auto-synced** (dashboard has web-specific modifications)
+
+**ElementRenderer Special Case:**
+
+The dashboard copy of `ElementRenderer.tsx` has web-specific modifications for icon support:
+- Uses `react-icons` instead of `@expo/vector-icons`
+- Renders real icons in preview (Feather, Material, Ionicons, FontAwesome)
+- Gradients fall back to solid colors
+
+**If you modify ElementRenderer.tsx significantly:**
+1. Run `npm run sync:full` from project root to copy it
+2. Manually re-add web icon imports and logic (check git diff to see what changed)
+
+#### Syncing Methods
+
+**Manual sync (run when needed):**
+```bash
+# From project root
+npm run sync
+```
+
+**Auto-sync during development:**
+```bash
+# From project root
+npm run sync:watch
+```
+
+This watches SDK files and automatically copies changes to the dashboard when you save.
+
+**Full development mode:**
+```bash
+# From project root - starts dashboard + auto-sync
+npm run dev
+```
+
+This command:
+1. Syncs SDK files to dashboard
+2. Starts file watcher for auto-sync
+3. Starts dashboard dev server
+
+#### Important Notes
+
+- ⚠️ **Dashboard preview uses copies** - Changes to SDK files won't appear in dashboard preview until synced
+- ✅ **Mobile app uses npm package** - TestApp uses the built SDK from `lib/`, requires `npm run build`
+- 🔄 **Keep in sync** - Run `npm run sync:watch` while developing SDK to keep dashboard preview accurate
+
 ## Requirements
 
 - React Native >= 0.60.0

package/lib/OnboardingFlow.js

@@ -110,7 +110,10 @@ const OnboardingFlow = ({ apiKey, testKey, productionKey, onComplete, onSkip, ba
             // Fetch configuration
             const configResponse = await api.getConfig();
             // Backward compatibility: normalize legacy 'custom_screen' (with elements) to 'noboard_screen'
-            const normalizedScreens = configResponse.config.screens.map(s => (Object.assign(Object.assign({}, s), { type: (s.type === 'custom_screen' && s.elements) ? 'noboard_screen' : s.type })));
+            const normalizedScreens = configResponse.config.screens
+                .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);
             setLoading(false);
         }
@@ -191,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') {
@@ -213,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);
@@ -204,11 +185,18 @@ const RenderNode = ({ element, toggledIds, groupSelections, onAction, variables
     const wrapWithAction = (content) => {
         if (!hasAction)
             return content;
-        return (<react_native_1.TouchableOpacity key={element.id} activeOpacity={0.7} onPress={() => onAction(element)}>
+        // Extract width/alignment styles that should apply to TouchableOpacity wrapper
+        // This ensures buttons with width: "100%" don't shrink to content
+        const wrapperStyle = {};
+        if (style.width)
+            wrapperStyle.width = style.width;
+        if (style.alignSelf)
+            wrapperStyle.alignSelf = style.alignSelf;
+        return (<react_native_1.TouchableOpacity key={element.id} activeOpacity={0.7} onPress={() => onAction(element)} style={wrapperStyle}>
         {content}
       </react_native_1.TouchableOpacity>);
     };
-    const childProps = { toggledIds, groupSelections, onAction, variables };
+    const childProps = { toggledIds, groupSelections, onAction, variables, onSetVariable };
     switch (element.type) {
         // ─── Containers ───
         case 'vstack': {
@@ -339,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 = {};
@@ -347,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':
@@ -462,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;
     }
@@ -480,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);
@@ -510,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

@@ -6,6 +6,7 @@ export interface ScreenConfig {
     props: Record<string, any>;
     elements?: ElementNode[];
     custom_component_name?: string;
+    hidden?: boolean;
 }
 export type ElementType = 'vstack' | 'hstack' | 'zstack' | 'scrollview' | 'text' | 'image' | 'video' | 'lottie' | 'icon' | 'input' | 'spacer' | 'divider';
 export interface ElementNode {

package/package.json

@@ -1,13 +1,19 @@
 {
   "name": "noboarding",
-  "version": "0.1.0-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": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "default": "./lib/index.js"
+    },
+    "./src/*": "./src/*"
+  },
   "scripts": {
     "build": "tsc",
-    "watch": "tsc --watch",
-    "prepare": "npm run build"
+    "watch": "tsc --watch"
   },
   "keywords": [
     "react-native",
@@ -20,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

@@ -102,10 +102,13 @@ export const OnboardingFlow: React.FC<OnboardingFlowProps> = ({
       // Fetch configuration
       const configResponse = await api.getConfig();
       // Backward compatibility: normalize legacy 'custom_screen' (with elements) to 'noboard_screen'
-      const normalizedScreens = configResponse.config.screens.map(s => ({
-        ...s,
-        type: (s.type === ('custom_screen' as any) && s.elements) ? 'noboard_screen' as ScreenConfig['type'] : s.type,
-      }));
+      const normalizedScreens = configResponse.config.screens
+        .map(s => ({
+          ...s,
+          type: (s.type === ('custom_screen' as any) && s.elements) ? 'noboard_screen' as ScreenConfig['type'] : s.type,
+        }))
+        // Filter out hidden screens (dashboard show/hide feature)
+        .filter(s => !s.hidden);
       setScreens(normalizedScreens);
 
       setLoading(false);
@@ -209,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') {
@@ -236,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);
@@ -216,18 +200,26 @@ const RenderNode: React.FC<RenderNodeProps> = ({ element, toggledIds, groupSelec
   const hasAction = !!element.action || (element.actions && element.actions.length > 0);
   const wrapWithAction = (content: React.ReactElement): React.ReactElement => {
     if (!hasAction) return content;
+
+    // Extract width/alignment styles that should apply to TouchableOpacity wrapper
+    // This ensures buttons with width: "100%" don't shrink to content
+    const wrapperStyle: any = {};
+    if (style.width) wrapperStyle.width = style.width;
+    if (style.alignSelf) wrapperStyle.alignSelf = style.alignSelf;
+
     return (
       <TouchableOpacity
         key={element.id}
         activeOpacity={0.7}
         onPress={() => onAction(element)}
+        style={wrapperStyle}
       >
         {content}
       </TouchableOpacity>
     );
   };
 
-  const childProps = { toggledIds, groupSelections, onAction, variables };
+  const childProps = { toggledIds, groupSelections, onAction, variables, onSetVariable };
 
   switch (element.type) {
     // ─── Containers ───
@@ -438,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 = {};
@@ -447,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]}
@@ -454,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

@@ -12,6 +12,8 @@ export interface ScreenConfig {
   elements?: ElementNode[];
   // For custom_screen type — name of the developer-registered component
   custom_component_name?: string;
+  // Dashboard visibility control — if true, screen is hidden from onboarding flow
+  hidden?: boolean;
 }
 
 // ─── Element Tree Types (matches dashboard primitives) ───