@kontextso/sdk-react-native 2.4.0 → 2.5.0

package/README.md

@@ -2,86 +2,4 @@
 
 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/sdk-react-native-demo).
-* Full documentation: [Kontext React Native SDK](https://docs.kontext.so/sdk/react-native).
+📚 Full documentation: [Kontext React Native SDK](https://docs.kontext.so/sdk/react-native).

package/dist/index.js

@@ -126,6 +126,7 @@ var Format = ({ code, messageId, wrapper, onEvent, ...otherParams }) => {
   const modalInitTimeoutRef = (0, import_react2.useRef)(null);
   const isModalInitRef = (0, import_react2.useRef)(false);
   const { height: windowHeight, width: windowWidth } = (0, import_react_native.useWindowDimensions)();
+  const isAdViewVisible = showIframe && iframeLoaded;
   const reset = () => {
     setHeight(0);
     setShowIframe(false);
@@ -326,93 +327,93 @@ var Format = ({ code, messageId, wrapper, onEvent, ...otherParams }) => {
     });
   };
   (0, import_react2.useEffect)(() => {
+    if (!isAdViewVisible) return;
     const interval = setInterval(() => {
       checkIfInViewport();
     }, 250);
     return () => clearInterval(interval);
-  }, []);
-  if (!context || !bid || !iframeUrl || context.isDisabled) {
+  }, [isAdViewVisible]);
+  if (!context || !bid || !iframeUrl) {
     return null;
   }
-  const getWidth = () => {
-    if (showIframe && iframeLoaded) {
-      return "100%";
+  const inlineContent = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    frame_webview_default,
+    {
+      ref: webViewRef,
+      iframeUrl,
+      onMessage,
+      style: {
+        height,
+        width: "100%",
+        backgroundColor: "transparent",
+        borderWidth: 0,
+        ...iframeStyles
+      },
+      onError: () => {
+        debug("iframe-error");
+        reset();
+      },
+      onLoad: () => {
+        debug("iframe-load");
+      }
     }
-    return 0;
-  };
-  const getHeight = () => {
-    if (showIframe && iframeLoaded) {
-      return height;
+  );
+  const interstitialContent = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_react_native.Modal,
+    {
+      visible: modalOpen,
+      transparent: true,
+      onRequestClose: resetModal,
+      animationType: "slide",
+      statusBarTranslucent: true,
+      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);
+              }
+            }
+          )
+        }
+      )
     }
-    return 0;
-  };
-  const content = /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      import_react_native.Modal,
+      import_react_native.View,
       {
-        visible: modalOpen,
-        transparent: true,
-        onRequestClose: resetModal,
-        animationType: "slide",
-        statusBarTranslucent: true,
-        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);
-                }
-              }
-            )
-          }
-        )
-      }
-    ),
-    /* @__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(),
-          backgroundColor: "transparent",
-          borderWidth: 0,
-          ...iframeStyles
-        },
-        onError: () => {
-          debug("iframe-error");
-          reset();
+        style: isAdViewVisible ? containerStyles : {
+          height: 0,
+          overflow: "hidden"
         },
-        onLoad: () => {
-          debug("iframe-load");
-        }
+        ref: containerRef,
+        children: wrapper ? wrapper(inlineContent) : inlineContent
       }
-    ) })
+    ),
+    interstitialContent
   ] });
-  return wrapper ? wrapper(content) : content;
 };
 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;
@@ -434,7 +435,7 @@ var import_react_native2 = require("react-native");
 var NativeRNKontext_default = import_react_native2.TurboModuleRegistry.getEnforcing("RNKontext");
 
 // package.json
-var version = "2.4.0";
+var version = "2.5.0";
 
 // src/context/AdsProvider.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");

package/dist/index.mjs

@@ -95,6 +95,7 @@ var Format = ({ code, messageId, wrapper, onEvent, ...otherParams }) => {
   const modalInitTimeoutRef = useRef(null);
   const isModalInitRef = useRef(false);
   const { height: windowHeight, width: windowWidth } = useWindowDimensions();
+  const isAdViewVisible = showIframe && iframeLoaded;
   const reset = () => {
     setHeight(0);
     setShowIframe(false);
@@ -295,93 +296,93 @@ var Format = ({ code, messageId, wrapper, onEvent, ...otherParams }) => {
     });
   };
   useEffect(() => {
+    if (!isAdViewVisible) return;
     const interval = setInterval(() => {
       checkIfInViewport();
     }, 250);
     return () => clearInterval(interval);
-  }, []);
-  if (!context || !bid || !iframeUrl || context.isDisabled) {
+  }, [isAdViewVisible]);
+  if (!context || !bid || !iframeUrl) {
     return null;
   }
-  const getWidth = () => {
-    if (showIframe && iframeLoaded) {
-      return "100%";
+  const inlineContent = /* @__PURE__ */ jsx2(
+    frame_webview_default,
+    {
+      ref: webViewRef,
+      iframeUrl,
+      onMessage,
+      style: {
+        height,
+        width: "100%",
+        backgroundColor: "transparent",
+        borderWidth: 0,
+        ...iframeStyles
+      },
+      onError: () => {
+        debug("iframe-error");
+        reset();
+      },
+      onLoad: () => {
+        debug("iframe-load");
+      }
     }
-    return 0;
-  };
-  const getHeight = () => {
-    if (showIframe && iframeLoaded) {
-      return height;
+  );
+  const interstitialContent = /* @__PURE__ */ jsx2(
+    Modal,
+    {
+      visible: modalOpen,
+      transparent: true,
+      onRequestClose: resetModal,
+      animationType: "slide",
+      statusBarTranslucent: true,
+      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);
+              }
+            }
+          )
+        }
+      )
     }
