@kontextso/sdk-react-native 2.3.1 → 2.4.1

package/dist/index.js

@@ -107,7 +107,7 @@ var sendMessage = (webViewRef, type, code, data) => {
     }));
   `);
 };
-var Format = ({ code, messageId, wrapper, ...otherParams }) => {
+var Format = ({ code, messageId, wrapper, onEvent, ...otherParams }) => {
   const context = (0, import_react2.useContext)(import_sdk_react.AdsContext);
   const bid = (0, import_sdk_react.useBid)({ code, messageId });
   const [height, setHeight] = (0, import_react2.useState)(0);
@@ -126,6 +126,7 @@ var Format = ({ code, messageId, wrapper, ...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);
@@ -229,6 +230,10 @@ var Format = ({ code, messageId, wrapper, ...otherParams }) => {
                 }
               }, message.data.timeout ?? 5e3);
               break;
+            case "event-iframe":
+              onEvent?.(message.data);
+              context?.onAdEventInternal(message.data);
+              break;
           }
         },
         {
@@ -277,6 +282,10 @@ var Format = ({ code, messageId, wrapper, ...otherParams }) => {
               }
               context?.onAdClickInternal(message.data);
               break;
+            case "event-iframe":
+              onEvent?.(message.data);
+              context?.onAdEventInternal(message.data);
+              break;
           }
         },
         {
@@ -318,93 +327,93 @@ var Format = ({ code, messageId, wrapper, ...otherParams }) => {
     });
   };
   (0, import_react2.useEffect)(() => {
+    if (!isAdViewVisible) return;
     const interval = setInterval(() => {
       checkIfInViewport();
     }, 250);
     return () => clearInterval(interval);
-  }, []);
+  }, [isAdViewVisible]);
   if (!context || !bid || !iframeUrl || context.isDisabled) {
     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;
@@ -426,7 +435,7 @@ var import_react_native2 = require("react-native");
 var NativeRNKontext_default = import_react_native2.TurboModuleRegistry.getEnforcing("RNKontext");
 
 // package.json
-var version = "2.3.1-rc.2";
+var version = "2.4.1";
 
 // src/context/AdsProvider.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
@@ -472,7 +481,7 @@ var getDevice = async () => {
         // outputType: Not available without native module
       },
       network: {
-        // carrier: await DeviceInfo.getCarrier(),
+        // carrier: await DeviceInfo.getCarrier(), not supported in react-native-device-info v10.0.0
         userAgent: await import_react_native_device_info.default.getUserAgent()
         // detail: Requires @react-native-community/netinfo
         // type: Requires @react-native-community/netinfo
@@ -503,6 +512,7 @@ var getDevice = async () => {
 };
 var getApp = async () => ({
   bundleId: import_react_native_device_info.default.getBundleId(),
+  // not supported in react-native-device-info v10.0.0
   // firstInstallTime: await DeviceInfo.getFirstInstallTime(),
   // lastUpdateTime: await DeviceInfo.getLastUpdateTime(),
   // startTime: await DeviceInfo.getStartupTime(),

package/dist/index.mjs

@@ -76,7 +76,7 @@ var sendMessage = (webViewRef, type, code, data) => {
     }));
   `);
 };
