rampkit-expo-dev 0.0.39 → 0.0.41

package/build/RampkitOverlay.d.ts

@@ -2,6 +2,7 @@ import { RampKitContext } from "./types";
 export declare const injectedHardening = "\n(function(){\n  try {\n    var meta = document.querySelector('meta[name=\"viewport\"]');\n    if (!meta) { meta = document.createElement('meta'); meta.name = 'viewport'; document.head.appendChild(meta); }\n    meta.setAttribute('content','width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover');\n    var style = document.createElement('style');\n    style.textContent='html,body{overflow-x:hidden!important;} html,body,*{-webkit-user-select:none!important;user-select:none!important;-webkit-touch-callout:none!important;-ms-user-select:none!important;touch-action: pan-y;} *{-webkit-tap-highlight-color: rgba(0,0,0,0)!important;} ::selection{background: transparent!important;} ::-moz-selection{background: transparent!important;} a,img{-webkit-user-drag:none!important;user-drag:none!important;-webkit-touch-callout:none!important} input,textarea{caret-color:transparent!important;-webkit-user-select:none!important;user-select:none!important}';\n    document.head.appendChild(style);\n    var prevent=function(e){e.preventDefault&&e.preventDefault();};\n    document.addEventListener('gesturestart',prevent,{passive:false});\n    document.addEventListener('gesturechange',prevent,{passive:false});\n    document.addEventListener('gestureend',prevent,{passive:false});\n    document.addEventListener('dblclick',prevent,{passive:false});\n    document.addEventListener('wheel',function(e){ if(e.ctrlKey) e.preventDefault(); },{passive:false});\n    document.addEventListener('touchmove',function(e){ if(e.scale && e.scale !== 1) e.preventDefault(); },{passive:false});\n    document.addEventListener('selectstart',prevent,{passive:false,capture:true});\n    document.addEventListener('contextmenu',prevent,{passive:false,capture:true});\n    document.addEventListener('copy',prevent,{passive:false,capture:true});\n    document.addEventListener('cut',prevent,{passive:false,capture:true});\n    document.addEventListener('paste',prevent,{passive:false,capture:true});\n    document.addEventListener('dragstart',prevent,{passive:false,capture:true});\n    // Belt-and-suspenders: aggressively clear any attempted selection\n    var clearSel=function(){\n      try{var sel=window.getSelection&&window.getSelection(); if(sel&&sel.removeAllRanges) sel.removeAllRanges();}catch(_){} }\n    document.addEventListener('selectionchange',clearSel,{passive:true,capture:true});\n    document.onselectstart=function(){ clearSel(); return false; };\n    try{ document.documentElement.style.webkitUserSelect='none'; document.documentElement.style.userSelect='none'; }catch(_){ }\n    try{ document.body.style.webkitUserSelect='none'; document.body.style.userSelect='none'; }catch(_){ }\n    var __selTimer = setInterval(clearSel, 160);\n    window.addEventListener('pagehide',function(){ try{ clearInterval(__selTimer); }catch(_){} });\n    // Continuously enforce no-select on all elements and new nodes\n    var enforceNoSelect = function(el){\n      try{\n        el.style && (el.style.webkitUserSelect='none', el.style.userSelect='none', el.style.webkitTouchCallout='none');\n        el.setAttribute && (el.setAttribute('unselectable','on'), el.setAttribute('contenteditable','false'));\n      }catch(_){}\n    }\n    try{\n      var all=document.getElementsByTagName('*');\n      for(var i=0;i<all.length;i++){ enforceNoSelect(all[i]); }\n      var obs = new MutationObserver(function(muts){\n        for(var j=0;j<muts.length;j++){\n          var m=muts[j];\n          if(m.type==='childList'){\n            m.addedNodes && m.addedNodes.forEach && m.addedNodes.forEach(function(n){ if(n && n.nodeType===1){ enforceNoSelect(n); var q=n.getElementsByTagName? n.getElementsByTagName('*'): []; for(var k=0;k<q.length;k++){ enforceNoSelect(q[k]); }}});\n          } else if(m.type==='attributes'){\n            enforceNoSelect(m.target);\n          }\n        }\n      });\n      obs.observe(document.documentElement,{ childList:true, subtree:true, attributes:true, attributeFilter:['contenteditable','style'] });\n    }catch(_){ }\n  } catch(_) {}\n})(); true;\n";
 export declare const injectedNoSelect = "\n(function(){\n  try {\n    if (window.__rkNoSelectApplied) return true;\n    window.__rkNoSelectApplied = true;\n    var style = document.getElementById('rk-no-select-style');\n    if (!style) {\n      style = document.createElement('style');\n      style.id = 'rk-no-select-style';\n      style.innerHTML = \"\n        * {\n          user-select: none !important;\n          -webkit-user-select: none !important;\n          -webkit-touch-callout: none !important;\n        }\n        ::selection {\n          background: transparent !important;\n        }\n      \";\n      document.head.appendChild(style);\n    }\n    var prevent = function(e){ if(e && e.preventDefault) e.preventDefault(); return false; };\n    document.addEventListener('contextmenu', prevent, { passive: false, capture: true });\n    document.addEventListener('selectstart', prevent, { passive: false, capture: true });\n  } catch (_) {}\n  true;\n})();\n";
 export declare const injectedVarsHandler = "\n(function(){\n  try {\n    if (window.__rkVarsHandlerApplied) return true;\n    window.__rkVarsHandlerApplied = true;\n    \n    // Handler function that updates variables and notifies the page\n    window.__rkHandleVarsUpdate = function(vars) {\n      if (!vars || typeof vars !== 'object') return;\n      // Update the global variables object\n      window.__rampkitVariables = vars;\n      // Dispatch a custom event that the page's JS can listen to for re-rendering\n      try {\n        document.dispatchEvent(new CustomEvent('rampkit:vars-updated', { detail: vars }));\n      } catch(e) {}\n      // Also try calling a global handler if the page defined one\n      try {\n        if (typeof window.onRampkitVarsUpdate === 'function') {\n          window.onRampkitVarsUpdate(vars);\n        }\n      } catch(e) {}\n    };\n    \n    // Listen for message events from React Native\n    document.addEventListener('message', function(event) {\n      try {\n        var data = event.data;\n        if (data && data.type === 'rampkit:variables' && data.vars) {\n          window.__rkHandleVarsUpdate(data.vars);\n        }\n      } catch(e) {}\n    }, false);\n    \n    // Also listen on window for compatibility\n    window.addEventListener('message', function(event) {\n      try {\n        var data = event.data;\n        if (data && data.type === 'rampkit:variables' && data.vars) {\n          window.__rkHandleVarsUpdate(data.vars);\n        }\n      } catch(e) {}\n    }, false);\n  } catch (_) {}\n  true;\n})();\n";
