@klarna/react-native-klarna-network-messaging 0.0.1 → 2.7.0

package/README.md

@@ -1,45 +1,97 @@
 # @klarna/react-native-klarna-network-messaging
 
-## ⚠️ IMPORTANT NOTICE ⚠️
+[![NPM][npm-badge]][npm-url]
+[![React Native][dependency-badge]][dependency-url]
+[![Platform][platform-badge]][platform-url]
+[![License][license-badge]][license-url]
+[![Developed at Klarna][klarna-badge]][klarna-url]
 
-**This package is created solely for the purpose of setting up OIDC (OpenID Connect) trusted publishing with npm.**
+React Native bindings for Klarna **messaging placements**: a Fabric-native `KlarnaMessagingPlacementView` that renders on-device messaging (for example credit promotion placements) with **amount**, **currency**, and **placement type**, an optional **theme**, automatic height from native resize events, and **error** callbacks.
 
-This is **NOT** a functional package and contains **NO** code or functionality beyond the OIDC setup configuration.
+This package builds on [`@klarna/react-native-klarna-network-core`](https://www.npmjs.com/package/@klarna/react-native-klarna-network-core): initialize `Klarna` from core before showing placements; this module re-exports `KlarnaTheme` for convenience.
 
-## Purpose
+## Requirements
 
-This package exists to:
-1. Configure OIDC trusted publishing for the package name `@klarna/react-native-klarna-network-messaging`
-2. Enable secure, token-less publishing from CI/CD workflows
-3. Establish provenance for packages published under this name
+- iOS 13 or later.
+- Android 5.0 (API 21) or later.
+- React Native 0.76.0 or later.
+- React Native New Architecture enabled.
 
-## What is OIDC Trusted Publishing?
+### NPM
 
-OIDC trusted publishing allows package maintainers to publish packages directly from their CI/CD workflows without needing to manage npm access tokens. Instead, it uses OpenID Connect to establish trust between the CI/CD provider (like GitHub Actions) and npm.
+```shell
+npm install @klarna/react-native-klarna-network-messaging --save
+```
 
-## Setup Instructions
+### Yarn
 
-To properly configure OIDC trusted publishing for this package:
+```shell
+yarn add @klarna/react-native-klarna-network-messaging
+```
 
-1. Go to [npmjs.com](https://www.npmjs.com/) and navigate to your package settings
-2. Configure the trusted publisher (e.g., GitHub Actions)
-3. Specify the repository and workflow that should be allowed to publish
-4. Use the configured workflow to publish your actual package
+You also need [`@klarna/react-native-klarna-network-core`](https://www.npmjs.com/package/@klarna/react-native-klarna-network-core) (peer dependency) for initialization and shared types.
 
-## DO NOT USE THIS PACKAGE
+## Usage
 
-This package is a placeholder for OIDC configuration only. It:
-- Contains no executable code
-- Provides no functionality
-- Should not be installed as a dependency
-- Exists only for administrative purposes
+Initialize a `Klarna` instance from core (see the [core package README](https://github.com/klarna/react-native-klarna-inapp-sdk/blob/master/packages/klarna-network-core/README.md)) and pass it to the placement view along with its configuration:
 
-## More Information
+```tsx
+import {
+  KlarnaMessagingPlacementView,
+  KlarnaMessagingPlacementType,
+  KlarnaTheme,
+} from '@klarna/react-native-klarna-network-messaging';
+import type { Klarna } from '@klarna/react-native-klarna-network-core';
 
-For more details about npm's trusted publishing feature, see:
-- [npm Trusted Publishing Documentation](https://docs.npmjs.com/generating-provenance-statements)
-- [GitHub Actions OIDC Documentation](https://docs.github.com/en/actions/deployment/security-hardening-your-deployments/about-security-hardening-with-openid-connect)
+export function CheckoutMessaging({ sdk }: { sdk: Klarna }) {
+  return (
+    <KlarnaMessagingPlacementView
+      instance={sdk}
+      configuration={{
+        type: KlarnaMessagingPlacementType.CreditPromotionAutoSize,
+        amount: 19900,
+        currency: 'EUR',
+        theme: KlarnaTheme.Automatic,
+      }}
+      onError={(error) => {
+        console.warn(error.name, error.message);
+      }}
+    />
+  );
+}
+```
 
----
+**Props (high level)**
 
-**Maintained for OIDC setup purposes only**
+| Prop            | Notes                                                                                                                                                               |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `instance`      | Required. A `Klarna` instance obtained from `@klarna/react-native-klarna-network-core` after initialization.                                                        |
+| `configuration` | Required. `{ type, amount, currency, theme? }`. `type` is a `KlarnaMessagingPlacementType`; `theme` is optional — when omitted, the native SDK chooses the default. |
+| `onError`       | Optional. Receives `KlarnaMessagingError` (`name`, `message`) when native messaging fails.                                                                          |
+| `style`         | Optional. Passed through; height is driven by native content after load.                                                                                            |
+
+## Support
+
+If you are having any issues using the SDK in your project or if you think that something is wrong with the SDK itself, please follow our [support guide](https://github.com/klarna/react-native-klarna-inapp-sdk/blob/master/SUPPORT.md).
+
+## Contribution
+
+If you want to contribute to this project please follow our [contribution guide](https://github.com/klarna/react-native-klarna-inapp-sdk/blob/master/CONTRIBUTING.md).
+
+## License
+
+This project is licensed under
+[Apache License, Version 2.0](https://github.com/klarna/react-native-klarna-inapp-sdk/blob/master/LICENSE).
+
+<!-- Markdown images & links -->
+
+[npm-badge]: https://img.shields.io/npm/v/@klarna/react-native-klarna-network-messaging?style=flat-square
+[npm-url]: https://www.npmjs.com/package/@klarna/react-native-klarna-network-messaging
+[dependency-badge]: https://img.shields.io/npm/dependency-version/@klarna/react-native-klarna-network-messaging/peer/react-native?style=flat-square
+[dependency-url]: https://www.npmjs.com/package/@klarna/react-native-klarna-network-messaging?activeTab=dependencies
+[platform-badge]: https://img.shields.io/badge/platform-React%20Native-lightgrey?style=flat-square
+[platform-url]: https://reactnative.dev
+[license-badge]: https://img.shields.io/github/license/klarna/react-native-klarna-inapp-sdk?style=flat-square
+[license-url]: https://github.com/klarna/react-native-klarna-inapp-sdk/blob/master/LICENSE
+[klarna-badge]: https://img.shields.io/badge/%20-Developed%20at%20Klarna-black?labelColor=ffb3c7&style=flat-square&logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAOCAYAAAAmL5yKAAAAAXNSR0IArs4c6QAAAIRlWElmTU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAIAAIdpAAQAAAABAAAAWgAAAAAAAALQAAAAAQAAAtAAAAABAAOgAQADAAAAAQABAACgAgAEAAAAAQAAABCgAwAEAAAAAQAAAA4AAAAA0LMKiwAAAAlwSFlzAABuugAAbroB1t6xFwAAAVlpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iPgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KTMInWQAAAVBJREFUKBVtkz0vREEUhsdXgo5qJXohkUgQ0fgFNFpR2V5ClP6CQu9PiB6lEL1I7B9A4/treZ47c252s97k2ffMmZkz5869m1JKL/AFbzAHaiRbmsIf4BdaMAZqMFsOXNxXkroKbxCPV5l8yHOJLVipn9/vEreLa7FguSN3S2ynA/ATeQuI8tTY6OOY34DQaQnq9mPCDtxoBwuRxPfAvPMWnARlB12KAi6eLTPruOOP4gcl33O6+Sjgc83DJkRH+h2MgorLzaPy68W48BG2S+xYnmAa1L+nOxEduMH3fgjGFvZeVkANZau68B6CrgJxWosFFpF7iG+h5wKZqwt42qIJtARu/ix+gqsosEq8D35o6R3c7OL4lAnTDljEe9B3Qa2BYzmHemDCt6Diwo6JY7E+A82OnN9HuoBruAQvUQ1nSxP4GVzBDRyBfygf6RW2/gD3NmEv+K/DZgAAAABJRU5ErkJggg==
+[klarna-url]: https://github.com/klarna

package/android/build.gradle

@@ -0,0 +1,97 @@
+def klarnaNetworkCorePkgJson = providers.exec {
+  commandLine "node", "--print",
+    "require.resolve('@klarna/react-native-klarna-network-core/package.json')"
+}.standardOutput.asText.get().trim()
+
+apply from: "${file(klarnaNetworkCorePkgJson).parent}/android/klarna-network-versions.gradle"
+
+buildscript {
+  ext.KlarnaNetworkMessaging = [
+    kotlinVersion: "2.0.21",
+    minSdkVersion: 21,
+    compileSdkVersion: 36,
+    targetSdkVersion: 36
+  ]
+
+  ext.getExtOrDefault = { prop ->
+    if (rootProject.ext.has(prop)) {
+      return rootProject.ext.get(prop)
+    }
+
+    return KlarnaNetworkMessaging[prop]
+  }
+
+  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"
+
+android {
+  namespace "com.klarna.mobile.sdk.reactnative.klarnanetwork.messaging"
+
+  compileSdkVersion getExtOrDefault("compileSdkVersion")
+
+  defaultConfig {
+    minSdkVersion getExtOrDefault("minSdkVersion")
+    targetSdkVersion getExtOrDefault("targetSdkVersion")
+  }
+
+  buildFeatures {
+    buildConfig true
+  }
+
+  buildTypes {
+    release {
+      minifyEnabled false
+    }
+  }
+
+  lint {
+    disable "GradleCompatible"
+  }
+
+  testOptions {
+    unitTests.returnDefaultValues = true
+  }
+
+  compileOptions {
+    sourceCompatibility JavaVersion.VERSION_1_8
+    targetCompatibility JavaVersion.VERSION_1_8
+  }
+
+}
+
+repositories {
+  mavenCentral()
+  google()
+  maven {
+    url 'https://x.klarnacdn.net/mobile-sdk/'
+  }
+}
+
+dependencies {
+  implementation "com.facebook.react:react-android"
+
+  implementation "com.klarna.mobile.sdk:klarna-network-messaging:${klarnaNetworkVersions.klarnaMobileSdkVersion}"
+  implementation "com.klarna.mobile.sdk:klarna-network-core:${klarnaNetworkVersions.klarnaMobileSdkVersion}"
+
+  // Sibling RN package — needed to call KlarnaNetworkCoreModuleImpl.getInstance()
+  // when resolving the active Klarna instance by instanceId. compileOnly is
+  // sufficient because the consuming app pulls core in via RN autolinking.
+  compileOnly project(":klarna_react-native-klarna-network-core")
+
+  testImplementation "junit:junit:4.13.2"
+  testImplementation "org.mockito:mockito-core:3.12.4"
+  testImplementation "org.mockito:mockito-inline:3.12.4"
+}

package/android/src/main/AndroidManifest.xml

@@ -0,0 +1 @@
+<manifest />

package/android/src/main/java/com/klarna/mobile/sdk/reactnative/klarnanetwork/messaging/KlarnaMessagingPlacementErrorEvent.kt

@@ -0,0 +1,25 @@
+package com.klarna.mobile.sdk.reactnative.klarnanetwork.messaging
+
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.uimanager.events.Event
+
+class KlarnaMessagingPlacementErrorEvent(
+    surfaceId: Int,
+    viewTag: Int,
+    private val errorName: String,
+    private val errorMessage: String
+) : Event<KlarnaMessagingPlacementErrorEvent>(surfaceId, viewTag) {
+
+    override fun getEventName(): String = "onError"
+
+    override fun getEventData(): WritableMap {
+        val errorMap = Arguments.createMap()
+        errorMap.putString("name", errorName)
+        errorMap.putString("message", errorMessage)
+
+        val data = Arguments.createMap()
+        data.putMap("error", errorMap)
+        return data
+    }
+}

package/android/src/main/java/com/klarna/mobile/sdk/reactnative/klarnanetwork/messaging/KlarnaMessagingPlacementResizedEvent.kt

@@ -0,0 +1,20 @@
+package com.klarna.mobile.sdk.reactnative.klarnanetwork.messaging
+
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.uimanager.events.Event
+
+class KlarnaMessagingPlacementResizedEvent(
+    surfaceId: Int,
+    viewTag: Int,
+    private val height: String
+) : Event<KlarnaMessagingPlacementResizedEvent>(surfaceId, viewTag) {
+
+    override fun getEventName(): String = "onResized"
+
+    override fun getEventData(): WritableMap {
+        val data = Arguments.createMap()
+        data.putString("height", height)
+        return data
+    }
+}

package/android/src/main/java/com/klarna/mobile/sdk/reactnative/klarnanetwork/messaging/KlarnaMessagingPlacementViewManager.kt

@@ -0,0 +1,251 @@
+package com.klarna.mobile.sdk.reactnative.klarnanetwork.messaging
+
+import android.os.Handler
+import android.os.Looper
+import android.view.Choreographer
+import android.view.View
+import android.view.ViewGroup
+import android.view.ViewTreeObserver
+import android.widget.FrameLayout
+import com.facebook.react.bridge.ReactContext
+import com.facebook.react.uimanager.PixelUtil
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.UIManagerHelper
+import com.facebook.react.uimanager.annotations.ReactProp
+import com.klarna.mobile.sdk.klarna.network.messaging.api.KlarnaMessagingPlacementView
+import com.klarna.mobile.sdk.reactnative.klarnanetwork.core.KlarnaNetworkCoreModuleImpl
+
+class KlarnaMessagingPlacementViewManager :
+    RNKlarnaMessagingPlacementViewSpec<FrameLayout>() {
+
+    companion object {
+        const val REACT_CLASS = "RNKlarnaMessagingPlacementView"
+
+        /**
+         * Staggered post times (ms) for [reportFromActualLayout] retries. Messaging content
+         * can load after the first layout pass, so we schedule extra measurements alongside
+         * the pre-draw listener.
+         */
+        private val HEIGHT_CHECK_DELAYS_MS = longArrayOf(100, 500, 1500, 3000, 6000)
+    }
+
+    private val handler = Handler(Looper.getMainLooper())
+
+    private val viewToInstanceId = mutableMapOf<FrameLayout, String>()
+    private val viewToPlacementType = mutableMapOf<FrameLayout, String>()
+    private val viewToTheme = mutableMapOf<FrameLayout, String>()
+    private val viewToAmount = mutableMapOf<FrameLayout, String>()
+    private val viewToCurrency = mutableMapOf<FrameLayout, String>()
+    private val pendingRecreate = mutableMapOf<FrameLayout, Boolean>()
+    // Pair the listener with the View it was registered on. removeLayoutListener
+    // must remove from the same ViewTreeObserver — looking up wrapper.getChildAt(0)
+    // is unreliable: recreatePlacementView calls removeAllViews() before
+    // removeLayoutListener, leaving childCount == 0 and orphaning the listener.
+    private val preDrawListeners = mutableMapOf<FrameLayout, Pair<View, ViewTreeObserver.OnPreDrawListener>>()
+    private val lastReportedHeight = mutableMapOf<FrameLayout, Int>()
+
+    override fun getName(): String = REACT_CLASS
+
+    override fun createViewInstance(themedReactContext: ThemedReactContext): FrameLayout {
+        return FrameLayout(themedReactContext)
+    }
+
+    /** Cleans up listeners, pending handler callbacks, and prop maps when React drops the view. */
+    override fun onDropViewInstance(view: FrameLayout) {
+        removeLayoutListener(view)
+        handler.removeCallbacksAndMessages(view)
+        pendingRecreate.remove(view)
+        viewToInstanceId.remove(view)
+        viewToPlacementType.remove(view)
+        viewToTheme.remove(view)
+        viewToAmount.remove(view)
+        viewToCurrency.remove(view)
+        lastReportedHeight.remove(view)
+        super.onDropViewInstance(view)
+    }
+
+    @ReactProp(name = "instanceId")
+    override fun setInstanceId(view: FrameLayout, value: String?) {
+        if (value != null) viewToInstanceId[view] = value else viewToInstanceId.remove(view)
+        scheduleRecreate(view)
+    }
+
+    @ReactProp(name = "placementType")
+    override fun setPlacementType(view: FrameLayout, value: String?) {
+        if (value != null) viewToPlacementType[view] = value else viewToPlacementType.remove(view)
+        scheduleRecreate(view)
+    }
+
+    @ReactProp(name = "theme")
+    override fun setTheme(view: FrameLayout, value: String?) {
+        if (value != null) viewToTheme[view] = value else viewToTheme.remove(view)
+        scheduleRecreate(view)
+    }
+
+    @ReactProp(name = "amount")
+    override fun setAmount(view: FrameLayout, value: String?) {
+        if (value != null) viewToAmount[view] = value else viewToAmount.remove(view)
+        scheduleRecreate(view)
+    }
+
+    @ReactProp(name = "currency")
+    override fun setCurrency(view: FrameLayout, value: String?) {
+        if (value != null) viewToCurrency[view] = value else viewToCurrency.remove(view)
+        scheduleRecreate(view)
+    }
+
+    override fun getExportedCustomDirectEventTypeConstants(): Map<String, Any> =
+        mapOf(
+            "onError" to mapOf("registrationName" to "onError"),
+            "onResized" to mapOf("registrationName" to "onResized")
+        )
+
+    /**
+     * Schedules placement view recreation for the next frame so React prop batches
+     * can settle first. Subsequent prop changes within the same frame coalesce into
+     * a single recreate pass.
+     */
+    private fun scheduleRecreate(wrapper: FrameLayout) {
+        if (pendingRecreate[wrapper] == true) return
+        pendingRecreate[wrapper] = true
+        Choreographer.getInstance().postFrameCallback {
+            pendingRecreate.remove(wrapper)
+            recreatePlacementView(wrapper)
+        }
+    }
+
+    /**
+     * Tears down any existing placement view inside [wrapper] and builds a fresh one
+     * from the latest React props. Returns silently when amount, currency, or
+     * instanceId are missing; dispatches a `NotInitialized` error event when the
+     * Klarna instance can't be resolved. After adding the new SDK view it attaches
+     * a measurement observer so height changes are reported back to React.
+     */
+    private fun recreatePlacementView(wrapper: FrameLayout) {
+        val amount = KlarnaMessagingViewManagerHelpers.parseAmount(viewToAmount[wrapper]) ?: return
+        val currency = viewToCurrency[wrapper] ?: return
+        if (currency.isEmpty()) return
+
+        removeLayoutListener(wrapper)
+        wrapper.removeAllViews()
+        handler.removeCallbacksAndMessages(wrapper)
+        lastReportedHeight.remove(wrapper)
+
+        val instanceId = viewToInstanceId[wrapper]
+        if (instanceId.isNullOrEmpty()) return
+        val klarnaInstance = KlarnaNetworkCoreModuleImpl.getInstance(instanceId)
+        if (klarnaInstance == null) {
+            dispatchError(
+                wrapper,
+                "NotInitialized",
+                "No Klarna instance found for instanceId. Call Klarna.initialize() first."
+            )
+            return
+        }
+
+        val theme = KlarnaMessagingViewManagerHelpers.parseTheme(viewToTheme[wrapper])
+        val configuration = KlarnaMessagingViewManagerHelpers.buildConfiguration(
+            viewToPlacementType[wrapper],
+            theme,
+            amount,
+            currency
+        )
+
+        val placementView = KlarnaMessagingPlacementView(wrapper.context, klarnaInstance, configuration)
+        wrapper.addView(placementView, FrameLayout.LayoutParams(
+            FrameLayout.LayoutParams.MATCH_PARENT,
+            FrameLayout.LayoutParams.WRAP_CONTENT
+        ))
+        attachMeasurementObserver(wrapper, placementView)
+    }
+
+    /**
+     * Registers two complementary height-tracking strategies for [placementView]:
+     * 1. An [ViewTreeObserver.OnPreDrawListener] that fires on every layout pass.
+     * 2. A series of staggered [Handler] callbacks ([HEIGHT_CHECK_DELAYS_MS]) to catch
+     *    asynchronous content loads that may not trigger a layout pass immediately.
+     */
+    private fun attachMeasurementObserver(wrapper: FrameLayout, placementView: View) {
+        val listener = ViewTreeObserver.OnPreDrawListener {
+            reportFromActualLayout(wrapper, placementView)
+            true
+        }
+        placementView.viewTreeObserver.addOnPreDrawListener(listener)
+        preDrawListeners[wrapper] = placementView to listener
+
+        for ((index, delay) in HEIGHT_CHECK_DELAYS_MS.withIndex()) {
+            val isLastCheck = index == HEIGHT_CHECK_DELAYS_MS.size - 1
+            val runnable = Runnable {
+                reportFromActualLayout(wrapper, placementView)
+                if (isLastCheck && lastReportedHeight[wrapper] == null) {
+                    dispatchResized(wrapper, 0)
+                }
+            }
+            handler.postAtTime(runnable, wrapper, android.os.SystemClock.uptimeMillis() + delay)
+        }
+    }
+
+    /**
+     * Manually measures [placementView] against [wrapper]'s width with unconstrained height,
+     * then dispatches an `onResized` event if the content height (in dp) changed since the
+     * last report. A manual measure is needed because React Native sizes the wrapper via
+     * `setFrame()`, so the SDK view never gets a standard measure pass with the real width.
+     */
+    private fun reportFromActualLayout(wrapper: FrameLayout, placementView: View) {
+        if (!placementView.isAttachedToWindow) return
+
+        val width = wrapper.width
+        if (width <= 0) return
+
+        val widthSpec = View.MeasureSpec.makeMeasureSpec(width, View.MeasureSpec.EXACTLY)
+        val heightSpec = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED)
+        placementView.measure(widthSpec, heightSpec)
+        placementView.layout(0, 0, placementView.measuredWidth, placementView.measuredHeight)
+
+        val contentHeight = placementView.measuredHeight
+        if (contentHeight <= 0) return
+
+        val heightDp = Math.round(PixelUtil.toDIPFromPixel(contentHeight.toFloat()))
+        if (!KlarnaMessagingViewManagerHelpers.shouldReportHeight(lastReportedHeight[wrapper], heightDp)) {
+            return
+        }
+        lastReportedHeight[wrapper] = heightDp
+        dispatchResized(wrapper, heightDp)
+    }
+
+    private fun dispatchResized(wrapper: FrameLayout, heightDp: Int) {
+        val dispatcher = resolveDispatcher(wrapper) ?: return
+        val surfaceId = UIManagerHelper.getSurfaceId(wrapper)
+        dispatcher.dispatchEvent(
+            KlarnaMessagingPlacementResizedEvent(surfaceId, wrapper.id, heightDp.toString())
+        )
+    }
+
+    private fun dispatchError(wrapper: FrameLayout, name: String, message: String) {
+        val dispatcher = resolveDispatcher(wrapper) ?: return
+        val surfaceId = UIManagerHelper.getSurfaceId(wrapper)
+        dispatcher.dispatchEvent(
+            KlarnaMessagingPlacementErrorEvent(surfaceId, wrapper.id, name, message)
+        )
+    }
+
+    private fun resolveDispatcher(wrapper: FrameLayout) =
+        UIManagerHelper.getEventDispatcherForReactTag(
+            wrapper.context as ReactContext,
+            wrapper.id
+        )
+
+    /**
+     * Removes the pre-draw listener previously registered for [wrapper]. The listener is
+     * removed from the [ViewTreeObserver] of the original view it was attached to (stored
+     * in [preDrawListeners]), not the current child, because [recreatePlacementView] may
+     * have already called `removeAllViews()`.
+     */
+    private fun removeLayoutListener(wrapper: FrameLayout) {
+        val (target, listener) = preDrawListeners.remove(wrapper) ?: return
+        val observer = target.viewTreeObserver
+        if (observer.isAlive) {
+            observer.removeOnPreDrawListener(listener)
+        }
+    }
+}

package/android/src/main/java/com/klarna/mobile/sdk/reactnative/klarnanetwork/messaging/KlarnaMessagingViewManagerHelpers.kt

@@ -0,0 +1,52 @@
+package com.klarna.mobile.sdk.reactnative.klarnanetwork.messaging
+
+import com.klarna.mobile.sdk.api.KlarnaTheme
+import com.klarna.mobile.sdk.klarna.network.messaging.api.KlarnaMessagingPlacementConfiguration
+
+internal enum class PlacementType(val value: String) {
+    AUTO_SIZE("CreditPromotionAutoSize"),
+    BADGE("CreditPromotionBadge");
+
+    companion object {
+        fun fromString(value: String?): PlacementType =
+            entries.find { it.value == value } ?: AUTO_SIZE
+    }
+}
+
+internal object KlarnaMessagingViewManagerHelpers {
+
+    fun parseTheme(value: String?): KlarnaTheme? = when (value) {
+        "light" -> KlarnaTheme.LIGHT
+        "dark" -> KlarnaTheme.DARK
+        "automatic" -> KlarnaTheme.AUTOMATIC
+        else -> null
+    }
+
+    fun parseAmount(value: String?): Long? {
+        if (value.isNullOrEmpty()) return null
+        return value.toLongOrNull()
+    }
+
+    fun resolvePlacementType(value: String?): PlacementType =
+        PlacementType.fromString(value)
+
+    fun buildConfiguration(
+        placementType: String?,
+        theme: KlarnaTheme?,
+        amount: Long,
+        currency: String
+    ): KlarnaMessagingPlacementConfiguration =
+        when (resolvePlacementType(placementType)) {
+            PlacementType.BADGE ->
+                KlarnaMessagingPlacementConfiguration.CreditPromotionBadge(theme, amount, currency)
+            PlacementType.AUTO_SIZE ->
+                KlarnaMessagingPlacementConfiguration.CreditPromotionAutoSize(theme, amount, currency)
+        }
+
+    /**
+     * Returns true when an incoming height report should be dispatched
+     * (i.e. it differs from the last value already reported).
+     */
+    fun shouldReportHeight(lastReported: Int?, newHeightDp: Int): Boolean =
+        newHeightDp > 0 && lastReported != newHeightDp
+}

package/android/src/main/java/com/klarna/mobile/sdk/reactnative/klarnanetwork/messaging/KlarnaNetworkMessagingPackage.kt

@@ -0,0 +1,19 @@
+package com.klarna.mobile.sdk.reactnative.klarnanetwork.messaging
+
+import com.facebook.react.BaseReactPackage
+import com.facebook.react.bridge.NativeModule
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.module.model.ReactModuleInfoProvider
+import com.facebook.react.uimanager.ViewManager
+
+class KlarnaNetworkMessagingPackage : BaseReactPackage() {
+
+    override fun getModule(name: String, reactContext: ReactApplicationContext): NativeModule? =
+        null
+
+    override fun getReactModuleInfoProvider(): ReactModuleInfoProvider =
+        ReactModuleInfoProvider { emptyMap() }
+
+    override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> =
+        listOf<ViewManager<*, *>>(KlarnaMessagingPlacementViewManager())
+}

package/android/src/main/java/com/klarna/mobile/sdk/reactnative/klarnanetwork/messaging/RNKlarnaMessagingPlacementViewSpec.kt

@@ -0,0 +1,22 @@
+package com.klarna.mobile.sdk.reactnative.klarnanetwork.messaging
+
+import android.view.View
+import com.facebook.react.bridge.ReadableArray
+import com.facebook.react.uimanager.SimpleViewManager
+import com.facebook.react.uimanager.ViewManagerDelegate
+import com.facebook.react.viewmanagers.RNKlarnaMessagingPlacementViewManagerDelegate
+import com.facebook.react.viewmanagers.RNKlarnaMessagingPlacementViewManagerInterface
+
+abstract class RNKlarnaMessagingPlacementViewSpec<T : View> :
+    SimpleViewManager<T>(),
+    RNKlarnaMessagingPlacementViewManagerInterface<T> {
+
+    private val delegate: ViewManagerDelegate<T> =
+        RNKlarnaMessagingPlacementViewManagerDelegate(this)
+
+    override fun getDelegate(): ViewManagerDelegate<T> = delegate
+
+    override fun receiveCommand(root: T, commandId: String, args: ReadableArray) {
+        delegate.receiveCommand(root, commandId, args)
+    }
+}

package/android/src/test/java/com/klarna/mobile/sdk/reactnative/klarnanetwork/messaging/KlarnaMessagingPlacementEventsTest.kt

@@ -0,0 +1,39 @@
+package com.klarna.mobile.sdk.reactnative.klarnanetwork.messaging
+
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.JavaOnlyMap
+import org.junit.After
+import org.junit.Assert.assertEquals
+import org.junit.Before
+import org.junit.Test
+import org.mockito.MockedStatic
+import org.mockito.Mockito
+
+class KlarnaMessagingPlacementEventsTest {
+
+    private lateinit var mockedArguments: MockedStatic<Arguments>
+
+    @Before
+    fun setUp() {
+        mockedArguments = Mockito.mockStatic(Arguments::class.java)
+        mockedArguments.`when`<JavaOnlyMap> { Arguments.createMap() }
+            .thenAnswer { JavaOnlyMap() }
+    }
+
+    @After
+    fun tearDown() {
+        mockedArguments.close()
+    }
+
+    @Test
+    fun resizedEvent_eventName() {
+        val event = KlarnaMessagingPlacementResizedEvent(0, 1, "120")
+        assertEquals("onResized", event.eventName)
+    }
+
+    @Test
+    fun errorEvent_eventName() {
+        val event = KlarnaMessagingPlacementErrorEvent(0, 1, "TestError", "Something went wrong")
+        assertEquals("onError", event.eventName)
+    }
+}