react-native-glance-chat 0.0.0-stage → 0.1.4

package/GlanceChat.podspec

@@ -0,0 +1,20 @@
+require "json"
+
+package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+
+Pod::Spec.new do |s|
+  s.name         = "GlanceChat"
+  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 => "https://github.com/inmobi-glance/react-native-glance-chat.git", :tag => "#{s.version}" }
+
+  s.source_files = "ios/**/*.{h,m,mm,swift,cpp}"
+  s.private_header_files = "ios/**/*.h"
+
+  install_modules_dependencies(s)
+end

package/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2026 Glance
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,51 @@
-# Temporary Holding Version
+# react-native-glance-chat
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+React Native wrapper for the Glance Chat SDK (Android + iOS), exposing the SDK's
+helper methods and UI components to React Native apps.
+
+Backward compatible with both the React Native New Architecture (Turbo Modules / Fabric,
+RN 0.76+) and the legacy bridge.
+
+> Integration design reference: see `docs/REACT_NATIVE_INTEGRATION.md` in the
+> [Helios-Android](https://github.com/inmobi-glance/Helios-Android) SDK repo.
+
+## Status
+
+Initial scaffold via `create-react-native-library` (Turbo module + Kotlin/Objective-C).
+The generated `multiply` placeholder will be replaced by the Glance Chat API
+(`init`, `setPageContext`, `closeChat`, …) and UI components (`GlanceChatOverlay`,
+`ProductTryOnWidget`, `PdpSuggestionsWidget`). Implementation in progress.
+
+## Installation
+
+
+```sh
+npm install react-native-glance-chat
+```
+
+
+## Usage
+
+
+```js
+import { multiply } from 'react-native-glance-chat';
+
+// ...
+
+const result = multiply(3, 7);
+```
+
+
+## Contributing
+
+- [Development workflow](CONTRIBUTING.md#development-workflow)
+- [Sending a pull request](CONTRIBUTING.md#sending-a-pull-request)
+- [Code of conduct](CODE_OF_CONDUCT.md)
+
+## License
+
+MIT
+
+---
+
+Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)

package/android/build.gradle

@@ -0,0 +1,104 @@
+buildscript {
+  ext.GlanceChat = [
+    kotlinVersion: "2.0.21",
+    // Floor raised 24→26: glance-chat-sdk 1.0.4+ (Snapshot tracker) requires minSdk 26.
+    minSdkVersion: 26,
+    compileSdkVersion: 35,
+    // Version of the native Glance Chat SDK (com.glance.chat:glance-chat-sdk) to depend on.
+    // Released versions resolve from Cloudsmith (glance/glance_telco_sdk) — see
+    // example/android/settings.gradle and the README integration section. During local
+    // development, publish with `./gradlew publishToMavenLocal -Psdk.version=1.0.0`
+    // (produces 1.0.0-local) and set sdkVersion to "1.0.0-local" to resolve from mavenLocal().
+    sdkVersion: "1.0.10"
+  ]
+
+  ext.getExtOrDefault = { prop ->
+    if (rootProject.ext.has(prop)) {
+      return rootProject.ext.get(prop)
+    }
+
+    return GlanceChat[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')}"
+    // Compose compiler plugin (Kotlin 2.0+) — required to host the SDK's Composables
+    // in ComposeView from the view managers.
+    classpath "org.jetbrains.kotlin:compose-compiler-gradle-plugin:${getExtOrDefault('kotlinVersion')}"
+  }
+}
+
+
+apply plugin: "com.android.library"
+apply plugin: "kotlin-android"
+apply plugin: "org.jetbrains.kotlin.plugin.compose"
+
+apply plugin: "com.facebook.react"
+
+def isNewArchitectureEnabled() {
+  return rootProject.hasProperty("newArchEnabled") && rootProject.getProperty("newArchEnabled") == "true"
+}
+
+android {
+  namespace "com.glancechat"
+
+  compileSdkVersion getExtOrDefault("compileSdkVersion")
+
+  defaultConfig {
+    minSdkVersion getExtOrDefault("minSdkVersion")
+    buildConfigField "boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchitectureEnabled().toString()
+    // Logged at init so logcat can confirm which SDK AAR version was consumed.
+    buildConfigField "String", "SDK_VERSION", "\"${getExtOrDefault('sdkVersion')}\""
+  }
+
+  buildFeatures {
+    buildConfig true
+    compose true
+  }
+
+  compileOptions {
+    sourceCompatibility JavaVersion.VERSION_17
+    targetCompatibility JavaVersion.VERSION_17
+  }
+
+  // Backward compatibility: compile the New Architecture module wrapper (extends the
+  // codegen-generated NativeGlanceChatSpec) or the legacy bridge wrapper depending on
+  // the consumer app's newArchEnabled flag. Shared logic lives in src/main.
+  sourceSets {
+    main {
+      if (isNewArchitectureEnabled()) {
+        java.srcDirs += ["src/newarch"]
+      } else {
+        java.srcDirs += ["src/oldarch"]
+      }
+    }
+  }
+}
+
+dependencies {
+  implementation "com.facebook.react:react-android"
+
+  // Jetpack Compose — the view managers host the SDK's Composables in a ComposeView.
+  def composeBom = platform("androidx.compose:compose-bom:2024.02.00")
+  implementation composeBom
+  implementation "androidx.compose.ui:ui"
+  implementation "androidx.activity:activity-compose:1.8.2"
+  // Coil for UrlBrandLogoProvider (AsyncImage).
+  implementation "io.coil-kt:coil-compose:2.5.0"
+
+  // Native Glance Chat SDK. The root artifact pulls the feature modules
+  // (core/tryon/chat/onboarding/mixandmatch) transitively via its POM.
+  //
+  // Resolution happens through the consuming app's settings-level repositories
+  // (react-native-test-app uses FAIL_ON_PROJECT_REPOS), so the consuming app must declare
+  // the Cloudsmith repo with credentials in its settings.gradle — see the README
+  // integration section. The example also adds mavenLocal() for local development.
+  implementation "com.glance.chat:glance-chat-sdk:${getExtOrDefault('sdkVersion')}"
+}

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/com/glancechat/GlanceChatModuleImpl.kt

@@ -0,0 +1,174 @@
+package com.glancechat
+
+import android.net.Uri
+import android.os.Handler
+import android.os.Looper
+import android.provider.Settings
+import android.util.Log
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.bridge.ReadableMap
+import com.facebook.react.modules.core.DeviceEventManagerModule
+import com.glance.chat.GlanceChatSDK
+import com.glance.chat.core.config.GlanceChatConfig
+import kotlinx.coroutines.CoroutineScope
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.SupervisorJob
+import kotlinx.coroutines.cancel
+import kotlinx.coroutines.launch
+
+/**
+ * Architecture-agnostic implementation of the Glance Chat native module.
+ *
+ * All delegation to the native Glance Chat SDK lives here so that the thin
+ * New Architecture ([NativeGlanceChatSpec] subclass) and legacy bridge
+ * ([com.facebook.react.bridge.ReactContextBaseJavaModule] subclass) wrappers
+ * can share one implementation. See docs/REACT_NATIVE_INTEGRATION.md §10 in the
+ * Helios-Android repo.
+ *
+ * Events are delivered uniformly through `RCTDeviceEventEmitter` (same event names
+ * the JS `Glance.onX` subscriptions listen for), which works identically for both
+ * architectures.
+ */
+class GlanceChatModuleImpl(private val reactContext: ReactApplicationContext) {
+
+  private val mainHandler = Handler(Looper.getMainLooper())
+  private var scope: CoroutineScope? = null
+
+  fun initialize(partnerId: String, config: ReadableMap, userId: String?) {
+    Log.i(
+      TAG,
+      "Glance Chat native SDK loaded: com.glance.chat:glance-chat-sdk:${BuildConfig.SDK_VERSION} " +
+        "(newArch=${BuildConfig.IS_NEW_ARCHITECTURE_ENABLED}, partnerId=$partnerId)"
+    )
+    val cfg = buildConfig(partnerId, userId, config)
+    runOnMain {
+      GlanceChatSDK.init(reactContext.applicationContext, cfg)
+
+      // Product taps come to JS: the host routes navigation in the RN layer, not via
+      // native deeplink Intents. Emits onProductClick always, onDeeplinkClick when the
+      // backend supplied a deeplink on the product.
+      GlanceChatSDK.productNavigationHandler = { product ->
+        emit(
+          EVENT_PRODUCT_CLICK,
+          Arguments.createMap().apply {
+            putString("productId", product.id)
+            putString("name", product.name)
+          }
+        )
+        product.deeplinkUrl.takeIf { it.isNotBlank() }?.let { emit(EVENT_DEEPLINK_CLICK, it) }
+      }
+
+      // Auth token cannot be fetched/refreshed — host should re-authenticate.
+      GlanceChatSDK.onSessionExpired = {
+        emit(EVENT_SESSION_EXPIRED, Arguments.createMap())
+      }
+
+      observeTryOnStates()
+    }
+  }
+
+  fun destroy() {
+    runOnMain {
+      scope?.cancel()
+      scope = null
+      GlanceChatSDK.productNavigationHandler = null
+      GlanceChatSDK.onSessionExpired = null
+      GlanceChatSDK.destroy()
+    }
+  }
+
+  fun isInitialized(): Boolean = GlanceChatSDK.isInitialized
+
+  fun isLoggedIn(): Boolean = GlanceChatSDK.isLoggedIn
+
+  fun setPageContext(context: String, metadata: ReadableMap) {
+    GlanceChatSDK.setPageContext(context, metadata.toStringMap())
+  }
+
+  fun clearPageContext() = GlanceChatSDK.clearPageContext()
+
+  fun closeChat() = runOnMain { GlanceChatSDK.closeChat() }
+
+  fun openChatWithSuggestion(suggestion: String) =
+    runOnMain { GlanceChatSDK.openChatWithSuggestion(suggestion) }
+
+  fun handleDeepLink(uri: String): Boolean =
+    GlanceChatSDK.handleDeepLink(Uri.parse(uri))
+
+  fun startOnboarding(variantId: String?) =
+    runOnMain { GlanceChatSDK.startOnboarding(variantId) }
+
+  // --- Internal helpers ----------------------------------------------------
+
+  private fun buildConfig(partnerId: String, userId: String?, config: ReadableMap): GlanceChatConfig {
+    // GlanceChatConfig.Builder requires a non-blank userId (it's exchanged for the SDK's
+    // auth token). Host apps that haven't logged the user in yet (e.g. this dev harness)
+    // pass null/blank — fall back to a stable per-device id so init still succeeds; the
+    // user remains "not onboarded" (GlanceChatSDK.isLoggedInFlow) until they complete the
+    // SDK's own onboarding, independent of this identifier.
+    val resolvedUserId = userId?.takeIf { it.isNotBlank() } ?: androidId()
+    return GlanceChatConfig.Builder()
+      .partnerId(partnerId)
+      .userId(resolvedUserId)
+      .environment(parseEnvironment(config.getString("environment")))
+      .build()
+  }
+
+  @Suppress("HardwareIds")
+  private fun androidId(): String =
+    Settings.Secure.getString(reactContext.contentResolver, Settings.Secure.ANDROID_ID) ?: "anonymous"
+
+  private fun parseEnvironment(value: String?): GlanceChatConfig.Environment =
+    when (value?.uppercase()) {
+      "UAT" -> GlanceChatConfig.Environment.UAT
+      "PRODUCTION" -> GlanceChatConfig.Environment.PRODUCTION
+      else -> GlanceChatConfig.Environment.DEVELOPMENT
+    }
+
+  private fun observeTryOnStates() {
+    scope?.cancel()
+    val newScope = CoroutineScope(SupervisorJob() + Dispatchers.Main)
+    scope = newScope
+    newScope.launch {
+      GlanceChatSDK.tryOnStates.collect { states ->
+        val statesMap = Arguments.createMap()
+        states.forEach { (variantId, state) -> statesMap.putString(variantId, state.status.name) }
+        val payload = Arguments.createMap().apply { putMap("states", statesMap) }
+        emit(EVENT_TRY_ON_STATES, payload)
+      }
+    }
+  }
+
+  private fun emit(eventName: String, data: Any?) {
+    if (!reactContext.hasActiveReactInstance()) return
+    reactContext
+      .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter::class.java)
+      .emit(eventName, data)
+  }
+
+  private fun runOnMain(block: () -> Unit) {
+    if (Looper.myLooper() == Looper.getMainLooper()) block() else mainHandler.post(block)
+  }
+
+  companion object {
+    const val NAME = "GlanceChat"
+    const val TAG = "GlanceChatRN"
+
+    private const val EVENT_TRY_ON_STATES = "onTryOnStatesChanged"
+    private const val EVENT_PRODUCT_CLICK = "onProductClick"
+    private const val EVENT_DEEPLINK_CLICK = "onDeeplinkClick"
+    private const val EVENT_SESSION_EXPIRED = "onSessionExpired"
+  }
+}
+
+/** Convert a [ReadableMap] of string entries into a Kotlin `Map<String, String>`. */
+private fun ReadableMap.toStringMap(): Map<String, String> {
+  val result = mutableMapOf<String, String>()
+  val iterator = keySetIterator()
+  while (iterator.hasNextKey()) {
+    val key = iterator.nextKey()
+    getString(key)?.let { result[key] = it }
+  }
+  return result
+}

package/android/src/main/java/com/glancechat/GlanceChatOverlayHostView.kt

@@ -0,0 +1,39 @@
+package com.glancechat
+
+import android.content.Context
+import android.view.ViewGroup
+import android.widget.FrameLayout
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.platform.ComposeView
+import androidx.compose.ui.platform.ViewCompositionStrategy
+import com.facebook.react.uimanager.PointerEvents
+import com.facebook.react.uimanager.ReactPointerEventsView
+
+/**
+ * [FrameLayout] wrapping a [ComposeView] (which is `final` in Compose UI and can't be
+ * subclassed directly) that implements [ReactPointerEventsView] so RN's Fabric hit-testing
+ * (TouchTargetHelper) actually honors pointer-events for this component. A plain [ComposeView]
+ * doesn't implement that interface, so RN always treats it as [PointerEvents.AUTO] no matter
+ * what JS sets — see docs/REACT_NATIVE_INTEGRATION.md §5 for the investigation. This view's
+ * [pointerEvents] is driven natively from [GlanceChatOverlayViewManager] based on whether the
+ * hosted Compose content actually has anything visible to show, so the overlay can sit at a
+ * permanently high RN zIndex without ever stealing touches from sibling views while empty.
+ */
+class GlanceChatOverlayHostView(context: Context) : FrameLayout(context), ReactPointerEventsView {
+  override var pointerEvents: PointerEvents = PointerEvents.NONE
+
+  private val composeView = ComposeView(context).also {
+    addView(
+      it,
+      ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT)
+    )
+  }
+
+  fun setViewCompositionStrategy(strategy: ViewCompositionStrategy) {
+    composeView.setViewCompositionStrategy(strategy)
+  }
+
+  fun setContent(content: @Composable () -> Unit) {
+    composeView.setContent(content)
+  }
+}

package/android/src/main/java/com/glancechat/GlanceChatOverlayViewManager.kt

@@ -0,0 +1,74 @@
+package com.glancechat
+
+import androidx.compose.ui.platform.ViewCompositionStrategy
+import com.facebook.react.module.annotations.ReactModule
+import com.facebook.react.uimanager.PointerEvents
+import com.facebook.react.uimanager.SimpleViewManager
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.ViewManagerDelegate
+import com.facebook.react.viewmanagers.GlanceChatOverlayViewManagerDelegate
+import com.facebook.react.viewmanagers.GlanceChatOverlayViewManagerInterface
+import com.glance.chat.ui.components.GlanceChatOverlay
+
+/**
+ * Fabric/legacy view manager that hosts the SDK's [GlanceChatOverlay] Composable inside a
+ * [GlanceChatOverlayHostView]. Implements the codegen-generated
+ * [GlanceChatOverlayViewManagerInterface] and routes prop updates through the generated delegate
+ * so props propagate under the New Architecture (Fabric). See docs/REACT_NATIVE_INTEGRATION.md §5.
+ *
+ * The host view's [PointerEvents] are driven natively (not by a JS `pointerEvents` prop — RN's
+ * hit-testing only honors that for views implementing [com.facebook.react.uimanager.ReactPointerEventsView],
+ * which a plain ComposeView doesn't, and even then a single opaque Compose child defeats
+ * "box-none" passthrough) based on whether the hosted Compose content actually has anything
+ * visible to show. This lets the overlay sit at a permanently high RN zIndex (drawing over
+ * everything, e.g. onboarding/chat UI) while never stealing touches from sibling views — like an
+ * always-mounted dev/debug panel's own buttons — while it's rendering nothing.
+ */
+@ReactModule(name = GlanceChatOverlayViewManager.NAME)
+class GlanceChatOverlayViewManager :
+  SimpleViewManager<GlanceChatOverlayHostView>(),
+  GlanceChatOverlayViewManagerInterface<GlanceChatOverlayHostView> {
+
+  private val delegate = GlanceChatOverlayViewManagerDelegate(this)
+
+  private var brandLogoUrl: String? = null
+  private var chatEnabled: Boolean = true
+
+  override fun getName() = NAME
+
+  override fun getDelegate(): ViewManagerDelegate<GlanceChatOverlayHostView> = delegate
+
+  override fun createViewInstance(context: ThemedReactContext): GlanceChatOverlayHostView {
+    return GlanceChatOverlayHostView(context).apply {
+      setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
+      renderContent(this)
+    }
+  }
+
+  override fun setBrandLogoUrl(view: GlanceChatOverlayHostView, value: String?) {
+    brandLogoUrl = value
+    renderContent(view)
+  }
+
+  override fun setChatEnabled(view: GlanceChatOverlayHostView, value: Boolean) {
+    chatEnabled = value
+    renderContent(view)
+  }
+
+  private fun renderContent(view: GlanceChatOverlayHostView) {
+    val logoUrl = brandLogoUrl
+    view.setContent {
+      GlanceChatOverlay(
+        brandLogoProvider = logoUrl?.let { UrlBrandLogoProvider(it) },
+        onContentVisibilityChanged = { hasContent ->
+          view.pointerEvents = if (hasContent) PointerEvents.AUTO else PointerEvents.NONE
+        },
+        chatEnabled = chatEnabled
+      )
+    }
+  }
+
+  companion object {
+    const val NAME = "GlanceChatOverlayView"
+  }
+}

package/android/src/main/java/com/glancechat/GlanceChatPackage.kt

@@ -0,0 +1,40 @@
+package com.glancechat
+
+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
+import com.facebook.react.uimanager.ViewManager
+
+class GlanceChatPackage : BaseReactPackage() {
+  override fun getModule(name: String, reactContext: ReactApplicationContext): NativeModule? {
+    return if (name == GlanceChatModuleImpl.NAME) {
+      GlanceChatModule(reactContext)
+    } else {
+      null
+    }
+  }
+
+  override fun createViewManagers(
+    reactContext: ReactApplicationContext
+  ): List<ViewManager<*, *>> = listOf(
+    GlanceChatOverlayViewManager(),
+    GlanceProductTryOnWidgetViewManager(),
+    GlanceMixAndMatchWidgetViewManager(),
+    GlancePdpSuggestionsViewManager()
+  )
+
+  override fun getReactModuleInfoProvider() = ReactModuleInfoProvider {
+    mapOf(
+      GlanceChatModuleImpl.NAME to ReactModuleInfo(
+        name = GlanceChatModuleImpl.NAME,
+        className = GlanceChatModuleImpl.NAME,
+        canOverrideExistingModule = false,
+        needsEagerInit = false,
+        isCxxModule = false,
+        isTurboModule = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED
+      )
+    )
+  }
+}

package/android/src/main/java/com/glancechat/GlanceMixAndMatchWidgetViewManager.kt

@@ -0,0 +1,142 @@
+package com.glancechat
+
+import android.widget.FrameLayout
+import androidx.compose.ui.platform.ComposeView
+import androidx.compose.ui.platform.ViewCompositionStrategy
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.module.annotations.ReactModule
+import com.facebook.react.uimanager.SimpleViewManager
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.UIManagerHelper
+import com.facebook.react.uimanager.ViewManagerDelegate
+import com.facebook.react.uimanager.events.Event
+import com.facebook.react.viewmanagers.GlanceMixAndMatchWidgetViewManagerDelegate
+import com.facebook.react.viewmanagers.GlanceMixAndMatchWidgetViewManagerInterface
+import com.glance.chat.ui.components.MixAndMatchWidget
+
+/**
+ * Fabric/legacy view manager hosting the SDK's [MixAndMatchWidget] Composable (the
+ * complete-the-look tray with try-on and cart sheets). Implements the codegen-generated
+ * interface so `variantId` / `enabled` props route through the delegate, and forwards the
+ * widget's add-to-cart callback to the JS `onAddToCartClick` bubbling event.
+ *
+ * Composition is deferred to window attach via [WidgetHostLayout] — same reason as
+ * GlanceProductTryOnWidgetViewManager (Fabric measures before attach; bare ComposeView
+ * throws "Cannot locate windowRecomposer").
+ */
+@ReactModule(name = GlanceMixAndMatchWidgetViewManager.NAME)
+class GlanceMixAndMatchWidgetViewManager :
+  SimpleViewManager<FrameLayout>(),
+  GlanceMixAndMatchWidgetViewManagerInterface<FrameLayout> {
+
+  private val delegate = GlanceMixAndMatchWidgetViewManagerDelegate(this)
+
+  override fun getName() = NAME
+
+  override fun getDelegate(): ViewManagerDelegate<FrameLayout> = delegate
+
+  override fun createViewInstance(context: ThemedReactContext): FrameLayout =
+    WidgetHostLayout(context)
+
+  override fun setVariantId(view: FrameLayout, value: String?) {
+    (view as WidgetHostLayout).variantId = value ?: ""
+  }
+
+  override fun setEnabled(view: FrameLayout, value: Boolean) {
+    (view as WidgetHostLayout).widgetEnabled = value
+  }
+
+  override fun getExportedCustomBubblingEventTypeConstants(): Map<String, Any> {
+    return mapOf(
+      "onAddToCartClick" to mapOf(
+        "phasedRegistrationNames" to mapOf(
+          "bubbled" to "onAddToCartClick",
+          "captured" to "onAddToCartClickCapture"
+        )
+      )
+    )
+  }
+
+  private class AddToCartEvent(
+    surfaceId: Int,
+    viewId: Int,
+    private val productId: String,
+    private val size: String
+  ) : Event<AddToCartEvent>(surfaceId, viewId) {
+    override fun getEventName() = "onAddToCartClick"
+    override fun getEventData() = Arguments.createMap().apply {
+      putString("productId", productId)
+      putString("size", size)
+    }
+  }
+
+  private class WidgetHostLayout(context: ThemedReactContext) : FrameLayout(context) {
+    private var composeView: ComposeView? = null
+
+    var variantId: String = ""
+      set(value) {
+        field = value
+        if (isAttachedToWindow) renderContent()
+      }
+
+    var widgetEnabled: Boolean = true
+      set(value) {
+        field = value
+        if (isAttachedToWindow) renderContent()
+      }
+
+    override fun onAttachedToWindow() {
+      super.onAttachedToWindow()
+      renderContent()
+    }
+
+    override fun onLayout(changed: Boolean, l: Int, t: Int, r: Int, b: Int) {
+      super.onLayout(changed, l, t, r, b)
+      layoutChild()
+    }
+
+    private fun renderContent() {
+      val view = composeView ?: ComposeView(context).also {
+        it.setViewCompositionStrategy(
+          ViewCompositionStrategy.DisposeOnDetachedFromWindowOrReleasedFromPool
+        )
+        addView(
+          it,
+          LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)
+        )
+        composeView = it
+      }
+      val currentVariantId = variantId
+      view.setContent {
+        MixAndMatchWidget(
+          merchantVariantId = currentVariantId,
+          onAddToCartClick = { product, size ->
+            emitAddToCart(product.id, size.value)
+          }
+        )
+      }
+      layoutChild()
+    }
+
+    private fun layoutChild() {
+      val child = composeView ?: return
+      if (width == 0 || height == 0) return
+      child.measure(
+        MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY),
+        MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY)
+      )
+      child.layout(0, 0, width, height)
+    }
+
+    private fun emitAddToCart(productId: String, size: String) {
+      val reactContext = context as? ThemedReactContext ?: return
+      val surfaceId = UIManagerHelper.getSurfaceId(reactContext)
+      val dispatcher = UIManagerHelper.getEventDispatcherForReactTag(reactContext, id)
+      dispatcher?.dispatchEvent(AddToCartEvent(surfaceId, id, productId, size))
+    }
+  }
+
+  companion object {
+    const val NAME = "GlanceMixAndMatchWidgetView"
+  }
+}