rampkit-expo-dev 0.0.79 → 0.0.81

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/build/RampkitOverlay.js +107 -13
  2. package/package.json +1 -1
package/build/RampkitOverlay.js CHANGED
@@ -1077,7 +1077,7 @@ function Overlay(props) {
1077
1077
  // Clear the queue
1078
1078
  pendingActionsRef.current[screenIndex] = [];
1079
1079
  };
1080
- // Activate a screen (set visibility flag and dispatch event)
1080
+ // Activate a screen (set visibility flag, dispatch event, and resume Lotties)
1081
1081
  const activateScreen = (screenIndex) => {
1082
1082
  var _a;
1083
1083
  const wv = webviewsRef.current[screenIndex];
@@ -1092,6 +1092,24 @@ function Overlay(props) {
1092
1092
  window.__rampkitScreenIndex = ${screenIndex};
1093
1093
  console.log('🔓 Screen ${screenIndex} ACTIVATED');
1094
1094
 
1095
+ // Resume all Lottie animations
1096
+ try {
1097
+ // lottie-web global API
1098
+ if (typeof lottie !== 'undefined' && lottie.play) {
1099
+ lottie.play();
1100
+ }
1101
+ // dotLottie players
1102
+ document.querySelectorAll('dotlottie-player, lottie-player').forEach(function(el) {
1103
+ if (el.play) el.play();
1104
+ });
1105
+ // lottie-web individual animations stored on window
1106
+ if (window.__rampkitLottieAnimations) {
1107
+ window.__rampkitLottieAnimations.forEach(function(anim) {
1108
+ if (anim && anim.play) anim.play();
1109
+ });
1110
+ }
1111
+ } catch(e) { console.log('Lottie play error:', e); }
1112
+
1095
1113
  // Dispatch custom event that HTML can listen to
1096
1114
  try {
1097
1115
  document.dispatchEvent(new CustomEvent('rampkit:screen-visible', {
@@ -1104,7 +1122,7 @@ function Overlay(props) {
1104
1122
  // Process any pending actions for this screen
1105
1123
  processPendingActions(screenIndex);
1106
1124
  };
1107
- // Deactivate a screen (clear visibility flag)
1125
+ // Deactivate a screen (clear visibility flag and pause Lotties)
1108
1126
  const deactivateScreen = (screenIndex) => {
1109
1127
  const wv = webviewsRef.current[screenIndex];
1110
1128
  if (!wv)
@@ -1115,6 +1133,24 @@ function Overlay(props) {
1115
1133
  const deactivateScript = `(function() {
1116
1134
  window.__rampkitScreenVisible = false;
1117
1135
  console.log('🔒 Screen ${screenIndex} DEACTIVATED');
1136
+
1137
+ // Pause all Lottie animations
1138
+ try {
1139
+ // lottie-web global API
1140
+ if (typeof lottie !== 'undefined' && lottie.pause) {
1141
+ lottie.pause();
1142
+ }
1143
+ // dotLottie players
1144
+ document.querySelectorAll('dotlottie-player, lottie-player').forEach(function(el) {
1145
+ if (el.pause) el.pause();
1146
+ });
1147
+ // lottie-web individual animations stored on window
1148
+ if (window.__rampkitLottieAnimations) {
1149
+ window.__rampkitLottieAnimations.forEach(function(anim) {
1150
+ if (anim && anim.pause) anim.pause();
1151
+ });
1152
+ }
1153
+ } catch(e) { console.log('Lottie pause error:', e); }
1118
1154
  })();`;
1119
1155
  // @ts-ignore: injectJavaScript exists on WebView instance
1120
1156
  wv.injectJavaScript(deactivateScript);
@@ -1322,26 +1358,26 @@ function Overlay(props) {
1322
1358
  const nextScreenAnim = screenAnims[nextIndex];
1323
1359
  const isForward = nextIndex > index;
1324
1360
  const direction = isForward ? 1 : -1;
1325
- // Slide animation: animate both screens simultaneously
1361
+ // Slide animation: animate both screens simultaneously using full screen width
1326
1362
  if (animationType === "slide") {
1327
1363
  setIsTransitioning(true);
1328
- // Set up next screen starting position (offscreen in direction of navigation)
1329
- nextScreenAnim.translateX.setValue(SLIDE_FADE_OFFSET * direction);
1364
+ // Set up next screen starting position (fully offscreen in direction of navigation)
1365
+ nextScreenAnim.translateX.setValue(windowWidth * direction);
1330
1366
  nextScreenAnim.opacity.setValue(1);
1331
- // Animate both screens
1367
+ // Animate both screens with smooth slide
1332
1368
  react_native_1.Animated.parallel([
1333
- // Current screen slides out
1369
+ // Current screen slides out (to the opposite side)
1334
1370
  react_native_1.Animated.timing(currentScreenAnim.translateX, {
1335
- toValue: -SLIDE_FADE_OFFSET * direction,
1336
- duration: SLIDE_FADE_DURATION,
1337
- easing: react_native_1.Easing.out(react_native_1.Easing.ease),
1371
+ toValue: -windowWidth * direction,
1372
+ duration: 300,
1373
+ easing: react_native_1.Easing.out(react_native_1.Easing.cubic),
1338
1374
  useNativeDriver: true,
1339
1375
  }),
1340
- // Next screen slides in
1376
+ // Next screen slides in (from offscreen to center)
1341
1377
  react_native_1.Animated.timing(nextScreenAnim.translateX, {
1342
1378
  toValue: 0,
1343
- duration: SLIDE_FADE_DURATION,
1344
- easing: react_native_1.Easing.out(react_native_1.Easing.ease),
1379
+ duration: 300,
1380
+ easing: react_native_1.Easing.out(react_native_1.Easing.cubic),
1345
1381
  useNativeDriver: true,
1346
1382
  }),
1347
1383
  ]).start(() => {
@@ -1758,6 +1794,28 @@ function Overlay(props) {
1758
1794
  if (i === 0) {
1759
1795
  activateScreen(i);
1760
1796
  }
1797
+ else {
1798
+ // For non-active screens, pause Lotties immediately after load
1799
+ // (they may have auto-started during page render)
1800
+ const wv = webviewsRef.current[i];
1801
+ if (wv) {
1802
+ const pauseLottiesScript = `(function() {
1803
+ try {
1804
+ if (typeof lottie !== 'undefined' && lottie.pause) lottie.pause();
1805
+ document.querySelectorAll('dotlottie-player, lottie-player').forEach(function(el) {
1806
+ if (el.pause) el.pause();
1807
+ });
1808
+ if (window.__rampkitLottieAnimations) {
1809
+ window.__rampkitLottieAnimations.forEach(function(anim) {
1810
+ if (anim && anim.pause) anim.pause();
1811
+ });
1812
+ }
1813
+ } catch(e) {}
1814
+ })();`;
1815
+ // @ts-ignore
1816
+ wv.injectJavaScript(pauseLottiesScript);
1817
+ }
1818
+ }
1761
1819
  }, onMessage: (ev) => {
1762
1820
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
1763
1821
  const raw = ev.nativeEvent.data;
@@ -1918,10 +1976,22 @@ function Overlay(props) {
1918
1976
  }
1919
1977
  if ((data === null || data === void 0 ? void 0 : data.type) === "rampkit:continue" ||
1920
1978
  (data === null || data === void 0 ? void 0 : data.type) === "continue") {
1979
+ // Only process continue from the active screen
1980
+ if (!isScreenActive(i)) {
1981
+ if (__DEV__)
1982
+ console.log(`[RampKit] Ignoring continue from inactive screen ${i}`);
1983
+ return;
1984
+ }
1921
1985
  handleAdvance(i, (data === null || data === void 0 ? void 0 : data.animation) || "fade");
1922
1986
  return;
1923
1987
  }
1924
1988
  if ((data === null || data === void 0 ? void 0 : data.type) === "rampkit:navigate") {
1989
+ // Only process navigate from the active screen
1990
+ if (!isScreenActive(i)) {
1991
+ if (__DEV__)
1992
+ console.log(`[RampKit] Ignoring navigate from inactive screen ${i}`);
1993
+ return;
1994
+ }
1925
1995
  const target = data === null || data === void 0 ? void 0 : data.targetScreenId;
1926
1996
  if (target === "__goBack__") {
1927
1997
  handleGoBack(i, (data === null || data === void 0 ? void 0 : data.animation) || "fade");
@@ -1941,6 +2011,12 @@ function Overlay(props) {
1941
2011
  return;
1942
2012
  }
1943
2013
  if ((data === null || data === void 0 ? void 0 : data.type) === "rampkit:goBack") {
2014
+ // Only process goBack from the active screen
2015
+ if (!isScreenActive(i)) {
2016
+ if (__DEV__)
2017
+ console.log(`[RampKit] Ignoring goBack from inactive screen ${i}`);
2018
+ return;
2019
+ }
1944
2020
  handleGoBack(i, (data === null || data === void 0 ? void 0 : data.animation) || "fade");
1945
2021
  return;
1946
2022
  }
@@ -1963,6 +2039,12 @@ function Overlay(props) {
1963
2039
  if (raw === "rampkit:tap" ||
1964
2040
  raw === "next" ||
1965
2041
  raw === "continue") {
2042
+ // Only process from the active screen
2043
+ if (!isScreenActive(i)) {
2044
+ if (__DEV__)
2045
+ console.log(`[RampKit] Ignoring ${raw} from inactive screen ${i}`);
2046
+ return;
2047
+ }
1966
2048
  handleAdvance(i);
1967
2049
  return;
1968
2050
  }
@@ -2017,10 +2099,22 @@ function Overlay(props) {
2017
2099
  return;
2018
2100
  }
2019
2101
  if (raw === "rampkit:goBack") {
2102
+ // Only process from the active screen
2103
+ if (!isScreenActive(i)) {
2104
+ if (__DEV__)
2105
+ console.log(`[RampKit] Ignoring goBack (raw) from inactive screen ${i}`);
2106
+ return;
2107
+ }
2020
2108
  handleGoBack(i);
2021
2109
  return;
2022
2110
  }
2023
2111
  if (raw.startsWith("rampkit:navigate:")) {
2112
+ // Only process from the active screen
2113
+ if (!isScreenActive(i)) {
2114
+ if (__DEV__)
2115
+ console.log(`[RampKit] Ignoring navigate (raw) from inactive screen ${i}`);
2116
+ return;
2117
+ }
2024
2118
  const target = raw.slice("rampkit:navigate:".length);
2025
2119
  if (target === "__goBack__") {
2026
2120
  handleGoBack(i);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "rampkit-expo-dev",
3
- "version": "0.0.79",
3
+ "version": "0.0.81",
4
4
  "description": "The Expo SDK for RampKit. Build, test, and personalize app onboardings with instant updates.",
5
5
  "main": "build/index.js",
6
6
  "types": "build/index.d.ts",