rampkit-expo-dev 0.0.74 → 0.0.76

package/build/RampkitOverlay.js

@@ -1002,6 +1002,8 @@ ${js}
 const SLIDE_FADE_OFFSET = 200;
 const SLIDE_FADE_DURATION = 320;
 function Overlay(props) {
+    // Get explicit window dimensions to prevent flex-based layout recalculations during transitions
+    const { width: windowWidth, height: windowHeight } = (0, react_native_1.useWindowDimensions)();
     const pagerRef = (0, react_1.useRef)(null);
     const [index, setIndex] = (0, react_1.useState)(0);
     const [loadedCount, setLoadedCount] = (0, react_1.useState)(0);
@@ -1627,7 +1629,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.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: () => {
+                ], 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: { width: windowWidth, height: windowHeight }, renderToHardwareTextureAndroid: true, children: (0, jsx_runtime_1.jsx)(react_native_webview_1.WebView, { ref: (r) => (webviewsRef.current[i] = r), style: { width: windowWidth, height: windowHeight }, 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__)
@@ -1648,10 +1650,14 @@ function Overlay(props) {
                                 if (__DEV__)
                                     console.log("[Rampkit] onLoadEnd initializing screen", i);
                                 sendVarsToWebView(i, true);
-                                // Only send onboarding state to the ACTIVE screen (index 0 on initial load)
-                                if (i === activeScreenIndexRef.current) {
-                                    sendOnboardingStateToWebView(i);
-                                }
+                                // Send onboarding state to ALL screens during initial load (matching iOS SDK behavior).
+                                // This prevents a visual glitch where content shifts on first navigation to each screen.
+                                // Previously, we only sent state to the active screen (screen 0), which meant screens 1, 2, etc.
+                                // received their onboarding state for the first time during navigation - causing DOM updates
+                                // and layout shifts visible during the transition animation.
+                                // By sending state to all screens upfront, the DOM is already in its final state
+                                // before any navigation occurs.
+                                sendOnboardingStateToWebView(i);
                             }, onMessage: (ev) => {
                                 var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
                                 const raw = ev.nativeEvent.data;

package/package.json

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