@kontextso/sdk-react-native 2.0.0-rc.7 → 2.1.0-rc.1

package/LICENSE

@@ -0,0 +1,202 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright 2025 Kontext
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/README.md

@@ -0,0 +1,87 @@
+# @kontextso/sdk-react-native
+
+A lightweight React Native SDK for integrating Kontext's AI-powered ads into your iOS and Android apps.
+
+---
+
+## Quick Setup
+
+### Prerequisites
+
+To get started, you will need to set up a publisher account to get a [`publisherToken` and `code`](https://docs.kontext.so/publishers#getting-started-is-easy).
+
+### 1. Installation
+
+```bash
+# Install the SDK
+npm install @kontextso/sdk-react-native
+
+# Install required dependencies
+npm install react-native-device-info
+npm install react-native-webview
+```
+
+### 2. Initialize AdsProvider
+
+Set up the ad provider early in your component tree:
+
+```tsx
+import React, { useState } from 'react';
+import { AdsProvider } from '@kontextso/sdk-react-native';
+
+interface Message {
+  id: string;
+  role: 'user' | 'assistant';
+  content: string;
+  createdAt: Date;
+}
+
+function App() {
+  const [messages, setMessages] = useState<Message[]>([]);
+
+  return (
+    <AdsProvider
+      publisherToken="<your-publisher-token>"
+      messages={messages}
+      userId="<unique-user-id>"
+      conversationId="<conversation-id>"
+      enabledPlacementCodes={["<placement-code>"]}
+      character={{
+        name: "<name>",
+        avatarUrl: "<url>",
+        isNsfw: <boolean>,
+        id: "<character-id>",
+        greeting: "<greeting text>",
+        persona: "<persona description>",
+        tags: ["tag1", "tag2"],
+      }}
+    >
+      {/* Rest of your app components */}
+    </AdsProvider>
+  );
+}
+```
+
+### 3. Display Your First Ad
+
+Insert ads inline within your UI, tied to messages:
+
+```tsx
+function MessageList({ messages }: { messages: Message[] }) {
+  return (
+    <View>
+      {messages.map((m) => (
+        <View key={m.id}>
+          {/* Your message component */}
+          <InlineAd code="<placement-code>" messageId={m.id} />
+        </View>
+      ))}
+    </View>
+  );
+}
+```
+
+## Additional Resources
+
+* Explore a working [Demo Project featuring SDK integration](https://github.com/kontextso/kontext-react-native-demo).
+* Full documentation: [Kontext React Native SDK](https://docs.kontext.so/sdk/react-native).

package/dist/index.js

@@ -36,29 +36,66 @@ __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
 function makeIframeMessage(type, opts) {
-  const { data, code } = opts;
-  const message = { type, data: { ...data || {}, code } };
+  const { data, code, component } = opts;
+  const message = { type, data: { ...data || {}, code, component } };
   return message;
 }
 function handleIframeMessage(handler, opts) {
-  const { origin, code } = opts;
+  const { origin, code, component } = opts;
   return (event) => {
     if (origin && event.origin !== origin) return;
     const eventCode = event.data.data?.code;
     if (eventCode && code && eventCode !== code) return;
+    const eventComponent = event.data.data?.component;
+    if (eventComponent && component && eventComponent !== component) return;
     handler(event.data);
   };
 }
 
-// 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,
@@ -71,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 [height, setHeight] = (0, import_react2.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 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);
@@ -88,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,
@@ -106,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 {
@@ -153,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;
           }
         },
         {
@@ -168,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;
     }
@@ -192,7 +309,7 @@ var Format = ({ code, messageId, wrapper, ...otherParams }) => {
       });
     });
   };
-  (0, import_react.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     const interval = setInterval(() => {
       checkIfInViewport();
     }, 250);
@@ -213,59 +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
-          },
-          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;
 
@@ -273,7 +402,7 @@ var InlineAd_default = InlineAd;
 var import_sdk_react2 = require("@kontextso/sdk-react");
 var import_react_native2 = require("react-native");
 var import_react_native_device_info = __toESM(require("react-native-device-info"));
-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);
@@ -310,7 +439,7 @@ var getDevice = () => {
   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

@@ -1,27 +1,70 @@
 // src/formats/Format.tsx
 import { useContext, useEffect, useRef, useState } from "react";
-import { AdsContext, convertParamsToString, ErrorBoundary, useBid, useIframeUrl } from "@kontextso/sdk-react";
-import { WebView } from "react-native-webview";
-import { Linking, View, useWindowDimensions } from "react-native";
+import {
+  AdsContext,
+  convertParamsToString,
+  ErrorBoundary,
+  useBid,
+  useIframeUrl
+} from "@kontextso/sdk-react";
+import { Linking, Modal, View, useWindowDimensions } from "react-native";
 
 // ../sdk-common/dist/index.mjs
 function makeIframeMessage(type, opts) {
-  const { data, code } = opts;
-  const message = { type, data: { ...data || {}, code } };
+  const { data, code, component } = opts;
+  const message = { type, data: { ...data || {}, code, component } };
   return message;
 }
 function handleIframeMessage(handler, opts) {
-  const { origin, code } = opts;
+  const { origin, code, component } = opts;
   return (event) => {
     if (origin && event.origin !== origin) return;
     const eventCode = event.data.data?.code;
     if (eventCode && code && eventCode !== code) return;
+    const eventComponent = event.data.data?.component;
+    if (eventComponent && component && eventComponent !== component) return;
     handler(event.data);
   };
 }
 
-// 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,
@@ -38,12 +81,18 @@ var Format = ({ code, messageId, wrapper, ...otherParams }) => {
   const bid = useBid({ code, messageId });
   const [height, setHeight] = useState(0);
   const iframeUrl = useIframeUrl(context, bid, code, messageId);
+  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);
@@ -51,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,
@@ -69,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 {
@@ -116,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;
           }
         },
         {
@@ -131,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) {
@@ -176,59 +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
-          },
-          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;
 
@@ -236,7 +371,7 @@ var InlineAd_default = InlineAd;
 import { AdsProviderInternal, log } from "@kontextso/sdk-react";
 import { Platform } from "react-native";
 import DeviceInfo from "react-native-device-info";
-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);
@@ -273,7 +408,7 @@ var getDevice = () => {
   return {};
 };
 var AdsProvider = (props) => {
-  return /* @__PURE__ */ jsx3(AdsProviderInternal, { ...props, getDevice });
+  return /* @__PURE__ */ jsx4(AdsProviderInternal, { ...props, getDevice });
 };
 export {
   AdsProvider,

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@kontextso/sdk-react-native",
-  "version": "2.0.0-rc.7",
+  "version": "2.1.0-rc.1",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "type": "commonjs",
+  "license": "Apache-2.0",
   "scripts": {
     "dev:js": "tsup --watch",
     "dev": "npm-run-all dev:js",
@@ -51,9 +52,10 @@
     "react-native-webview": "^13.15.0"
   },
   "dependencies": {
-    "@kontextso/sdk-react": "^1.2.2"
+    "@kontextso/sdk-react": "^1.2.3"
   },
   "files": [
-    "dist/*"
+    "dist/*",
+    "LICENSE"
   ]
 }