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

package/README.md

@@ -83,5 +83,5 @@ function MessageList({ messages }: { messages: Message[] }) {
 
 ## Additional Resources
 
-* Explore a working [Demo Project featuring SDK integration](https://github.com/kontextso/kontext-react-native-demo).
+* 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).

package/RNKontext.podspec

@@ -0,0 +1,21 @@
+require "json"
+
+package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+
+Pod::Spec.new do |s|
+  s.name         = "RNKontext"
+  s.version      = package["version"]
+  s.summary      = package["description"]
+  s.homepage     = package["homepage"]
+  s.license      = package["license"]
+  s.authors      = package["author"]
+
+  s.platforms    = { :ios => min_ios_version_supported }
+  s.source       = { :git => ".git", :tag => "#{s.version}" }
+
+  s.source_files = "ios/**/*.{h,m,mm,cpp,swift}"
+  s.private_header_files = "ios/**/*.h"
+
+
+  install_modules_dependencies(s)
+end

package/android/build.gradle

@@ -0,0 +1,88 @@
+buildscript {
+  ext.getExtOrDefault = {name ->
+    return rootProject.ext.has(name) ? rootProject.ext.get(name) : project.properties['RNKontext_' + name]
+  }
+
+  repositories {
+    google()
+    mavenCentral()
+  }
+
+  dependencies {
+    classpath "com.android.tools.build:gradle:8.7.2"
+    // noinspection DifferentKotlinGradleVersion
+    classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:${getExtOrDefault('kotlinVersion')}"
+  }
+}
+
+
+apply plugin: "com.android.library"
+apply plugin: "kotlin-android"
+
+apply plugin: "com.facebook.react"
+
+def isNewArchitectureEnabled() {
+  return project.hasProperty("newArchEnabled") && project.newArchEnabled == "true"
+}
+
+def getExtOrIntegerDefault(name) {
+  return rootProject.ext.has(name) ? rootProject.ext.get(name) : (project.properties["RNKontext_" + name]).toInteger()
+}
+
+android {
+  namespace "so.kontext.react"
+
+  compileSdkVersion getExtOrIntegerDefault("compileSdkVersion")
+
+  defaultConfig {
+    minSdkVersion getExtOrIntegerDefault("minSdkVersion")
+    targetSdkVersion getExtOrIntegerDefault("targetSdkVersion")
+    // Expose the new-arch flag to runtime and build-time Kotlin/Java code
+    buildConfigField "boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchitectureEnabled().toString()
+  }
+
+  buildFeatures {
+    buildConfig true
+  }
+
+  buildTypes {
+    release {
+      minifyEnabled false
+    }
+  }
+
+  lintOptions {
+    disable "GradleCompatible"
+  }
+
+  compileOptions {
+    sourceCompatibility JavaVersion.VERSION_1_8
+    targetCompatibility JavaVersion.VERSION_1_8
+  }
+
+  sourceSets {
+    main {
+      java.srcDirs += [
+        "generated/java",
+        "generated/jni"
+      ]
+      if (isNewArchitectureEnabled()) {
+        java.srcDirs += ['src/newarch/java']
+      } else {
+        java.srcDirs += ['src/oldarch/java']
+      }
+    }
+  }
+}
+
+repositories {
+  mavenCentral()
+  google()
+}
+
+def kotlin_version = getExtOrDefault("kotlinVersion")
+
+dependencies {
+  implementation "com.facebook.react:react-android"
+  implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
+}

package/android/gradle.properties

@@ -0,0 +1,5 @@
+RNKontext_kotlinVersion=2.0.21
+RNKontext_minSdkVersion=24
+RNKontext_targetSdkVersion=34
+RNKontext_compileSdkVersion=35
+RNKontext_ndkVersion=27.1.12297006

package/android/src/main/AndroidManifest.xml

@@ -0,0 +1,2 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+</manifest>

package/android/src/main/java/so/kontext/react/RNKontextModuleImpl.kt

@@ -0,0 +1,21 @@
+package so.kontext.react
+
+import com.facebook.react.bridge.Promise
+import com.facebook.react.bridge.ReactApplicationContext
+import android.content.Context
+import android.media.AudioManager
+
+class RNKontextModuleImpl(private val reactContext: ReactApplicationContext) {
+  fun isSoundOn(promise: Promise?) {
+    val audioManager = reactContext.getSystemService(Context.AUDIO_SERVICE) as AudioManager
+    val current = audioManager.getStreamVolume(AudioManager.STREAM_MUSIC)
+    val max = audioManager.getStreamMaxVolume(AudioManager.STREAM_MUSIC)
+    val volume = if (max > 0) current.toFloat() / max.toFloat() else 0f
+
+    promise?.resolve(volume > MINIMAL_VOLUME_THRESHOLD)
+  }
+
+  companion object {
+    private const val MINIMAL_VOLUME_THRESHOLD = 0.0f
+  }
+}

package/android/src/newarch/java/so/kontext/react/RNKontextModule.kt

@@ -0,0 +1,22 @@
+package so.kontext.react
+
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.module.annotations.ReactModule
+import com.facebook.react.bridge.Promise
+
+@ReactModule(name = RNKontextModule.NAME)
+class RNKontextModule(reactContext: ReactApplicationContext) :
+  NativeRNKontextSpec(reactContext) {
+
+  private val impl = RNKontextModuleImpl(reactContext)
+
+  override fun getName(): String = NAME
+
+  override fun isSoundOn(promise: Promise?) {
+    impl.isSoundOn(promise)
+  }
+
+  companion object {
+    const val NAME = "RNKontext"
+  }
+}

package/android/src/newarch/java/so/kontext/react/RNKontextPackage.kt

@@ -0,0 +1,32 @@
+package so.kontext.react
+
+import com.facebook.react.BaseReactPackage
+import com.facebook.react.bridge.NativeModule
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.module.model.ReactModuleInfo
+import com.facebook.react.module.model.ReactModuleInfoProvider
+
+class RNKontextPackage : BaseReactPackage() {
+  override fun getModule(name: String, reactContext: ReactApplicationContext): NativeModule? {
+    return if (name == RNKontextModule.NAME) {
+      RNKontextModule(reactContext)
+    } else {
+      null
+    }
+  }
+
+  override fun getReactModuleInfoProvider(): ReactModuleInfoProvider {
+    return ReactModuleInfoProvider {
+      mapOf(
+        RNKontextModule.NAME to ReactModuleInfo(
+          RNKontextModule.NAME,
+          RNKontextModule.NAME,
+          false,  // canOverrideExistingModule
+          false,  // needsEagerInit
+          false,  // isCxxModule
+          true    // isTurboModule
+        )
+      )
+    }
+  }
+}

package/android/src/oldarch/java/so/kontext/react/RNKontextModule.kt

@@ -0,0 +1,25 @@
+package so.kontext.react
+
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.bridge.ReactContextBaseJavaModule
+import com.facebook.react.bridge.ReactMethod
+import com.facebook.react.bridge.Promise
+import android.content.Context
+import android.media.AudioManager
+
+class RNKontextModule(reactContext: ReactApplicationContext) :
+  ReactContextBaseJavaModule(reactContext) {
+
+  private val impl = RNKontextModuleImpl(reactContext)
+
+  override fun getName(): String = NAME
+
+  @ReactMethod
+  fun isSoundOn(promise: Promise?) {
+    impl.isSoundOn(promise)
+  }
+
+  companion object {
+    const val NAME = "RNKontext"
+  }
+}

package/android/src/oldarch/java/so/kontext/react/RNKontextPacakge.kt

@@ -0,0 +1,16 @@
+package so.kontext.react
+
+import com.facebook.react.ReactPackage
+import com.facebook.react.bridge.NativeModule
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.uimanager.ViewManager
+
+class RNKontextPackage : ReactPackage {
+  override fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> {
+    return listOf(RNKontextModule(reactContext))
+  }
+
+  override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
+    return emptyList()
+  }
+}

