noboarding 1.0.3-beta → 1.0.7

package/lib/components/ElementRenderer.js

@@ -48,6 +48,7 @@ exports.ElementRenderer = void 0;
 const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const variableUtils_1 = require("../variableUtils");
+const animationUtils_1 = require("../animationUtils");
 const expo_linear_gradient_1 = require("expo-linear-gradient");
 const vector_icons_1 = require("@expo/vector-icons");
 const IconSets = {
@@ -59,11 +60,26 @@ const IconSets = {
     fontawesome: vector_icons_1.FontAwesome,
     'sf-symbols': vector_icons_1.Ionicons,
 };
-const ElementRenderer = ({ elements, analytics, screenId, onNavigate, onDismiss, variables = {}, onSetVariable, }) => {
+const ElementRenderer = ({ elements, analytics, screenId, onNavigate, onDismiss, variables = {}, onSetVariable, assets = [], }) => {
     // Track toggled element IDs for toggle actions
     const [toggledIds, setToggledIds] = (0, react_1.useState)(new Set());
     // Track selection groups: group name → selected element ID
     const [groupSelections, setGroupSelections] = (0, react_1.useState)({});
+    // Track text input values locally (uncontrolled)
+    const [inputValues, setInputValues] = (0, react_1.useState)({});
+    // Helper function to resolve asset: URLs to actual data URLs
+    const resolveAssetUrl = (url) => {
+        if (!url || !url.startsWith('asset:')) {
+            return url; // Return as-is if not an asset reference
+        }
+        const assetName = url.replace('asset:', '');
+        const asset = assets.find(a => a.name === assetName);
+        if (asset) {
+            return asset.data; // Return the base64 data URL
+        }
+        console.warn(`Asset not found: ${assetName}`);
+        return url; // Fallback to original URL
+    };
     const executeAction = (0, react_1.useCallback)((action, element) => {
         // Track the action
         analytics === null || analytics === void 0 ? void 0 : analytics.track('element_action', {
@@ -77,6 +93,12 @@ const ElementRenderer = ({ elements, analytics, screenId, onNavigate, onDismiss,
                 if (action.variable !== undefined && onSetVariable) {
                     onSetVariable(action.variable, action.value);
                 }
+                // Also save all current text input values when any action is triggered
+                if (onSetVariable) {
+                    Object.entries(inputValues).forEach(([key, value]) => {
+                        onSetVariable(key, value);
+                    });
+                }
                 break;
             case 'toggle': {
                 const group = action.group;
@@ -113,6 +135,12 @@ const ElementRenderer = ({ elements, analytics, screenId, onNavigate, onDismiss,
                 break;
             }
             case 'navigate':
+                // Save all text input values before navigating
+                if (onSetVariable) {
+                    Object.entries(inputValues).forEach(([key, value]) => {
+                        onSetVariable(key, value);
+                    });
+                }
                 if (onNavigate && action.destination) {
                     onNavigate(action.destination);
                 }
@@ -129,7 +157,7 @@ const ElementRenderer = ({ elements, analytics, screenId, onNavigate, onDismiss,
                 // Generic tap — analytics already tracked above
                 break;
         }
-    }, [groupSelections, onNavigate, onDismiss, analytics, screenId, onSetVariable]);
+    }, [groupSelections, onNavigate, onDismiss, analytics, screenId, onSetVariable, inputValues]);
     const handleAction = (0, react_1.useCallback)((element) => {
         // Execute single action (backward compatible)
         if (element.action) {
@@ -146,18 +174,35 @@ const ElementRenderer = ({ elements, analytics, screenId, onNavigate, onDismiss,
         return null;
     }
     return (<>
-      {elements.map((element) => (<RenderNode key={element.id} element={element} toggledIds={toggledIds} groupSelections={groupSelections} onAction={handleAction} variables={variables}/>))}
+      {elements.map((element) => (<RenderNode key={element.id} element={element} toggledIds={toggledIds} groupSelections={groupSelections} onAction={handleAction} variables={variables} inputValues={inputValues} setInputValues={setInputValues} resolveAssetUrl={resolveAssetUrl}/>))}
     </>);
 };
 exports.ElementRenderer = ElementRenderer;
-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;
+const RenderNode = ({ element, toggledIds, groupSelections, onAction, variables, onSetVariable, inputValues, setInputValues, staggerDelay = 0, resolveAssetUrl }) => {
+    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, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20;
     // 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);
         if (!shouldShow)
             return null;
     }
+    // ─── Animation State ───
+    const entranceValues = (0, react_1.useRef)((0, animationUtils_1.createEntranceAnimationValues)()).current;
+    const interactiveValue = (0, react_1.useRef)(new react_native_1.Animated.Value(1)).current;
+    const [hasAnimated, setHasAnimated] = (0, react_1.useState)(false);
+    // Start entrance animation on mount
+    (0, react_1.useEffect)(() => {
+        if (element.entrance && element.entrance.type !== 'none' && !hasAnimated) {
+            (0, animationUtils_1.startEntranceAnimation)(element.entrance, entranceValues, staggerDelay);
+            setHasAnimated(true);
+        }
+    }, [element.entrance, hasAnimated, staggerDelay]);
+    // Start auto-triggered interactive animations
+    (0, react_1.useEffect)(() => {
+        if (element.interactive && element.interactive.trigger === 'load' && element.interactive.type !== 'none') {
+            (0, animationUtils_1.startInteractiveAnimation)(element.interactive, interactiveValue);
+        }
+    }, [element.interactive]);
     const style = convertStyle(element.style || {});
     const isToggled = toggledIds.has(element.id);
     // Apply toggle visual state
@@ -192,32 +237,85 @@ const RenderNode = ({ element, toggledIds, groupSelections, onAction, variables,
             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}>
+        const handlePress = () => {
+            // Trigger interactive animation if configured
+            if (element.interactive && element.interactive.trigger === 'tap' && element.interactive.type !== 'none') {
+                (0, animationUtils_1.startInteractiveAnimation)(element.interactive, interactiveValue);
+            }
+            onAction(element);
+        };
+        return (<react_native_1.TouchableOpacity key={element.id} activeOpacity={0.7} onPress={handlePress} style={wrapperStyle}>
         {content}
       </react_native_1.TouchableOpacity>);
     };
-    const childProps = { toggledIds, groupSelections, onAction, variables, onSetVariable };
+    // Wrapper for entrance animations
+    const wrapWithEntranceAnimation = (content) => {
+        if (!element.entrance || element.entrance.type === 'none') {
+            return content;
+        }
+        // Build animated style based on entrance type
+        const animatedStyle = {
+            opacity: entranceValues.opacity,
+        };
+        // Apply scale for scale animations
+        if (element.entrance.type === 'scaleIn') {
+            animatedStyle.transform = [{ scale: entranceValues.scale }];
+        }
+        // Apply translate for slide animations
+        else if (element.entrance.type === 'slideUp' || element.entrance.type === 'slideDown') {
+            animatedStyle.transform = [{ translateY: entranceValues.translateY }];
+        }
+        else if (element.entrance.type === 'slideLeft' || element.entrance.type === 'slideRight') {
+            animatedStyle.transform = [{ translateX: entranceValues.translateX }];
+        }
+        return <react_native_1.Animated.View style={animatedStyle}>{content}</react_native_1.Animated.View>;
+    };
+    // Wrapper for interactive animations
+    const wrapWithInteractiveAnimation = (content) => {
+        if (!element.interactive || element.interactive.type === 'none') {
+            return content;
+        }
+        const animatedStyle = {};
+        switch (element.interactive.type) {
+            case 'scale':
+            case 'pulse':
+                animatedStyle.transform = [{ scale: interactiveValue }];
+                break;
+            case 'shake':
+                animatedStyle.transform = [{ translateX: interactiveValue }];
+                break;
+            case 'bounce':
+                animatedStyle.transform = [{ translateY: interactiveValue }];
+                break;
+        }
+        return <react_native_1.Animated.View style={animatedStyle}>{content}</react_native_1.Animated.View>;
+    };
+    const childProps = { toggledIds, groupSelections, onAction, variables, onSetVariable, inputValues, setInputValues, resolveAssetUrl };
     switch (element.type) {
         // ─── Containers ───
         case 'vstack': {
+            const stagger = ((_f = element.entrance) === null || _f === void 0 ? void 0 : _f.stagger) || 0;
             const vstackContent = (<react_native_1.View style={[style, { flexDirection: 'column' }]}>
-          {(_f = element.children) === null || _f === void 0 ? void 0 : _f.map((child) => (<RenderNode key={child.id} element={child} {...childProps}/>))}
+          {(_g = element.children) === null || _g === void 0 ? void 0 : _g.map((child, index) => (<RenderNode key={child.id} element={child} {...childProps} staggerDelay={stagger > 0 ? index * stagger : 0}/>))}
         </react_native_1.View>);
-            return wrapWithAction(((_g = element.style) === null || _g === void 0 ? void 0 : _g.backgroundGradient)
+            const wrapped = wrapWithAction(((_h = element.style) === null || _h === void 0 ? void 0 : _h.backgroundGradient)
                 ? wrapWithGradient(vstackContent, element.style, Object.assign(Object.assign({}, style), { flexDirection: 'column' }))
                 : vstackContent);
+            return wrapWithInteractiveAnimation(wrapWithEntranceAnimation(wrapped));
         }
         case 'hstack': {
+            const stagger = ((_j = element.entrance) === null || _j === void 0 ? void 0 : _j.stagger) || 0;
             const hstackContent = (<react_native_1.View style={[style, { flexDirection: 'row' }]}>
-          {(_h = element.children) === null || _h === void 0 ? void 0 : _h.map((child) => (<RenderNode key={child.id} element={child} {...childProps}/>))}
+          {(_k = element.children) === null || _k === void 0 ? void 0 : _k.map((child, index) => (<RenderNode key={child.id} element={child} {...childProps} staggerDelay={stagger > 0 ? index * stagger : 0}/>))}
         </react_native_1.View>);
-            return wrapWithAction(((_j = element.style) === null || _j === void 0 ? void 0 : _j.backgroundGradient)
+            const wrapped = wrapWithAction(((_l = element.style) === null || _l === void 0 ? void 0 : _l.backgroundGradient)
                 ? wrapWithGradient(hstackContent, element.style, Object.assign(Object.assign({}, style), { flexDirection: 'row' }))
                 : hstackContent);
+            return wrapWithInteractiveAnimation(wrapWithEntranceAnimation(wrapped));
         }
         case 'zstack': {
             const zstackContent = (<react_native_1.View style={style}>
-          {(_k = element.children) === null || _k === void 0 ? void 0 : _k.map((child, index) => {
+          {(_m = element.children) === null || _m === void 0 ? void 0 : _m.map((child, index) => {
                     var _a;
                     const childStyle = convertStyle(child.style || {});
                     if (index > 0 && !((_a = child.position) === null || _a === void 0 ? void 0 : _a.type)) {
@@ -228,34 +326,85 @@ const RenderNode = ({ element, toggledIds, groupSelections, onAction, variables,
                     return <RenderNode key={child.id} element={child} {...childProps}/>;
                 })}
         </react_native_1.View>);
-            return wrapWithAction(((_l = element.style) === null || _l === void 0 ? void 0 : _l.backgroundGradient)
+            return wrapWithAction(((_o = element.style) === null || _o === void 0 ? void 0 : _o.backgroundGradient)
                 ? wrapWithGradient(zstackContent, element.style, style)
                 : zstackContent);
         }
         case 'scrollview': {
-            const isHorizontal = ((_m = element.props) === null || _m === void 0 ? void 0 : _m.direction) === 'horizontal';
+            const isHorizontal = ((_p = element.props) === null || _p === void 0 ? void 0 : _p.direction) === 'horizontal';
             return (<react_native_1.ScrollView style={style} horizontal={isHorizontal} showsVerticalScrollIndicator={false} showsHorizontalScrollIndicator={false}>
-          {isHorizontal ? (<react_native_1.View style={{ flexDirection: 'row', gap: (_o = element.style) === null || _o === void 0 ? void 0 : _o.gap }}>
-              {(_p = element.children) === null || _p === void 0 ? void 0 : _p.map((child) => (<RenderNode key={child.id} element={child} {...childProps}/>))}
-            </react_native_1.View>) : ((_q = element.children) === null || _q === void 0 ? void 0 : _q.map((child) => (<RenderNode key={child.id} element={child} {...childProps}/>)))}
+          {isHorizontal ? (<react_native_1.View style={{ flexDirection: 'row', gap: (_q = element.style) === null || _q === void 0 ? void 0 : _q.gap }}>
+              {(_r = element.children) === null || _r === void 0 ? void 0 : _r.map((child) => (<RenderNode key={child.id} element={child} {...childProps}/>))}
+            </react_native_1.View>) : ((_s = element.children) === null || _s === void 0 ? void 0 : _s.map((child) => (<RenderNode key={child.id} element={child} {...childProps}/>)))}
         </react_native_1.ScrollView>);
         }
         // ─── Content Elements ───
         case 'text': {
-            const resolvedText = (0, variableUtils_1.resolveTemplate)(((_r = element.props) === null || _r === void 0 ? void 0 : _r.text) || '', variables);
-            return (<react_native_1.Text style={style}>
-          {resolvedText}
+            const resolvedText = (0, variableUtils_1.resolveTemplate)(((_t = element.props) === null || _t === void 0 ? void 0 : _t.text) || '', variables);
+            // Typewriter animation support
+            const [displayedText, setDisplayedText] = (0, react_1.useState)('');
+            const [showCursor, setShowCursor] = (0, react_1.useState)(false);
+            const typewriterInterval = (0, react_1.useRef)(null);
+            (0, react_1.useEffect)(() => {
+                const textAnim = element.textAnimation;
+                if (textAnim && textAnim.type === 'typewriter') {
+                    const speed = textAnim.speed || 20; // chars per second
+                    const delay = textAnim.delay || 0;
+                    const haptic = textAnim.haptic;
+                    let currentIndex = 0;
+                    // Show cursor if enabled
+                    if (textAnim.cursor) {
+                        setShowCursor(true);
+                    }
+                    // Start typewriter animation after delay
+                    const timeoutId = setTimeout(() => {
+                        typewriterInterval.current = setInterval(() => {
+                            if (currentIndex >= resolvedText.length) {
+                                if (typewriterInterval.current) {
+                                    clearInterval(typewriterInterval.current);
+                                }
+                                // Hide cursor when done
+                                if (textAnim.cursor) {
+                                    setShowCursor(false);
+                                }
+                                return;
+                            }
+                            setDisplayedText(resolvedText.substring(0, currentIndex + 1));
+                            // Trigger haptic if enabled
+                            if (haptic && haptic.enabled && (0, animationUtils_1.shouldTriggerHaptic)(currentIndex, haptic.frequency)) {
+                                (0, animationUtils_1.triggerHaptic)(haptic.type);
+                            }
+                            currentIndex++;
+                        }, 1000 / speed);
+                    }, delay);
+                    return () => {
+                        clearTimeout(timeoutId);
+                        if (typewriterInterval.current) {
+                            clearInterval(typewriterInterval.current);
+                        }
+                    };
+                }
+                else {
+                    // No typewriter - show full text immediately
+                    setDisplayedText(resolvedText);
+                }
+            }, [resolvedText, element.textAnimation]);
+            const textContent = ((_u = element.textAnimation) === null || _u === void 0 ? void 0 : _u.type) === 'typewriter' ? displayedText : resolvedText;
+            const textElement = (<react_native_1.Text style={style}>
+          {textContent}
+          {showCursor && (<react_native_1.Text style={{ opacity: 0.5 }}>|</react_native_1.Text>)}
         </react_native_1.Text>);
+            return wrapWithInteractiveAnimation(wrapWithEntranceAnimation(wrapWithAction(textElement)));
         }
         case 'icon': {
-            if ((_s = element.props) === null || _s === void 0 ? void 0 : _s.emoji) {
+            if ((_v = element.props) === null || _v === void 0 ? void 0 : _v.emoji) {
                 return (<react_native_1.Text style={[style, { textAlign: 'center' }]}>
             {element.props.emoji}
           </react_native_1.Text>);
             }
             // Try to render a real vector icon
-            const library = (((_t = element.props) === null || _t === void 0 ? void 0 : _t.library) || 'material').toLowerCase();
-            const iconName = (_u = element.props) === null || _u === void 0 ? void 0 : _u.name;
+            const library = (((_w = element.props) === null || _w === void 0 ? void 0 : _w.library) || 'material').toLowerCase();
+            const iconName = (_x = element.props) === null || _x === void 0 ? void 0 : _x.name;
             const IconComponent = IconSets[library];
             if (IconComponent && iconName) {
                 const iconSize = style.fontSize || 24;
@@ -275,13 +424,14 @@ const RenderNode = ({ element, toggledIds, groupSelections, onAction, variables,
                     },
                 ]}>
           <react_native_1.Text style={{ fontSize: 10, color: '#666' }}>
-            {((_v = element.props) === null || _v === void 0 ? void 0 : _v.name) || '●'}
+            {((_y = element.props) === null || _y === void 0 ? void 0 : _y.name) || '●'}
           </react_native_1.Text>
         </react_native_1.View>);
         }
         case 'image':
-            if ((_w = element.props) === null || _w === void 0 ? void 0 : _w.url) {
-                return (<react_native_1.Image source={{ uri: element.props.url }} style={[style, { resizeMode: 'cover' }]}/>);
+            if ((_z = element.props) === null || _z === void 0 ? void 0 : _z.url) {
+                const resolvedUrl = resolveAssetUrl(element.props.url);
+                return (<react_native_1.Image source={{ uri: resolvedUrl }} style={[style, { resizeMode: 'cover' }]}/>);
             }
             // Placeholder for images without URL
             return (<react_native_1.View style={[
@@ -293,12 +443,25 @@ const RenderNode = ({ element, toggledIds, groupSelections, onAction, variables,
                     },
                 ]}>
           <react_native_1.Text style={{ fontSize: 48 }}>🖼️</react_native_1.Text>
-          {((_x = element.props) === null || _x === void 0 ? void 0 : _x.imageDescription) && (<react_native_1.Text style={{ fontSize: 11, color: '#666', textAlign: 'center', padding: 8 }}>
+          {((_0 = element.props) === null || _0 === void 0 ? void 0 : _0.imageDescription) && (<react_native_1.Text style={{ fontSize: 11, color: '#666', textAlign: 'center', padding: 8 }}>
               {element.props.imageDescription}
             </react_native_1.Text>)}
         </react_native_1.View>);
-        case 'video':
-            // Video placeholder — actual implementation would use expo-av or react-native-video
+        case 'video': {
+            const videoUrl = ((_1 = element.props) === null || _1 === void 0 ? void 0 : _1.url) ? resolveAssetUrl(element.props.url) : null;
+            let VideoComponent = null;
+            try {
+                const expoAv = require('expo-av');
+                VideoComponent = expoAv.Video;
+            }
+            catch (_21) { }
+            if (VideoComponent && videoUrl) {
+                const resizeMode = ((_2 = element.props) === null || _2 === void 0 ? void 0 : _2.resizeMode) || 'contain';
+                return (<react_native_1.View style={[style, { backgroundColor: style.backgroundColor || '#1a1a1a', overflow: 'hidden' }]}>
+            <VideoComponent source={{ uri: videoUrl }} style={{ width: '100%', height: '100%' }} resizeMode={resizeMode} shouldPlay={((_3 = element.props) === null || _3 === void 0 ? void 0 : _3.autoPlay) !== false} isLooping={((_4 = element.props) === null || _4 === void 0 ? void 0 : _4.loop) !== false} isMuted={((_5 = element.props) === null || _5 === void 0 ? void 0 : _5.muted) !== false} useNativeControls={false}/>
+          </react_native_1.View>);
+            }
+            // Fallback when expo-av is unavailable or no URL
             return (<react_native_1.View style={[
                     style,
                     {
@@ -308,12 +471,39 @@ const RenderNode = ({ element, toggledIds, groupSelections, onAction, variables,
                     },
                 ]}>
           <react_native_1.Text style={{ fontSize: 48 }}>🎬</react_native_1.Text>
-          {((_y = element.props) === null || _y === void 0 ? void 0 : _y.videoDescription) && (<react_native_1.Text style={{ fontSize: 11, color: '#aaa', textAlign: 'center', padding: 8 }}>
+          {((_6 = element.props) === null || _6 === void 0 ? void 0 : _6.videoDescription) && (<react_native_1.Text style={{ fontSize: 11, color: '#aaa', textAlign: 'center', padding: 8 }}>
               {element.props.videoDescription}
             </react_native_1.Text>)}
         </react_native_1.View>);
-        case 'lottie':
-            // Lottie placeholder — actual implementation would use lottie-react-native
+        }
+        case 'lottie': {
+            const lottieUrl = ((_7 = element.props) === null || _7 === void 0 ? void 0 : _7.url) ? resolveAssetUrl(element.props.url) : null;
+            let LottieView = null;
+            try {
+                LottieView = require('lottie-react-native').default;
+            }
+            catch (_22) { }
+            if (LottieView && lottieUrl) {
+                // Decode base64 data URLs to get the Lottie JSON object
+                let lottieSource;
+                if (lottieUrl.startsWith('data:application/json;base64,')) {
+                    try {
+                        const base64Data = lottieUrl.replace('data:application/json;base64,', '');
+                        const jsonString = atob(base64Data);
+                        lottieSource = JSON.parse(jsonString);
+                    }
+                    catch (_23) {
+                        lottieSource = { uri: lottieUrl };
+                    }
+                }
+                else {
+                    lottieSource = { uri: lottieUrl };
+                }
+                return (<react_native_1.View style={[style, { backgroundColor: style.backgroundColor || '#f8f8ff', overflow: 'hidden' }]}>
+            <LottieView source={lottieSource} style={{ width: '100%', height: '100%' }} autoPlay={((_8 = element.props) === null || _8 === void 0 ? void 0 : _8.autoPlay) !== false} loop={((_9 = element.props) === null || _9 === void 0 ? void 0 : _9.loop) !== false} speed={((_10 = element.props) === null || _10 === void 0 ? void 0 : _10.speed) || 1}/>
+          </react_native_1.View>);
+            }
+            // Fallback when lottie-react-native is unavailable or no URL
             return (<react_native_1.View style={[
                     style,
                     {
@@ -323,25 +513,26 @@ const RenderNode = ({ element, toggledIds, groupSelections, onAction, variables,
                     },
                 ]}>
           <react_native_1.Text style={{ fontSize: 48 }}>✨</react_native_1.Text>
-          {((_z = element.props) === null || _z === void 0 ? void 0 : _z.animationDescription) && (<react_native_1.Text style={{ fontSize: 11, color: '#666', textAlign: 'center', padding: 8 }}>
+          {((_11 = element.props) === null || _11 === void 0 ? void 0 : _11.animationDescription) && (<react_native_1.Text style={{ fontSize: 11, color: '#666', textAlign: 'center', padding: 8 }}>
               {element.props.animationDescription}
             </react_native_1.Text>)}
         </react_native_1.View>);
+        }
         case 'input': {
             // Only apply default border if borderWidth is not explicitly defined (including 0)
             const inputStyle = style;
             const defaultInputStyle = {};
-            if (((_0 = element.style) === null || _0 === void 0 ? void 0 : _0.borderWidth) === undefined && ((_1 = element.style) === null || _1 === void 0 ? void 0 : _1.borderColor) === undefined) {
+            if (((_12 = element.style) === null || _12 === void 0 ? void 0 : _12.borderWidth) === undefined && ((_13 = element.style) === null || _13 === void 0 ? void 0 : _13.borderColor) === undefined) {
                 defaultInputStyle.borderWidth = 1;
                 defaultInputStyle.borderColor = '#E5E5E5';
             }
             // 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);
-                    }
+            const variableName = ((_14 = element.props) === null || _14 === void 0 ? void 0 : _14.variable) || element.id;
+            // Use local state value, or fall back to variables, or empty string
+            const currentValue = (_16 = (_15 = inputValues[variableName]) !== null && _15 !== void 0 ? _15 : variables[variableName]) !== null && _16 !== void 0 ? _16 : '';
+            return (<react_native_1.TextInput style={[defaultInputStyle, inputStyle]} placeholder={((_17 = element.props) === null || _17 === void 0 ? void 0 : _17.placeholder) || 'Enter text...'} keyboardType={getKeyboardType((_18 = element.props) === null || _18 === void 0 ? void 0 : _18.type)} secureTextEntry={((_19 = element.props) === null || _19 === void 0 ? void 0 : _19.type) === 'password'} autoCapitalize={((_20 = element.props) === null || _20 === void 0 ? void 0 : _20.type) === 'email' ? 'none' : 'sentences'} value={currentValue} onChangeText={(text) => {
+                    // Save to local state only - don't trigger parent re-render
+                    setInputValues(prev => (Object.assign(Object.assign({}, prev), { [variableName]: text })));
                 }}/>);
         }
         case 'spacer':

package/lib/types.d.ts

@@ -7,6 +7,7 @@ export interface ScreenConfig {
     elements?: ElementNode[];
     custom_component_name?: string;
     hidden?: boolean;
+    transition?: ScreenTransition;
 }
 export type ElementType = 'vstack' | 'hstack' | 'zstack' | 'scrollview' | 'text' | 'image' | 'video' | 'lottie' | 'icon' | 'input' | 'spacer' | 'divider';
 export interface ElementNode {
@@ -23,6 +24,46 @@ export interface ElementNode {
         hasSelection: boolean;
     };
     conditions?: ElementConditions;
+    entrance?: EntranceAnimation;
+    interactive?: InteractiveAnimation;
+    textAnimation?: TextAnimation;
+}
+export type EntranceAnimationType = 'fadeIn' | 'slideUp' | 'slideDown' | 'slideLeft' | 'slideRight' | 'scaleIn' | 'none';
+export type InteractiveAnimationType = 'scale' | 'pulse' | 'shake' | 'bounce' | 'none';
+export type HapticType = 'light' | 'medium' | 'heavy' | 'success' | 'warning' | 'error';
+export type HapticFrequency = 'every' | 'every-2' | 'every-3' | 'every-5';
+export interface EntranceAnimation {
+    type: EntranceAnimationType;
+    duration?: number;
+    delay?: number;
+    stagger?: number;
+    easing?: 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring';
+}
+export interface InteractiveAnimation {
+    type: InteractiveAnimationType;
+    trigger?: 'tap' | 'load';
+    duration?: number;
+    intensity?: number;
+    repeat?: boolean;
+    haptic?: boolean;
+    hapticType?: HapticType;
+}
+export interface TextAnimation {
+    type: 'typewriter' | 'none';
+    speed?: number;
+    delay?: number;
+    cursor?: boolean;
+    haptic?: {
+        enabled: boolean;
+        type: HapticType;
+        frequency: HapticFrequency;
+    };
+}
+export interface ScreenTransition {
+    type: 'push' | 'modal' | 'fade' | 'slide' | 'none';
+    direction?: 'left' | 'right' | 'up' | 'down';
+    duration?: number;
+    easing?: 'linear' | 'ease-in-out' | 'spring';
 }
 export type ComparisonOperator = 'equals' | 'not_equals' | 'greater_than' | 'less_than' | 'contains' | 'in' | 'is_empty' | 'is_not_empty';
 export interface Condition {
@@ -119,6 +160,11 @@ export interface ElementStyle {
 export interface OnboardingConfig {
     version: string;
     screens: ScreenConfig[];
+    assets?: Array<{
+        name: string;
+        type: string;
+        data: string;
+    }>;
 }
 export interface Experiment {
     id: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "noboarding",
-  "version": "1.0.3-beta",
+  "version": "1.0.7",
   "description": "Expo SDK for remote onboarding flow management",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -31,7 +31,9 @@
   "dependencies": {
     "@react-native-async-storage/async-storage": "^1.19.0",
     "expo-linear-gradient": ">=12.0.0",
-    "@expo/vector-icons": ">=14.0.0"
+    "@expo/vector-icons": ">=14.0.0",
+    "expo-av": ">=14.0.0",
+    "lottie-react-native": ">=6.0.0"
   },
   "devDependencies": {
     "@types/node": "^25.2.3",

package/src/OnboardingFlow.tsx

@@ -74,6 +74,7 @@ export const OnboardingFlow: React.FC<OnboardingFlowProps> = ({
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [screens, setScreens] = useState<ScreenConfig[]>([]);
+  const [assets, setAssets] = useState<Array<{ name: string; type: string; data: string }>>([]);
   const [currentIndex, setCurrentIndex] = useState(0);
   const [collectedData, setCollectedData] = useState<Record<string, any>>({});
   const [variables, setVariables] = useState<Record<string, any>>(initialVariables || {});
@@ -149,6 +150,11 @@ export const OnboardingFlow: React.FC<OnboardingFlowProps> = ({
       // Store flow_id for analytics
       flowIdRef.current = configResponse.config_id;
 
+      // Store assets from config
+      if (configResponse.config.assets) {
+        setAssets(configResponse.config.assets);
+      }
+
       // Handle A/B test experiment assignment
       let screensToUse = configResponse.config.screens;
 
@@ -161,12 +167,24 @@ export const OnboardingFlow: React.FC<OnboardingFlowProps> = ({
             userIdRef.current!
           );
 
+          console.log('🧪 A/B Test Assignment:', {
+            experiment_id: experiment.id,
+            experiment_name: experiment.name,
+            variant_id: assignment.variant_id,
+            has_variant_screens: assignment.variant_config?.screens?.length > 0,
+            variant_screen_count: assignment.variant_config?.screens?.length || 0,
+            cached: assignment.cached,
+          });
+
           // 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;
+            console.log('📱 Using variant screens:', assignment.variant_config.screens.length, 'screens');
+          } else {
+            console.log('📱 Using base flow screens (variant has no screens defined)');
           }
         } catch (err) {
           console.warn('Failed to assign experiment variant, using default flow:', err);
@@ -339,6 +357,7 @@ export const OnboardingFlow: React.FC<OnboardingFlowProps> = ({
           onDismiss={onSkip ? handleSkipAll : handleNext}
           variables={allVariables}
           onSetVariable={handleSetVariable}
+          assets={assets}
         />
       </View>
     );