-    return 0;
-  };
-  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx2(
-      Modal,
+      View,
       {
-        visible: modalOpen,
-        transparent: true,
-        onRequestClose: resetModal,
-        animationType: "slide",
-        statusBarTranslucent: true,
-        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);
-                }
-              }
-            )
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ jsx2(View, { style: containerStyles, ref: containerRef, children: /* @__PURE__ */ jsx2(
-      frame_webview_default,
-      {
-        ref: webViewRef,
-        iframeUrl,
-        onMessage,
-        style: {
-          height: getHeight(),
-          width: getWidth(),
-          backgroundColor: "transparent",
-          borderWidth: 0,
-          ...iframeStyles
-        },
-        onError: () => {
-          debug("iframe-error");
-          reset();
+        style: isAdViewVisible ? containerStyles : {
+          height: 0,
+          overflow: "hidden"
         },
-        onLoad: () => {
-          debug("iframe-load");
-        }
+        ref: containerRef,
+        children: wrapper ? wrapper(inlineContent) : inlineContent
       }
-    ) })
+    ),
+    interstitialContent
   ] });
-  return wrapper ? wrapper(content) : content;
 };
 var FormatWithErrorBoundary = (props) => /* @__PURE__ */ jsx2(ErrorBoundary, { children: /* @__PURE__ */ jsx2(Format, { ...props }) });
 var Format_default = FormatWithErrorBoundary;
@@ -403,7 +404,7 @@ import { TurboModuleRegistry } from "react-native";
 var NativeRNKontext_default = TurboModuleRegistry.getEnforcing("RNKontext");
 
 // package.json
-var version = "2.4.0";
+var version = "2.5.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": "2.4.0",
+  "version": "2.5.0",
   "description": "Kontext SDK for React Native",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -55,7 +55,7 @@
     "react-native-webview": "^13.10.0"
   },
   "dependencies": {
-    "@kontextso/sdk-react": "^2.1.0"
+    "@kontextso/sdk-react": "^2.2.1"
   },
   "files": [
     "dist/*",

package/src/formats/Format.tsx

@@ -63,6 +63,8 @@ const Format = ({ code, messageId, wrapper, onEvent, ...otherParams }: FormatPro
 
   const { height: windowHeight, width: windowWidth } = useWindowDimensions()
 
+  const isAdViewVisible = showIframe && iframeLoaded
+
   const reset = () => {
     setHeight(0)
     setShowIframe(false)
@@ -297,94 +299,98 @@ const Format = ({ code, messageId, wrapper, onEvent, ...otherParams }: FormatPro
   }
 
   useEffect(() => {
+    if (!isAdViewVisible) return
+
     const interval = setInterval(() => {
       checkIfInViewport()
     }, 250)
 
     return () => clearInterval(interval)
-  }, [])
+  }, [isAdViewVisible])
 
-  if (!context || !bid || !iframeUrl || context.isDisabled) {
+  if (!context || !bid || !iframeUrl) {
     return null
   }
 
-  const getWidth = () => {
-    if (showIframe && iframeLoaded) {
-      return '100%'
-    }
-    return 0
-  }
-
-  const getHeight = () => {
-    if (showIframe && iframeLoaded) {
-      return height
-    }
-    return 0
-  }
+  const inlineContent = (
+    <FrameWebView
+      ref={webViewRef}
+      iframeUrl={iframeUrl}
+      onMessage={onMessage}
+      style={{
+        height,
+        width: '100%',
+        backgroundColor: 'transparent',
+        borderWidth: 0,
+        ...iframeStyles,
+      }}
+      onError={() => {
+        debug('iframe-error')
+        reset()
+      }}
+      onLoad={() => {
+        debug('iframe-load')
+      }}
+    />
+  )
 
-  const content = (
-    <>
-      <Modal
-        visible={modalOpen}
-        transparent={true}
-        onRequestClose={resetModal}
-        animationType="slide"
-        statusBarTranslucent={true}
+  const interstitialContent = (
+    <Modal
+      visible={modalOpen}
+      transparent={true}
+      onRequestClose={resetModal}
+      animationType="slide"
+      statusBarTranslucent={true}
+    >
+      <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' }),
+        }}
       >
-        <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}
+          ref={modalWebViewRef}
+          iframeUrl={modalUrl}
+          onMessage={onModalMessage}
           style={{
-            height: getHeight(),
-            width: getWidth(),
             backgroundColor: 'transparent',
+            height: '100%',
+            width: '100%',
             borderWidth: 0,
-            ...iframeStyles,
           }}
           onError={() => {
-            debug('iframe-error')
-            reset()
+            debug('modal-error')
+            resetModal()
           }}
           onLoad={() => {
-            debug('iframe-load')
+            debug('modal-load')
+            setModalLoaded(true)
           }}
         />
       </View>
-    </>
+    </Modal>
   )
 
-  return wrapper ? wrapper(content) : content
+  return (
+    <>
+      <View
+        style={
+          isAdViewVisible
+            ? containerStyles
+            : {
+                height: 0,
+                overflow: 'hidden',
+              }
+        }
+        ref={containerRef}
+      >
+        {wrapper ? wrapper(inlineContent) : inlineContent}
+      </View>
+
+      {interstitialContent}
+    </>
+  )
 }
 
 const FormatWithErrorBoundary = (props: FormatProps) => (