package/dist/index.js

@@ -400,9 +400,14 @@ var InlineAd_default = InlineAd;
 
 // src/context/AdsProvider.tsx
 var import_sdk_react2 = require("@kontextso/sdk-react");
-var import_react_native2 = require("react-native");
+var import_react_native3 = require("react-native");
 var import_react_native_device_info = __toESM(require("react-native-device-info"));
-var import_soundon = require("@kontextso/soundon");
+
+// src/NativeRNKontext.ts
+var import_react_native2 = require("react-native");
+var NativeRNKontext_default = import_react_native2.TurboModuleRegistry.getEnforcing("RNKontext");
+
+// src/context/AdsProvider.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
 ErrorUtils.setGlobalHandler((error, isFatal) => {
   if (!isFatal) {
@@ -413,7 +418,7 @@ ErrorUtils.setGlobalHandler((error, isFatal) => {
 });
 var getDevice = async () => {
   try {
-    const os = import_react_native2.Platform.OS;
+    const os = import_react_native3.Platform.OS;
     const systemVersion = import_react_native_device_info.default.getSystemVersion();
     const model = import_react_native_device_info.default.getModel();
     const brand = import_react_native_device_info.default.getBrand();
@@ -423,11 +428,11 @@ var getDevice = async () => {
     const appVersion = import_react_native_device_info.default.getVersion();
     let soundOn = false;
     try {
-      soundOn = await (0, import_soundon.isSoundOn)();
+      soundOn = await NativeRNKontext_default.isSoundOn();
     } catch (error) {
       import_sdk_react2.log.warn("Failed to read output volume", error);
     }
-    const rnv = import_react_native2.Platform.constants.reactNativeVersion;
+    const rnv = import_react_native3.Platform.constants.reactNativeVersion;
     const reactNativeVersion = `${rnv.major}.${rnv.minor}.${rnv.patch}`;
     return {
       os,

package/dist/index.mjs

@@ -371,7 +371,12 @@ var InlineAd_default = InlineAd;
 import { AdsProviderInternal, log } from "@kontextso/sdk-react";
 import { Platform } from "react-native";
 import DeviceInfo from "react-native-device-info";
-import { isSoundOn } from "@kontextso/soundon";
+
+// src/NativeRNKontext.ts
+import { TurboModuleRegistry } from "react-native";
+var NativeRNKontext_default = TurboModuleRegistry.getEnforcing("RNKontext");
+
+// src/context/AdsProvider.tsx
 import { jsx as jsx4 } from "react/jsx-runtime";
 ErrorUtils.setGlobalHandler((error, isFatal) => {
   if (!isFatal) {
@@ -392,7 +397,7 @@ var getDevice = async () => {
     const appVersion = DeviceInfo.getVersion();
     let soundOn = false;
     try {
-      soundOn = await isSoundOn();
+      soundOn = await NativeRNKontext_default.isSoundOn();
     } catch (error) {
       log.warn("Failed to read output volume", error);
     }

package/ios/KontextSDK.swift

@@ -0,0 +1,26 @@
+import AVFoundation
+
+@objc(KontextSDK)
+public class KontextSDK: NSObject {
+    private static let MINIMAL_VOLUME_THRESHOLD: Float = 0.0
+
+    @objc
+    public static func isSoundOn() -> NSNumber? {
+        let session = AVAudioSession.sharedInstance()
+
+        do {
+            try session.setCategory(
+                .ambient,
+                mode: .default,
+                options: [.mixWithOthers]
+            )
+            try session.setActive(true)
+
+            return NSNumber(
+                value: session.outputVolume > MINIMAL_VOLUME_THRESHOLD
+            )
+        } catch {
+            return nil
+        }
+    }
+}

package/ios/RNKontext.h

@@ -0,0 +1,13 @@
+#import "RNKontext-Swift.h"
+
+#ifdef RCT_NEW_ARCH_ENABLED
+#import <RNKontextSpec/RNKontextSpec.h>
+
+@interface RNKontext: NSObject <NativeRNKontextSpec>
+#else
+#import <React/RCTBridgeModule.h>
+
+@interface RNKontext: NSObject <RCTBridgeModule>
+#endif
+
+@end

package/ios/RNKontext.mm

@@ -0,0 +1,36 @@
+#import "RNKontext.h"
+
+@implementation RNKontext
+
+RCT_EXPORT_MODULE()
+
+#ifdef RCT_NEW_ARCH_ENABLED
+- (void)isSoundOn:(RCTPromiseResolveBlock)resolve
+           reject:(RCTPromiseRejectBlock)reject {
+    NSNumber *isSoundOn = [KontextSDK isSoundOn];
+
+    if (isSoundOn == nil) {
+        reject(@"soundon_error", @"Failed to read output volume", nil);
+    } else {
+        resolve(isSoundOn);
+    }
+}
+
+- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:
+    (const facebook::react::ObjCTurboModule::InitParams &)params {
+    return std::make_shared<facebook::react::NativeRNKontextSpecJSI>(params);
+}
+#else
+RCT_EXPORT_METHOD(isSoundOn : (RCTPromiseResolveBlock)
+                      resolve rejecter : (RCTPromiseRejectBlock)reject) {
+    NSNumber *isSoundOn = [KontextSDK isSoundOn];
+
+    if (isSoundOn == nil) {
+        reject(@"soundon_error", @"Failed to read output volume", nil);
+    } else {
+        resolve(isSoundOn);
+    }
+}
+#endif
+
+@end

package/package.json

@@ -1,11 +1,14 @@
 {
   "name": "@kontextso/sdk-react-native",
-  "version": "2.1.1-rc.0",
+  "version": "2.2.0-rc.1",
+  "description": "Kontext SDK for React Native",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "type": "commonjs",
   "license": "Apache-2.0",
+  "author": "Kontext",
+  "homepage": "https://github.com/kontextso",
   "scripts": {
     "dev:js": "tsup --watch",
     "dev": "npm-run-all dev:js",
@@ -52,11 +55,29 @@
     "react-native-webview": "^13.15.0"
   },
   "dependencies": {
-    "@kontextso/sdk-react": "^1.2.4",
-    "@kontextso/soundon": "^1.0.0"
+    "@kontextso/sdk-react": "^1.2.4"
   },
   "files": [
     "dist/*",
-    "LICENSE"
-  ]
+    "src",
+    "android",
+    "ios",
+    "*.podspec",
+    "LICENSE",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/.*"
+  ],
+  "codegenConfig": {
+    "name": "RNKontextSpec",
+    "type": "modules",
+    "jsSrcsDir": "src",
+    "android": {
+      "javaPackageName": "so.kontext.react"
+    }
+  }
 }

package/src/NativeRNKontext.ts

@@ -0,0 +1,8 @@
+import type { TurboModule } from 'react-native'
+import { TurboModuleRegistry } from 'react-native'
+
+export interface Spec extends TurboModule {
+  isSoundOn(): Promise<boolean>
+}
+
+export default TurboModuleRegistry.getEnforcing<Spec>('RNKontext')

package/src/context/AdsProvider.tsx

@@ -0,0 +1,58 @@
+'use client'
+
+import type { AdsProviderProps, Device } from '@kontextso/sdk-react'
+import { AdsProviderInternal, log } from '@kontextso/sdk-react'
+import { Platform } from 'react-native'
+import DeviceInfo from 'react-native-device-info'
+import KontextSDK from '../NativeRNKontext'
+
+ErrorUtils.setGlobalHandler((error, isFatal) => {
+  if (!isFatal) {
+    log.warn(error)
+  } else {
+    log.error(error)
+  }
+})
+
+const getDevice = async (): Promise<Device> => {
+  try {
+    const os = Platform.OS
+    const systemVersion = DeviceInfo.getSystemVersion()
+    const model = DeviceInfo.getModel()
+    const brand = DeviceInfo.getBrand()
+    const deviceId = DeviceInfo.getDeviceId()
+    const deviceType = DeviceInfo.getDeviceType()
+    const appBundleId = DeviceInfo.getBundleId()
+    const appVersion = DeviceInfo.getVersion()
+
+    let soundOn = false
+    try {
+      soundOn = await KontextSDK.isSoundOn()
+    } catch (error) {
+      log.warn('Failed to read output volume', error)
+    }
+
+    const rnv = Platform.constants.reactNativeVersion
+    const reactNativeVersion = `${rnv.major}.${rnv.minor}.${rnv.patch}`
+
+    return {
+      os,
+      systemVersion,
+      reactNativeVersion,
+      model,
+      brand,
+      deviceId,
+      deviceType,
+      appBundleId,
+      appVersion,
+      soundOn,
+    }
+  } catch (error) {
+    console.error(error)
+  }
+  return {}
+}
+
+export const AdsProvider = (props: AdsProviderProps) => {
+  return <AdsProviderInternal {...props} getDevice={getDevice} />
+}

package/src/formats/Format.tsx

@@ -0,0 +1,370 @@
+import { useContext, useEffect, useRef, useState } from 'react'
+import {
+  AdsContext,
+  convertParamsToString,
+  ErrorBoundary,
+  useBid,
+  useIframeUrl,
+  type FormatProps,
+} from '@kontextso/sdk-react'
+import type { WebView, WebViewMessageEvent } from 'react-native-webview'
+import { Linking, Modal, View, useWindowDimensions } from 'react-native'
+import {
+  handleIframeMessage,
+  type IframeMessageEvent,
+  type IframeMessageType,
+  makeIframeMessage,
+  type IframeMessage,
+} from '@kontextso/sdk-common'
+import FrameWebView from '../frame-webview'
+
+const sendMessage = (
+  webViewRef: React.RefObject<WebView>,
+  type: Extract<IframeMessageType, 'update-iframe' | 'update-dimensions-iframe'>,
+  code: string,
+  data: any
+) => {
+  const message = makeIframeMessage(type, {
+    data,
+    code,
+  })
+
+  webViewRef.current?.injectJavaScript(`
+    window.dispatchEvent(new MessageEvent('message', {
+      data: ${JSON.stringify(message)}
+    }));
+  `)
+}
+
+const Format = ({ code, messageId, wrapper, ...otherParams }: FormatProps) => {
+  const context = useContext(AdsContext)
+
+  const bid = useBid({ code, messageId })
+  const [height, setHeight] = useState<number>(0)
+
+  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()
+
+  const reset = () => {
+    setHeight(0)
+    setShowIframe(false)
+    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,
+      messageId,
+      otherParams,
+      bid,
+      iframeUrl,
+      iframeLoaded,
+      showIframe,
+      height,
+      containerStyles,
+      iframeStyles,
+      ...data,
+    })
+  }
+
+  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) => {
+    try {
+      const data = JSON.parse(event.nativeEvent.data) as IframeMessage
+
+      debug('iframe-message', {
+        message: data,
+      })
+
+      const messageHandler = handleIframeMessage(
+        (message) => {
+          switch (message.type) {
+            case 'init-iframe':
+              setIframeLoaded(true)
+              debug('iframe-post-message')
+              sendMessage(webViewRef, 'update-iframe', code, {
+                messages: context?.messages,
+                sdk: 'sdk-react-native',
+                otherParams,
+                messageId,
+              })
+              break
+
+            case 'error-iframe':
+              reset()
+              break
+
+            case 'resize-iframe':
+              setHeight(message.data.height)
+              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
+
+            case 'view-iframe':
+              context?.onAdViewInternal(message.data)
+              break
+
+            case 'show-iframe':
+              setShowIframe(true)
+              break
+
+            case 'hide-iframe':
+              setShowIframe(false)
+              break
+
+            case 'set-styles-iframe':
+              setContainerStyles(message.data.containerStyles)
+              setIframeStyles(message.data.iframeStyles)
+              break
+
+            case 'open-component-iframe':
+              setModalOpen(true)
+
+              modalInitTimeoutRef.current = setTimeout(resetModal, message.data.timeout ?? 5000)
+              break
+          }
+        },
+        {
+          code,
+        }
+      )
+      messageHandler({ data } as IframeMessageEvent)
+    } catch (e) {
+      debug('iframe-message-error', {
+        error: e,
+      })
+      console.error('error parsing message from webview', e)
+      reset()
+    }
+  }
+
+  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(() => {
+    if (!iframeLoaded || !context?.adServerUrl || !bid || !webViewRef.current) {
+      return
+    }
+    debug('iframe-post-message')
+    sendMessage(webViewRef, 'update-iframe', code, {
+      data: { otherParams },
+      code,
+    })
+    // because we use the rest params, the object is alaways new and useEffect would be called on every render
+  }, [paramsString, iframeLoaded, context?.adServerUrl, bid, code])
+
+  const checkIfInViewport = () => {
+    if (!containerRef.current) return
+
+    containerRef.current.measureInWindow((containerX, containerY, containerWidth, containerHeight) => {
+      sendMessage(webViewRef, 'update-dimensions-iframe', code, {
+        windowWidth,
+        windowHeight,
+        containerWidth,
+        containerHeight,
+        containerX,
+        containerY,
+      })
+    })
+  }
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      checkIfInViewport()
+    }, 250)
+
+    return () => clearInterval(interval)
+  }, [])
+
+  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 content = (
+    <>
+      <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
+}
+
+const FormatWithErrorBoundary = (props: FormatProps) => (
+  <ErrorBoundary>
+    <Format {...props} />
+  </ErrorBoundary>
+)
+
+export default FormatWithErrorBoundary

package/src/formats/InlineAd.tsx

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

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

package/src/index.ts

@@ -0,0 +1,5 @@
+import InlineAd from './formats/InlineAd'
+
+export * from './context/AdsProvider'
+
+export { InlineAd }