rampkit-expo-dev 0.0.51 → 0.0.53

package/android/src/main/java/expo/modules/rampkit/RampKitModule.kt

@@ -42,6 +42,7 @@ class RampKitModule : Module(), PurchasesUpdatedListener {
   private val INSTALL_DATE_KEY = "rk_install_date"
   private val LAUNCH_COUNT_KEY = "rk_launch_count"
   private val LAST_LAUNCH_KEY = "rk_last_launch"
+  private val ORIGINAL_TXN_PREFIX = "rk_orig_txn_"
 
   private var billingClient: BillingClient? = null
   private var appId: String? = null
@@ -247,7 +248,7 @@ class RampKitModule : Module(), PurchasesUpdatedListener {
           val acknowledgePurchaseParams = AcknowledgePurchaseParams.newBuilder()
             .setPurchaseToken(purchase.purchaseToken)
             .build()
-          
+
           billingClient?.acknowledgePurchase(acknowledgePurchaseParams) { result ->
             if (result.responseCode == BillingClient.BillingResponseCode.OK) {
               Log.d(TAG, "Purchase acknowledged")
@@ -257,53 +258,93 @@ class RampKitModule : Module(), PurchasesUpdatedListener {
 
         // Get product details for price info
         coroutineScope.launch {
-          val productDetails = getProductDetails(purchase.products.firstOrNull() ?: "")
-          
+          val productId = purchase.products.firstOrNull() ?: ""
+          val productDetails = getProductDetails(productId)
+
+          // Determine originalTransactionId for subscription tracking
+          // For Android, we store the first orderId for each product as the "original"
+          val originalTransactionId = getOrStoreOriginalTransactionId(productId, purchase.orderId)
+          val isRenewal = originalTransactionId != purchase.orderId
+
+          // Determine event type (matching iOS SDK logic)
+          val eventName: String
+          val isTrial: Boolean
+          val isIntroOffer: Boolean
+
+          // Check for free trial or intro offer
+          val subscriptionOffer = productDetails?.subscriptionOfferDetails?.firstOrNull()
+          val firstPricingPhase = subscriptionOffer?.pricingPhases?.pricingPhaseList?.firstOrNull()
+          val hasFreeTrial = firstPricingPhase?.priceAmountMicros == 0L
+
+          when {
+            // Subscription renewal
+            isRenewal && purchase.isAutoRenewing -> {
+              eventName = "subscription_renewed"
+              isTrial = false
+              isIntroOffer = false
+            }
+            // Trial started (free trial)
+            hasFreeTrial && !isRenewal -> {
+              eventName = "trial_started"
+              isTrial = true
+              isIntroOffer = true
+            }
+            // Regular purchase
+            else -> {
+              eventName = "purchase_completed"
+              isTrial = false
+              isIntroOffer = false
+            }
+          }
+
           val properties = mutableMapOf<String, Any?>(
-            "productId" to purchase.products.firstOrNull(),
+            "productId" to productId,
             "transactionId" to purchase.orderId,
-            "originalTransactionId" to purchase.orderId,
+            "originalTransactionId" to originalTransactionId,
             "purchaseToken" to purchase.purchaseToken,
             "purchaseDate" to getIso8601Timestamp(purchase.purchaseTime),
             "quantity" to purchase.quantity,
-            "isAutoRenewing" to purchase.isAutoRenewing
+            "isAutoRenewing" to purchase.isAutoRenewing,
+            "isTrial" to isTrial,
+            "isIntroOffer" to isIntroOffer
           )
 
           productDetails?.let { details ->
-            val pricingPhase = details.subscriptionOfferDetails?.firstOrNull()?.pricingPhases?.pricingPhaseList?.firstOrNull()
-              ?: details.oneTimePurchaseOfferDetails?.let { oneTime ->
-                object {
-                  val priceAmountMicros = oneTime.priceAmountMicros
-                  val priceCurrencyCode = oneTime.priceCurrencyCode
-                  val formattedPrice = oneTime.formattedPrice
-                }
+            properties["productType"] = if (details.productType == BillingClient.ProductType.SUBS) "auto_renewable" else "non_consumable"
+
+            // Get pricing info
+            val oneTimePurchase = details.oneTimePurchaseOfferDetails
+            val subscriptionOfferDetails = details.subscriptionOfferDetails?.firstOrNull()
+
+            if (oneTimePurchase != null) {
+              properties["amount"] = oneTimePurchase.priceAmountMicros / 1_000_000.0
+              properties["currency"] = oneTimePurchase.priceCurrencyCode
+              properties["priceFormatted"] = oneTimePurchase.formattedPrice
+            } else if (subscriptionOfferDetails != null) {
+              // For subscriptions, get the base pricing phase (not the free trial phase)
+              val basePricingPhase = subscriptionOfferDetails.pricingPhases.pricingPhaseList
+                .firstOrNull { it.priceAmountMicros > 0 }
+                ?: subscriptionOfferDetails.pricingPhases.pricingPhaseList.lastOrNull()
+
+              basePricingPhase?.let { phase ->
+                properties["amount"] = phase.priceAmountMicros / 1_000_000.0
+                properties["currency"] = phase.priceCurrencyCode
+                properties["priceFormatted"] = phase.formattedPrice
+                properties["subscriptionPeriod"] = formatBillingPeriod(phase.billingPeriod)
               }
 
-            if (pricingPhase != null) {
-              properties["price"] = when (pricingPhase) {
-                is ProductDetails.PricingPhase -> pricingPhase.priceAmountMicros / 1_000_000.0
-                else -> (pricingPhase as? Any)?.let { 
-                  (it.javaClass.getMethod("getPriceAmountMicros").invoke(it) as Long) / 1_000_000.0 
-                }
-              }
-              properties["currency"] = when (pricingPhase) {
-                is ProductDetails.PricingPhase -> pricingPhase.priceCurrencyCode
-                else -> (pricingPhase as? Any)?.let {
-                  it.javaClass.getMethod("getPriceCurrencyCode").invoke(it) as String
-                }
-              }
-              properties["localizedPrice"] = when (pricingPhase) {
-                is ProductDetails.PricingPhase -> pricingPhase.formattedPrice
-                else -> (pricingPhase as? Any)?.let {
-                  it.javaClass.getMethod("getFormattedPrice").invoke(it) as String
-                }
+              // Offer type detection
+              val freeTrialPhase = subscriptionOfferDetails.pricingPhases.pricingPhaseList
+                .firstOrNull { it.priceAmountMicros == 0L }
+              if (freeTrialPhase != null) {
+                properties["offerType"] = "introductory"
               }
             }
+
             properties["localizedName"] = details.name
-            properties["productType"] = details.productType
           }
 
-          sendPurchaseEvent(appId, userId, "purchase_completed", properties)
+          sendPurchaseEvent(appId, userId, eventName, properties)
         }
       }
       Purchase.PurchaseState.PENDING -> {
@@ -312,6 +353,36 @@ class RampKitModule : Module(), PurchasesUpdatedListener {
     }
   }
 
+  /**
+   * Get or store the original transaction ID for a product.
+   * This enables subscription renewal tracking by comparing subsequent orderIds
+   * to the original orderId for the same product.
+   */
+  private fun getOrStoreOriginalTransactionId(productId: String, currentOrderId: String?): String? {
+    if (currentOrderId == null) return null
+
+    val key = ORIGINAL_TXN_PREFIX + productId
+    val storedOriginal = prefs.getString(key, null)
+
+    return if (storedOriginal != null) {
+      // Return the stored original
+      storedOriginal
+    } else {
+      // This is the first purchase for this product, store it as original
+      prefs.edit().putString(key, currentOrderId).apply()
+      currentOrderId
+    }
+  }
+
+  /**
+   * Format Google Play billing period to ISO 8601 duration format
+   * Input format: P1W, P1M, P3M, P6M, P1Y
+   */
+  private fun formatBillingPeriod(billingPeriod: String): String {
+    // Google Play already uses ISO 8601 format, just return it
+    return billingPeriod
+  }
+
   private suspend fun getProductDetails(productId: String): ProductDetails? {
     if (productId.isEmpty()) return null
     val client = billingClient ?: return null

package/build/RampKit.d.ts

@@ -68,7 +68,8 @@ export declare class RampKitCore {
      */
     trackCtaTap(buttonId: string, buttonText?: string): void;
     /**
-     * Cleanup SDK resources
+     * Reset the SDK state and re-initialize
+     * Call this when a user logs out or when you need to clear all cached state
      */
-    cleanup(): Promise<void>;
+    reset(): Promise<void>;
 }

package/build/RampKit.js

@@ -209,6 +209,13 @@ class RampKitCore {
             const rampkitContext = this.deviceInfo
                 ? (0, DeviceInfoCollector_1.buildRampKitContext)(this.deviceInfo)
                 : undefined;
+            // Extract navigation data for spatial layout-based navigation
+            const navigation = data.navigation
+                ? {
+                    mainFlow: data.navigation.mainFlow || [],
+                    screenPositions: data.navigation.screenPositions,
+                }
+                : undefined;
             // Track onboarding started event
             const onboardingId = data.onboardingId || data.id || "unknown";
             EventManager_1.eventManager.trackOnboardingStarted(onboardingId, screens.length);
@@ -229,6 +236,7 @@ class RampKitCore {
                 variables,
                 requiredScripts,
                 rampkitContext,
+                navigation,
                 onOnboardingFinished: (payload) => {
                     var _a;
                     // Track onboarding completed
@@ -290,18 +298,34 @@ class RampKitCore {
     // StoreKit 2 (iOS) and Google Play Billing (Android) transaction observers.
     // No manual tracking is needed.
     /**
-     * Cleanup SDK resources
+     * Reset the SDK state and re-initialize
+     * Call this when a user logs out or when you need to clear all cached state
      */
-    async cleanup() {
+    async reset() {
+        if (!this.config) {
+            console.warn("[RampKit] Reset: No config found, cannot re-initialize");
+            return;
+        }
+        console.log("[RampKit] Reset: Clearing SDK state...");
         // Stop transaction observer
         await RampKitNative_1.TransactionObserver.stop();
+        // Remove app state listener
         if (this.appStateSubscription) {
             this.appStateSubscription.remove();
             this.appStateSubscription = null;
         }
+        // Reset event manager state
         EventManager_1.eventManager.reset();
+        // Reset session
         (0, DeviceInfoCollector_1.resetSession)();
+        // Clear local state
+        this.userId = null;
+        this.deviceInfo = null;
+        this.onboardingData = null;
         this.initialized = false;
+        console.log("[RampKit] Reset: Re-initializing SDK...");
+        // Re-initialize with stored config
+        await this.init(this.config);
     }
 }
 exports.RampKitCore = RampKitCore;

package/build/RampkitOverlay.d.ts

@@ -1,7 +1,8 @@
-import { RampKitContext } from "./types";
+import { RampKitContext, NavigationData } 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 injectedDynamicTapHandler = "\n(function() {\n    if (window.__rampkitClickInterceptorInstalled) return;\n    window.__rampkitClickInterceptorInstalled = true;\n    \n    // Decode HTML entities\n    function decodeHtml(str) {\n        if (!str) return str;\n        return str.replace(/&quot;/g, '\"').replace(/&#34;/g, '\"').replace(/&#x22;/g, '\"')\n                  .replace(/&apos;/g, \"'\").replace(/&#39;/g, \"'\").replace(/&#x27;/g, \"'\")\n                  .replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&amp;/g, '&');\n    }\n    \n    // Find dynamic tap config on element or ancestors\n    function findDynamicTap(el) {\n        var current = el;\n        var depth = 0;\n        var attrNames = ['data-tap-dynamic', 'data-tapdynamic', 'tapDynamic', 'data-dynamic-tap'];\n        while (current && current !== document.body && current !== document.documentElement && depth < 20) {\n            if (current.getAttribute) {\n                for (var i = 0; i < attrNames.length; i++) {\n                    var attr = current.getAttribute(attrNames[i]);\n                    if (attr && attr.length > 2) {\n                        return { element: current, config: attr };\n                    }\n                }\n                if (current.dataset && current.dataset.tapDynamic) {\n                    return { element: current, config: current.dataset.tapDynamic };\n                }\n            }\n            current = current.parentElement;\n            depth++;\n        }\n        return null;\n    }\n    \n    // Get variables for condition evaluation - check ALL possible sources\n    function getVars() {\n        var vars = {};\n        if (window.__rampkitVariables) {\n            Object.keys(window.__rampkitVariables).forEach(function(k) {\n                vars[k] = window.__rampkitVariables[k];\n            });\n        }\n        if (window.__rampkitVars) {\n            Object.keys(window.__rampkitVars).forEach(function(k) {\n                vars[k] = window.__rampkitVars[k];\n            });\n        }\n        if (window.RK_VARS) {\n            Object.keys(window.RK_VARS).forEach(function(k) {\n                vars[k] = window.RK_VARS[k];\n            });\n        }\n        return vars;\n    }\n    \n    // Evaluate a single rule\n    function evalRule(rule, vars) {\n        if (!rule || !rule.key) return false;\n        var left = vars[rule.key];\n        var right = rule.value;\n        var op = rule.op || '=';\n        if (left === undefined || left === null) left = '';\n        if (right === undefined || right === null) right = '';\n        var leftStr = String(left);\n        var rightStr = String(right);\n        var result = false;\n        switch (op) {\n            case '=': case '==': result = leftStr === rightStr; break;\n            case '!=': case '<>': result = leftStr !== rightStr; break;\n            case '>': result = parseFloat(left) > parseFloat(right); break;\n            case '<': result = parseFloat(left) < parseFloat(right); break;\n            case '>=': result = parseFloat(left) >= parseFloat(right); break;\n            case '<=': result = parseFloat(left) <= parseFloat(right); break;\n            default: result = false;\n        }\n        return result;\n    }\n    \n    // Evaluate all rules (AND logic)\n    function evalRules(rules, vars) {\n        if (!rules || !rules.length) return true;\n        for (var i = 0; i < rules.length; i++) {\n            if (!evalRule(rules[i], vars)) return false;\n        }\n        return true;\n    }\n    \n    // Execute an action\n    function execAction(action) {\n        if (!action || !action.type) return;\n        var msg = null;\n        var actionType = action.type.toLowerCase();\n        \n        switch (actionType) {\n            case 'navigate':\n                msg = { type: 'rampkit:navigate', targetScreenId: action.targetScreenId || '__continue__', animation: action.animation || 'fade' };\n                break;\n            case 'continue':\n                msg = { type: 'rampkit:navigate', targetScreenId: '__continue__', animation: action.animation || 'fade' };\n                break;\n            case 'goback':\n                msg = { type: 'rampkit:goBack', animation: action.animation || 'fade' };\n                break;\n            case 'close':\n                msg = { type: 'rampkit:close' };\n                break;\n            case 'haptic':\n                msg = { type: 'rampkit:haptic', hapticType: action.hapticType || 'impact', impactStyle: action.impactStyle || 'Medium', notificationType: action.notificationType };\n                break;\n            case 'showpaywall':\n                msg = { type: 'rampkit:show-paywall', payload: action.payload || { paywallId: action.paywallId } };\n                break;\n            case 'requestreview':\n                msg = { type: 'rampkit:request-review' };\n                break;\n            case 'requestnotificationpermission':\n                msg = { type: 'rampkit:request-notification-permission' };\n                break;\n            case 'onboardingfinished':\n                msg = { type: 'rampkit:onboarding-finished', payload: action.payload };\n                break;\n            case 'setvariable':\n            case 'setstate':\n            case 'updatevariable':\n            case 'set':\n            case 'assign':\n                var varKey = action.key || action.variableName || action.name || action.variable;\n                var varValue = action.variableValue !== undefined ? action.variableValue :\n                               action.value !== undefined ? action.value :\n                               action.newValue !== undefined ? action.newValue : undefined;\n                if (varKey && varValue !== undefined) {\n                    if (window.__rampkitVariables) window.__rampkitVariables[varKey] = varValue;\n                    if (window.__rampkitVars) window.__rampkitVars[varKey] = varValue;\n                    var updateVars = {};\n                    updateVars[varKey] = varValue;\n                    msg = { type: 'rampkit:variables', vars: updateVars };\n                }\n                break;\n        }\n        if (msg) {\n            try {\n                if (window.ReactNativeWebView && window.ReactNativeWebView.postMessage) {\n                    window.ReactNativeWebView.postMessage(JSON.stringify(msg));\n                }\n            } catch(e) {}\n        }\n    }\n    \n    // Evaluate dynamic tap config\n    function evalDynamicTap(config) {\n        if (!config || !config.values) return false;\n        var vars = getVars();\n        var conditions = config.values;\n        for (var i = 0; i < conditions.length; i++) {\n            var cond = conditions[i];\n            var condType = cond.conditionType || 'if';\n            var rules = cond.rules || [];\n            var actions = cond.actions || [];\n            if (condType === 'else' || evalRules(rules, vars)) {\n                for (var j = 0; j < actions.length; j++) {\n                    execAction(actions[j]);\n                }\n                return true;\n            }\n        }\n        return false;\n    }\n    \n    // Click interceptor - capture phase, runs BEFORE onclick handlers\n    function interceptClick(event) {\n        var result = findDynamicTap(event.target);\n        if (!result) return;\n        \n        try {\n            var configStr = decodeHtml(result.config);\n            var config = JSON.parse(configStr);\n            var handled = evalDynamicTap(config);\n            if (handled) {\n                event.stopImmediatePropagation();\n                event.preventDefault();\n                return false;\n            }\n        } catch (e) {\n            console.log('[RampKit] Dynamic tap error:', e);\n        }\n    }\n    \n    // Install interceptor on window in capture phase\n    window.addEventListener('click', interceptClick, true);\n})();\n";
 export declare const injectedButtonAnimations = "\n(function(){\n  try {\n    if (window.__rkButtonAnimApplied) return true;\n    window.__rkButtonAnimApplied = true;\n    \n    var pressed = null;\n    var pressedOriginalTransform = '';\n    var pressedOriginalOpacity = '';\n    var pressedOriginalTransition = '';\n    var releaseTimer = null;\n    \n    // Find interactive element - very permissive, looks for any clickable-looking element\n    function findInteractive(el) {\n      var current = el;\n      for (var i = 0; i < 20 && current && current !== document.body && current !== document.documentElement; i++) {\n        if (!current || !current.tagName) { current = current.parentElement; continue; }\n        var tag = current.tagName.toLowerCase();\n        \n        // Skip tiny elements (likely icons inside buttons)\n        var rect = current.getBoundingClientRect();\n        if (rect.width < 20 || rect.height < 20) { current = current.parentElement; continue; }\n        \n        // Match standard interactive elements\n        if (tag === 'button' || tag === 'a' || tag === 'input' || tag === 'select') return current;\n        \n        // Match elements with any data attribute containing action/navigate/tap/click\n        var attrs = current.attributes;\n        if (attrs) {\n          for (var j = 0; j < attrs.length; j++) {\n            var attrName = attrs[j].name.toLowerCase();\n            if (attrName.indexOf('click') !== -1 || attrName.indexOf('tap') !== -1 || \n                attrName.indexOf('action') !== -1 || attrName.indexOf('navigate') !== -1 ||\n                attrName.indexOf('press') !== -1) {\n              return current;\n            }\n          }\n        }\n        \n        // Match elements with onclick\n        if (current.onclick || current.hasAttribute('onclick')) return current;\n        \n        // Match elements with role=\"button\" or tabindex\n        if (current.getAttribute('role') === 'button') return current;\n        \n        // Match any element with an ID containing button/btn/cta\n        var id = current.id || '';\n        if (id && (id.toLowerCase().indexOf('button') !== -1 || id.toLowerCase().indexOf('btn') !== -1 || id.toLowerCase().indexOf('cta') !== -1)) return current;\n        \n        // Match elements with button-like classes\n        var className = current.className;\n        if (className && typeof className === 'string') {\n          var cls = className.toLowerCase();\n          if (cls.indexOf('btn') !== -1 || cls.indexOf('button') !== -1 || cls.indexOf('cta') !== -1 || \n              cls.indexOf('clickable') !== -1 || cls.indexOf('tappable') !== -1 || cls.indexOf('pressable') !== -1) {\n            return current;\n          }\n        }\n        \n        // Match elements with cursor pointer\n        try {\n          var computed = window.getComputedStyle(current);\n          if (computed && computed.cursor === 'pointer') return current;\n        } catch(e) {}\n        \n        current = current.parentElement;\n      }\n      return null;\n    }\n    \n    function applyPressedStyle(el) {\n      if (!el || !el.style) return;\n      // Save original styles\n      pressedOriginalTransform = el.style.transform || '';\n      pressedOriginalOpacity = el.style.opacity || '';\n      pressedOriginalTransition = el.style.transition || '';\n      // Apply pressed style with inline styles for maximum specificity\n      el.style.transition = 'transform 80ms cubic-bezier(0.25, 0.1, 0.25, 1), opacity 80ms cubic-bezier(0.25, 0.1, 0.25, 1)';\n      el.style.transform = 'scale(0.97)';\n      el.style.opacity = '0.8';\n    }\n    \n    function applyReleasedStyle(el) {\n      if (!el || !el.style) return;\n      // Apply spring-back animation\n      el.style.transition = 'transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 280ms cubic-bezier(0.34, 1.56, 0.64, 1)';\n      el.style.transform = pressedOriginalTransform || 'scale(1)';\n      el.style.opacity = pressedOriginalOpacity || '1';\n    }\n    \n    function resetStyle(el) {\n      if (!el || !el.style) return;\n      el.style.transform = pressedOriginalTransform;\n      el.style.opacity = pressedOriginalOpacity;\n      el.style.transition = pressedOriginalTransition;\n    }\n    \n    function onTouchStart(e) {\n      try {\n        var target = findInteractive(e.target);\n        if (!target) return;\n        if (releaseTimer) { clearTimeout(releaseTimer); releaseTimer = null; }\n        if (pressed && pressed !== target) { resetStyle(pressed); }\n        applyPressedStyle(target);\n        pressed = target;\n      } catch(err) {}\n    }\n    \n    function onTouchEnd(e) {\n      try {\n        if (!pressed) return;\n        var t = pressed;\n        applyReleasedStyle(t);\n        releaseTimer = setTimeout(function() {\n          resetStyle(t);\n          releaseTimer = null;\n        }, 300);\n        pressed = null;\n      } catch(err) {}\n    }\n    \n    function onTouchCancel(e) {\n      try {\n        if (!pressed) return;\n        resetStyle(pressed);\n        pressed = null;\n        if (releaseTimer) { clearTimeout(releaseTimer); releaseTimer = null; }\n      } catch(err) {}\n    }\n    \n    // Use capture phase for immediate response before any other handlers\n    document.addEventListener('touchstart', onTouchStart, { passive: true, capture: true });\n    document.addEventListener('touchend', onTouchEnd, { passive: true, capture: true });\n    document.addEventListener('touchcancel', onTouchCancel, { passive: true, capture: true });\n    // Mouse events for testing\n    document.addEventListener('mousedown', onTouchStart, { passive: true, capture: true });\n    document.addEventListener('mouseup', onTouchEnd, { passive: true, capture: true });\n    \n  } catch (err) {}\n  true;\n})();\n";
 export type ScreenPayload = {
     id: string;
@@ -15,6 +16,7 @@ export declare function showRampkitOverlay(opts: {
     variables?: Record<string, any>;
     requiredScripts?: string[];
     rampkitContext?: RampKitContext;
+    navigation?: NavigationData;
     onClose?: () => void;
     onOnboardingFinished?: (payload?: any) => void;
     onShowPaywall?: (payload?: any) => void;
@@ -38,6 +40,7 @@ declare function Overlay(props: {
     variables?: Record<string, any>;
     requiredScripts?: string[];
     rampkitContext?: RampKitContext;
+    navigation?: NavigationData;
     prebuiltDocs?: string[];
     onRequestClose: () => void;
     onOnboardingFinished?: (payload?: any) => void;

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.injectedButtonAnimations = exports.injectedVarsHandler = exports.injectedNoSelect = exports.injectedHardening = void 0;
+exports.injectedButtonAnimations = exports.injectedDynamicTapHandler = exports.injectedVarsHandler = exports.injectedNoSelect = exports.injectedHardening = void 0;
 exports.showRampkitOverlay = showRampkitOverlay;
 exports.hideRampkitOverlay = hideRampkitOverlay;
 exports.closeRampkitOverlay = closeRampkitOverlay;
@@ -173,6 +173,201 @@ exports.injectedVarsHandler = `
   true;
 })();
 `;
+// Dynamic tap behavior handler - intercepts clicks and evaluates conditions
+// Must run BEFORE content loads to capture all clicks
+exports.injectedDynamicTapHandler = `
+(function() {
+    if (window.__rampkitClickInterceptorInstalled) return;
+    window.__rampkitClickInterceptorInstalled = true;
+    
+    // Decode HTML entities
+    function decodeHtml(str) {
+        if (!str) return str;
+        return str.replace(/"/g, '"').replace(/"/g, '"').replace(/"/g, '"')
+                  .replace(/'/g, "'").replace(/'/g, "'").replace(/'/g, "'")
+                  .replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&amp;/g, '&');
+    }
+    
+    // Find dynamic tap config on element or ancestors
+    function findDynamicTap(el) {
+        var current = el;
+        var depth = 0;
+        var attrNames = ['data-tap-dynamic', 'data-tapdynamic', 'tapDynamic', 'data-dynamic-tap'];
+        while (current && current !== document.body && current !== document.documentElement && depth < 20) {
+            if (current.getAttribute) {
+                for (var i = 0; i < attrNames.length; i++) {
+                    var attr = current.getAttribute(attrNames[i]);
+                    if (attr && attr.length > 2) {
+                        return { element: current, config: attr };
+                    }
+                }
+                if (current.dataset && current.dataset.tapDynamic) {
+                    return { element: current, config: current.dataset.tapDynamic };
+                }
+            }
+            current = current.parentElement;
+            depth++;
+        }
+        return null;
+    }
+    
+    // Get variables for condition evaluation - check ALL possible sources
+    function getVars() {
+        var vars = {};
+        if (window.__rampkitVariables) {
+            Object.keys(window.__rampkitVariables).forEach(function(k) {
+                vars[k] = window.__rampkitVariables[k];
+            });
+        }
+        if (window.__rampkitVars) {
+            Object.keys(window.__rampkitVars).forEach(function(k) {
+                vars[k] = window.__rampkitVars[k];
+            });
+        }
+        if (window.RK_VARS) {
+            Object.keys(window.RK_VARS).forEach(function(k) {
+                vars[k] = window.RK_VARS[k];
+            });
+        }
+        return vars;
+    }
+    
+    // Evaluate a single rule
+    function evalRule(rule, vars) {
+        if (!rule || !rule.key) return false;
+        var left = vars[rule.key];
+        var right = rule.value;
+        var op = rule.op || '=';
+        if (left === undefined || left === null) left = '';
+        if (right === undefined || right === null) right = '';
+        var leftStr = String(left);
+        var rightStr = String(right);
+        var result = false;
+        switch (op) {
+            case '=': case '==': result = leftStr === rightStr; break;
+            case '!=': case '<>': result = leftStr !== rightStr; break;
+            case '>': result = parseFloat(left) > parseFloat(right); break;
+            case '<': result = parseFloat(left) < parseFloat(right); break;
+            case '>=': result = parseFloat(left) >= parseFloat(right); break;
+            case '<=': result = parseFloat(left) <= parseFloat(right); break;
+            default: result = false;
+        }
+        return result;
+    }
+    
+    // Evaluate all rules (AND logic)
+    function evalRules(rules, vars) {
+        if (!rules || !rules.length) return true;
+        for (var i = 0; i < rules.length; i++) {
+            if (!evalRule(rules[i], vars)) return false;
+        }
+        return true;
+    }
+    
+    // Execute an action
+    function execAction(action) {
+        if (!action || !action.type) return;
+        var msg = null;
+        var actionType = action.type.toLowerCase();
+        
+        switch (actionType) {
+            case 'navigate':
+                msg = { type: 'rampkit:navigate', targetScreenId: action.targetScreenId || '__continue__', animation: action.animation || 'fade' };
+                break;
+            case 'continue':
+                msg = { type: 'rampkit:navigate', targetScreenId: '__continue__', animation: action.animation || 'fade' };
+                break;
+            case 'goback':
+                msg = { type: 'rampkit:goBack', animation: action.animation || 'fade' };
+                break;
+            case 'close':
+                msg = { type: 'rampkit:close' };
+                break;
+            case 'haptic':
+                msg = { type: 'rampkit:haptic', hapticType: action.hapticType || 'impact', impactStyle: action.impactStyle || 'Medium', notificationType: action.notificationType };
+                break;
+            case 'showpaywall':
+                msg = { type: 'rampkit:show-paywall', payload: action.payload || { paywallId: action.paywallId } };
+                break;
+            case 'requestreview':
+                msg = { type: 'rampkit:request-review' };
+                break;
+            case 'requestnotificationpermission':
+                msg = { type: 'rampkit:request-notification-permission' };
+                break;
+            case 'onboardingfinished':
+                msg = { type: 'rampkit:onboarding-finished', payload: action.payload };
+                break;
+            case 'setvariable':
+            case 'setstate':
+            case 'updatevariable':
+            case 'set':
+            case 'assign':
+                var varKey = action.key || action.variableName || action.name || action.variable;
+                var varValue = action.variableValue !== undefined ? action.variableValue :
+                               action.value !== undefined ? action.value :
+                               action.newValue !== undefined ? action.newValue : undefined;
+                if (varKey && varValue !== undefined) {
+                    if (window.__rampkitVariables) window.__rampkitVariables[varKey] = varValue;
+                    if (window.__rampkitVars) window.__rampkitVars[varKey] = varValue;
+                    var updateVars = {};
+                    updateVars[varKey] = varValue;
+                    msg = { type: 'rampkit:variables', vars: updateVars };
+                }
+                break;
+        }
+        if (msg) {
+            try {
+                if (window.ReactNativeWebView && window.ReactNativeWebView.postMessage) {
+                    window.ReactNativeWebView.postMessage(JSON.stringify(msg));
+                }
+            } catch(e) {}
+        }
+    }
+    
+    // Evaluate dynamic tap config
+    function evalDynamicTap(config) {
+        if (!config || !config.values) return false;
+        var vars = getVars();
+        var conditions = config.values;
+        for (var i = 0; i < conditions.length; i++) {
+            var cond = conditions[i];
+            var condType = cond.conditionType || 'if';
+            var rules = cond.rules || [];
+            var actions = cond.actions || [];
+            if (condType === 'else' || evalRules(rules, vars)) {
+                for (var j = 0; j < actions.length; j++) {
+                    execAction(actions[j]);
+                }
+                return true;
+            }
+        }
+        return false;
+    }
+    
+    // Click interceptor - capture phase, runs BEFORE onclick handlers
+    function interceptClick(event) {
+        var result = findDynamicTap(event.target);
+        if (!result) return;
+        
+        try {
+            var configStr = decodeHtml(result.config);
+            var config = JSON.parse(configStr);
+            var handled = evalDynamicTap(config);
+            if (handled) {
+                event.stopImmediatePropagation();
+                event.preventDefault();
+                return false;
+            }
+        } catch (e) {
+            console.log('[RampKit] Dynamic tap error:', e);
+        }
+    }
+    
+    // Install interceptor on window in capture phase
+    window.addEventListener('click', interceptClick, true);
+})();
+`;
 // Button tap animation script - handles spring animations for interactive elements
 // Triggers on touchstart (not click) for immediate feedback
 // Uses inline styles for maximum compatibility
@@ -319,7 +514,7 @@ exports.injectedButtonAnimations = `
 })();
 `;
 function performRampkitHaptic(event) {
-    if (!event || event.action !== "haptic") {
+    if (!event) {
         // Backwards compatible default
         try {
             RampKitNative_1.Haptics.impactAsync("medium").catch(() => { });
@@ -327,7 +522,8 @@ function performRampkitHaptic(event) {
         catch (_) { }
         return;
     }
-    const hapticType = event.hapticType;
+    // Accept messages with action: "haptic" OR just type: "rampkit:haptic"
+    const hapticType = event.hapticType || "impact";
     try {
         if (hapticType === "impact") {
             const styleMap = {
@@ -376,7 +572,7 @@ function showRampkitOverlay(opts) {
         return; // already visible
     // Always build fresh docs to ensure templates are resolved with current context
     const prebuiltDocs = undefined;
-    sibling = new react_native_root_siblings_1.default(((0, jsx_runtime_1.jsx)(Overlay, { onboardingId: opts.onboardingId, screens: opts.screens, variables: opts.variables, requiredScripts: opts.requiredScripts, rampkitContext: opts.rampkitContext, prebuiltDocs: prebuiltDocs, onRequestClose: () => {
+    sibling = new react_native_root_siblings_1.default(((0, jsx_runtime_1.jsx)(Overlay, { onboardingId: opts.onboardingId, screens: opts.screens, variables: opts.variables, requiredScripts: opts.requiredScripts, rampkitContext: opts.rampkitContext, navigation: opts.navigation, prebuiltDocs: prebuiltDocs, onRequestClose: () => {
             var _a;
             activeCloseHandler = null;
             hideRampkitOverlay();
@@ -829,6 +1025,133 @@ function Overlay(props) {
     const lastVarsSendTimeRef = (0, react_1.useRef)([]);
     // Stale value window in milliseconds - matches iOS SDK (600ms)
     const STALE_VALUE_WINDOW_MS = 600;
+    // ============================================================================
+    // Navigation Resolution Helpers (matches iOS SDK behavior)
+    // ============================================================================
+    /**
+     * Resolve `__continue__` to the actual target screen ID using navigation data
+     * @param fromScreenId - The current screen ID
+     * @returns The target screen ID, or null if at the end of the flow or should use fallback
+     */
+    const resolveContinue = (fromScreenId) => {
+        const navigation = props.navigation;
+        // If no navigation data, fall back to array order
+        if (!(navigation === null || navigation === void 0 ? void 0 : navigation.mainFlow) || navigation.mainFlow.length === 0) {
+            console.log("[RampKit] 🧭 No navigation.mainFlow, using array order for __continue__");
+            return null; // Will use fallback
+        }
+        const { mainFlow, screenPositions } = navigation;
+        // Check if current screen is in the main flow
+        const currentFlowIndex = mainFlow.indexOf(fromScreenId);
+        if (currentFlowIndex !== -1) {
+            // Navigate to next screen in main flow
+            const nextFlowIndex = currentFlowIndex + 1;
+            if (nextFlowIndex < mainFlow.length) {
+                const nextScreenId = mainFlow[nextFlowIndex];
+                console.log(`[RampKit] 🧭 __continue__ resolved via mainFlow: ${fromScreenId} → ${nextScreenId} (flow index ${currentFlowIndex} → ${nextFlowIndex})`);
+                return nextScreenId;
+            }
+            else {
+                console.log(`[RampKit] 🧭 __continue__: at end of mainFlow (index ${currentFlowIndex})`);
+                return null;
+            }
+        }
+        // Current screen is NOT in mainFlow (it's a variant screen)
+        // Find the appropriate next main screen based on X position
+        if (screenPositions) {
+            const currentPosition = screenPositions[fromScreenId];
+            if (currentPosition) {
+                console.log(`[RampKit] 🧭 Current screen '${fromScreenId}' is a variant (row: ${currentPosition.row}, x: ${currentPosition.x})`);
+                // Find the main flow screen that comes AFTER this X position
+                // (the screen with the smallest X that is > currentPosition.x)
+                let bestCandidate = null;
+                for (const mainScreenId of mainFlow) {
+                    const mainPos = screenPositions[mainScreenId];
+                    if (mainPos && mainPos.x > currentPosition.x) {
+                        if (!bestCandidate || mainPos.x < bestCandidate.x) {
+                            bestCandidate = { screenId: mainScreenId, x: mainPos.x };
+                        }
+                    }
+                }
+                if (bestCandidate) {
+                    console.log(`[RampKit] 🧭 __continue__ from variant: ${fromScreenId} → ${bestCandidate.screenId} (next main screen at x:${bestCandidate.x})`);
+                    return bestCandidate.screenId;
+                }
+                else {
+                    console.log("[RampKit] 🧭 __continue__ from variant: no main screen to the right, end of flow");
+                    return null;
+                }
+            }
+        }
+        // Position data not available for current screen, fall back to array
+        console.log(`[RampKit] 🧭 Screen '${fromScreenId}' not found in positions, using array fallback`);
+        return null;
+    };
+    /**
+     * Resolve `__goBack__` to the actual target screen ID using navigation data
+     * @param fromScreenId - The current screen ID
+     * @returns The target screen ID, or null if at the start of the flow or should use fallback
+     */
+    const resolveGoBack = (fromScreenId) => {
+        const navigation = props.navigation;
+        // If no navigation data, fall back to array order
+        if (!(navigation === null || navigation === void 0 ? void 0 : navigation.mainFlow) || navigation.mainFlow.length === 0) {
+            console.log("[RampKit] 🧭 No navigation.mainFlow, using array order for __goBack__");
+            return null; // Will use fallback
+        }
+        const { mainFlow, screenPositions } = navigation;
+        // Check if current screen is in the main flow
+        const currentFlowIndex = mainFlow.indexOf(fromScreenId);
+        if (currentFlowIndex !== -1) {
+            // Navigate to previous screen in main flow
+            const prevFlowIndex = currentFlowIndex - 1;
+            if (prevFlowIndex >= 0) {
+                const prevScreenId = mainFlow[prevFlowIndex];
+                console.log(`[RampKit] 🧭 __goBack__ resolved via mainFlow: ${fromScreenId} → ${prevScreenId} (flow index ${currentFlowIndex} → ${prevFlowIndex})`);
+                return prevScreenId;
+            }
+            else {
+                console.log(`[RampKit] 🧭 __goBack__: at start of mainFlow (index ${currentFlowIndex})`);
+                return null;
+            }
+        }
+        // Current screen is NOT in mainFlow (it's a variant screen)
+        // Go back to the main flow screen at or before this X position
+        if (screenPositions) {
+            const currentPosition = screenPositions[fromScreenId];
+            if (currentPosition) {
+                console.log(`[RampKit] 🧭 Current screen '${fromScreenId}' is a variant (row: ${currentPosition.row}, x: ${currentPosition.x})`);
+                // Find the main flow screen that is at or before this X position
+                // (the screen with the largest X that is <= currentPosition.x)
+                let bestCandidate = null;
+                for (const mainScreenId of mainFlow) {
+                    const mainPos = screenPositions[mainScreenId];
+                    if (mainPos && mainPos.x <= currentPosition.x) {
+                        if (!bestCandidate || mainPos.x > bestCandidate.x) {
+                            bestCandidate = { screenId: mainScreenId, x: mainPos.x };
+                        }
+                    }
+                }
+                if (bestCandidate) {
+                    console.log(`[RampKit] 🧭 __goBack__ from variant: ${fromScreenId} → ${bestCandidate.screenId} (main screen at x:${bestCandidate.x})`);
+                    return bestCandidate.screenId;
+                }
+                else {
+                    console.log("[RampKit] 🧭 __goBack__ from variant: no main screen to the left, start of flow");
+                    return null;
+                }
+            }
+        }
+        // Position data not available for current screen, fall back to array
+        console.log(`[RampKit] 🧭 Screen '${fromScreenId}' not found in positions, using array fallback`);
+        return null;
+    };
+    /**
+     * Get the screen index for a given screen ID
+     */
+    const getScreenIndex = (screenId) => {
+        return props.screens.findIndex((s) => s.id === screenId);
+    };
     // Fade-in when overlay becomes visible
     react_1.default.useEffect(() => {
         if (visible && !isClosing) {
@@ -1021,6 +1344,57 @@ function Overlay(props) {
       }
     })();`;
     }
+    // Build a script that updates the onboarding state
+    // This calls window.__rampkitUpdateOnboarding(index, screenId) to update
+    // onboarding.currentIndex, onboarding.progress, etc.
+    function buildOnboardingStateScript(screenIndex, screenId, totalScreens) {
+        return `(function() {
+      try {
+        // Set total screens global
+        window.RK_TOTAL_SCREENS = ${totalScreens};
+        
+        // Call the update function if it exists
+        if (typeof window.__rampkitUpdateOnboarding === 'function') {
+          window.__rampkitUpdateOnboarding(${screenIndex}, '${screenId}');
+          console.log('[RampKit] Called __rampkitUpdateOnboarding(${screenIndex}, ${screenId})');
+        }
+        
+        // Also dispatch a message event for any listeners
+        var payload = {
+          type: 'rampkit:onboarding-state',
+          currentIndex: ${screenIndex},
+          screenId: '${screenId}',
+          totalScreens: ${totalScreens}
+        };
+        
+        try {
+          document.dispatchEvent(new MessageEvent('message', { data: payload }));
+        } catch(e) {}
+        
+        // Also dispatch custom event
+        try {
+          document.dispatchEvent(new CustomEvent('rampkit:onboarding-state', { detail: payload }));
+        } catch(e) {}
+        
+      } catch(e) {
+        console.log('[RampKit] sendOnboardingState error:', e);
+      }
+    })();`;
+    }
+    // Send onboarding state to a WebView
+    function sendOnboardingStateToWebView(i) {
+        var _a;
+        const wv = webviewsRef.current[i];
+        if (!wv)
+            return;
+        const screenId = ((_a = props.screens[i]) === null || _a === void 0 ? void 0 : _a.id) || '';
+        const totalScreens = props.screens.length;
+        if (__DEV__) {
+            console.log("[Rampkit] sendOnboardingStateToWebView", i, { screenId, totalScreens });
+        }
+        // @ts-ignore: injectJavaScript exists on WebView instance
+        wv.injectJavaScript(buildOnboardingStateScript(i, screenId, totalScreens));
+    }
     function sendVarsToWebView(i, isInitialLoad = false) {
         const wv = webviewsRef.current[i];
         if (!wv)
@@ -1034,6 +1408,8 @@ function Overlay(props) {
         // This is more reliable as it doesn't depend on event listeners being set up
         // @ts-ignore: injectJavaScript exists on WebView instance
         wv.injectJavaScript(buildDirectVarsScript(varsRef.current));
+        // Also send onboarding state so templates like ${onboarding.progress} are resolved
+        sendOnboardingStateToWebView(i);
     }
     /**
      * Broadcast variables to all WebViews, optionally excluding one.
@@ -1130,8 +1506,24 @@ function Overlay(props) {
         }
     };
     const handleAdvance = (i, animation = "fade") => {
+        var _a;
+        const currentScreenId = (_a = props.screens[i]) === null || _a === void 0 ? void 0 : _a.id;
+        // Try to resolve using navigation data
+        if (currentScreenId) {
+            const resolvedId = resolveContinue(currentScreenId);
+            if (resolvedId) {
+                const targetIndex = getScreenIndex(resolvedId);
+                if (targetIndex >= 0 && targetIndex < props.screens.length) {
+                    navigateToIndex(targetIndex, animation);
+                    RampKitNative_1.Haptics.impactAsync("light").catch(() => { });
+                    return;
+                }
+            }
+        }
+        // Fallback to array order
         const last = props.screens.length - 1;
         if (i < last) {
+            console.log(`[RampKit] 🧭 __continue__ fallback to array index ${i + 1}`);
             navigateToIndex(i + 1, animation);
             RampKitNative_1.Haptics.impactAsync("light").catch(() => { });
         }
@@ -1142,6 +1534,29 @@ function Overlay(props) {
             handleRequestClose({ completed: true });
         }
     };
+    const handleGoBack = (i, animation = "fade") => {
+        var _a;
+        const currentScreenId = (_a = props.screens[i]) === null || _a === void 0 ? void 0 : _a.id;
+        // Try to resolve using navigation data
+        if (currentScreenId) {
+            const resolvedId = resolveGoBack(currentScreenId);
+            if (resolvedId) {
+                const targetIndex = getScreenIndex(resolvedId);
+                if (targetIndex >= 0 && targetIndex < props.screens.length) {
+                    navigateToIndex(targetIndex, animation);
+                    return;
+                }
+            }
+        }
+        // Fallback to array order
+        if (i > 0) {
+            console.log(`[RampKit] 🧭 __goBack__ fallback to array index ${i - 1}`);
+            navigateToIndex(i - 1, animation);
+        }
+        else {
+            handleRequestClose();
+        }
+    };
     async function handleNotificationPermissionRequest(payload) {
         var _a, _b;
         // Track that notification permission was requested
@@ -1210,7 +1625,7 @@ function Overlay(props) {
                         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 + 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: () => {
+                ], 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: () => {
                                 setLoadedCount((c) => c + 1);
                                 if (i === 0) {
                                     setFirstPageLoaded(true);
@@ -1284,6 +1699,9 @@ function Overlay(props) {
                                             // This prevents echo loops and matches iOS SDK behavior
                                             broadcastVars(i);
                                         }
+                                        // CRITICAL: Also send merged vars BACK to source page
+                                        // This ensures window.__rampkitVariables is updated for dynamic tap evaluation
+                                        sendVarsToWebView(i);
                                         return;
                                     }
                                     // 2) A page asked for current vars → send only to that page
@@ -1342,12 +1760,7 @@ function Overlay(props) {
                                     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();
-                                            }
+                                            handleGoBack(i, (data === null || data === void 0 ? void 0 : data.animation) || "fade");
                                             return;
                                         }
                                         if (!target || target === "__continue__") {
@@ -1364,12 +1777,7 @@ function Overlay(props) {
                                         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");
-                                        }
-                                        else {
-                                            handleRequestClose();
-                                        }
+                                        handleGoBack(i, (data === null || data === void 0 ? void 0 : data.animation) || "fade");
                                         return;
                                     }
                                     if ((data === null || data === void 0 ? void 0 : data.type) === "rampkit:close") {
@@ -1422,23 +1830,13 @@ function Overlay(props) {
                                         return;
                                     }
                                     if (raw === "rampkit:goBack") {
-                                        if (i > 0) {
-                                            navigateToIndex(i - 1);
-                                        }
-                                        else {
-                                            handleRequestClose();
-                                        }
+                                        handleGoBack(i);
                                         return;
                                     }
                                     if (raw.startsWith("rampkit:navigate:")) {
                                         const target = raw.slice("rampkit:navigate:".length);
                                         if (target === "__goBack__") {
-                                            if (i > 0) {
-                                                navigateToIndex(i - 1);
-                                            }
-                                            else {
-                                                handleRequestClose();
-                                            }
+                                            handleGoBack(i);
                                             return;
                                         }
                                         if (!target || target === "__continue__") {

package/build/index.d.ts

@@ -11,5 +11,5 @@ export { default as RampKitNative } from "./RampKitNative";
 export type { NativeDeviceInfo, NativeLaunchData } from "./RampKitNative";
 export { Haptics, StoreReview, Notifications, TransactionObserver } from "./RampKitNative";
 export type { ImpactStyle, NotificationType, NotificationOptions, NotificationPermissionResult } from "./RampKitNative";
-export type { DeviceInfo, RampKitEvent, EventDevice, EventContext, RampKitConfig, RampKitEventName, RampKitContext, RampKitDeviceContext, RampKitUserContext, AppSessionStartedProperties, AppSessionEndedProperties, AppBackgroundedProperties, AppForegroundedProperties, OnboardingStartedProperties, OnboardingScreenViewedProperties, OnboardingQuestionAnsweredProperties, OnboardingCompletedProperties, OnboardingAbandonedProperties, ScreenViewProperties, CtaTapProperties, NotificationsPromptShownProperties, NotificationsResponseProperties, PaywallShownProperties, PaywallPrimaryActionTapProperties, PaywallClosedProperties, PurchaseStartedProperties, PurchaseCompletedProperties, PurchaseFailedProperties, } from "./types";
+export type { DeviceInfo, RampKitEvent, EventDevice, EventContext, RampKitConfig, RampKitEventName, RampKitContext, RampKitDeviceContext, RampKitUserContext, NavigationData, ScreenPosition, AppSessionStartedProperties, AppSessionEndedProperties, AppBackgroundedProperties, AppForegroundedProperties, OnboardingStartedProperties, OnboardingScreenViewedProperties, OnboardingQuestionAnsweredProperties, OnboardingCompletedProperties, OnboardingAbandonedProperties, ScreenViewProperties, CtaTapProperties, NotificationsPromptShownProperties, NotificationsResponseProperties, PaywallShownProperties, PaywallPrimaryActionTapProperties, PaywallClosedProperties, PurchaseStartedProperties, PurchaseCompletedProperties, PurchaseFailedProperties, } from "./types";
 export { SDK_VERSION, CAPABILITIES } from "./constants";

package/build/types.d.ts

@@ -229,3 +229,24 @@ export interface RampKitContext {
     device: RampKitDeviceContext;
     user: RampKitUserContext;
 }
+/**
+ * Navigation data structure from the editor's spatial layout
+ * This is exported alongside screens to enable proper navigation resolution
+ */
+export interface NavigationData {
+    /** Ordered array of screen IDs in the main flow (sorted by X position, main row only) */
+    mainFlow: string[];
+    /** Map of screen ID to position information */
+    screenPositions?: Record<string, ScreenPosition>;
+}
+/**
+ * Position information for a screen in the editor canvas
+ */
+export interface ScreenPosition {
+    /** X coordinate in the editor canvas */
+    x: number;
+    /** Y coordinate in the editor canvas */
+    y: number;
+    /** Row classification: "main" for main row screens, "variant" for screens below */
+    row: "main" | "variant";
+}

package/ios/RampKitModule.swift

@@ -458,63 +458,86 @@ public class RampKitModule: Module {
   @available(iOS 15.0, *)
   private func handleTransaction(_ transaction: Transaction) async {
     guard let appId = self.appId, let userId = self.userId else { return }
-    
-    // Determine event type based on transaction
+
+    let formatter = ISO8601DateFormatter()
+    formatter.formatOptions = [.withInternetDateTime, .withFractionalSeconds]
+
+    // Determine event type based on transaction (matching iOS SDK logic)
     let eventName: String
     var properties: [String: Any] = [:]
-    
-    switch transaction.revocationReason {
-    case .some(let reason):
-      eventName = "purchase_refunded"
-      properties["revocationReason"] = reason == .developerIssue ? "developer_issue" : "other"
-    case .none:
-      if transaction.isUpgraded {
-        eventName = "subscription_upgraded"
-      } else {
-        // Determine event based on product type
-        let productType = transaction.productType
-        if productType == .autoRenewable {
-          if transaction.originalID == transaction.id {
-            eventName = "purchase_completed"
-          } else {
-            eventName = "subscription_renewed"
-          }
-        } else {
-          eventName = "purchase_completed"
-        }
+
+    // Check revocation first (subscription_canceled)
+    if transaction.revocationDate != nil {
+      eventName = "subscription_canceled"
+      if let reason = transaction.revocationReason {
+        properties["revocationReason"] = reason == .developerIssue ? "developerIssue" : "other"
       }
+      properties["revocationDate"] = transaction.revocationDate.map { formatter.string(from: $0) }
     }
-    
-    // Build properties
+    // Check if this is a renewal (originalID != id)
+    else if transaction.originalID != transaction.id {
+      eventName = "subscription_renewed"
+    }
+    // Check if it's a trial or intro offer
+    else if let offerType = transaction.offerType, offerType == .introductory {
+      eventName = "trial_started"
+    }
+    // Default to purchase_completed
+    else {
+      eventName = "purchase_completed"
+    }
+
+    // Build properties (matching iOS SDK PurchaseEventDetails)
     properties["productId"] = transaction.productID
     properties["transactionId"] = String(transaction.id)
     properties["originalTransactionId"] = String(transaction.originalID)
-    properties["purchaseDate"] = ISO8601DateFormatter().string(from: transaction.purchaseDate)
-    
-    if let expirationDate = transaction.expirationDate {
-      properties["expirationDate"] = ISO8601DateFormatter().string(from: expirationDate)
-    }
-    
+    properties["purchaseDate"] = formatter.string(from: transaction.purchaseDate)
     properties["quantity"] = transaction.purchasedQuantity
     properties["productType"] = mapProductType(transaction.productType)
-    
-    // environment property is only available in iOS 16.0+
-    if #available(iOS 16.0, *) {
-      properties["environment"] = transaction.environment.rawValue
+
+    // Expiration date
+    if let expirationDate = transaction.expirationDate {
+      properties["expirationDate"] = formatter.string(from: expirationDate)
     }
-    
+
+    // Trial/intro offer detection
+    if let offerType = transaction.offerType {
+      properties["isTrial"] = offerType == .introductory
+      properties["isIntroOffer"] = offerType == .introductory
+      properties["offerType"] = formatOfferType(offerType)
+    }
+
+    // Offer ID
+    if let offerId = transaction.offerID {
+      properties["offerId"] = offerId
+    }
+
+    // Storefront country
+    properties["storefront"] = transaction.storefrontCountryCode
+
+    // Web order line item ID
     if let webOrderLineItemID = transaction.webOrderLineItemID {
       properties["webOrderLineItemId"] = webOrderLineItemID
     }
-    
+
+    // Environment (iOS 16+)
+    if #available(iOS 16.0, *) {
+      properties["environment"] = transaction.environment.rawValue
+    }
+
     // Get price info from product if available
     if let product = await getProduct(for: transaction.productID) {
-      properties["price"] = product.price
+      properties["amount"] = product.price
       properties["currency"] = product.priceFormatStyle.currencyCode
-      properties["localizedPrice"] = product.displayPrice
-      properties["localizedName"] = product.displayName
+      properties["priceFormatted"] = product.displayPrice
+
+      // Subscription-specific info
+      if let subscription = product.subscription {
+        properties["subscriptionPeriod"] = formatSubscriptionPeriod(subscription.subscriptionPeriod)
+        properties["subscriptionGroupId"] = subscription.subscriptionGroupID
+      }
     }
-    
+
     // Send event to backend
     await sendPurchaseEvent(
       appId: appId,
@@ -523,6 +546,36 @@ public class RampKitModule: Module {
       properties: properties
     )
   }
+
+  @available(iOS 15.0, *)
+  private func formatOfferType(_ offerType: Transaction.OfferType) -> String {
+    if offerType == .introductory {
+      return "introductory"
+    } else if offerType == .promotional {
+      return "promotional"
+    } else if offerType == .code {
+      return "code"
+    } else {
+      return "unknown"
+    }
+  }
+
+  @available(iOS 15.0, *)
+  private func formatSubscriptionPeriod(_ period: Product.SubscriptionPeriod) -> String {
+    // ISO 8601 duration format
+    let unit = period.unit
+    if unit == .day {
+      return "P\(period.value)D"
+    } else if unit == .week {
+      return "P\(period.value)W"
+    } else if unit == .month {
+      return "P\(period.value)M"
+    } else if unit == .year {
+      return "P\(period.value)Y"
+    } else {
+      return "P\(period.value)D"
+    }
+  }
   
   @available(iOS 15.0, *)
   private func getProduct(for productId: String) async -> Product? {

package/package.json

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