@kontextso/sdk-react-native 2.4.1 → 2.5.1

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 keyboardHeightRef = (0, import_react2.useRef)(0);
   const isAdViewVisible = showIframe && iframeLoaded;
   const reset = () => {
     setHeight(0);
@@ -322,7 +323,8 @@ var Format = ({ code, messageId, wrapper, onEvent, ...otherParams }) => {
         containerWidth,
         containerHeight,
         containerX,
-        containerY
+        containerY,
+        keyboardHeight: keyboardHeightRef.current
       });
     });
   };
@@ -333,7 +335,20 @@ var Format = ({ code, messageId, wrapper, onEvent, ...otherParams }) => {
     }, 250);
     return () => clearInterval(interval);
   }, [isAdViewVisible]);
-  if (!context || !bid || !iframeUrl || context.isDisabled) {
+  (0, import_react2.useEffect)(() => {
+    const showSubscription = import_react_native.Keyboard.addListener("keyboardDidShow", (e) => {
+      keyboardHeightRef.current = e?.endCoordinates?.height ?? 0;
+    });
+    const hideSubscription = import_react_native.Keyboard.addListener("keyboardDidHide", () => {
+      keyboardHeightRef.current = 0;
+    });
+    return () => {
+      showSubscription.remove();
+      hideSubscription.remove();
+      keyboardHeightRef.current = 0;
+    };
+  }, []);
+  if (!context || !bid || !iframeUrl) {
     return null;
   }
   const inlineContent = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
@@ -435,7 +450,7 @@ var import_react_native2 = require("react-native");
 var NativeRNKontext_default = import_react_native2.TurboModuleRegistry.getEnforcing("RNKontext");
 
 // package.json
-var version = "2.4.1";
+var version = "2.5.0";
 
 // src/context/AdsProvider.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");

package/dist/index.mjs

@@ -7,7 +7,7 @@ import {
   useBid,
   useIframeUrl
 } from "@kontextso/sdk-react";
-import { Linking, Modal, View, useWindowDimensions } from "react-native";
+import { Linking, Modal, View, useWindowDimensions, Keyboard } from "react-native";
 
 // ../sdk-common/dist/index.mjs
 function makeIframeMessage(type, opts) {
@@ -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 keyboardHeightRef = useRef(0);
   const isAdViewVisible = showIframe && iframeLoaded;
   const reset = () => {
     setHeight(0);
@@ -291,7 +292,8 @@ var Format = ({ code, messageId, wrapper, onEvent, ...otherParams }) => {
         containerWidth,
         containerHeight,
         containerX,
-        containerY
+        containerY,
+        keyboardHeight: keyboardHeightRef.current
       });
     });
   };
@@ -302,7 +304,20 @@ var Format = ({ code, messageId, wrapper, onEvent, ...otherParams }) => {
     }, 250);
     return () => clearInterval(interval);
   }, [isAdViewVisible]);
-  if (!context || !bid || !iframeUrl || context.isDisabled) {
+  useEffect(() => {
+    const showSubscription = Keyboard.addListener("keyboardDidShow", (e) => {
+      keyboardHeightRef.current = e?.endCoordinates?.height ?? 0;
+    });
+    const hideSubscription = Keyboard.addListener("keyboardDidHide", () => {
+      keyboardHeightRef.current = 0;
+    });
+    return () => {
+      showSubscription.remove();
+      hideSubscription.remove();
+      keyboardHeightRef.current = 0;
+    };
+  }, []);
+  if (!context || !bid || !iframeUrl) {
     return null;
   }
   const inlineContent = /* @__PURE__ */ jsx2(
@@ -404,7 +419,7 @@ import { TurboModuleRegistry } from "react-native";
 var NativeRNKontext_default = TurboModuleRegistry.getEnforcing("RNKontext");
 
 // package.json
-var version = "2.4.1";
+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.1",
+  "version": "2.5.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.1.0"
+    "@kontextso/sdk-react": "^2.2.1"
   },
   "files": [
     "dist/*",

package/src/formats/Format.tsx

@@ -8,7 +8,7 @@ import {
   type FormatProps,
 } from '@kontextso/sdk-react'
 import type { WebView, WebViewMessageEvent } from 'react-native-webview'
-import { Linking, Modal, View, useWindowDimensions } from 'react-native'
+import { Linking, Modal, View, useWindowDimensions, Keyboard } from 'react-native'
 import {
   handleIframeMessage,
   type IframeMessageEvent,
@@ -63,6 +63,8 @@ const Format = ({ code, messageId, wrapper, onEvent, ...otherParams }: FormatPro
 
   const { height: windowHeight, width: windowWidth } = useWindowDimensions()
 
+  const keyboardHeightRef = useRef(0);
+
   const isAdViewVisible = showIframe && iframeLoaded
 
   const reset = () => {
@@ -294,6 +296,7 @@ const Format = ({ code, messageId, wrapper, onEvent, ...otherParams }: FormatPro
         containerHeight,
         containerX,
         containerY,
+        keyboardHeight: keyboardHeightRef.current,
       })
     })
   }
@@ -308,7 +311,22 @@ const Format = ({ code, messageId, wrapper, onEvent, ...otherParams }: FormatPro
     return () => clearInterval(interval)
   }, [isAdViewVisible])
 
-  if (!context || !bid || !iframeUrl || context.isDisabled) {
+  useEffect(() => {
+    const showSubscription = Keyboard.addListener('keyboardDidShow', (e) => {
+      keyboardHeightRef.current = e?.endCoordinates?.height ?? 0;
+    });
+    const hideSubscription = Keyboard.addListener('keyboardDidHide', () => {
+      keyboardHeightRef.current = 0;
+    });
+
+    return () => {
+      showSubscription.remove();
+      hideSubscription.remove();
+      keyboardHeightRef.current = 0;
+    };
+  }, []);
+
+  if (!context || !bid || !iframeUrl) {
     return null
   }