@kontextso/sdk-react-native 3.3.0 → 3.3.1-rc.0

package/dist/index.js

@@ -57,14 +57,16 @@ function handleIframeMessage(handler, opts) {
 // src/formats/Format.tsx
 var import_sdk_react = require("@kontextso/sdk-react");
 var import_react2 = require("react");
-var import_react_native4 = require("react-native");
+var import_react_native5 = require("react-native");
 
 // src/frame-webview.tsx
 var import_react = require("react");
+var import_react_native = require("react-native");
 var import_react_native_webview = require("react-native-webview");
 var import_jsx_runtime = require("react/jsx-runtime");
 var FrameWebView = (0, import_react.forwardRef)(
   ({ iframeUrl, onMessage, style, onError, onLoad }, forwardedRef) => {
+    const isLoadedRef = (0, import_react.useRef)(false);
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_react_native_webview.WebView,
       {
@@ -89,9 +91,25 @@ var FrameWebView = (0, import_react.forwardRef)(
               window.ReactNativeWebView.postMessage(JSON.stringify(event.data));
             }
           }, false);
+
       `,
-        onError,
-        onLoad
+        onError: (event) => onError(
+          new Error(`${event.nativeEvent.title}: ${event.nativeEvent.description} [${event.nativeEvent.url}]`),
+          true
+        ),
+        onLoad: () => {
+          isLoadedRef.current = true;
+          onLoad();
+        },
+        onShouldStartLoadWithRequest: (request) => {
+          if (!isLoadedRef.current || request.url.match(/^about:/) || request.url.startsWith(iframeUrl)) {
+            return true;
+          }
+          import_react_native.Linking.openURL(request.url).catch((err) => {
+            onError(new Error(`Failed to open URL: ${request.url} [${err.message}]`));
+          });
+          return false;
+        }
       }
     );
   }
@@ -99,11 +117,11 @@ var FrameWebView = (0, import_react.forwardRef)(
 var frame_webview_default = FrameWebView;
 
 // src/services/SkOverlay.ts
-var import_react_native2 = require("react-native");
+var import_react_native3 = require("react-native");
 
 // src/NativeRNKontext.ts
-var import_react_native = require("react-native");
-var NativeRNKontext_default = import_react_native.TurboModuleRegistry.getEnforcing("RNKontext");
+var import_react_native2 = require("react-native");
+var NativeRNKontext_default = import_react_native2.TurboModuleRegistry.getEnforcing("RNKontext");
 
 // src/services/utils.ts
 var isValidAppStoreId = (id) => {
@@ -115,7 +133,7 @@ var isValidPosition = (p) => {
   return p === "bottom" || p === "bottomRaised";
 };
 async function presentSKOverlay(params) {
-  if (import_react_native2.Platform.OS !== "ios") {
+  if (import_react_native3.Platform.OS !== "ios") {
     return false;
   }
   let { appStoreId, position, dismissible } = params;
@@ -131,16 +149,16 @@ async function presentSKOverlay(params) {
   return NativeRNKontext_default.presentSKOverlay(appStoreId, position, dismissible);
 }
 async function dismissSKOverlay() {
-  if (import_react_native2.Platform.OS !== "ios") {
+  if (import_react_native3.Platform.OS !== "ios") {
     return false;
   }
   return NativeRNKontext_default.dismissSKOverlay();
 }
 
 // src/services/SkStoreProduct.ts
-var import_react_native3 = require("react-native");
+var import_react_native4 = require("react-native");
 async function presentSKStoreProduct(appStoreId) {
-  if (import_react_native3.Platform.OS !== "ios") {
+  if (import_react_native4.Platform.OS !== "ios") {
     return false;
   }
   if (!isValidAppStoreId(appStoreId)) {
@@ -149,7 +167,7 @@ async function presentSKStoreProduct(appStoreId) {
   return NativeRNKontext_default.presentSKStoreProduct(appStoreId);
 }
 async function dismissSKStoreProduct() {
-  if (import_react_native3.Platform.OS !== "ios") {
+  if (import_react_native4.Platform.OS !== "ios") {
     return false;
   }
   return NativeRNKontext_default.dismissSKStoreProduct();
@@ -194,7 +212,7 @@ var Format = ({ code, messageId, wrapper, onEvent, ...otherParams }) => {
   const messageStatusRef = (0, import_react2.useRef)("none" /* None */);
   const modalInitTimeoutRef = (0, import_react2.useRef)(null);
   const isModalInitRef = (0, import_react2.useRef)(false);
-  const { height: windowHeight, width: windowWidth } = (0, import_react_native4.useWindowDimensions)();
+  const { height: windowHeight, width: windowWidth } = (0, import_react_native5.useWindowDimensions)();
   const keyboardHeightRef = (0, import_react2.useRef)(0);
   const isAdViewVisible = showIframe && iframeLoaded;
   const reset = () => {
@@ -205,7 +223,6 @@ var Format = ({ code, messageId, wrapper, onEvent, ...otherParams }) => {
     setIframeLoaded(false);
     resetModal();
     context?.resetAll();
-    context?.captureError(new Error("Processing iframe error"));
   };
   const resetModal = () => {
     if (modalInitTimeoutRef.current) {
@@ -316,7 +333,7 @@ var Format = ({ code, messageId, wrapper, onEvent, ...otherParams }) => {
       return;
     }
     try {
-      await import_react_native4.Linking.openURL(`${context?.adServerUrl}${message.data.url}`);
+      await import_react_native5.Linking.openURL(`${context?.adServerUrl}${message.data.url}`);
     } catch (e) {
       console.error("error opening url", e);
     }
@@ -451,7 +468,6 @@ var Format = ({ code, messageId, wrapper, onEvent, ...otherParams }) => {
             case "error-component-iframe":
             case "error-iframe":
               resetModal();
-              context?.captureError(new Error("Processing modal iframe error"));
               break;
             case "open-skoverlay-iframe":
               openSkOverlay(
@@ -550,10 +566,10 @@ var Format = ({ code, messageId, wrapper, onEvent, ...otherParams }) => {
     return () => clearInterval(interval);
   }, [isAdViewVisible]);
   (0, import_react2.useEffect)(() => {
-    const showSubscription = import_react_native4.Keyboard.addListener("keyboardDidShow", (e) => {
+    const showSubscription = import_react_native5.Keyboard.addListener("keyboardDidShow", (e) => {
       keyboardHeightRef.current = e?.endCoordinates?.height ?? 0;
     });
-    const hideSubscription = import_react_native4.Keyboard.addListener("keyboardDidHide", () => {
+    const hideSubscription = import_react_native5.Keyboard.addListener("keyboardDidHide", () => {
       keyboardHeightRef.current = 0;
     });
     return () => {
@@ -578,9 +594,14 @@ var Format = ({ code, messageId, wrapper, onEvent, ...otherParams }) => {
         borderWidth: 0,
         ...iframeStyles
       },
-      onError: () => {
-        debug("iframe-error");
-        reset();
+      onError: (error, shouldReset) => {
+        debug("iframe-error", {
+          error: error.toString()
+        });
+        context?.captureError(error);
+        if (shouldReset) {
+          reset();
+        }
       },
       onLoad: () => {
         debug("iframe-load");
@@ -589,7 +610,7 @@ var Format = ({ code, messageId, wrapper, onEvent, ...otherParams }) => {
     }
   );
   const interstitialContent = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    import_react_native4.Modal,
+    import_react_native5.Modal,
     {
       visible: modalOpen,
       transparent: true,
@@ -597,7 +618,7 @@ var Format = ({ code, messageId, wrapper, onEvent, ...otherParams }) => {
       animationType: "slide",
       statusBarTranslucent: true,
       children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-        import_react_native4.View,
+        import_react_native5.View,
         {
           style: {
             flex: 1,
@@ -616,9 +637,14 @@ var Format = ({ code, messageId, wrapper, onEvent, ...otherParams }) => {
                 width: "100%",
                 borderWidth: 0
               },
-              onError: () => {
-                debug("modal-error");
-                resetModal();
+              onError: (error, shouldReset) => {
+                debug("modal-error", {
+                  error: error.toString()
+                });
+                context?.captureError(error);
+                if (shouldReset) {
+                  resetModal();
+                }
               },
               onLoad: () => {
                 debug("modal-load");
@@ -632,7 +658,7 @@ var Format = ({ code, messageId, wrapper, onEvent, ...otherParams }) => {
   );
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      import_react_native4.View,
+      import_react_native5.View,
       {
         style: isAdViewVisible ? containerStyles : {
           height: 0,
@@ -658,11 +684,11 @@ var InlineAd_default = InlineAd;
 // src/context/AdsProvider.tsx
 var import_sdk_react2 = require("@kontextso/sdk-react");
 var import_netinfo = require("@react-native-community/netinfo");
-var import_react_native5 = require("react-native");
+var import_react_native6 = require("react-native");
 var import_react_native_device_info = __toESM(require("react-native-device-info"));
 
 // package.json
-var version = "3.3.0";
+var version = "3.3.1-rc.0";
 
 // src/context/AdsProvider.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
@@ -683,7 +709,7 @@ var getDevice = async () => {
     const powerState = await import_react_native_device_info.default.getPowerState();
     const deviceType = import_react_native_device_info.default.getDeviceType();
     const soundOn = await NativeRNKontext_default.isSoundOn();
-    const screen = import_react_native5.Dimensions.get("screen");
+    const screen = import_react_native6.Dimensions.get("screen");
     const networkInfo = await (0, import_netinfo.fetch)();
     const mapDeviceTypeToHardwareType = () => {
       switch (deviceType) {
@@ -720,14 +746,14 @@ var getDevice = async () => {
         detail: networkInfo.type === import_netinfo.NetInfoStateType.cellular && networkInfo.details.cellularGeneration || void 0
       },
       os: {
-        name: import_react_native5.Platform.OS,
+        name: import_react_native6.Platform.OS,
         version: import_react_native_device_info.default.getSystemVersion(),
         locale: Intl.DateTimeFormat().resolvedOptions().locale,
         timezone: Intl.DateTimeFormat().resolvedOptions().timeZone
       },
       screen: {
-        darkMode: import_react_native5.Appearance.getColorScheme() === "dark",
-        dpr: import_react_native5.PixelRatio.get(),
+        darkMode: import_react_native6.Appearance.getColorScheme() === "dark",
+        dpr: import_react_native6.PixelRatio.get(),
         height: screen.height,
         width: screen.width,
         orientation: screen.width > screen.height ? "landscape" : "portrait"
@@ -760,7 +786,7 @@ var getApp = async () => {
 };
 var getSdk = async () => ({
   name: "sdk-react-native",
-  platform: import_react_native5.Platform.OS === "ios" ? "ios" : "android",
+  platform: import_react_native6.Platform.OS === "ios" ? "ios" : "android",
   version
 });
 var getTcf = async () => {

package/dist/index.mjs

@@ -25,15 +25,17 @@ import {
   useBid,
   useIframeUrl
 } from "@kontextso/sdk-react";
-import { useContext, useEffect, useRef, useState } from "react";
-import { Keyboard, Linking, Modal, useWindowDimensions, View } from "react-native";
+import { useContext, useEffect, useRef as useRef2, useState } from "react";
+import { Keyboard, Linking as Linking2, Modal, useWindowDimensions, View } from "react-native";
 
 // src/frame-webview.tsx
-import { forwardRef } from "react";
+import { forwardRef, useRef } from "react";
+import { Linking } from "react-native";
 import { WebView } from "react-native-webview";
 import { jsx } from "react/jsx-runtime";
 var FrameWebView = forwardRef(
   ({ iframeUrl, onMessage, style, onError, onLoad }, forwardedRef) => {
+    const isLoadedRef = useRef(false);
     return /* @__PURE__ */ jsx(
       WebView,
       {
@@ -58,9 +60,25 @@ var FrameWebView = forwardRef(
               window.ReactNativeWebView.postMessage(JSON.stringify(event.data));
             }
           }, false);
+
       `,
-        onError,
-        onLoad
+        onError: (event) => onError(
+          new Error(`${event.nativeEvent.title}: ${event.nativeEvent.description} [${event.nativeEvent.url}]`),
+          true
+        ),
+        onLoad: () => {
+          isLoadedRef.current = true;
+          onLoad();
+        },
+        onShouldStartLoadWithRequest: (request) => {
+          if (!isLoadedRef.current || request.url.match(/^about:/) || request.url.startsWith(iframeUrl)) {
+            return true;
+          }
+          Linking.openURL(request.url).catch((err) => {
+            onError(new Error(`Failed to open URL: ${request.url} [${err.message}]`));
+          });
+          return false;
+        }
       }
     );
   }
