@sellwild/react-native-sdk 1.2.0 → 1.3.0

package/android/src/main/java/com/sellwild/rnsdk/SellwildBannerViewManager.kt

@@ -0,0 +1,200 @@
+package com.sellwild.rnsdk
+
+import com.facebook.react.bridge.ReactContext
+import com.facebook.react.bridge.ReadableMap
+import com.facebook.react.common.MapBuilder
+import com.facebook.react.uimanager.SimpleViewManager
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.annotations.ReactProp
+import com.facebook.react.uimanager.events.RCTEventEmitter
+import com.sellwild.sdk.AdSize
+import com.sellwild.sdk.SellwildAdView
+import com.sellwild.sdk.SellwildConfig
+import org.json.JSONObject
+
+/**
+ * Bridges the JS <SellwildBanner> component to the native
+ * com.sellwild.sdk.SellwildAdView.
+ *
+ * Props (set from JS):
+ *   - config: object — the resolved SellwildConfig (from configure()).
+ *     Only the fields the native ad path reads are required:
+ *       partnerCode, appBundleId, appStoreUrl, gamTag, debug,
+ *       adRefreshMax, adRefreshMaxMobile, adRefreshIntervalMs,
+ *       prebidServer (object), remote (object).
+ *   - size: string — "320x50", "300x250", "728x90", "300x600", "160x600".
+ *   - zoneId: string — Sellwild zone tag, e.g. "43".
+ *
+ * Events emitted to JS:
+ *   - onAdLoaded
+ *   - onAdImpression
+ *   - onAdClicked
+ *   - onAdFailed { message }
+ *
+ * The view defers calling SellwildAdView.setup() + load() until all three
+ * required props (config, size, zoneId) have arrived in a single transaction.
+ */
+class SellwildBannerViewManager : SimpleViewManager<SellwildAdView>() {
+
+    override fun getName(): String = REACT_CLASS
+
+    /**
+     * Per-view scratch state. We can't call SellwildAdView.setup() until
+     * all three required props (config/size/zoneId) have arrived, so we
+     * stash them here and apply on onAfterUpdateTransaction.
+     *
+     * Keyed by the ad view itself so multiple <SellwildBanner>s on screen
+     * don't collide. Cleared on view drop.
+     */
+    private val pending = java.util.WeakHashMap<SellwildAdView, PendingProps>()
+
+    private data class PendingProps(
+        var config: ReadableMap? = null,
+        var size: String? = null,
+        var zoneId: String? = null,
+        // Guards against running fresh auctions on every JS re-render. We
+        // only call setup() + load() once per identity tuple. Refresh of
+        // the rendered ad is driven by the SDK's internal timer.
+        var lastAppliedKey: String? = null,
+    )
+
+    override fun createViewInstance(reactContext: ThemedReactContext): SellwildAdView {
+        val view = SellwildAdView(reactContext)
+        pending[view] = PendingProps()
+        view.listener = object : SellwildAdView.Listener {
+            override fun onAdLoaded(adView: SellwildAdView) {
+                emit(reactContext, adView, "onAdLoaded", null)
+            }
+
+            override fun onAdImpression(adView: SellwildAdView, zoneId: String) {
+                val payload = com.facebook.react.bridge.Arguments.createMap().apply {
+                    putString("zoneId", zoneId)
+                }
+                emit(reactContext, adView, "onAdImpression", payload)
+            }
+
+            override fun onAdClicked(adView: SellwildAdView) {
+                emit(reactContext, adView, "onAdClicked", null)
+            }
+
+            override fun onAdFailed(adView: SellwildAdView, message: String) {
+                val payload = com.facebook.react.bridge.Arguments.createMap().apply {
+                    putString("message", message)
+                }
+                emit(reactContext, adView, "onAdFailed", payload)
+            }
+        }
+        return view
+    }
+
+    @ReactProp(name = "config")
+    fun setConfig(view: SellwildAdView, value: ReadableMap?) {
+        pendingFor(view).config = value
+    }
+
+    @ReactProp(name = "size")
+    fun setSize(view: SellwildAdView, value: String?) {
+        pendingFor(view).size = value
+    }
+
+    @ReactProp(name = "zoneId")
+    fun setZoneId(view: SellwildAdView, value: String?) {
+        pendingFor(view).zoneId = value
+    }
+
+    override fun onAfterUpdateTransaction(view: SellwildAdView) {
+        super.onAfterUpdateTransaction(view)
+
+        val p = pending[view] ?: return
+        val configMap = p.config ?: return
+        val sizeLabel = p.size ?: return
+        val zoneId = p.zoneId ?: return
+
+        val adSize = adSizeFromLabel(sizeLabel) ?: return
+
+        // Skip if the props identity hasn't changed since last apply.
+        val key = "$sizeLabel|$zoneId|${configMap.hashCode()}"
+        if (p.lastAppliedKey == key) return
+        p.lastAppliedKey = key
+
+        val config = configFromMap(configMap)
+        view.setup(config, adSize, zoneId)
+        view.load()
+    }
+
+    override fun onDropViewInstance(view: SellwildAdView) {
+        pending.remove(view)
+        super.onDropViewInstance(view)
+    }
+
+    private fun pendingFor(view: SellwildAdView): PendingProps =
+        pending.getOrPut(view) { PendingProps() }
+
+    override fun getExportedCustomDirectEventTypeConstants(): Map<String, Any> {
+        return MapBuilder.builder<String, Any>()
+            .put("onAdLoaded", MapBuilder.of("registrationName", "onAdLoaded"))
+            .put("onAdImpression", MapBuilder.of("registrationName", "onAdImpression"))
+            .put("onAdClicked", MapBuilder.of("registrationName", "onAdClicked"))
+            .put("onAdFailed", MapBuilder.of("registrationName", "onAdFailed"))
+            .build()
+    }
+
+    private fun emit(
+        context: ReactContext,
+        view: SellwildAdView,
+        name: String,
+        payload: com.facebook.react.bridge.WritableMap?,
+    ) {
+        context.getJSModule(RCTEventEmitter::class.java)
+            .receiveEvent(view.id, name, payload)
+    }
+
+    companion object {
+        const val REACT_CLASS = "SellwildBannerView"
+
+        internal fun adSizeFromLabel(label: String): AdSize? = when (label) {
+            "320x50" -> AdSize.BANNER_320x50
+            "300x250" -> AdSize.MREC_300x250
+            "728x90" -> AdSize.LEADERBOARD_728x90
+            "300x600" -> AdSize.HALF_PAGE_300x600
+            "160x600" -> AdSize.WIDE_SKYSCRAPER_160x600
+            else -> null
+        }
+
+        /**
+         * Build a minimal SellwildConfig from a JS map. Only the fields the
+         * native banner path actually reads are mapped here; everything else
+         * gets sane defaults from the data class. The raw CDN JSON (if
+         * present under `remote`) is preserved as `remoteJson` for the
+         * passthrough auction params.
+         */
+        internal fun configFromMap(map: ReadableMap): SellwildConfig {
+            val partnerCode = if (map.hasKey("partnerCode")) map.getString("partnerCode") else null
+            val appBundleId = if (map.hasKey("appBundleId")) map.getString("appBundleId") else null
+            val appStoreUrl = if (map.hasKey("appStoreUrl")) map.getString("appStoreUrl") else null
+            val gamTag = if (map.hasKey("gamTag")) map.getString("gamTag") else null
+            val debug = map.hasKey("debug") && map.getBoolean("debug")
+            val adRefreshMax = if (map.hasKey("adRefreshMax")) map.getInt("adRefreshMax") else 0
+            val adRefreshMaxMobile = if (map.hasKey("adRefreshMaxMobile")) map.getInt("adRefreshMaxMobile") else 0
+            val adRefreshIntervalMs = if (map.hasKey("adRefreshIntervalMs")) map.getDouble("adRefreshIntervalMs").toLong() else 30_000L
+
+            val remoteJson = if (map.hasKey("remote") && !map.isNull("remote")) {
+                JSONObject(map.getMap("remote")!!.toHashMap()).toString()
+            } else {
+                null
+            }
+
+            return SellwildConfig(
+                partnerCode = partnerCode ?: "",
+                appBundleId = appBundleId,
+                appStoreUrl = appStoreUrl,
+                gamTag = gamTag,
+                debug = debug,
+                adRefreshMax = adRefreshMax,
+                adRefreshMaxMobile = adRefreshMaxMobile,
+                adRefreshIntervalMs = adRefreshIntervalMs,
+                remoteJson = remoteJson,
+            )
+        }
+    }
+}

