rampkit-expo-dev 0.0.55 → 0.0.57

package/build/RampkitOverlay.js

@@ -1016,8 +1016,8 @@ function Overlay(props) {
     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
-    const varsRef = (0, react_1.useRef)({});
+    // shared vars across all webviews - INITIALIZE from props.variables!
+    const varsRef = (0, react_1.useRef)(props.variables || {});
     // hold refs for injection
     const webviewsRef = (0, react_1.useRef)([]);
     // Track when we last SENT vars to each page (for stale value filtering)
@@ -1025,6 +1025,14 @@ function Overlay(props) {
     const lastVarsSendTimeRef = (0, react_1.useRef)([]);
     // Stale value window in milliseconds - matches iOS SDK (600ms)
     const STALE_VALUE_WINDOW_MS = 600;
+    // Track which screens have completed initial setup (to avoid repeated onLoadEnd processing)
+    const initializedScreensRef = (0, react_1.useRef)(new Set());
+    // Track the currently active screen index (matches iOS SDK's activeScreenIndex)
+    const activeScreenIndexRef = (0, react_1.useRef)(0);
+    // Track when a screen was activated (to filter out stale echoes during settling period)
+    const screenActivationTimeRef = (0, react_1.useRef)({ 0: Date.now() });
+    // Settling period - ignore variable updates from a screen for this long after activation
+    const SCREEN_SETTLING_MS = 300;
     // ============================================================================
     // Navigation Resolution Helpers (matches iOS SDK behavior)
     // ============================================================================
@@ -1205,6 +1213,9 @@ function Overlay(props) {
         // Slide animation: use PagerView's built-in animated page change
         // and skip the fade curtain overlay.
         if (animationType === "slide") {
+            // Update active screen index and activation time FIRST
+            activeScreenIndexRef.current = nextIndex;
+            screenActivationTimeRef.current[nextIndex] = Date.now();
             // @ts-ignore: methods exist on PagerView instance
             const pager = pagerRef.current;
             if (!pager)
@@ -1216,7 +1227,6 @@ function Overlay(props) {
                 pager.setPageWithoutAnimation(nextIndex);
             }
             // Explicitly send vars to the new page after setting it
-            // This ensures the webview receives the latest state
             requestAnimationFrame(() => {
                 sendVarsToWebView(nextIndex);
                 sendOnboardingStateToWebView(nextIndex);
@@ -1227,6 +1237,9 @@ function Overlay(props) {
         // Animates the PagerView container out, switches page, then animates back in
         if (animationType === "slidefade") {
             setIsTransitioning(true);
+            // Update active screen index and activation time FIRST
+            activeScreenIndexRef.current = nextIndex;
+            screenActivationTimeRef.current[nextIndex] = Date.now();
             // Determine direction: forward (nextIndex > index) or backward
             const isForward = nextIndex > index;
             const direction = isForward ? 1 : -1;
@@ -1278,6 +1291,9 @@ function Overlay(props) {
         }
         // Default fade animation: uses a white curtain overlay
         setIsTransitioning(true);
+        // Update active screen index and activation time FIRST
+        activeScreenIndexRef.current = nextIndex;
+        screenActivationTimeRef.current[nextIndex] = Date.now();
         react_native_1.Animated.timing(fadeOpacity, {
             toValue: 1,
             duration: 160,
@@ -1320,30 +1336,45 @@ function Overlay(props) {
       try {
         var payload = ${json};
         var newVars = payload.vars;
-        // Directly update the global variables object
-        window.__rampkitVariables = newVars;
+        
+        // Update ALL variable storage locations for consistency
+        // This ensures dynamic tap handlers can find the latest values
+        window.__rampkitVariables = Object.assign({}, window.__rampkitVariables || {}, newVars);
+        
+        // Also update window.__rampkitVars (used by template resolver and dynamic tap)
+        if (window.__rampkitVars) {
+          Object.keys(newVars).forEach(function(k) {
+            window.__rampkitVars[k] = newVars[k];
+          });
+        } else {
+          window.__rampkitVars = Object.assign({}, newVars);
+        }
+        
+        // Also update RK_VARS if it exists (fallback storage)
+        if (window.RK_VARS) {
+          Object.keys(newVars).forEach(function(k) {
+            window.RK_VARS[k] = newVars[k];
+          });
+        }
+        
         // Call the handler if available
         if (typeof window.__rkHandleVarsUpdate === 'function') {
           window.__rkHandleVarsUpdate(newVars);
         }
-        // Dispatch MessageEvent (matches iOS SDK format) - this is what the page's JS listens for
+        
+        // Dispatch MessageEvent to trigger template resolver
         try {
           document.dispatchEvent(new MessageEvent('message', {data: payload}));
         } catch(e) {}
-        // Also dispatch on window for compatibility
-        try {
-          window.dispatchEvent(new MessageEvent('message', {data: payload}));
-        } catch(e) {}
+        
         // Also dispatch custom event for any listeners
         try {
           document.dispatchEvent(new CustomEvent('rampkit:vars-updated', {detail: newVars}));
         } catch(e) {}
-        // Call global callback if defined
-        if (typeof window.onRampkitVarsUpdate === 'function') {
-          window.onRampkitVarsUpdate(newVars);
-        }
+        
+        console.log('[RampKit] Variables updated:', Object.keys(newVars).length, 'keys');
       } catch(e) {
-        console.log('[Rampkit] buildDirectVarsScript error:', e);
+        console.log('[RampKit] buildDirectVarsScript error:', e);
       }
     })();`;
     }
@@ -1415,34 +1446,6 @@ function Overlay(props) {
         // because the WebView echoes back variables which triggers another sendVarsToWebView.
         // Onboarding state is sent separately in onLoadEnd and onPageSelected.
     }
-    /**
-     * Broadcast variables to all WebViews, optionally excluding one.
-     * This mirrors the iOS SDK's broadcastVariables(excluding:) pattern.
-     * @param excludeIndex - Optional index of WebView to skip (typically the source of the update)
-     */
-    function broadcastVars(excludeIndex) {
-        if (__DEV__)
-            console.log("[Rampkit] broadcastVars", {
-                recipients: webviewsRef.current.length,
-                excludeIndex,
-                vars: varsRef.current,
-            });
-        const script = buildDirectVarsScript(varsRef.current);
-        const now = Date.now();
-        for (let i = 0; i < webviewsRef.current.length; i++) {
-            // Skip the source WebView to prevent echo loops
-            if (excludeIndex !== undefined && i === excludeIndex) {
-                continue;
-            }
-            const wv = webviewsRef.current[i];
-            if (wv) {
-                // Track send time for stale value filtering
-                lastVarsSendTimeRef.current[i] = now;
-                // @ts-ignore: injectJavaScript exists on WebView instance
-                wv.injectJavaScript(script);
-            }
-        }
-    }
     react_1.default.useEffect(() => {
         const sub = react_native_1.BackHandler.addEventListener("hardwareBackPress", () => {
             if (index > 0) {
@@ -1487,25 +1490,16 @@ function Overlay(props) {
     const onPageSelected = (e) => {
         const pos = e.nativeEvent.position;
         setIndex(pos);
-        // ensure current page is synced with latest vars when selected
+        // Update active screen index and activation time FIRST
+        activeScreenIndexRef.current = pos;
+        screenActivationTimeRef.current[pos] = Date.now();
         if (__DEV__)
-            console.log("[Rampkit] onPageSelected", pos);
-        // Send vars multiple times with increasing delays to ensure the webview
-        // receives them. The first send might fail if the webview isn't fully ready,
-        // so we retry a few times.
+            console.log("[Rampkit] onPageSelected - activating screen", pos);
+        // Send vars and onboarding state to the newly active screen
         requestAnimationFrame(() => {
             sendVarsToWebView(pos);
-            // Send onboarding state once after vars
             sendOnboardingStateToWebView(pos);
         });
-        // Retry after a short delay in case the first send didn't work
-        setTimeout(() => {
-            sendVarsToWebView(pos);
-        }, 50);
-        // Final retry to catch any edge cases
-        setTimeout(() => {
-            sendVarsToWebView(pos);
-        }, 150);
         // Track screen change event
         if (props.onScreenChange && props.screens[pos]) {
             props.onScreenChange(pos, props.screens[pos].id);
@@ -1606,7 +1600,7 @@ function Overlay(props) {
             (_b = props.onNotificationPermissionResult) === null || _b === void 0 ? void 0 : _b.call(props, !!(result === null || result === void 0 ? void 0 : result.granted));
         }
         catch (_) { }
-        // Save to shared vars and broadcast to all pages
+        // Save to shared vars and send to active screen only
         try {
             varsRef.current = {
                 ...varsRef.current,
@@ -1617,7 +1611,8 @@ function Overlay(props) {
                     ios: result === null || result === void 0 ? void 0 : result.ios,
                 },
             };
-            broadcastVars();
+            // Only send to active screen to avoid broadcast loops
+            sendVarsToWebView(activeScreenIndexRef.current);
         }
         catch (_) { }
     }
@@ -1632,6 +1627,13 @@ function Overlay(props) {
                         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 + exports.injectedDynamicTapHandler + exports.injectedButtonAnimations, 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: () => {
+                                // Only initialize each screen ONCE to avoid repeated processing
+                                if (initializedScreensRef.current.has(i)) {
+                                    if (__DEV__)
+                                        console.log(`[Rampkit] onLoadEnd skipped (already initialized): ${i}`);
+                                    return;
+                                }
+                                initializedScreensRef.current.add(i);
                                 setLoadedCount((c) => c + 1);
                                 if (i === 0) {
                                     setFirstPageLoaded(true);
@@ -1641,12 +1643,14 @@ function Overlay(props) {
                                         props.onScreenChange(0, props.screens[0].id);
                                     }
                                 }
-                                // Initialize this page with current vars (isInitialLoad=true to enable stale filter)
+                                // Initialize this page with current vars
                                 if (__DEV__)
-                                    console.log("[Rampkit] onLoadEnd init send vars", i);
+                                    console.log("[Rampkit] onLoadEnd initializing screen", i);
                                 sendVarsToWebView(i, true);
-                                // Send onboarding state on initial load (separate from vars to avoid loops)
-                                sendOnboardingStateToWebView(i);
+                                // Only send onboarding state to the ACTIVE screen (index 0 on initial load)
+                                if (i === activeScreenIndexRef.current) {
+                                    sendOnboardingStateToWebView(i);
+                                }
                             }, onMessage: (ev) => {
                                 var _a, _b, _c, _d;
                                 const raw = ev.nativeEvent.data;
@@ -1655,53 +1659,52 @@ function Overlay(props) {
                                 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.
+                                    // 1) Variables from a page → update shared state
+                                    // CRITICAL: Only accept variable updates from the ACTIVE screen
+                                    // This prevents inactive screens from causing infinite broadcast loops
                                     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)
+                                        // CRITICAL: Ignore variable updates from non-active screens
+                                        // Only the currently visible screen should be able to update variables
+                                        if (i !== activeScreenIndexRef.current) {
+                                            if (__DEV__) {
+                                                console.log(`[Rampkit] ignoring variables from inactive screen ${i} (active: ${activeScreenIndexRef.current})`);
+                                            }
+                                            return;
+                                        }
                                         const now = Date.now();
+                                        // Check if this screen is still in the settling period after activation
+                                        // During settling, we filter more aggressively to prevent stale echoes
+                                        const activationTime = screenActivationTimeRef.current[i] || 0;
+                                        const timeSinceActivation = now - activationTime;
+                                        const isSettling = timeSinceActivation < SCREEN_SETTLING_MS;
+                                        // Check if we recently sent vars to this page
                                         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,
-                                            });
-                                        }
+                                        if (__DEV__)
+                                            console.log("[Rampkit] received variables from ACTIVE page", i, { isSettling, timeSinceActivation, isWithinStaleWindow, timeSinceSend });
                                         let changed = false;
                                         const newVars = {};
                                         for (const [key, value] of Object.entries(data.vars)) {
                                             // CRITICAL: Filter out onboarding.* variables
-                                            // These are read-only from the WebView's perspective and should only be
-                                            // controlled by the SDK. Accepting them back creates infinite loops.
+                                            // These are read-only from the WebView's perspective
                                             if (key.startsWith('onboarding.')) {
-                                                if (__DEV__) {
-                                                    console.log(`[Rampkit] ignoring read-only onboarding variable: ${key}`);
-                                                }
                                                 continue;
                                             }
                                             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) {
+                                            // During settling period OR stale window: protect non-empty values
+                                            // This prevents the screen from clobbering user input with defaults
+                                            if ((isSettling || 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}"`);
+                                                        console.log(`[Rampkit] protecting value for "${key}": "${hostVal}" (settling: ${isSettling})`);
                                                     }
-                                                    continue; // Skip this key, keep host value
+                                                    continue; // Skip - keep existing non-empty value
                                                 }
                                             }
                                             // Accept the update if value is different
@@ -1712,12 +1715,15 @@ function Overlay(props) {
                                         }
                                         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);
+                                            if (__DEV__) {
+                                                console.log("[Rampkit] variables updated:", newVars);
+                                            }
+                                            // CRITICAL: Send merged vars back to the active screen
+                                            // This ensures window.__rampkitVariables has the complete state
+                                            // which is needed for dynamic tap conditions to evaluate correctly
+                                            // Only send if there were actual changes to prevent echo loops
+                                            sendVarsToWebView(i);
                                         }
-                                        // NOTE: Do NOT send vars back to source page - it already has them
-                                        // and would just echo them back again, creating a ping-pong loop
                                         return;
                                     }
                                     // 2) A page asked for current vars → send only to that page

package/package.json

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