@@ -157,14 +175,14 @@ var Format = ({ code, messageId, wrapper, onEvent, ...otherParams }) => {
   const [modalLoaded, setModalLoaded] = useState(false);
   const [containerStyles, setContainerStyles] = useState({});
   const [iframeStyles, setIframeStyles] = useState({});
-  const containerRef = useRef(null);
-  const webViewRef = useRef(null);
-  const modalWebViewRef = useRef(null);
-  const messageStatusRef = useRef("none" /* None */);
-  const modalInitTimeoutRef = useRef(null);
-  const isModalInitRef = useRef(false);
+  const containerRef = useRef2(null);
+  const webViewRef = useRef2(null);
+  const modalWebViewRef = useRef2(null);
+  const messageStatusRef = useRef2("none" /* None */);
+  const modalInitTimeoutRef = useRef2(null);
+  const isModalInitRef = useRef2(false);
   const { height: windowHeight, width: windowWidth } = useWindowDimensions();
-  const keyboardHeightRef = useRef(0);
+  const keyboardHeightRef = useRef2(0);
   const isAdViewVisible = showIframe && iframeLoaded;
   const reset = () => {
     setHeight(0);
@@ -174,7 +192,6 @@ var Format = ({ code, messageId, wrapper, onEvent, ...otherParams }) => {
     setIframeLoaded(false);
     resetModal();
     context?.resetAll();
-    context?.captureError(new Error("Processing iframe error"));
   };
   const resetModal = () => {
     if (modalInitTimeoutRef.current) {
@@ -285,7 +302,7 @@ var Format = ({ code, messageId, wrapper, onEvent, ...otherParams }) => {
       return;
     }
     try {
-      await Linking.openURL(`${context?.adServerUrl}${message.data.url}`);
+      await Linking2.openURL(`${context?.adServerUrl}${message.data.url}`);
     } catch (e) {
       console.error("error opening url", e);
     }
@@ -420,7 +437,6 @@ var Format = ({ code, messageId, wrapper, onEvent, ...otherParams }) => {
             case "error-component-iframe":
             case "error-iframe":
               resetModal();
-              context?.captureError(new Error("Processing modal iframe error"));
               break;
             case "open-skoverlay-iframe":
               openSkOverlay(
@@ -547,9 +563,14 @@ var Format = ({ code, messageId, wrapper, onEvent, ...otherParams }) => {
         borderWidth: 0,
         ...iframeStyles
       },
-      onError: () => {
-        debug("iframe-error");
-        reset();
+      onError: (error, shouldReset) => {
+        debug("iframe-error", {
+          error: error.toString()
+        });
+        context?.captureError(error);
+        if (shouldReset) {
+          reset();
+        }
       },
       onLoad: () => {
         debug("iframe-load");
@@ -585,9 +606,14 @@ var Format = ({ code, messageId, wrapper, onEvent, ...otherParams }) => {
                 width: "100%",
                 borderWidth: 0
               },
-              onError: () => {
-                debug("modal-error");
-                resetModal();
+              onError: (error, shouldReset) => {
+                debug("modal-error", {
+                  error: error.toString()
+                });
+                context?.captureError(error);
+                if (shouldReset) {
+                  resetModal();
+                }
               },
               onLoad: () => {
                 debug("modal-load");
@@ -634,7 +660,7 @@ import { Appearance, Dimensions, PixelRatio, Platform as Platform3 } from "react
 import DeviceInfo from "react-native-device-info";
 
 // package.json
-var version = "3.3.0";
+var version = "3.3.1-rc.0";
 
 // src/context/AdsProvider.tsx
 import { jsx as jsx4 } from "react/jsx-runtime";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kontextso/sdk-react-native",
-  "version": "3.3.0",
+  "version": "3.3.1-rc.0",
   "description": "Kontext SDK for React Native",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -20,7 +20,7 @@
     "format": "biome format --write ."
   },
   "devDependencies": {
-    "@kontextso/sdk-common": "^1.0.4",
+    "@kontextso/sdk-common": "^1.0.5",
     "@kontextso/typescript-config": "*",
     "@react-native-community/netinfo": "11.3.1",
     "@testing-library/dom": "^10.4.0",

package/src/formats/Format.tsx

@@ -18,8 +18,8 @@ import { useContext, useEffect, useRef, useState } from 'react'
 import { Keyboard, Linking, Modal, useWindowDimensions, View } from 'react-native'
 import type { WebView, WebViewMessageEvent } from 'react-native-webview'
 import FrameWebView from '../frame-webview'
-import { presentSKOverlay, dismissSKOverlay, type SKOverlayPosition } from '../services/SkOverlay'
-import { presentSKStoreProduct, dismissSKStoreProduct } from '../services/SkStoreProduct'
+import { dismissSKOverlay, presentSKOverlay, type SKOverlayPosition } from '../services/SkOverlay'
+import { dismissSKStoreProduct, presentSKStoreProduct } from '../services/SkStoreProduct'
 
 const sendMessage = (
   webViewRef: React.RefObject<WebView>,
@@ -97,7 +97,6 @@ const Format = ({ code, messageId, wrapper, onEvent, ...otherParams }: FormatPro
     setIframeLoaded(false)
     resetModal()
     context?.resetAll()
-    context?.captureError(new Error('Processing iframe error'))
   }
 
   const resetModal = () => {
@@ -380,7 +379,6 @@ const Format = ({ code, messageId, wrapper, onEvent, ...otherParams }: FormatPro
             case 'error-component-iframe':
             case 'error-iframe':
               resetModal()
-              context?.captureError(new Error('Processing modal iframe error'))
               break
 
             case 'open-skoverlay-iframe':
@@ -532,9 +530,14 @@ const Format = ({ code, messageId, wrapper, onEvent, ...otherParams }: FormatPro
         borderWidth: 0,
         ...iframeStyles,
       }}
-      onError={() => {
-        debug('iframe-error')
-        reset()
+      onError={(error, shouldReset) => {
+        debug('iframe-error', {
+          error: error.toString(),
+        })
+        context?.captureError(error)
+        if (shouldReset) {
+          reset()
+        }
       }}
       onLoad={() => {
         debug('iframe-load')
@@ -568,9 +571,14 @@ const Format = ({ code, messageId, wrapper, onEvent, ...otherParams }: FormatPro
             width: '100%',
             borderWidth: 0,
           }}
-          onError={() => {
-            debug('modal-error')
-            resetModal()
+          onError={(error, shouldReset) => {
+            debug('modal-error', {
+              error: error.toString(),
+            })
+            context?.captureError(error)
+            if (shouldReset) {
+              resetModal()
+            }
           }}
           onLoad={() => {
             debug('modal-load')

package/src/frame-webview.tsx

@@ -1,17 +1,19 @@
-import { forwardRef } from 'react'
-import type { StyleProp, ViewStyle } from 'react-native'
+import { forwardRef, useRef } from 'react'
+import { Linking, type StyleProp, type ViewStyle } from 'react-native'
 import { WebView, type WebViewMessageEvent } from 'react-native-webview'
 
 interface FrameWebViewProps {
   iframeUrl: string
   onMessage: (event: WebViewMessageEvent) => void
   style: StyleProp<ViewStyle>
-  onError: () => void
+  onError: (error: Error, shouldReset?: boolean) => void
   onLoad: () => void
 }
 
 const FrameWebView = forwardRef<WebView, FrameWebViewProps>(
   ({ iframeUrl, onMessage, style, onError, onLoad }, forwardedRef) => {
+    const isLoadedRef = useRef(false)
+
     return (
       <WebView
         ref={forwardedRef}
@@ -35,9 +37,28 @@ const FrameWebView = forwardRef<WebView, FrameWebViewProps>(
               window.ReactNativeWebView.postMessage(JSON.stringify(event.data));
             }
           }, false);
+
       `}
-        onError={onError}
-        onLoad={onLoad}
+        onError={(event) =>
+          onError(
+            new Error(`${event.nativeEvent.title}: ${event.nativeEvent.description} [${event.nativeEvent.url}]`),
+            true
+          )
+        }
+        onLoad={() => {
+          isLoadedRef.current = true
+          onLoad()
+        }}
+        onShouldStartLoadWithRequest={(request) => {
+          if (!isLoadedRef.current || request.url.match(/^about:/) || request.url.startsWith(iframeUrl)) {
+            return true
+          }
+
+          Linking.openURL(request.url).catch((err) => {
+            onError(new Error(`Failed to open URL: ${request.url} [${err.message}]`))
+          })
+          return false
+        }}
       />
     )
   }