package/android/src/main/java/com/sellwild/rnsdk/SellwildSdkPackage.kt

@@ -0,0 +1,18 @@
+package com.sellwild.rnsdk
+
+import android.view.View
+import com.facebook.react.ReactPackage
+import com.facebook.react.bridge.NativeModule
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.uimanager.ReactShadowNode
+import com.facebook.react.uimanager.ViewManager
+
+class SellwildSdkPackage : ReactPackage {
+    override fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> = emptyList()
+
+    override fun createViewManagers(
+        reactContext: ReactApplicationContext,
+    ): List<ViewManager<out View, out ReactShadowNode<*>>> = listOf(
+        SellwildBannerViewManager(),
+    )
+}

package/ios/SellwildBannerViewManager.m

@@ -0,0 +1,24 @@
+#import <React/RCTViewManager.h>
+#import <React/RCTUIManager.h>
+#import <React/RCTBridgeModule.h>
+
+// Register the view manager class with React Native. We export it under
+// the JS name "SellwildBannerView" to match the Android side
+// (com.sellwild.rnsdk.SellwildBannerViewManager.REACT_CLASS).
+@interface RCT_EXTERN_REMAP_MODULE(SellwildBannerView,
+                                   SellwildBannerViewManager,
+                                   RCTViewManager)
+
+// Props set from JS — these forward to @objc properties on
+// SellwildBannerHostView.
+RCT_EXPORT_VIEW_PROPERTY(config, NSDictionary)
+RCT_EXPORT_VIEW_PROPERTY(size, NSString)
+RCT_EXPORT_VIEW_PROPERTY(zoneId, NSString)
+
+// Direct events emitted to JS callbacks.
+RCT_EXPORT_VIEW_PROPERTY(onAdLoaded, RCTDirectEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(onAdImpression, RCTDirectEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(onAdClicked, RCTDirectEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(onAdFailed, RCTDirectEventBlock)
+
+@end

package/ios/SellwildBannerViewManager.swift

@@ -0,0 +1,168 @@
+import Foundation
+import React
+import SellwildSDK
+import UIKit
+
+/// Bridges the JS `<SellwildBanner>` component to the native
+/// `SellwildAdView` (Prebid Mobile + AdManagerBannerView). Mirrors the
+/// Android `SellwildBannerViewManager` shape.
+///
+/// Props (set from JS):
+///   - config: object — the resolved SellwildConfig (from configure()).
+///       Only the fields the native ad path reads are required.
+///   - size: string — "320x50", "300x250", "728x90", "300x600", "160x600".
+///   - zoneId: string — Sellwild zone tag, e.g. "43".
+///
+/// Events emitted to JS:
+///   - onAdLoaded
+///   - onAdImpression { zoneId }
+///   - onAdClicked
+///   - onAdFailed { message }
+@objc(SellwildBannerViewManager)
+public final class SellwildBannerViewManager: RCTViewManager {
+
+    public override static func requiresMainQueueSetup() -> Bool { true }
+
+    public override func view() -> UIView! {
+        return SellwildBannerHostView()
+    }
+}
+
+/// The actual UIView that hosts a `SellwildAdView`. We can't construct
+/// `SellwildAdView` until all three required props (config / size /
+/// zoneId) have arrived, so we cache them and apply once on
+/// `didSetProps:`.
+final class SellwildBannerHostView: UIView, SellwildAdViewDelegate {
+
+    // MARK: RN-set props
+
+    @objc var config: NSDictionary? { didSet { needsApply = true } }
+    @objc var size: NSString? { didSet { needsApply = true } }
+    @objc var zoneId: NSString? { didSet { needsApply = true } }
+
+    // MARK: RN events
+
+    @objc var onAdLoaded: RCTDirectEventBlock?
+    @objc var onAdImpression: RCTDirectEventBlock?
+    @objc var onAdClicked: RCTDirectEventBlock?
+    @objc var onAdFailed: RCTDirectEventBlock?
+
+    // MARK: Internals
+
+    private var adView: SellwildAdView?
+    private var lastAppliedKey: String?
+    private var needsApply: Bool = false
+
+    override init(frame: CGRect) {
+        super.init(frame: frame)
+    }
+
+    required init?(coder: NSCoder) { fatalError("init(coder:) not used") }
+
+    // RN calls didSetProps once per JS render after all @objc setters
+    // have run, which lets us batch setup() + load() into a single
+    // native call instead of firing one per prop change.
+    override func didSetProps(_ changedProps: [String]) {
+        guard needsApply else { return }
+        needsApply = false
+        applyIfReady()
+    }
+
+    private func applyIfReady() {
+        guard
+            let cfgMap = config,
+            let sizeStr = size as String?,
+            let zid = zoneId as String?,
+            let adSize = AdSize(rawValue: sizeStr)
+        else { return }
+
+        // Skip if the props identity hasn't changed since last apply —
+        // refresh of the rendered ad is driven by the SDK's internal
+        // timer, not by JS re-renders.
+        let key = "\(sizeStr)|\(zid)|\(cfgMap.hash)"
+        if lastAppliedKey == key { return }
+        lastAppliedKey = key
+
+        let sellwildConfig = Self.configFromMap(cfgMap)
+
+        // Tear down any previous ad view; SellwildAdView itself does not
+        // support adUnitId reassignment after load.
+        adView?.removeFromSuperview()
+
+        let view = SellwildAdView(config: sellwildConfig, adSize: adSize, zoneId: zid)
+        view.delegate = self
+        view.translatesAutoresizingMaskIntoConstraints = false
+        addSubview(view)
+        NSLayoutConstraint.activate([
+            view.leadingAnchor.constraint(equalTo: leadingAnchor),
+            view.topAnchor.constraint(equalTo: topAnchor),
+            view.widthAnchor.constraint(equalToConstant: adSize.cgSize.width),
+            view.heightAnchor.constraint(equalToConstant: adSize.cgSize.height),
+        ])
+        adView = view
+        view.load()
+    }
+
+    // MARK: SellwildAdViewDelegate
+
+    func sellwildAdViewDidLoad(_ adView: SellwildAdView) {
+        onAdLoaded?([:])
+    }
+
+    func sellwildAdView(_ adView: SellwildAdView, didReceiveImpressionForZoneId zoneId: String) {
+        onAdImpression?(["zoneId": zoneId])
+    }
+
+    func sellwildAdViewDidRecordClick(_ adView: SellwildAdView) {
+        onAdClicked?([:])
+    }
+
+    func sellwildAdView(_ adView: SellwildAdView, didFailWithError error: Error) {
+        onAdFailed?(["message": error.localizedDescription])
+    }
+
+    // MARK: Config marshalling
+
+    /// Build a minimal SellwildConfig from a JS dictionary. Only the
+    /// fields the native banner path actually reads are mapped; the
+    /// rest get the data class defaults. The raw CDN JSON (if present
+    /// under `remote`) is preserved as `remoteJSON` for passthrough.
+    static func configFromMap(_ map: NSDictionary) -> SellwildConfig {
+        let partnerCode = (map["partnerCode"] as? String) ?? ""
+
+        var cfg = SellwildConfig(partnerCode: partnerCode)
+
+        if let v = map["appBundleId"] as? String { cfg.appBundleId = v }
+        if let v = map["appStoreUrl"] as? String { cfg.appStoreUrl = v }
+        if let v = map["gamTag"] as? String { cfg.gamTag = v }
+        if let v = map["debug"] as? Bool { cfg.debug = v }
+        if let v = map["adRefreshMax"] as? Int { cfg.adRefreshMax = v }
+        if let v = map["adRefreshMaxMobile"] as? Int { cfg.adRefreshMaxMobile = v }
+
+        // JS bridge passes ms; iOS API is seconds (TimeInterval).
+        if let v = map["adRefreshIntervalMs"] as? NSNumber {
+            cfg.adRefreshInterval = v.doubleValue / 1000.0
+        }
+
+        if let prebid = map["prebidServer"] as? NSDictionary,
+           let accountId = prebid["accountId"] as? String,
+           let endpoint = prebid["endpoint"] as? String {
+            let bidders = (prebid["bidders"] as? [String]) ?? []
+            let timeout = (prebid["timeout"] as? Int) ?? 1500
+            cfg.prebidServer = PrebidServerConfig(
+                accountId: accountId,
+                endpoint: endpoint,
+                bidders: bidders,
+                timeout: timeout,
+                syncEndpoint: prebid["syncEndpoint"] as? String
+            )
+        }
+
+        if let remote = map["remote"] as? NSDictionary,
+           let data = try? JSONSerialization.data(withJSONObject: remote, options: []) {
+            cfg.remoteJSON = data
+        }
+
+        return cfg
+    }
+}

package/ios/SellwildSDK-RN.podspec

@@ -0,0 +1,31 @@
+require 'json'
+
+package = JSON.parse(File.read(File.join(__dir__, '..', 'package.json')))
+
+Pod::Spec.new do |s|
+  s.name             = 'SellwildSDK-RN'
+  s.version          = package['version']
+  s.summary          = 'React Native bridge for the Sellwild iOS SDK'
+  s.description      = <<-DESC
+    Bridges <SellwildBanner> from @sellwild/react-native-sdk to the
+    native iOS SellwildAdView (Prebid Mobile + AdManagerBannerView).
+    There is no WebView in the ad path.
+  DESC
+
+  s.homepage         = 'https://github.com/Antengo/sellwild-sdk'
+  s.license          = { :type => 'MIT' }
+  s.author           = { 'Sellwild' => 'sdk@sellwild.com' }
+  s.source           = { :git => 'https://github.com/Antengo/sellwild-sdk.git', :tag => s.version.to_s }
+
+  s.platforms        = { :ios => '13.0' }
+  s.swift_version    = '5.5'
+
+  s.source_files     = '*.{swift,m,h}'
+  s.requires_arc     = true
+
+  # The host app must already pull in SellwildSDK (the iOS SDK pod). We
+  # depend on it explicitly so `pod install` resolves both with one
+  # declaration in the host Podfile.
+  s.dependency 'SellwildSDK', '>= 1.3.0'
+  s.dependency 'React-Core'
+end

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sellwild/react-native-sdk",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Sellwild mobile advertising SDK for React Native",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -23,7 +23,7 @@
     "react-native-webview": ">=11.0.0"
   },
   "dependencies": {
-    "@sellwild/sdk-core": "^1.2.0"
+    "@sellwild/sdk-core": "^1.3.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.0",

package/src/SellwildBanner.tsx

@@ -1,12 +1,9 @@
-import React, { useCallback, useState } from 'react'
-import { View, StyleSheet, ViewStyle } from 'react-native'
-import { WebView } from 'react-native-webview'
-import type { WebViewMessageEvent } from 'react-native-webview'
+import React from 'react'
+import { Platform, requireNativeComponent, UIManager, ViewStyle, View, Text, StyleSheet, NativeSyntheticEvent } from 'react-native'
 import type { SellwildConfig, AdSize } from '@sellwild/sdk-core'
-import { WIDGET_BASE_URL } from '@sellwild/sdk-core'
-import { buildBannerHtml } from './htmlBuilder'
 
-// Standard IAB mobile ad sizes
+// Standard IAB mobile ad sizes — used to lock the host View dimensions.
+// The actual ad size is also propagated to native as the `size` prop label.
 const AD_DIMENSIONS: Record<AdSize, { width: number; height: number }> = {
   '300x250': { width: 300, height: 250 },
   '320x50': { width: 320, height: 50 },
@@ -16,6 +13,42 @@ const AD_DIMENSIONS: Record<AdSize, { width: number; height: number }> = {
   '1x1': { width: 1, height: 1 },
 }
 
+// ─── Native component bridge ─────────────────────────────────────────────────
+//
+// As of 1.3.0 the React Native banner is backed by a real native ad view —
+// `com.sellwild.sdk.SellwildAdView` on Android (Prebid Mobile + AdManagerAdView)
+// and `SellwildAdView` on iOS (Prebid Mobile + AdManagerBannerView). There is
+// no WebView in the ad path on either platform.
+//
+// The Android bridge lives in `react-native/android` and is autolinked via
+// the `@sellwild/react-native-sdk` package.
+
+const NATIVE_NAME = 'SellwildBannerView'
+
+interface NativeBannerProps {
+  config: object
+  size: string
+  zoneId: string
+  style?: ViewStyle
+  onAdLoaded?: (e: NativeSyntheticEvent<{}>) => void
+  onAdImpression?: (e: NativeSyntheticEvent<{ zoneId: string }>) => void
+  onAdClicked?: (e: NativeSyntheticEvent<{}>) => void
+  onAdFailed?: (e: NativeSyntheticEvent<{ message: string }>) => void
+}
+
+const NativeBanner = (() => {
+  // requireNativeComponent crashes loudly if the view manager isn't
+  // registered. Probe first so we can render a friendly fallback on
+  // platforms where the bridge isn't in this build yet.
+  const config = UIManager.getViewManagerConfig?.(NATIVE_NAME)
+  if (!config) {
+    return null
+  }
+  return requireNativeComponent<NativeBannerProps>(NATIVE_NAME)
+})()
+
+// ─── Public component ────────────────────────────────────────────────────────
+
 export interface SellwildBannerProps {
   config: SellwildConfig
   size: AdSize
@@ -35,40 +68,73 @@ export function SellwildBanner({
   onClick,
   onError,
 }: SellwildBannerProps) {
-  const dimensions = AD_DIMENSIONS[size]
-  const html = buildBannerHtml(config, zoneId, size)
+  const dim = AD_DIMENSIONS[size]
+  const containerStyle: ViewStyle = { width: dim.width, height: dim.height }
 
-  const handleMessage = useCallback(
-    (event: WebViewMessageEvent) => {
-      try {
-        const msg = JSON.parse(event.nativeEvent.data)
-        if (msg.type === 'AD_IMPRESSION') onImpression?.()
-        if (msg.type === 'AD_CLICK') onClick?.()
-      } catch {
-        // ignore
-      }
-    },
-    [onImpression, onClick]
-  )
+  if (!NativeBanner) {
+    // Native module not registered. Most common cause: iOS bridge not yet
+    // wired (1.3.0 ships the Android bridge first; iOS lands in 1.3.x).
+    // Render a visible placeholder in dev builds so the gap is obvious;
+    // production builds get a transparent slot of the right dimensions.
+    return (
+      <View style={[containerStyle, style, __DEV__ ? styles.devPlaceholder : undefined]}>
+        {__DEV__ ? (
+          <Text style={styles.devText}>
+            Sellwild native banner not available on {Platform.OS} (yet)
+          </Text>
+        ) : null}
+      </View>
+    )
+  }
+
+  // Pass only the fields the native banner path actually reads. The rest
+  // of SellwildConfig is ignored on the native side. Note: TS core uses
+  // `adRefreshInterval` (millis); the native side reads it as
+  // `adRefreshIntervalMs`. The bridge translates.
+  const nativeConfig = {
+    partnerCode: config.partnerCode,
+    appBundleId: config.appBundleId,
+    appStoreUrl: config.appStoreUrl,
+    gamTag: config.gamTag,
+    debug: config.debug,
+    adRefreshMax: config.adRefreshMax,
+    adRefreshMaxMobile: config.adRefreshMaxMobile,
+    adRefreshIntervalMs: config.adRefreshInterval,
+    prebidServer: config.prebidServer,
+    remote: config.remote,
+  }
 
   return (
-    <View style={[{ width: dimensions.width, height: dimensions.height }, style]}>
-      <WebView
-        source={{ html, baseUrl: WIDGET_BASE_URL }}
-        style={StyleSheet.absoluteFill}
-        onMessage={handleMessage}
-        javaScriptEnabled
-        domStorageEnabled
-        thirdPartyCookiesEnabled
-        scrollEnabled={false}
-        showsVerticalScrollIndicator={false}
-        showsHorizontalScrollIndicator={false}
-        mixedContentMode="compatibility"
-        originWhitelist={['*']}
-        onError={syntheticEvent => {
-          onError?.(new Error(syntheticEvent.nativeEvent.description))
-        }}
-      />
-    </View>
+    <NativeBanner
+      style={[containerStyle, style]}
+      config={nativeConfig}
+      size={size}
+      zoneId={String(zoneId)}
+      onAdLoaded={() => {
+        // No-op event hook today; surfaced for future fill metrics.
+      }}
+      onAdImpression={() => onImpression?.()}
+      onAdClicked={() => onClick?.()}
+      onAdFailed={(e: NativeSyntheticEvent<{ message: string }>) => {
+        const msg = e.nativeEvent?.message ?? 'Ad failed'
+        onError?.(new Error(msg))
+      }}
+    />
   )
 }
+
+const styles = StyleSheet.create({
+  devPlaceholder: {
+    backgroundColor: '#FEE2E2',
+    borderWidth: 1,
+    borderColor: '#FCA5A5',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 4,
+  },
+  devText: {
+    color: '#991B1B',
+    fontSize: 11,
+    textAlign: 'center',
+  },
+})

package/src/htmlBuilder.ts

@@ -183,7 +183,7 @@ function configToAttributes(config: SellwildConfig): string {
   add('consent-management', config.consentManagement)
   add('schain-sid', config.schainSid)
   add('s2s-config', config.s2sConfig)
-  add('iab-cats', config.iabCats?.join(','))
+  add('iab-cats', Array.isArray(config.iabCats) ? config.iabCats.join(',') : config.iabCats)
 
   // Third-party (typed fields with defaults — kept emitted explicitly for
   // backwards compatibility with static buildConfig() callers)