+export declare const injectedButtonAnimations = "\n(function(){\n  try {\n    if (window.__rkButtonAnimApplied) return true;\n    window.__rkButtonAnimApplied = true;\n    \n    // Add styles for button animations\n    var style = document.createElement('style');\n    style.id = 'rk-button-anim-style';\n    style.innerHTML = `\n      /* Base transition for all interactive elements */\n      [data-rampkit-action],\n      [data-rampkit-navigate],\n      [data-rampkit-tap],\n      [onclick],\n      button,\n      a[href],\n      .rk-interactive,\n      .rk-button {\n        transform: scale(1);\n        opacity: 1;\n        will-change: transform, opacity;\n      }\n      \n      /* Pressed state - applied via JS */\n      .rk-pressed {\n        transform: scale(0.97) !important;\n        opacity: 0.8 !important;\n        transition: transform 80ms cubic-bezier(0.25, 0.1, 0.25, 1), \n                    opacity 80ms cubic-bezier(0.25, 0.1, 0.25, 1) !important;\n      }\n      \n      /* Released state - spring-like bounce back */\n      .rk-released {\n        transform: scale(1) !important;\n        opacity: 1 !important;\n        transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1), \n                    opacity 280ms cubic-bezier(0.34, 1.56, 0.64, 1) !important;\n      }\n    `;\n    document.head.appendChild(style);\n    \n    // Check if element is interactive\n    function isInteractive(el) {\n      if (!el || !el.tagName) return false;\n      var tag = el.tagName.toLowerCase();\n      if (tag === 'button' || tag === 'a') return true;\n      if (el.hasAttribute('data-rampkit-action')) return true;\n      if (el.hasAttribute('data-rampkit-navigate')) return true;\n      if (el.hasAttribute('data-rampkit-tap')) return true;\n      if (el.hasAttribute('onclick')) return true;\n      if (el.classList.contains('rk-interactive')) return true;\n      if (el.classList.contains('rk-button')) return true;\n      return false;\n    }\n    \n    // Find the interactive parent element\n    function findInteractiveElement(el) {\n      var current = el;\n      var maxDepth = 10; // Prevent infinite loops\n      while (current && maxDepth > 0) {\n        if (isInteractive(current)) return current;\n        current = current.parentElement;\n        maxDepth--;\n      }\n      return null;\n    }\n    \n    // Track currently pressed element\n    var pressedElement = null;\n    var pressTimeout = null;\n    \n    // Handle touch start - immediate press animation\n    function handleTouchStart(e) {\n      try {\n        var target = findInteractiveElement(e.target);\n        if (!target) return;\n        \n        // Clear any pending release animation\n        if (pressTimeout) {\n          clearTimeout(pressTimeout);\n          pressTimeout = null;\n        }\n        \n        // Remove released class and add pressed class\n        target.classList.remove('rk-released');\n        target.classList.add('rk-pressed');\n        pressedElement = target;\n      } catch(_) {}\n    }\n    \n    // Handle touch end - spring release animation\n    function handleTouchEnd(e) {\n      try {\n        if (!pressedElement) return;\n        var target = pressedElement;\n        \n        // Switch from pressed to released for spring animation\n        target.classList.remove('rk-pressed');\n        target.classList.add('rk-released');\n        \n        // Clean up after animation completes\n        pressTimeout = setTimeout(function() {\n          target.classList.remove('rk-released');\n          pressTimeout = null;\n        }, 300);\n        \n        pressedElement = null;\n      } catch(_) {}\n    }\n    \n    // Handle touch cancel - reset without animation\n    function handleTouchCancel(e) {\n      try {\n        if (!pressedElement) return;\n        pressedElement.classList.remove('rk-pressed');\n        pressedElement.classList.remove('rk-released');\n        pressedElement = null;\n        if (pressTimeout) {\n          clearTimeout(pressTimeout);\n          pressTimeout = null;\n        }\n      } catch(_) {}\n    }\n    \n    // Use capture phase to get events before they're handled\n    document.addEventListener('touchstart', handleTouchStart, { passive: true, capture: true });\n    document.addEventListener('touchend', handleTouchEnd, { passive: true, capture: true });\n    document.addEventListener('touchcancel', handleTouchCancel, { passive: true, capture: true });\n    \n    // Also handle mouse events for web testing\n    document.addEventListener('mousedown', handleTouchStart, { passive: true, capture: true });\n    document.addEventListener('mouseup', handleTouchEnd, { passive: true, capture: true });\n    document.addEventListener('mouseleave', handleTouchCancel, { passive: true, capture: true });\n    \n  } catch (_) {}\n  true;\n})();\n";
 export type ScreenPayload = {
     id: string;
     html: string;

package/build/RampkitOverlay.js

@@ -36,7 +36,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.injectedVarsHandler = exports.injectedNoSelect = exports.injectedHardening = void 0;
+exports.injectedButtonAnimations = exports.injectedVarsHandler = exports.injectedNoSelect = exports.injectedHardening = void 0;
 exports.showRampkitOverlay = showRampkitOverlay;
 exports.hideRampkitOverlay = hideRampkitOverlay;
 exports.closeRampkitOverlay = closeRampkitOverlay;
@@ -173,6 +173,147 @@ exports.injectedVarsHandler = `
   true;
 })();
 `;
+// Button tap animation script - handles spring animations for interactive elements
+// Triggers on touchstart (not click) for immediate feedback
+exports.injectedButtonAnimations = `
+(function(){
+  try {
+    if (window.__rkButtonAnimApplied) return true;
+    window.__rkButtonAnimApplied = true;
+    
+    // Add styles for button animations
+    var style = document.createElement('style');
+    style.id = 'rk-button-anim-style';
+    style.innerHTML = \`
+      /* Base transition for all interactive elements */
+      [data-rampkit-action],
+      [data-rampkit-navigate],
+      [data-rampkit-tap],
+      [onclick],
+      button,
+      a[href],
+      .rk-interactive,
+      .rk-button {
+        transform: scale(1);
+        opacity: 1;
+        will-change: transform, opacity;
+      }
+      
+      /* Pressed state - applied via JS */
+      .rk-pressed {
+        transform: scale(0.97) !important;
+        opacity: 0.8 !important;
+        transition: transform 80ms cubic-bezier(0.25, 0.1, 0.25, 1), 
+                    opacity 80ms cubic-bezier(0.25, 0.1, 0.25, 1) !important;
+      }
+      
+      /* Released state - spring-like bounce back */
+      .rk-released {
+        transform: scale(1) !important;
+        opacity: 1 !important;
+        transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1), 
+                    opacity 280ms cubic-bezier(0.34, 1.56, 0.64, 1) !important;
+      }
+    \`;
+    document.head.appendChild(style);
+    
+    // Check if element is interactive
+    function isInteractive(el) {
+      if (!el || !el.tagName) return false;
+      var tag = el.tagName.toLowerCase();
+      if (tag === 'button' || tag === 'a') return true;
+      if (el.hasAttribute('data-rampkit-action')) return true;
+      if (el.hasAttribute('data-rampkit-navigate')) return true;
+      if (el.hasAttribute('data-rampkit-tap')) return true;
+      if (el.hasAttribute('onclick')) return true;
+      if (el.classList.contains('rk-interactive')) return true;
+      if (el.classList.contains('rk-button')) return true;
+      return false;
+    }
+    
+    // Find the interactive parent element
+    function findInteractiveElement(el) {
+      var current = el;
+      var maxDepth = 10; // Prevent infinite loops
+      while (current && maxDepth > 0) {
+        if (isInteractive(current)) return current;
+        current = current.parentElement;
+        maxDepth--;
+      }
+      return null;
+    }
+    
+    // Track currently pressed element
+    var pressedElement = null;
+    var pressTimeout = null;
+    
+    // Handle touch start - immediate press animation
+    function handleTouchStart(e) {
+      try {
+        var target = findInteractiveElement(e.target);
+        if (!target) return;
+        
+        // Clear any pending release animation
+        if (pressTimeout) {
+          clearTimeout(pressTimeout);
+          pressTimeout = null;
+        }
+        
+        // Remove released class and add pressed class
+        target.classList.remove('rk-released');
+        target.classList.add('rk-pressed');
+        pressedElement = target;
+      } catch(_) {}
+    }
+    
+    // Handle touch end - spring release animation
+    function handleTouchEnd(e) {
+      try {
+        if (!pressedElement) return;
+        var target = pressedElement;
+        
+        // Switch from pressed to released for spring animation
+        target.classList.remove('rk-pressed');
+        target.classList.add('rk-released');
+        
+        // Clean up after animation completes
+        pressTimeout = setTimeout(function() {
+          target.classList.remove('rk-released');
+          pressTimeout = null;
+        }, 300);
+        
+        pressedElement = null;
+      } catch(_) {}
+    }
+    
+    // Handle touch cancel - reset without animation
+    function handleTouchCancel(e) {
+      try {
+        if (!pressedElement) return;
+        pressedElement.classList.remove('rk-pressed');
+        pressedElement.classList.remove('rk-released');
+        pressedElement = null;
+        if (pressTimeout) {
+          clearTimeout(pressTimeout);
+          pressTimeout = null;
+        }
+      } catch(_) {}
+    }
+    
+    // Use capture phase to get events before they're handled
+    document.addEventListener('touchstart', handleTouchStart, { passive: true, capture: true });
+    document.addEventListener('touchend', handleTouchEnd, { passive: true, capture: true });
+    document.addEventListener('touchcancel', handleTouchCancel, { passive: true, capture: true });
+    
+    // Also handle mouse events for web testing
+    document.addEventListener('mousedown', handleTouchStart, { passive: true, capture: true });
+    document.addEventListener('mouseup', handleTouchEnd, { passive: true, capture: true });
+    document.addEventListener('mouseleave', handleTouchCancel, { passive: true, capture: true });
+    
+  } catch (_) {}
+  true;
+})();
+`;
 function performRampkitHaptic(event) {
     if (!event || event.action !== "haptic") {
         // Backwards compatible default
@@ -272,7 +413,7 @@ function preloadRampkitOverlay(opts) {
                 opacity: 0,
                 top: -1000,
                 left: -1000,
-            }, children: (0, jsx_runtime_1.jsx)(react_native_webview_1.WebView, { originWhitelist: ["*"], source: { html: docs[0] || "<html></html>" }, injectedJavaScriptBeforeContentLoaded: exports.injectedHardening, injectedJavaScript: exports.injectedNoSelect + exports.injectedVarsHandler, automaticallyAdjustContentInsets: false, contentInsetAdjustmentBehavior: "never", bounces: false, scrollEnabled: false, allowsInlineMediaPlayback: true, mediaPlaybackRequiresUserAction: false, cacheEnabled: true, hideKeyboardAccessoryView: true }) }));
+            }, children: (0, jsx_runtime_1.jsx)(react_native_webview_1.WebView, { originWhitelist: ["*"], source: { html: docs[0] || "<html></html>" }, injectedJavaScriptBeforeContentLoaded: exports.injectedHardening, injectedJavaScript: exports.injectedNoSelect + exports.injectedVarsHandler + exports.injectedButtonAnimations, automaticallyAdjustContentInsets: false, contentInsetAdjustmentBehavior: "never", bounces: false, scrollEnabled: false, allowsInlineMediaPlayback: true, mediaPlaybackRequiresUserAction: false, cacheEnabled: true, hideKeyboardAccessoryView: true }) }));
         preloadSibling = new react_native_root_siblings_1.default((0, jsx_runtime_1.jsx)(HiddenPreloader, {}));
     }
     catch (e) {
@@ -432,14 +573,9 @@ function Overlay(props) {
     const [onboardingCompleted, setOnboardingCompleted] = (0, react_1.useState)(false);
     const overlayOpacity = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
     const fadeOpacity = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
-    // slideFade animation values
-    const slideFadeOutgoingOpacity = (0, react_1.useRef)(new react_native_1.Animated.Value(1)).current;
-    const slideFadeOutgoingTranslateX = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
-    const slideFadeIncomingOpacity = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
-    const slideFadeIncomingTranslateX = (0, react_1.useRef)(new react_native_1.Animated.Value(SLIDE_FADE_OFFSET)).current;
-    const [slideFadeActive, setSlideFadeActive] = (0, react_1.useState)(false);
-    const [slideFadeOutgoingIndex, setSlideFadeOutgoingIndex] = (0, react_1.useState)(null);
-    const [slideFadeIncomingIndex, setSlideFadeIncomingIndex] = (0, react_1.useState)(null);
+    // slideFade animation values - animates the PagerView container
+    const pagerOpacity = (0, react_1.useRef)(new react_native_1.Animated.Value(1)).current;
+    const pagerTranslateX = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
     const allLoaded = loadedCount >= props.screens.length;
     const hasTrackedInitialScreen = (0, react_1.useRef)(false);
     // shared vars across all webviews
@@ -521,68 +657,55 @@ function Overlay(props) {
             });
             return;
         }