-var Format = ({ code, messageId, wrapper, ...otherParams }) => {
+var Format = ({ code, messageId, wrapper, onEvent, ...otherParams }) => {
   const context = useContext(AdsContext);
   const bid = useBid({ code, messageId });
   const [height, setHeight] = useState(0);
@@ -95,6 +95,7 @@ var Format = ({ code, messageId, wrapper, ...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);
@@ -198,6 +199,10 @@ var Format = ({ code, messageId, wrapper, ...otherParams }) => {
                 }
               }, message.data.timeout ?? 5e3);
               break;
+            case "event-iframe":
+              onEvent?.(message.data);
+              context?.onAdEventInternal(message.data);
+              break;
           }
         },
         {
@@ -246,6 +251,10 @@ var Format = ({ code, messageId, wrapper, ...otherParams }) => {
               }
               context?.onAdClickInternal(message.data);
               break;
+            case "event-iframe":
+              onEvent?.(message.data);
+              context?.onAdEventInternal(message.data);
+              break;
           }
         },
         {
@@ -287,93 +296,93 @@ var Format = ({ code, messageId, wrapper, ...otherParams }) => {
     });
   };
   useEffect(() => {
+    if (!isAdViewVisible) return;
     const interval = setInterval(() => {
       checkIfInViewport();
     }, 250);
     return () => clearInterval(interval);
-  }, []);
+  }, [isAdViewVisible]);
   if (!context || !bid || !iframeUrl || context.isDisabled) {
     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;
@@ -395,7 +404,7 @@ import { TurboModuleRegistry } from "react-native";
 var NativeRNKontext_default = TurboModuleRegistry.getEnforcing("RNKontext");
 
 // package.json
-var version = "2.3.1-rc.2";
+var version = "2.4.1";
 
 // src/context/AdsProvider.tsx
 import { jsx as jsx4 } from "react/jsx-runtime";
@@ -441,7 +450,7 @@ var getDevice = async () => {
         // outputType: Not available without native module
       },
       network: {
-        // carrier: await DeviceInfo.getCarrier(),
+        // carrier: await DeviceInfo.getCarrier(), not supported in react-native-device-info v10.0.0
         userAgent: await DeviceInfo.getUserAgent()
         // detail: Requires @react-native-community/netinfo
         // type: Requires @react-native-community/netinfo
@@ -472,6 +481,7 @@ var getDevice = async () => {
 };
 var getApp = async () => ({
   bundleId: DeviceInfo.getBundleId(),
+  // not supported in react-native-device-info v10.0.0
   // firstInstallTime: await DeviceInfo.getFirstInstallTime(),
   // lastUpdateTime: await DeviceInfo.getLastUpdateTime(),
   // startTime: await DeviceInfo.getStartupTime(),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kontextso/sdk-react-native",
-  "version": "2.3.1",
+  "version": "2.4.1",
   "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.0.1"
+    "@kontextso/sdk-react": "^2.1.0"
   },
   "files": [
     "dist/*",

package/src/context/AdsProvider.tsx

@@ -50,7 +50,7 @@ const getDevice = async (): Promise<DeviceConfig> => {
         // outputType: Not available without native module
       },
       network: {
-        // carrier: await DeviceInfo.getCarrier(),
+        // carrier: await DeviceInfo.getCarrier(), not supported in react-native-device-info v10.0.0
         userAgent: await DeviceInfo.getUserAgent(),
         // detail: Requires @react-native-community/netinfo
         // type: Requires @react-native-community/netinfo
@@ -83,9 +83,12 @@ const getDevice = async (): Promise<DeviceConfig> => {
 
 const getApp = async (): Promise<AppConfig> => ({
   bundleId: DeviceInfo.getBundleId(),
+
+  // not supported in react-native-device-info v10.0.0
   // firstInstallTime: await DeviceInfo.getFirstInstallTime(),
   // lastUpdateTime: await DeviceInfo.getLastUpdateTime(),
   // startTime: await DeviceInfo.getStartupTime(),
+
   version: DeviceInfo.getVersion(),
 })
 

package/src/formats/Format.tsx

@@ -36,7 +36,7 @@ const sendMessage = (
   `)
 }
 
-const Format = ({ code, messageId, wrapper, ...otherParams }: FormatProps) => {
+const Format = ({ code, messageId, wrapper, onEvent, ...otherParams }: FormatProps) => {
   const context = useContext(AdsContext)
 
   const bid = useBid({ code, messageId })
@@ -63,6 +63,8 @@ const Format = ({ code, messageId, wrapper, ...otherParams }: FormatProps) => {
 
   const { height: windowHeight, width: windowWidth } = useWindowDimensions()
 
+  const isAdViewVisible = showIframe && iframeLoaded
+
   const reset = () => {
     setHeight(0)
     setShowIframe(false)
@@ -183,6 +185,11 @@ const Format = ({ code, messageId, wrapper, ...otherParams }: FormatProps) => {
                 }
               }, message.data.timeout ?? 5000)
               break
+
+            case 'event-iframe':
+              onEvent?.(message.data)
+              context?.onAdEventInternal(message.data)
+              break
           }
         },
         {
@@ -240,6 +247,11 @@ const Format = ({ code, messageId, wrapper, ...otherParams }: FormatProps) => {
               }
               context?.onAdClickInternal(message.data)
               break
+
+            case 'event-iframe':
+              onEvent?.(message.data)
+              context?.onAdEventInternal(message.data)
+              break
           }
         },
         {
@@ -287,94 +299,98 @@ const Format = ({ code, messageId, wrapper, ...otherParams }: FormatProps) => {
   }
 
   useEffect(() => {
+    if (!isAdViewVisible) return
+
     const interval = setInterval(() => {
       checkIfInViewport()
     }, 250)
 
     return () => clearInterval(interval)
-  }, [])
+  }, [isAdViewVisible])
 
   if (!context || !bid || !iframeUrl || context.isDisabled) {
     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) => (

package/src/formats/InlineAd.tsx

@@ -1,5 +1,5 @@
 import Format from './Format'
-import { type FormatProps } from '@kontextso/sdk-react'
+import type { FormatProps } from '@kontextso/sdk-react'
 
 const InlineAd = ({ code, messageId, wrapper, ...props }: FormatProps) => {
   return <Format code={code} messageId={messageId} wrapper={wrapper} {...props} />