@kontextso/sdk-react-native 2.1.1-rc.1 → 2.2.0-rc.1

package/dist/index.js

@@ -36,9 +36,8 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/formats/Format.tsx
-var import_react = require("react");
+var import_react2 = require("react");
 var import_sdk_react = require("@kontextso/sdk-react");
-var import_react_native_webview = require("react-native-webview");
 var import_react_native = require("react-native");
 
 // ../sdk-common/dist/index.mjs
@@ -59,8 +58,44 @@ function handleIframeMessage(handler, opts) {
   };
 }
 
-// src/formats/Format.tsx
+// src/frame-webview.tsx
+var import_react = require("react");
+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) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react_native_webview.WebView,
+      {
+        ref: forwardedRef,
+        source: {
+          uri: iframeUrl
+        },
+        onMessage,
+        style,
+        allowsInlineMediaPlayback: true,
+        mediaPlaybackRequiresUserAction: false,
+        javaScriptEnabled: true,
+        domStorageEnabled: true,
+        allowsFullscreenVideo: false,
+        injectedJavaScript: `
+          window.addEventListener("message", function(event) {
+            if (window.ReactNativeWebView && event.data) {
+              // ReactNativeWebView.postMessage only supports string data
+              window.ReactNativeWebView.postMessage(JSON.stringify(event.data));
+            }
+          }, false);
+      `,
+        onError,
+        onLoad
+      }
+    );
+  }
+);
+var frame_webview_default = FrameWebView;
+
+// src/formats/Format.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var sendMessage = (webViewRef, type, code, data) => {
   const message = makeIframeMessage(type, {
     data,
@@ -73,16 +108,22 @@ var sendMessage = (webViewRef, type, code, data) => {
   `);
 };
 var Format = ({ code, messageId, wrapper, ...otherParams }) => {
-  const context = (0, import_react.useContext)(import_sdk_react.AdsContext);
+  const context = (0, import_react2.useContext)(import_sdk_react.AdsContext);
   const bid = (0, import_sdk_react.useBid)({ code, messageId });
-  const [height, setHeight] = (0, import_react.useState)(0);
-  const iframeUrl = (0, import_sdk_react.useIframeUrl)(context, bid, code, messageId);
-  const [showIframe, setShowIframe] = (0, import_react.useState)(false);
-  const [iframeLoaded, setIframeLoaded] = (0, import_react.useState)(false);
-  const [containerStyles, setContainerStyles] = (0, import_react.useState)({});
-  const [iframeStyles, setIframeStyles] = (0, import_react.useState)({});
-  const containerRef = (0, import_react.useRef)(null);
-  const webViewRef = (0, import_react.useRef)(null);
+  const [height, setHeight] = (0, import_react2.useState)(0);
+  const iframeUrl = (0, import_sdk_react.useIframeUrl)(context, bid, code, messageId, "sdk-react-native", otherParams.theme);
+  const modalUrl = iframeUrl.replace("/api/frame/", "/api/modal/");
+  const [showIframe, setShowIframe] = (0, import_react2.useState)(false);
+  const [iframeLoaded, setIframeLoaded] = (0, import_react2.useState)(false);
+  const [modalOpen, setModalOpen] = (0, import_react2.useState)(false);
+  const [modalShown, setModalShown] = (0, import_react2.useState)(false);
+  const [modalLoaded, setModalLoaded] = (0, import_react2.useState)(false);
+  const [containerStyles, setContainerStyles] = (0, import_react2.useState)({});
+  const [iframeStyles, setIframeStyles] = (0, import_react2.useState)({});
+  const containerRef = (0, import_react2.useRef)(null);
+  const webViewRef = (0, import_react2.useRef)(null);
+  const modalWebViewRef = (0, import_react2.useRef)(null);
+  const modalInitTimeoutRef = (0, import_react2.useRef)(null);
   const { height: windowHeight, width: windowWidth } = (0, import_react_native.useWindowDimensions)();
   const reset = () => {
     setHeight(0);
@@ -90,9 +131,19 @@ var Format = ({ code, messageId, wrapper, ...otherParams }) => {
     setContainerStyles({});
     setIframeStyles({});
     setIframeLoaded(false);
+    resetModal();
     context?.resetAll();
     context?.captureError(new Error("Processing iframe error"));
   };
+  const resetModal = () => {
+    if (modalInitTimeoutRef.current) {
+      clearTimeout(modalInitTimeoutRef.current);
+      modalInitTimeoutRef.current = null;
+    }
+    setModalOpen(false);
+    setModalLoaded(false);
+    setModalShown(false);
+  };
   const debug = (name, data = {}) => {
     context?.onDebugEventInternal?.(name, {
       code,
@@ -108,6 +159,19 @@ var Format = ({ code, messageId, wrapper, ...otherParams }) => {
       ...data
     });
   };
+  const debugModal = (name, data = {}) => {
+    context?.onDebugEventInternal?.(name, {
+      code,
+      messageId,
+      otherParams,
+      bid,
+      modalUrl,
+      modalOpen,
+      modalShown,
+      modalLoaded,
+      ...data
+    });
+  };
   debug("format-update-state");
   const onMessage = (event) => {
     try {
@@ -155,6 +219,10 @@ var Format = ({ code, messageId, wrapper, ...otherParams }) => {
               setContainerStyles(message.data.containerStyles);
               setIframeStyles(message.data.iframeStyles);
               break;
+            case "open-component-iframe":
+              setModalOpen(true);
+              modalInitTimeoutRef.current = setTimeout(resetModal, message.data.timeout ?? 5e3);
+              break;
           }
         },
         {
@@ -170,8 +238,55 @@ var Format = ({ code, messageId, wrapper, ...otherParams }) => {
       reset();
     }
   };
+  const onModalMessage = (event) => {
+    try {
+      const data = JSON.parse(event.nativeEvent.data);
+      debugModal("modal-iframe-message", {
+        message: data
+      });
+      const messageHandler = handleIframeMessage(
+        (message) => {
+          switch (message.type) {
+            case "close-component-iframe":
+              resetModal();
+              break;
+            case "init-component-iframe":
+              if (modalInitTimeoutRef.current) {
+                clearTimeout(modalInitTimeoutRef.current);
+                modalInitTimeoutRef.current = null;
+              }
+              setModalShown(true);
+              break;
+            case "error-component-iframe":
+            case "error-iframe":
+              resetModal();
+              break;
+            case "click-iframe":
+              if (message.data.url) {
+                import_react_native.Linking.openURL(`${context?.adServerUrl}${message.data.url}`).catch(
+                  (err) => console.error("error opening url", err)
+                );
+              }
+              context?.onAdClickInternal(message.data);
+              break;
+          }
+        },
+        {
+          code,
+          component: "modal"
+        }
+      );
+      messageHandler({ data });
+    } catch (e) {
+      debugModal("modal-iframe-message-error", {
+        error: e
+      });
+      console.error("error parsing message from webview", e);
+      resetModal();
+    }
+  };
   const paramsString = (0, import_sdk_react.convertParamsToString)(otherParams);
-  (0, import_react.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     if (!iframeLoaded || !context?.adServerUrl || !bid || !webViewRef.current) {
       return;
     }
@@ -194,7 +309,7 @@ var Format = ({ code, messageId, wrapper, ...otherParams }) => {
       });
     });
   };
-  (0, import_react.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     const interval = setInterval(() => {
       checkIfInViewport();
     }, 250);
@@ -215,57 +330,71 @@ var Format = ({ code, messageId, wrapper, ...otherParams }) => {
     }
     return 0;
   };
-  const content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, { style: containerStyles, ref: containerRef, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_react_native_webview.WebView,
-    {
-      ref: webViewRef,
-      source: {
-        uri: iframeUrl
-      },
-      onMessage,
-      style: {
-        height: getHeight(),
-        width: getWidth(),
-        ...iframeStyles
-      },
-      allowsInlineMediaPlayback: true,
-      mediaPlaybackRequiresUserAction: false,
-      javaScriptEnabled: true,
-      domStorageEnabled: true,
-      allowsFullscreenVideo: false,
-      injectedJavaScript: `
-          function sendToLog(data) {
-            window.ReactNativeWebView.postMessage(JSON.stringify({
-              type: 'log-iframe',
-              data: data
-            }));
-          }
-
-          window.addEventListener("message", function(event) {
-            if (window.ReactNativeWebView && event.data) {
-              // ReactNativeWebView.postMessage only supports string data
-              window.ReactNativeWebView.postMessage(JSON.stringify(event.data));
+  const content = /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native.Modal, { visible: modalOpen, transparent: true, onRequestClose: resetModal, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_react_native.View,
+      {
+        style: {
+          flex: 1,
+          // Don't show the modal until the modal page is loaded and sends 'init-component-iframe' message back to SDK
+          ...modalShown ? { opacity: 1, pointerEvents: "auto" } : { opacity: 0, pointerEvents: "none" }
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          frame_webview_default,
+          {
+            ref: modalWebViewRef,
+            iframeUrl: modalUrl,
+            onMessage: onModalMessage,
+            style: {
+              backgroundColor: "transparent",
+              height: "100%",
+              width: "100%",
+              borderWidth: 0
+            },
+            onError: () => {
+              debug("modal-error");
+              resetModal();
+            },
+            onLoad: () => {
+              debug("modal-load");
+              setModalLoaded(true);
             }
-          }, false);
-      `,
-      onError: () => {
-        debug("iframe-error");
-        reset();
-      },
-      onLoad: () => {
-        debug("iframe-load");
+          }
+        )
       }
-    }
-  ) });
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native.View, { style: containerStyles, ref: containerRef, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      frame_webview_default,
+      {
+        ref: webViewRef,
+        iframeUrl,
+        onMessage,
+        style: {
+          height: getHeight(),
+          width: getWidth(),
+          background: "transparent",
+          borderWidth: 0,
+          ...iframeStyles
+        },
+        onError: () => {
+          debug("iframe-error");
+          reset();
+        },
+        onLoad: () => {
+          debug("iframe-load");
+        }
+      }
+    ) })
+  ] });
   return wrapper ? wrapper(content) : content;
 };
-var FormatWithErrorBoundary = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sdk_react.ErrorBoundary, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Format, { ...props }) });
+var FormatWithErrorBoundary = (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_sdk_react.ErrorBoundary, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Format, { ...props }) });
 var Format_default = FormatWithErrorBoundary;
 
 // src/formats/InlineAd.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var InlineAd = ({ code, messageId, wrapper, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Format_default, { code, messageId, wrapper, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Format_default, { code, messageId, wrapper, ...props });
 };
 var InlineAd_default = InlineAd;
 
@@ -279,7 +408,7 @@ var import_react_native2 = require("react-native");
 var NativeRNKontext_default = import_react_native2.TurboModuleRegistry.getEnforcing("RNKontext");
 
 // src/context/AdsProvider.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 ErrorUtils.setGlobalHandler((error, isFatal) => {
   if (!isFatal) {
     import_sdk_react2.log.warn(error);
@@ -323,7 +452,7 @@ var getDevice = async () => {
   return {};
 };
 var AdsProvider = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_sdk_react2.AdsProviderInternal, { ...props, getDevice });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_sdk_react2.AdsProviderInternal, { ...props, getDevice });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/index.mjs

@@ -7,8 +7,7 @@ import {
   useBid,
   useIframeUrl
 } from "@kontextso/sdk-react";
-import { WebView } from "react-native-webview";
-import { Linking, View, useWindowDimensions } from "react-native";
+import { Linking, Modal, View, useWindowDimensions } from "react-native";
 
 // ../sdk-common/dist/index.mjs
 function makeIframeMessage(type, opts) {
@@ -28,8 +27,44 @@ function handleIframeMessage(handler, opts) {
   };
 }
 
-// src/formats/Format.tsx
+// src/frame-webview.tsx
+import { forwardRef } from "react";
+import { WebView } from "react-native-webview";
 import { jsx } from "react/jsx-runtime";
+var FrameWebView = forwardRef(
+  ({ iframeUrl, onMessage, style, onError, onLoad }, forwardedRef) => {
+    return /* @__PURE__ */ jsx(
+      WebView,
+      {
+        ref: forwardedRef,
+        source: {
+          uri: iframeUrl
+        },
+        onMessage,
+        style,
+        allowsInlineMediaPlayback: true,
+        mediaPlaybackRequiresUserAction: false,
+        javaScriptEnabled: true,
+        domStorageEnabled: true,
+        allowsFullscreenVideo: false,
+        injectedJavaScript: `
+          window.addEventListener("message", function(event) {
+            if (window.ReactNativeWebView && event.data) {
+              // ReactNativeWebView.postMessage only supports string data
+              window.ReactNativeWebView.postMessage(JSON.stringify(event.data));
+            }
+          }, false);
+      `,
+        onError,
+        onLoad
+      }
+    );
+  }
+);
+var frame_webview_default = FrameWebView;
+
+// src/formats/Format.tsx
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
 var sendMessage = (webViewRef, type, code, data) => {
   const message = makeIframeMessage(type, {
     data,
@@ -45,13 +80,19 @@ var Format = ({ code, messageId, wrapper, ...otherParams }) => {
   const context = useContext(AdsContext);
   const bid = useBid({ code, messageId });
   const [height, setHeight] = useState(0);
-  const iframeUrl = useIframeUrl(context, bid, code, messageId);
+  const iframeUrl = useIframeUrl(context, bid, code, messageId, "sdk-react-native", otherParams.theme);
+  const modalUrl = iframeUrl.replace("/api/frame/", "/api/modal/");
   const [showIframe, setShowIframe] = useState(false);
   const [iframeLoaded, setIframeLoaded] = useState(false);
+  const [modalOpen, setModalOpen] = useState(false);
+  const [modalShown, setModalShown] = useState(false);
+  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 modalInitTimeoutRef = useRef(null);
   const { height: windowHeight, width: windowWidth } = useWindowDimensions();
   const reset = () => {
     setHeight(0);
@@ -59,9 +100,19 @@ var Format = ({ code, messageId, wrapper, ...otherParams }) => {
     setContainerStyles({});
     setIframeStyles({});
     setIframeLoaded(false);
+    resetModal();
     context?.resetAll();
     context?.captureError(new Error("Processing iframe error"));
   };
+  const resetModal = () => {
+    if (modalInitTimeoutRef.current) {
+      clearTimeout(modalInitTimeoutRef.current);
+      modalInitTimeoutRef.current = null;
+    }
+    setModalOpen(false);
+    setModalLoaded(false);
+    setModalShown(false);
+  };
   const debug = (name, data = {}) => {
     context?.onDebugEventInternal?.(name, {
       code,
@@ -77,6 +128,19 @@ var Format = ({ code, messageId, wrapper, ...otherParams }) => {
       ...data
     });
   };
+  const debugModal = (name, data = {}) => {
+    context?.onDebugEventInternal?.(name, {
+      code,
+      messageId,
+      otherParams,
+      bid,
+      modalUrl,
+      modalOpen,
+      modalShown,
+      modalLoaded,
+      ...data
+    });
+  };
   debug("format-update-state");
   const onMessage = (event) => {
     try {
@@ -124,6 +188,10 @@ var Format = ({ code, messageId, wrapper, ...otherParams }) => {
               setContainerStyles(message.data.containerStyles);
               setIframeStyles(message.data.iframeStyles);
               break;
+            case "open-component-iframe":
+              setModalOpen(true);
+              modalInitTimeoutRef.current = setTimeout(resetModal, message.data.timeout ?? 5e3);
+              break;
           }
         },
         {
@@ -139,6 +207,53 @@ var Format = ({ code, messageId, wrapper, ...otherParams }) => {
       reset();
     }
   };
+  const onModalMessage = (event) => {
+    try {
+      const data = JSON.parse(event.nativeEvent.data);
+      debugModal("modal-iframe-message", {
+        message: data
+      });
+      const messageHandler = handleIframeMessage(
+        (message) => {
+          switch (message.type) {
+            case "close-component-iframe":
+              resetModal();
+              break;
+            case "init-component-iframe":
+              if (modalInitTimeoutRef.current) {
+                clearTimeout(modalInitTimeoutRef.current);
+                modalInitTimeoutRef.current = null;
+              }
+              setModalShown(true);
+              break;
+            case "error-component-iframe":
+            case "error-iframe":
+              resetModal();
+              break;
+            case "click-iframe":
+              if (message.data.url) {
+                Linking.openURL(`${context?.adServerUrl}${message.data.url}`).catch(
+                  (err) => console.error("error opening url", err)
+                );
+              }
+              context?.onAdClickInternal(message.data);
+              break;
+          }
+        },
+        {
+          code,
+          component: "modal"
+        }
+      );
+      messageHandler({ data });
+    } catch (e) {
+      debugModal("modal-iframe-message-error", {
+        error: e
+      });
+      console.error("error parsing message from webview", e);
+      resetModal();
+    }
+  };
   const paramsString = convertParamsToString(otherParams);
   useEffect(() => {
     if (!iframeLoaded || !context?.adServerUrl || !bid || !webViewRef.current) {
@@ -184,57 +299,71 @@ var Format = ({ code, messageId, wrapper, ...otherParams }) => {
     }
     return 0;
   };
-  const content = /* @__PURE__ */ jsx(View, { style: containerStyles, ref: containerRef, children: /* @__PURE__ */ jsx(
-    WebView,
-    {
-      ref: webViewRef,
-      source: {
-        uri: iframeUrl
-      },
-      onMessage,
-      style: {
-        height: getHeight(),
-        width: getWidth(),
-        ...iframeStyles
-      },
-      allowsInlineMediaPlayback: true,
-      mediaPlaybackRequiresUserAction: false,
-      javaScriptEnabled: true,
-      domStorageEnabled: true,
-      allowsFullscreenVideo: false,
-      injectedJavaScript: `
-          function sendToLog(data) {
-            window.ReactNativeWebView.postMessage(JSON.stringify({
-              type: 'log-iframe',
-              data: data
-            }));
-          }
-
-          window.addEventListener("message", function(event) {
-            if (window.ReactNativeWebView && event.data) {
-              // ReactNativeWebView.postMessage only supports string data
-              window.ReactNativeWebView.postMessage(JSON.stringify(event.data));
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2(Modal, { visible: modalOpen, transparent: true, onRequestClose: resetModal, children: /* @__PURE__ */ jsx2(
+      View,
+      {
+        style: {
+          flex: 1,
+          // Don't show the modal until the modal page is loaded and sends 'init-component-iframe' message back to SDK
+          ...modalShown ? { opacity: 1, pointerEvents: "auto" } : { opacity: 0, pointerEvents: "none" }
+        },
+        children: /* @__PURE__ */ jsx2(
+          frame_webview_default,
+          {
+            ref: modalWebViewRef,
+            iframeUrl: modalUrl,
+            onMessage: onModalMessage,
+            style: {
+              backgroundColor: "transparent",
+              height: "100%",
+              width: "100%",
+              borderWidth: 0
+            },
+            onError: () => {
+              debug("modal-error");
+              resetModal();
+            },
+            onLoad: () => {
+              debug("modal-load");
+              setModalLoaded(true);
             }
-          }, false);
-      `,
-      onError: () => {
-        debug("iframe-error");
-        reset();
-      },
-      onLoad: () => {
-        debug("iframe-load");
+          }
+        )
       }
-    }
-  ) });
+    ) }),
+    /* @__PURE__ */ jsx2(View, { style: containerStyles, ref: containerRef, children: /* @__PURE__ */ jsx2(
+      frame_webview_default,
+      {
+        ref: webViewRef,
+        iframeUrl,
+        onMessage,
+        style: {
+          height: getHeight(),
+          width: getWidth(),
+          background: "transparent",
+          borderWidth: 0,
+          ...iframeStyles
+        },
+        onError: () => {
+          debug("iframe-error");
+          reset();
+        },
+        onLoad: () => {
+          debug("iframe-load");
+        }
+      }
+    ) })
+  ] });
   return wrapper ? wrapper(content) : content;
 };
-var FormatWithErrorBoundary = (props) => /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(Format, { ...props }) });
+var FormatWithErrorBoundary = (props) => /* @__PURE__ */ jsx2(ErrorBoundary, { children: /* @__PURE__ */ jsx2(Format, { ...props }) });
 var Format_default = FormatWithErrorBoundary;
 
 // src/formats/InlineAd.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as jsx3 } from "react/jsx-runtime";
 var InlineAd = ({ code, messageId, wrapper, ...props }) => {
-  return /* @__PURE__ */ jsx2(Format_default, { code, messageId, wrapper, ...props });
+  return /* @__PURE__ */ jsx3(Format_default, { code, messageId, wrapper, ...props });
 };
 var InlineAd_default = InlineAd;
 
@@ -248,7 +377,7 @@ import { TurboModuleRegistry } from "react-native";
 var NativeRNKontext_default = TurboModuleRegistry.getEnforcing("RNKontext");
 
 // src/context/AdsProvider.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 ErrorUtils.setGlobalHandler((error, isFatal) => {
   if (!isFatal) {
     log.warn(error);
@@ -292,7 +421,7 @@ var getDevice = async () => {
   return {};
 };
 var AdsProvider = (props) => {
-  return /* @__PURE__ */ jsx3(AdsProviderInternal, { ...props, getDevice });
+  return /* @__PURE__ */ jsx4(AdsProviderInternal, { ...props, getDevice });
 };
 export {
   AdsProvider,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kontextso/sdk-react-native",
-  "version": "2.1.1-rc.1",
+  "version": "2.2.0-rc.1",
   "description": "Kontext SDK for React Native",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -55,7 +55,7 @@
     "react-native-webview": "^13.15.0"
   },
   "dependencies": {
-    "@kontextso/sdk-react": "^1.2.3"
+    "@kontextso/sdk-react": "^1.2.4"
   },
   "files": [
     "dist/*",

package/src/context/AdsProvider.tsx

@@ -32,8 +32,6 @@ const getDevice = async (): Promise<Device> => {
       log.warn('Failed to read output volume', error)
     }
 
-    console.log('soundOn', soundOn)
-
     const rnv = Platform.constants.reactNativeVersion
     const reactNativeVersion = `${rnv.major}.${rnv.minor}.${rnv.patch}`
 

package/src/formats/Format.tsx

@@ -7,15 +7,16 @@ import {
   useIframeUrl,
   type FormatProps,
 } from '@kontextso/sdk-react'
-import { WebView, type WebViewMessageEvent } from 'react-native-webview'
-import { Linking, View, useWindowDimensions } from 'react-native'
+import type { WebView, WebViewMessageEvent } from 'react-native-webview'
+import { Linking, Modal, View, useWindowDimensions } from 'react-native'
 import {
   handleIframeMessage,
-  IframeMessageEvent,
-  IframeMessageType,
+  type IframeMessageEvent,
+  type IframeMessageType,
   makeIframeMessage,
   type IframeMessage,
 } from '@kontextso/sdk-common'
+import FrameWebView from '../frame-webview'
 
 const sendMessage = (
   webViewRef: React.RefObject<WebView>,
@@ -40,16 +41,24 @@ const Format = ({ code, messageId, wrapper, ...otherParams }: FormatProps) => {
 
   const bid = useBid({ code, messageId })
   const [height, setHeight] = useState<number>(0)
-  const iframeUrl = useIframeUrl(context, bid, code, messageId)
+
+  const iframeUrl = useIframeUrl(context, bid, code, messageId, 'sdk-react-native', otherParams.theme)
+  const modalUrl = iframeUrl.replace('/api/frame/', '/api/modal/')
 
   const [showIframe, setShowIframe] = useState<boolean>(false)
   const [iframeLoaded, setIframeLoaded] = useState<boolean>(false)
 
+  const [modalOpen, setModalOpen] = useState<boolean>(false)
+  const [modalShown, setModalShown] = useState<boolean>(false)
+  const [modalLoaded, setModalLoaded] = useState<boolean>(false)
+
   const [containerStyles, setContainerStyles] = useState<any>({})
   const [iframeStyles, setIframeStyles] = useState<any>({})
 
   const containerRef = useRef<View>(null)
   const webViewRef = useRef<WebView>(null)
+  const modalWebViewRef = useRef<WebView>(null)
+  const modalInitTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 
   const { height: windowHeight, width: windowWidth } = useWindowDimensions()
 
@@ -59,10 +68,22 @@ const Format = ({ code, messageId, wrapper, ...otherParams }: FormatProps) => {
     setContainerStyles({})
     setIframeStyles({})
     setIframeLoaded(false)
+    resetModal()
     context?.resetAll()
     context?.captureError(new Error('Processing iframe error'))
   }
 
+  const resetModal = () => {
+    if (modalInitTimeoutRef.current) {
+      clearTimeout(modalInitTimeoutRef.current)
+      modalInitTimeoutRef.current = null
+    }
+
+    setModalOpen(false)
+    setModalLoaded(false)
+    setModalShown(false)
+  }
+
   const debug = (name: string, data: any = {}) => {
     context?.onDebugEventInternal?.(name, {
       code,
@@ -79,6 +100,20 @@ const Format = ({ code, messageId, wrapper, ...otherParams }: FormatProps) => {
     })
   }
 
+  const debugModal = (name: string, data: any = {}) => {
+    context?.onDebugEventInternal?.(name, {
+      code,
+      messageId,
+      otherParams,
+      bid,
+      modalUrl,
+      modalOpen,
+      modalShown,
+      modalLoaded,
+      ...data,
+    })
+  }
+
   debug('format-update-state')
 
   const onMessage = (event: WebViewMessageEvent) => {
@@ -136,6 +171,12 @@ const Format = ({ code, messageId, wrapper, ...otherParams }: FormatProps) => {
               setContainerStyles(message.data.containerStyles)
               setIframeStyles(message.data.iframeStyles)
               break
+
+            case 'open-component-iframe':
+              setModalOpen(true)
+
+              modalInitTimeoutRef.current = setTimeout(resetModal, message.data.timeout ?? 5000)
+              break
           }
         },
         {
@@ -152,6 +193,60 @@ const Format = ({ code, messageId, wrapper, ...otherParams }: FormatProps) => {
     }
   }
 
+  const onModalMessage = (event: WebViewMessageEvent) => {
+    try {
+      const data = JSON.parse(event.nativeEvent.data) as IframeMessage
+
+      debugModal('modal-iframe-message', {
+        message: data,
+      })
+
+      const messageHandler = handleIframeMessage(
+        (message) => {
+          switch (message.type) {
+            case 'close-component-iframe':
+              resetModal()
+              break
+
+            case 'init-component-iframe':
+              if (modalInitTimeoutRef.current) {
+                clearTimeout(modalInitTimeoutRef.current)
+                modalInitTimeoutRef.current = null
+              }
+
+              setModalShown(true)
+              break
+
+            case 'error-component-iframe':
+            case 'error-iframe':
+              resetModal()
+              break
+
+            case 'click-iframe':
+              if (message.data.url) {
+                Linking.openURL(`${context?.adServerUrl}${message.data.url}`).catch((err) =>
+                  console.error('error opening url', err)
+                )
+              }
+              context?.onAdClickInternal(message.data)
+              break
+          }
+        },
+        {
+          code,
+          component: 'modal',
+        }
+      )
+      messageHandler({ data } as IframeMessageEvent)
+    } catch (e) {
+      debugModal('modal-iframe-message-error', {
+        error: e,
+      })
+      console.error('error parsing message from webview', e)
+      resetModal()
+    }
+  }
+
   const paramsString = convertParamsToString(otherParams)
 
   useEffect(() => {
@@ -208,47 +303,59 @@ const Format = ({ code, messageId, wrapper, ...otherParams }: FormatProps) => {
   }
 
   const content = (
-    <View style={containerStyles} ref={containerRef}>
-      <WebView
-        ref={webViewRef}
-        source={{
-          uri: iframeUrl,
-        }}
-        onMessage={onMessage}
-        style={{
-          height: getHeight(),
-          width: getWidth(),
-          ...iframeStyles,
-        }}
-        allowsInlineMediaPlayback={true}
-        mediaPlaybackRequiresUserAction={false}
-        javaScriptEnabled={true}
-        domStorageEnabled={true}
-        allowsFullscreenVideo={false}
-        injectedJavaScript={`
-          function sendToLog(data) {
-            window.ReactNativeWebView.postMessage(JSON.stringify({
-              type: 'log-iframe',
-              data: data
-            }));
-          }
-
-          window.addEventListener("message", function(event) {
-            if (window.ReactNativeWebView && event.data) {
-              // ReactNativeWebView.postMessage only supports string data
-              window.ReactNativeWebView.postMessage(JSON.stringify(event.data));
-            }
-          }, false);
-      `}
-        onError={() => {
-          debug('iframe-error')
-          reset()
-        }}
-        onLoad={() => {
-          debug('iframe-load')
-        }}
-      />
-    </View>
+    <>
+      <Modal visible={modalOpen} transparent={true} onRequestClose={resetModal}>
+        <View
+          style={{
+            flex: 1,
+            // Don't show the modal until the modal page is loaded and sends 'init-component-iframe' message back to SDK
+            ...(modalShown ? { opacity: 1, pointerEvents: 'auto' } : { opacity: 0, pointerEvents: 'none' }),
+          }}
+        >
+          <FrameWebView
+            ref={modalWebViewRef}
+            iframeUrl={modalUrl}
+            onMessage={onModalMessage}
+            style={{
+              backgroundColor: 'transparent',
+              height: '100%',
+              width: '100%',
+              borderWidth: 0,
+            }}
+            onError={() => {
+              debug('modal-error')
+              resetModal()
+            }}
+            onLoad={() => {
+              debug('modal-load')
+              setModalLoaded(true)
+            }}
+          />
+        </View>
+      </Modal>
+
+      <View style={containerStyles} ref={containerRef}>
+        <FrameWebView
+          ref={webViewRef}
+          iframeUrl={iframeUrl}
+          onMessage={onMessage}
+          style={{
+            height: getHeight(),
+            width: getWidth(),
+            background: 'transparent',
+            borderWidth: 0,
+            ...iframeStyles,
+          }}
+          onError={() => {
+            debug('iframe-error')
+            reset()
+          }}
+          onLoad={() => {
+            debug('iframe-load')
+          }}
+        />
+      </View>
+    </>
   )
 
   return wrapper ? wrapper(content) : content

package/src/frame-webview.tsx

@@ -0,0 +1,43 @@
+import { forwardRef } from 'react'
+import type { StyleProp, 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
+  onLoad: () => void
+}
+
+const FrameWebView = forwardRef<WebView, FrameWebViewProps>(
+  ({ iframeUrl, onMessage, style, onError, onLoad }, forwardedRef) => {
+    return (
+      <WebView
+        ref={forwardedRef}
+        source={{
+          uri: iframeUrl,
+        }}
+        onMessage={onMessage}
+        style={style}
+        allowsInlineMediaPlayback={true}
+        mediaPlaybackRequiresUserAction={false}
+        javaScriptEnabled={true}
+        domStorageEnabled={true}
+        allowsFullscreenVideo={false}
+        injectedJavaScript={`
+          window.addEventListener("message", function(event) {
+            if (window.ReactNativeWebView && event.data) {
+              // ReactNativeWebView.postMessage only supports string data
+              window.ReactNativeWebView.postMessage(JSON.stringify(event.data));
+            }
+          }, false);
+      `}
+        onError={onError}
+        onLoad={onLoad}
+      />
+    )
+  }
+)
+
+export default FrameWebView