-        // slideFade animation: simultaneous opacity and translateX animation
-        // for both outgoing and incoming views
+        // slideFade animation: smooth slide + fade transition
+        // Animates the PagerView container out, switches page, then animates back in
         if (animationType === "slidefade") {
             setIsTransitioning(true);
             // Determine direction: forward (nextIndex > index) or backward
             const isForward = nextIndex > index;
             const direction = isForward ? 1 : -1;
-            // Set up the slideFade overlay indices
-            setSlideFadeOutgoingIndex(index);
-            setSlideFadeIncomingIndex(nextIndex);
-            // Set initial positions for the animation
-            // Outgoing: starts visible at position 0
-            slideFadeOutgoingOpacity.setValue(1);
-            slideFadeOutgoingTranslateX.setValue(0);
-            // Incoming: starts invisible, offset in the direction we're navigating
-            slideFadeIncomingOpacity.setValue(0);
-            slideFadeIncomingTranslateX.setValue(SLIDE_FADE_OFFSET * direction);
-            // Activate the slideFade overlay
-            setSlideFadeActive(true);
-            // Switch the underlying PagerView immediately (without animation)
-            // so when the overlay fades away, the correct page is underneath
-            requestAnimationFrame(() => {
-                var _a, _b, _c, _d;
-                // @ts-ignore: method exists on PagerView instance
-                (_c = (_b = (_a = pagerRef.current) === null || _a === void 0 ? void 0 : _a.setPageWithoutAnimation) === null || _b === void 0 ? void 0 : _b.call(_a, nextIndex)) !== null && _c !== void 0 ? _c : (_d = pagerRef.current) === null || _d === void 0 ? void 0 : _d.setPage(nextIndex);
-            });
-            // Run all 4 animations simultaneously
+            const halfDuration = SLIDE_FADE_DURATION / 2;
             const timingConfig = {
-                duration: SLIDE_FADE_DURATION,
+                duration: halfDuration,
                 easing: react_native_1.Easing.out(react_native_1.Easing.ease),
                 useNativeDriver: true,
             };
+            // Phase 1: Fade out and slide the current page in exit direction
             react_native_1.Animated.parallel([
-                // Outgoing: fade out and slide in opposite direction
-                react_native_1.Animated.timing(slideFadeOutgoingOpacity, {
+                react_native_1.Animated.timing(pagerOpacity, {
                     toValue: 0,
                     ...timingConfig,
                 }),
-                react_native_1.Animated.timing(slideFadeOutgoingTranslateX, {
-                    toValue: -SLIDE_FADE_OFFSET * direction,
-                    ...timingConfig,
-                }),
-                // Incoming: fade in and slide to center
-                react_native_1.Animated.timing(slideFadeIncomingOpacity, {
-                    toValue: 1,
-                    ...timingConfig,
-                }),
-                react_native_1.Animated.timing(slideFadeIncomingTranslateX, {
-                    toValue: 0,
+                react_native_1.Animated.timing(pagerTranslateX, {
+                    toValue: -SLIDE_FADE_OFFSET * direction * 0.5, // Slide out in opposite direction
                     ...timingConfig,
                 }),
             ]).start(() => {
-                // Animation complete - deactivate overlay and reset values
-                setSlideFadeActive(false);
-                setSlideFadeOutgoingIndex(null);
-                setSlideFadeIncomingIndex(null);
-                // Reset outgoing view values for next animation
-                slideFadeOutgoingOpacity.setValue(1);
-                slideFadeOutgoingTranslateX.setValue(0);
-                // Send vars to the new page
-                sendVarsToWebView(nextIndex);
-                setIsTransitioning(false);
+                var _a, _b, _c, _d;
+                // Switch page instantly while invisible
+                // @ts-ignore: method exists on PagerView instance
+                (_c = (_b = (_a = pagerRef.current) === null || _a === void 0 ? void 0 : _a.setPageWithoutAnimation) === null || _b === void 0 ? void 0 : _b.call(_a, nextIndex)) !== null && _c !== void 0 ? _c : (_d = pagerRef.current) === null || _d === void 0 ? void 0 : _d.setPage(nextIndex);
+                // Set up for incoming animation - start from the direction we're navigating from
+                pagerTranslateX.setValue(SLIDE_FADE_OFFSET * direction * 0.5);
+                // Phase 2: Fade in and slide the new page to center
+                react_native_1.Animated.parallel([
+                    react_native_1.Animated.timing(pagerOpacity, {
+                        toValue: 1,
+                        duration: halfDuration,
+                        easing: react_native_1.Easing.out(react_native_1.Easing.ease),
+                        useNativeDriver: true,
+                    }),
+                    react_native_1.Animated.timing(pagerTranslateX, {
+                        toValue: 0,
+                        duration: halfDuration,
+                        easing: react_native_1.Easing.out(react_native_1.Easing.ease),
+                        useNativeDriver: true,
+                    }),
+                ]).start(() => {
+                    // Send vars to the new page
+                    sendVarsToWebView(nextIndex);
+                    setIsTransitioning(false);
+                });
             });
             return;
         }
@@ -839,138 +962,166 @@ function Overlay(props) {
             styles.root,
             !visible && styles.invisible,
             visible && { opacity: overlayOpacity },
-        ], pointerEvents: visible && !isClosing ? "auto" : "none", children: [(0, jsx_runtime_1.jsx)(react_native_pager_view_1.default, { ref: pagerRef, style: react_native_1.StyleSheet.absoluteFill, scrollEnabled: false, initialPage: 0, onPageSelected: onPageSelected, offscreenPageLimit: props.screens.length, overScrollMode: "never", children: docs.map((doc, i) => ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.page, renderToHardwareTextureAndroid: true, children: (0, jsx_runtime_1.jsx)(react_native_webview_1.WebView, { ref: (r) => (webviewsRef.current[i] = r), style: styles.webview, originWhitelist: ["*"], source: { html: doc }, injectedJavaScriptBeforeContentLoaded: exports.injectedHardening, injectedJavaScript: exports.injectedNoSelect + exports.injectedVarsHandler, automaticallyAdjustContentInsets: false, contentInsetAdjustmentBehavior: "never", bounces: false, scrollEnabled: false, overScrollMode: "never", scalesPageToFit: false, showsHorizontalScrollIndicator: false, dataDetectorTypes: "none", allowsLinkPreview: false, allowsInlineMediaPlayback: true, mediaPlaybackRequiresUserAction: false, cacheEnabled: true, javaScriptEnabled: true, domStorageEnabled: true, hideKeyboardAccessoryView: true, onLoadEnd: () => {
-                            setLoadedCount((c) => c + 1);
-                            if (i === 0) {
-                                setFirstPageLoaded(true);
-                                // Track initial screen view
-                                if (!hasTrackedInitialScreen.current && props.onScreenChange && props.screens[0]) {
-                                    hasTrackedInitialScreen.current = true;
-                                    props.onScreenChange(0, props.screens[0].id);
-                                }
-                            }
-                            // Initialize this page with current vars (isInitialLoad=true to enable stale filter)
-                            if (__DEV__)
-                                console.log("[Rampkit] onLoadEnd init send vars", i);
-                            sendVarsToWebView(i, true);
-                        }, onMessage: (ev) => {
-                            var _a, _b, _c, _d;
-                            const raw = ev.nativeEvent.data;
-                            console.log("raw", raw);
-                            // Accept either raw strings or JSON payloads from your editor
-                            try {
-                                // JSON path
-                                const data = JSON.parse(raw);
-                                // 1) Variables from a page → update shared + broadcast to OTHER pages
-                                // This mirrors the iOS SDK pattern with stale value filtering.
-                                if ((data === null || data === void 0 ? void 0 : data.type) === "rampkit:variables" &&
-                                    (data === null || data === void 0 ? void 0 : data.vars) &&
-                                    typeof data.vars === "object") {
-                                    if (__DEV__)
-                                        console.log("[Rampkit] received variables from page", i, data.vars);
-                                    // Check if this page is within the stale value window
-                                    // (we recently sent vars to it and it may be echoing back defaults)
-                                    const now = Date.now();
-                                    const lastSendTime = lastVarsSendTimeRef.current[i] || 0;
-                                    const timeSinceSend = now - lastSendTime;
-                                    const isWithinStaleWindow = timeSinceSend < STALE_VALUE_WINDOW_MS;
-                                    if (__DEV__) {
-                                        console.log("[Rampkit] stale check:", {
-                                            pageIndex: i,
-                                            isWithinStaleWindow,
-                                            timeSinceSend,
-                                        });
+        ], pointerEvents: visible && !isClosing ? "auto" : "none", children: [(0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { style: [
+                    react_native_1.StyleSheet.absoluteFill,
+                    {
+                        opacity: pagerOpacity,
+                        transform: [{ translateX: pagerTranslateX }],
+                    },
+                ], children: (0, jsx_runtime_1.jsx)(react_native_pager_view_1.default, { ref: pagerRef, style: react_native_1.StyleSheet.absoluteFill, scrollEnabled: false, initialPage: 0, onPageSelected: onPageSelected, offscreenPageLimit: props.screens.length, overScrollMode: "never", children: docs.map((doc, i) => ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.page, renderToHardwareTextureAndroid: true, children: (0, jsx_runtime_1.jsx)(react_native_webview_1.WebView, { ref: (r) => (webviewsRef.current[i] = r), style: styles.webview, originWhitelist: ["*"], source: { html: doc }, injectedJavaScriptBeforeContentLoaded: exports.injectedHardening, injectedJavaScript: exports.injectedNoSelect + exports.injectedVarsHandler + exports.injectedButtonAnimations, automaticallyAdjustContentInsets: false, contentInsetAdjustmentBehavior: "never", bounces: false, scrollEnabled: false, overScrollMode: "never", scalesPageToFit: false, showsHorizontalScrollIndicator: false, dataDetectorTypes: "none", allowsLinkPreview: false, allowsInlineMediaPlayback: true, mediaPlaybackRequiresUserAction: false, cacheEnabled: true, javaScriptEnabled: true, domStorageEnabled: true, hideKeyboardAccessoryView: true, onLoadEnd: () => {
+                                setLoadedCount((c) => c + 1);
+                                if (i === 0) {
+                                    setFirstPageLoaded(true);
+                                    // Track initial screen view
+                                    if (!hasTrackedInitialScreen.current && props.onScreenChange && props.screens[0]) {
+                                        hasTrackedInitialScreen.current = true;
+                                        props.onScreenChange(0, props.screens[0].id);
                                     }
-                                    let changed = false;
-                                    const newVars = {};
-                                    for (const [key, value] of Object.entries(data.vars)) {
-                                        const hasHostVal = Object.prototype.hasOwnProperty.call(varsRef.current, key);
-                                        const hostVal = varsRef.current[key];
-                                        // Stale value filtering (matches iOS SDK behavior):
-                                        // If we're within the stale window, don't let empty/default values
-                                        // overwrite existing non-empty host values.
-                                        // This prevents pages from clobbering user input with cached defaults
-                                        // when they first become active/visible.
-                                        if (isWithinStaleWindow && hasHostVal) {
-                                            const hostIsNonEmpty = hostVal !== "" && hostVal !== null && hostVal !== undefined;
-                                            const incomingIsEmpty = value === "" || value === null || value === undefined;
-                                            if (hostIsNonEmpty && incomingIsEmpty) {
-                                                if (__DEV__) {
-                                                    console.log(`[Rampkit] filtering stale empty value for key "${key}": keeping "${hostVal}"`);
+                                }
+                                // Initialize this page with current vars (isInitialLoad=true to enable stale filter)
+                                if (__DEV__)
+                                    console.log("[Rampkit] onLoadEnd init send vars", i);
+                                sendVarsToWebView(i, true);
+                            }, onMessage: (ev) => {
+                                var _a, _b, _c, _d;
+                                const raw = ev.nativeEvent.data;
+                                console.log("raw", raw);
+                                // Accept either raw strings or JSON payloads from your editor
+                                try {
+                                    // JSON path
+                                    const data = JSON.parse(raw);
+                                    // 1) Variables from a page → update shared + broadcast to OTHER pages
+                                    // This mirrors the iOS SDK pattern with stale value filtering.
+                                    if ((data === null || data === void 0 ? void 0 : data.type) === "rampkit:variables" &&
+                                        (data === null || data === void 0 ? void 0 : data.vars) &&
+                                        typeof data.vars === "object") {
+                                        if (__DEV__)
+                                            console.log("[Rampkit] received variables from page", i, data.vars);
+                                        // Check if this page is within the stale value window
+                                        // (we recently sent vars to it and it may be echoing back defaults)
+                                        const now = Date.now();
+                                        const lastSendTime = lastVarsSendTimeRef.current[i] || 0;
+                                        const timeSinceSend = now - lastSendTime;
+                                        const isWithinStaleWindow = timeSinceSend < STALE_VALUE_WINDOW_MS;
+                                        if (__DEV__) {
+                                            console.log("[Rampkit] stale check:", {
+                                                pageIndex: i,
+                                                isWithinStaleWindow,
+                                                timeSinceSend,
+                                            });
+                                        }
+                                        let changed = false;
+                                        const newVars = {};
+                                        for (const [key, value] of Object.entries(data.vars)) {
+                                            const hasHostVal = Object.prototype.hasOwnProperty.call(varsRef.current, key);
+                                            const hostVal = varsRef.current[key];
+                                            // Stale value filtering (matches iOS SDK behavior):
+                                            // If we're within the stale window, don't let empty/default values
+                                            // overwrite existing non-empty host values.
+                                            // This prevents pages from clobbering user input with cached defaults
+                                            // when they first become active/visible.
+                                            if (isWithinStaleWindow && hasHostVal) {
+                                                const hostIsNonEmpty = hostVal !== "" && hostVal !== null && hostVal !== undefined;
+                                                const incomingIsEmpty = value === "" || value === null || value === undefined;
+                                                if (hostIsNonEmpty && incomingIsEmpty) {
+                                                    if (__DEV__) {
+                                                        console.log(`[Rampkit] filtering stale empty value for key "${key}": keeping "${hostVal}"`);
+                                                    }
+                                                    continue; // Skip this key, keep host value
                                                 }
-                                                continue; // Skip this key, keep host value
+                                            }
+                                            // Accept the update if value is different
+                                            if (!hasHostVal || hostVal !== value) {
+                                                newVars[key] = value;
+                                                changed = true;
                                             }
                                         }
-                                        // Accept the update if value is different
-                                        if (!hasHostVal || hostVal !== value) {
-                                            newVars[key] = value;
-                                            changed = true;
+                                        if (changed) {
+                                            varsRef.current = { ...varsRef.current, ...newVars };
+                                            // Broadcast to all WebViews EXCEPT the source (index i)
+                                            // This prevents echo loops and matches iOS SDK behavior
+                                            broadcastVars(i);
                                         }
+                                        return;
                                     }
-                                    if (changed) {
-                                        varsRef.current = { ...varsRef.current, ...newVars };
-                                        // Broadcast to all WebViews EXCEPT the source (index i)
-                                        // This prevents echo loops and matches iOS SDK behavior
-                                        broadcastVars(i);
+                                    // 2) A page asked for current vars → send only to that page
+                                    if ((data === null || data === void 0 ? void 0 : data.type) === "rampkit:request-vars") {
+                                        if (__DEV__)
+                                            console.log("[Rampkit] request-vars from page", i);
+                                        sendVarsToWebView(i);
+                                        return;
                                     }
-                                    return;
-                                }
-                                // 2) A page asked for current vars → send only to that page
-                                if ((data === null || data === void 0 ? void 0 : data.type) === "rampkit:request-vars") {
-                                    if (__DEV__)
-                                        console.log("[Rampkit] request-vars from page", i);
-                                    sendVarsToWebView(i);
-                                    return;
-                                }
-                                // 3) A page requested an in-app review prompt
-                                if ((data === null || data === void 0 ? void 0 : data.type) === "rampkit:request-review" ||
-                                    (data === null || data === void 0 ? void 0 : data.type) === "rampkit:review") {
-                                    (async () => {
-                                        try {
-                                            const available = await RampKitNative_1.StoreReview.isAvailableAsync();
-                                            if (available) {
-                                                await RampKitNative_1.StoreReview.requestReview();
+                                    // 3) A page requested an in-app review prompt
+                                    if ((data === null || data === void 0 ? void 0 : data.type) === "rampkit:request-review" ||
+                                        (data === null || data === void 0 ? void 0 : data.type) === "rampkit:review") {
+                                        (async () => {
+                                            try {
+                                                const available = await RampKitNative_1.StoreReview.isAvailableAsync();
+                                                if (available) {
+                                                    await RampKitNative_1.StoreReview.requestReview();
+                                                }
                                             }
+                                            catch (_) { }
+                                        })();
+                                        return;
+                                    }
+                                    // 4) A page requested notification permission
+                                    if ((data === null || data === void 0 ? void 0 : data.type) === "rampkit:request-notification-permission") {
+                                        handleNotificationPermissionRequest({
+                                            ios: data === null || data === void 0 ? void 0 : data.ios,
+                                            android: data === null || data === void 0 ? void 0 : data.android,
+                                            behavior: data === null || data === void 0 ? void 0 : data.behavior,
+                                        });
+                                        return;
+                                    }
+                                    // 5) Onboarding finished event from page
+                                    if ((data === null || data === void 0 ? void 0 : data.type) === "rampkit:onboarding-finished") {
+                                        setOnboardingCompleted(true);
+                                        try {
+                                            (_a = props.onOnboardingFinished) === null || _a === void 0 ? void 0 : _a.call(props, data === null || data === void 0 ? void 0 : data.payload);
                                         }
                                         catch (_) { }
-                                    })();
-                                    return;
-                                }
-                                // 4) A page requested notification permission
-                                if ((data === null || data === void 0 ? void 0 : data.type) === "rampkit:request-notification-permission") {
-                                    handleNotificationPermissionRequest({
-                                        ios: data === null || data === void 0 ? void 0 : data.ios,
-                                        android: data === null || data === void 0 ? void 0 : data.android,
-                                        behavior: data === null || data === void 0 ? void 0 : data.behavior,
-                                    });
-                                    return;
-                                }
-                                // 5) Onboarding finished event from page
-                                if ((data === null || data === void 0 ? void 0 : data.type) === "rampkit:onboarding-finished") {
-                                    setOnboardingCompleted(true);
-                                    try {
-                                        (_a = props.onOnboardingFinished) === null || _a === void 0 ? void 0 : _a.call(props, data === null || data === void 0 ? void 0 : data.payload);
+                                        handleRequestClose({ completed: true });
+                                        return;
                                     }
-                                    catch (_) { }
-                                    handleRequestClose({ completed: true });
-                                    return;
-                                }
-                                // 6) Request to show paywall
-                                if ((data === null || data === void 0 ? void 0 : data.type) === "rampkit:show-paywall") {
-                                    try {
-                                        (_b = props.onShowPaywall) === null || _b === void 0 ? void 0 : _b.call(props, data === null || data === void 0 ? void 0 : data.payload);
+                                    // 6) Request to show paywall
+                                    if ((data === null || data === void 0 ? void 0 : data.type) === "rampkit:show-paywall") {
+                                        try {
+                                            (_b = props.onShowPaywall) === null || _b === void 0 ? void 0 : _b.call(props, data === null || data === void 0 ? void 0 : data.payload);
+                                        }
+                                        catch (_) { }
+                                        return;
                                     }
-                                    catch (_) { }
-                                    return;
-                                }
-                                if ((data === null || data === void 0 ? void 0 : data.type) === "rampkit:continue" ||
-                                    (data === null || data === void 0 ? void 0 : data.type) === "continue") {
-                                    handleAdvance(i, (data === null || data === void 0 ? void 0 : data.animation) || "fade");
-                                    return;
-                                }
-                                if ((data === null || data === void 0 ? void 0 : data.type) === "rampkit:navigate") {
-                                    const target = data === null || data === void 0 ? void 0 : data.targetScreenId;
-                                    if (target === "__goBack__") {
+                                    if ((data === null || data === void 0 ? void 0 : data.type) === "rampkit:continue" ||
+                                        (data === null || data === void 0 ? void 0 : data.type) === "continue") {
+                                        handleAdvance(i, (data === null || data === void 0 ? void 0 : data.animation) || "fade");
+                                        return;
+                                    }
+                                    if ((data === null || data === void 0 ? void 0 : data.type) === "rampkit:navigate") {
+                                        const target = data === null || data === void 0 ? void 0 : data.targetScreenId;
+                                        if (target === "__goBack__") {
+                                            if (i > 0) {
+                                                navigateToIndex(i - 1, (data === null || data === void 0 ? void 0 : data.animation) || "fade");
+                                            }
+                                            else {
+                                                handleRequestClose();
+                                            }
+                                            return;
+                                        }
+                                        if (!target || target === "__continue__") {
+                                            handleAdvance(i, (data === null || data === void 0 ? void 0 : data.animation) || "fade");
+                                            return;
+                                        }
+                                        const targetIndex = props.screens.findIndex((s) => s.id === target);
+                                        if (targetIndex >= 0) {
+                                            navigateToIndex(targetIndex, (data === null || data === void 0 ? void 0 : data.animation) || "fade");
+                                        }
+                                        else {
+                                            handleAdvance(i);
+                                        }
+                                        return;
+                                    }
+                                    if ((data === null || data === void 0 ? void 0 : data.type) === "rampkit:goBack") {
                                         if (i > 0) {
                                             navigateToIndex(i - 1, (data === null || data === void 0 ? void 0 : data.animation) || "fade");
                                         }
@@ -979,89 +1130,56 @@ function Overlay(props) {
                                         }
                                         return;
                                     }
-                                    if (!target || target === "__continue__") {
-                                        handleAdvance(i, (data === null || data === void 0 ? void 0 : data.animation) || "fade");
+                                    if ((data === null || data === void 0 ? void 0 : data.type) === "rampkit:close") {
+                                        handleRequestClose();
                                         return;
                                     }
-                                    const targetIndex = props.screens.findIndex((s) => s.id === target);
-                                    if (targetIndex >= 0) {
-                                        navigateToIndex(targetIndex, (data === null || data === void 0 ? void 0 : data.animation) || "fade");
+                                    if ((data === null || data === void 0 ? void 0 : data.type) === "rampkit:haptic") {
+                                        performRampkitHaptic(data);
+                                        return;
                                     }
-                                    else {
+                                }
+                                catch (_e) {
+                                    // String path
+                                    if (raw === "rampkit:tap" ||
+                                        raw === "next" ||
+                                        raw === "continue") {
                                         handleAdvance(i);
+                                        return;
                                     }
-                                    return;
-                                }
-                                if ((data === null || data === void 0 ? void 0 : data.type) === "rampkit:goBack") {
-                                    if (i > 0) {
-                                        navigateToIndex(i - 1, (data === null || data === void 0 ? void 0 : data.animation) || "fade");
+                                    if (raw === "rampkit:request-review" || raw === "rampkit:review") {
+                                        (async () => {
+                                            try {
+                                                const available = await RampKitNative_1.StoreReview.isAvailableAsync();
+                                                if (available) {
+                                                    await RampKitNative_1.StoreReview.requestReview();
+                                                }
+                                            }
+                                            catch (_) { }
+                                        })();
+                                        return;
                                     }
-                                    else {
-                                        handleRequestClose();
+                                    if (raw === "rampkit:request-notification-permission") {
+                                        handleNotificationPermissionRequest(undefined);
+                                        return;
                                     }
-                                    return;
-                                }
-                                if ((data === null || data === void 0 ? void 0 : data.type) === "rampkit:close") {
-                                    handleRequestClose();
-                                    return;
-                                }
-                                if ((data === null || data === void 0 ? void 0 : data.type) === "rampkit:haptic") {
-                                    performRampkitHaptic(data);
-                                    return;
-                                }
-                            }
-                            catch (_e) {
-                                // String path
-                                if (raw === "rampkit:tap" ||
-                                    raw === "next" ||
-                                    raw === "continue") {
-                                    handleAdvance(i);
-                                    return;
-                                }
-                                if (raw === "rampkit:request-review" || raw === "rampkit:review") {
-                                    (async () => {
+                                    if (raw === "rampkit:onboarding-finished") {
+                                        setOnboardingCompleted(true);
                                         try {
-                                            const available = await RampKitNative_1.StoreReview.isAvailableAsync();
-                                            if (available) {
-                                                await RampKitNative_1.StoreReview.requestReview();
-                                            }
+                                            (_c = props.onOnboardingFinished) === null || _c === void 0 ? void 0 : _c.call(props, undefined);
                                         }
                                         catch (_) { }
-                                    })();
-                                    return;
-                                }
-                                if (raw === "rampkit:request-notification-permission") {
-                                    handleNotificationPermissionRequest(undefined);
-                                    return;
-                                }
-                                if (raw === "rampkit:onboarding-finished") {
-                                    setOnboardingCompleted(true);
-                                    try {
-                                        (_c = props.onOnboardingFinished) === null || _c === void 0 ? void 0 : _c.call(props, undefined);
-                                    }
-                                    catch (_) { }
-                                    handleRequestClose({ completed: true });
-                                    return;
-                                }
-                                if (raw === "rampkit:show-paywall") {
-                                    try {
-                                        (_d = props.onShowPaywall) === null || _d === void 0 ? void 0 : _d.call(props);
-                                    }
-                                    catch (_) { }
-                                    return;
-                                }
-                                if (raw === "rampkit:goBack") {
-                                    if (i > 0) {
-                                        navigateToIndex(i - 1);
+                                        handleRequestClose({ completed: true });
+                                        return;
                                     }
-                                    else {
-                                        handleRequestClose();
+                                    if (raw === "rampkit:show-paywall") {
+                                        try {
+                                            (_d = props.onShowPaywall) === null || _d === void 0 ? void 0 : _d.call(props);
+                                        }
+                                        catch (_) { }
+                                        return;
                                     }
-                                    return;
-                                }
-                                if (raw.startsWith("rampkit:navigate:")) {
-                                    const target = raw.slice("rampkit:navigate:".length);
-                                    if (target === "__goBack__") {
+                                    if (raw === "rampkit:goBack") {
                                         if (i > 0) {
                                             navigateToIndex(i - 1);
                                         }
@@ -1070,58 +1188,55 @@ function Overlay(props) {
                                         }
                                         return;
                                     }
-                                    if (!target || target === "__continue__") {
-                                        handleAdvance(i);
+                                    if (raw.startsWith("rampkit:navigate:")) {
+                                        const target = raw.slice("rampkit:navigate:".length);
+                                        if (target === "__goBack__") {
+                                            if (i > 0) {
+                                                navigateToIndex(i - 1);
+                                            }
+                                            else {
+                                                handleRequestClose();
+                                            }
+                                            return;
+                                        }
+                                        if (!target || target === "__continue__") {
+                                            handleAdvance(i);
+                                            return;
+                                        }
+                                        const targetIndex = props.screens.findIndex((s) => s.id === target);
+                                        if (targetIndex >= 0) {
+                                            navigateToIndex(targetIndex);
+                                        }
+                                        else {
+                                            handleAdvance(i);
+                                        }
                                         return;
                                     }
-                                    const targetIndex = props.screens.findIndex((s) => s.id === target);
-                                    if (targetIndex >= 0) {
-                                        navigateToIndex(targetIndex);
+                                    if (raw === "rampkit:close") {
+                                        handleRequestClose();
+                                        return;
                                     }
-                                    else {
-                                        handleAdvance(i);
+                                    if (raw.startsWith("haptic:")) {
+                                        performRampkitHaptic({
+                                            type: "rampkit:haptic",
+                                            nodeId: null,
+                                            nodeType: null,
+                                            animation: "none",
+                                            action: "haptic",
+                                            hapticType: "impact",
+                                            impactStyle: "Medium",
+                                            notificationType: null,
+                                            timestamp: Date.now(),
+                                        });
+                                        return;
                                     }
-                                    return;
                                 }
-                                if (raw === "rampkit:close") {
-                                    handleRequestClose();
-                                    return;
-                                }
-                                if (raw.startsWith("haptic:")) {
-                                    performRampkitHaptic({
-                                        type: "rampkit:haptic",
-                                        nodeId: null,
-                                        nodeType: null,
-                                        animation: "none",
-                                        action: "haptic",
-                                        hapticType: "impact",
-                                        impactStyle: "Medium",
-                                        notificationType: null,
-                                        timestamp: Date.now(),
-                                    });
-                                    return;
-                                }
-                            }
-                            // No-op for other messages, but useful to log while testing
-                            // console.log("WebView message:", raw);
-                        }, onError: (e) => {
-                            // You can surface an inline error UI here if you want
-                            console.warn("WebView error:", e.nativeEvent);
-                        } }) }, props.screens[i].id))) }), slideFadeActive && slideFadeOutgoingIndex !== null && slideFadeIncomingIndex !== null && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { pointerEvents: "none", style: [
-                            react_native_1.StyleSheet.absoluteFillObject,
-                            styles.slideFadeLayer,
-                            {
-                                opacity: slideFadeOutgoingOpacity,
-                                transform: [{ translateX: slideFadeOutgoingTranslateX }],
-                            },
-                        ], children: (0, jsx_runtime_1.jsx)(react_native_webview_1.WebView, { style: styles.webview, originWhitelist: ["*"], source: { html: docs[slideFadeOutgoingIndex] }, injectedJavaScriptBeforeContentLoaded: exports.injectedHardening, injectedJavaScript: exports.injectedNoSelect + exports.injectedVarsHandler, automaticallyAdjustContentInsets: false, contentInsetAdjustmentBehavior: "never", bounces: false, scrollEnabled: false, overScrollMode: "never", scalesPageToFit: false, showsHorizontalScrollIndicator: false, dataDetectorTypes: "none", allowsLinkPreview: false, allowsInlineMediaPlayback: true, mediaPlaybackRequiresUserAction: false, cacheEnabled: true, javaScriptEnabled: true, domStorageEnabled: true, hideKeyboardAccessoryView: true }) }), (0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { pointerEvents: "none", style: [
-                            react_native_1.StyleSheet.absoluteFillObject,
-                            styles.slideFadeLayer,
-                            {
-                                opacity: slideFadeIncomingOpacity,
-                                transform: [{ translateX: slideFadeIncomingTranslateX }],
-                            },
-                        ], children: (0, jsx_runtime_1.jsx)(react_native_webview_1.WebView, { style: styles.webview, originWhitelist: ["*"], source: { html: docs[slideFadeIncomingIndex] }, injectedJavaScriptBeforeContentLoaded: exports.injectedHardening, injectedJavaScript: exports.injectedNoSelect + exports.injectedVarsHandler, automaticallyAdjustContentInsets: false, contentInsetAdjustmentBehavior: "never", bounces: false, scrollEnabled: false, overScrollMode: "never", scalesPageToFit: false, showsHorizontalScrollIndicator: false, dataDetectorTypes: "none", allowsLinkPreview: false, allowsInlineMediaPlayback: true, mediaPlaybackRequiresUserAction: false, cacheEnabled: true, javaScriptEnabled: true, domStorageEnabled: true, hideKeyboardAccessoryView: true }) })] })), (0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { pointerEvents: isTransitioning ? "auto" : "none", style: [
+                                // No-op for other messages, but useful to log while testing
+                                // console.log("WebView message:", raw);
+                            }, onError: (e) => {
+                                // You can surface an inline error UI here if you want
+                                console.warn("WebView error:", e.nativeEvent);
+                            } }) }, props.screens[i].id))) }) }), (0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { pointerEvents: isTransitioning ? "auto" : "none", style: [
                     react_native_1.StyleSheet.absoluteFillObject,
                     styles.curtain,
                     { opacity: fadeOpacity },
@@ -1144,9 +1259,5 @@ const styles = react_native_1.StyleSheet.create({
     center: { flex: 1, alignItems: "center", justifyContent: "center" },
     webview: { flex: 1 },
     curtain: { backgroundColor: "white" },
-    slideFadeLayer: {
-        backgroundColor: "white",
-        zIndex: 10000,
-    },
 });
 exports.default = Overlay;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rampkit-expo-dev",
-  "version": "0.0.39",
+  "version": "0.0.41",
   "description": "The Expo SDK for RampKit. Build, test, and personalize app onboardings with instant updates.",
   "main": "build/index.js",
   "types": "build/index.d.ts",