@clerk/expo-native-components 0.0.0-stage → 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Clerk, Inc.
+
+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,107 @@
-# Temporary Holding Version
+<p align="center">
+  <a href="https://clerk.com?utm_source=github&utm_medium=clerk_expo_native_components" target="_blank" rel="noopener noreferrer">
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcset="https://images.clerk.com/static/logo-dark-mode-400x400.png">
+      <img src="https://images.clerk.com/static/logo-light-mode-400x400.png" height="64">
+    </picture>
+  </a>
+  <br />
+  <h1 align="center">@clerk/expo-native-components</h1>
+</p>
 
-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.
+<div align="center">
+
+[![Chat on Discord](https://img.shields.io/discord/856971667393609759.svg?logo=discord)](https://clerk.com/discord)
+[![Clerk documentation](https://img.shields.io/badge/documentation-clerk-green.svg)](https://clerk.com/docs?utm_source=github&utm_medium=clerk_expo_native_components)
+[![Follow on X](https://img.shields.io/twitter/follow/clerk?style=social)](https://x.com/intent/follow?screen_name=clerk)
+
+[Changelog](https://github.com/clerk/javascript/blob/main/packages/expo-native-components/CHANGELOG.md)
+·
+[Report a Bug](https://github.com/clerk/javascript/issues/new?assignees=&labels=needs-triage&projects=&template=BUG_REPORT.yml)
+·
+[Request a Feature](https://feedback.clerk.com/roadmap)
+·
+[Get help](https://clerk.com/contact/support?utm_source=github&utm_medium=clerk_expo_native_components)
+
+</div>
+
+## Getting Started
+
+`@clerk/expo-native-components` adds Clerk's prebuilt native components to an Expo app that uses [`@clerk/expo`](https://github.com/clerk/javascript/tree/main/packages/expo). It contains the native modules built on the Clerk iOS and Android SDKs:
+
+- **iOS**: [clerk-ios](https://github.com/clerk/clerk-ios) (SwiftUI)
+- **Android**: [clerk-android](https://github.com/clerk/clerk-android) (Jetpack Compose)
+
+Install it only if you use `AuthView`, `UserProfileView`, `UserButton`, or biometric credentials. Apps that only use `@clerk/expo` do not include the Clerk native SDKs.
+
+### Prerequisites
+
+- `@clerk/expo`
+- Expo 54 or later, with a [development build](https://docs.expo.dev/develop/development-builds/introduction/) (Expo Go is not supported)
+- iOS 17 or later
+
+### Installation
+
+```sh
+npx expo install @clerk/expo @clerk/expo-native-components
+```
+
+Add the config plugin alongside `@clerk/expo` in your app config, then rebuild your native app:
+
+```json
+{
+  "expo": {
+    "plugins": ["@clerk/expo", "@clerk/expo-native-components"]
+  }
+}
+```
+
+The plugin accepts the following options:
+
+- `keychainService`: keychain service identifier to share the session with app extensions.
+- `theme`: path to a JSON file with `colors`, `darkColors`, and `design` keys that styles the native components.
+
+## Usage
+
+```tsx
+import { useAuth } from '@clerk/expo';
+import { AuthView } from '@clerk/expo-native-components';
+
+export default function SignInScreen() {
+  const { isSignedIn } = useAuth();
+
+  if (isSignedIn) {
+    return null;
+  }
+
+  return <AuthView />;
+}
+```
+
+For further information, guides, and examples visit the [Expo reference documentation](https://clerk.com/docs/references/expo/overview?utm_source=github&utm_medium=clerk_expo_native_components).
+
+## Support
+
+For help, visit our [support page](https://clerk.com/contact/support?utm_source=github&utm_medium=clerk_expo_native_components).
+
+## Community
+
+Join our [Discord community](https://clerk.com/discord) to connect with other developers.
+
+## Contributing
+
+We're open to all community contributions! If you'd like to contribute in any way, please read [our contribution guidelines](https://github.com/clerk/javascript/blob/main/docs/CONTRIBUTING.md) and [code of conduct](https://github.com/clerk/javascript/blob/main/docs/CODE_OF_CONDUCT.md).
+
+## Security
+
+`@clerk/expo-native-components` follows good practices of security, but 100% security cannot be assured.
+
+`@clerk/expo-native-components` is provided **"as is"** without any **warranty**. Use at your own risk.
+
+_For more information and to report security issues, please refer to our [security documentation](https://github.com/clerk/javascript/blob/main/docs/SECURITY.md)._
+
+## License
+
+This project is licensed under the **MIT license**.
+
+See [LICENSE](https://github.com/clerk/javascript/blob/main/packages/expo-native-components/LICENSE) for more information.

package/android/build.gradle

@@ -0,0 +1,152 @@
+import groovy.json.JsonSlurper
+
+plugins {
+  id 'com.android.library'
+  id 'org.jetbrains.kotlin.android'
+  id 'org.jetbrains.kotlin.plugin.compose' version '2.1.20'
+}
+
+def expoModulesCorePlugin = new File(project(":expo-modules-core").projectDir.absolutePath, "ExpoModulesCorePlugin.gradle")
+apply from: expoModulesCorePlugin
+applyKotlinExpoModulesCorePlugin()
+
+group = 'com.clerk.expo'
+version = '1.0.0'
+
+// Set by the @clerk/expo-native-components config plugin to the installed @clerk/expo version.
+def clerkExpoVersion = rootProject.findProperty("clerkExpo.hostSdkVersion")?.toString() ?:
+  new JsonSlurper().parse(new File(projectDir, "../package.json")).version.toString()
+
+// Dependency versions - centralized for easier updates
+// See: https://docs.gradle.org/current/userguide/version_catalogs.html for app-level version catalogs
+ext {
+  kotlinxCoroutinesVersion = "1.7.3"
+  clerkAndroidApiVersion = "1.1.11"
+  clerkAndroidUiVersion = "1.1.11"
+  okhttpVersion = "5.4.0"
+  okhttpUrlConnectionVersion = "5.0.0-alpha.16"
+  composeVersion = "1.7.0"
+  activityComposeVersion = "1.9.0"
+  lifecycleVersion = "2.8.0"
+}
+
+def safeExtGet(prop, fallback) {
+  rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback
+}
+
+android {
+  namespace "expo.modules.clerk"
+
+  compileSdk safeExtGet("compileSdkVersion", 36)
+
+  defaultConfig {
+    minSdk safeExtGet("minSdkVersion", 24)
+    targetSdk safeExtGet("targetSdkVersion", 36)
+    versionCode 1
+    versionName "1.0.0"
+    buildConfigField "String", "CLERK_EXPO_VERSION", "\"${clerkExpoVersion}\""
+  }
+
+  buildTypes {
+    release {
+      minifyEnabled false
+    }
+  }
+
+  compileOptions {
+    sourceCompatibility JavaVersion.VERSION_17
+    targetCompatibility JavaVersion.VERSION_17
+  }
+
+  kotlinOptions {
+    jvmTarget = "17"
+    // TODO: Remove once clerk-android pins its transitive deps to a Kotlin version compatible with Expo.
+    // clerk-android transitive deps (e.g. kotlinx-serialization-core:1.10.0) ship Kotlin 2.3.x metadata,
+    // but Expo SDK 54/55 uses Kotlin 2.1.x. This flag lets the 2.1.x compiler read 2.3.x metadata safely.
+    freeCompilerArgs += ['-Xskip-metadata-version-check']
+  }
+
+  buildFeatures {
+    buildConfig = true
+    compose = true
+  }
+
+  packaging {
+    resources {
+      excludes += ['META-INF/versions/9/OSGI-INF/MANIFEST.MF']
+    }
+  }
+
+  sourceSets {
+    main {
+      java.srcDirs = ['src/main/java']
+    }
+  }
+}
+
+// clerk-android is compiled with Kotlin 2.3.x, but Expo/RN projects typically use an older
+// Kotlin version (e.g. 2.1.x). This causes "incompatible version of Kotlin" metadata errors
+// at :app:compileDebugKotlin. Applying -Xskip-metadata-version-check allows the older
+// compiler to read 2.3.x metadata without failing.
+try {
+  rootProject.allprojects {
+    tasks.withType(org.jetbrains.kotlin.gradle.tasks.KotlinCompile).configureEach {
+      compilerOptions {
+        freeCompilerArgs.add('-Xskip-metadata-version-check')
+      }
+    }
+  }
+} catch (Exception ignored) {
+  // Future Gradle versions with Isolated Projects may block cross-project configuration.
+  // In that case, users should add '@clerk/expo-native-components' to their app.json plugins array instead,
+  // which applies the flag via the config plugin's withClerkAndroid.
+}
+
+dependencies {
+  testImplementation "junit:junit:4.13.2"
+
+  implementation project(':expo-modules-core')
+
+  // Coroutines for async operations
+  implementation "org.jetbrains.kotlinx:kotlinx-coroutines-android:$kotlinxCoroutinesVersion"
+
+  // Clerk Android SDK with prebuilt UI
+  // Exclude kotlin-stdlib to prevent 2.3.0 from polluting the project
+  // Exclude transitive OkHttp modules so the compatible versions below control resolution.
+  implementation("com.clerk:clerk-android-ui:$clerkAndroidUiVersion") {
+    exclude group: 'org.jetbrains.kotlin', module: 'kotlin-stdlib'
+    exclude group: 'org.jetbrains.kotlin', module: 'kotlin-stdlib-jdk7'
+    exclude group: 'org.jetbrains.kotlin', module: 'kotlin-stdlib-jdk8'
+    exclude group: 'com.squareup.okhttp3', module: 'okhttp'
+    exclude group: 'com.squareup.okhttp3', module: 'okhttp-urlconnection'
+  }
+  // clerk-android-telemetry has a transitive dep on the last released
+  // clerk-android-api. Pinning the api explicitly here keeps consumers
+  // compiling against the same version we ship the UI from.
+  implementation("com.clerk:clerk-android-api:$clerkAndroidApiVersion") {
+    exclude group: 'org.jetbrains.kotlin', module: 'kotlin-stdlib'
+    exclude group: 'org.jetbrains.kotlin', module: 'kotlin-stdlib-jdk7'
+    exclude group: 'org.jetbrains.kotlin', module: 'kotlin-stdlib-jdk8'
+    exclude group: 'com.squareup.okhttp3', module: 'okhttp'
+    exclude group: 'com.squareup.okhttp3', module: 'okhttp-urlconnection'
+  }
+
+  implementation('com.squareup.okhttp3:okhttp') {
+    version { strictly(okhttpVersion) }
+  }
+  implementation('com.squareup.okhttp3:logging-interceptor') {
+    version { strictly(okhttpVersion) }
+  }
+  implementation('com.squareup.okhttp3:okhttp-urlconnection') {
+    version { strictly(okhttpUrlConnectionVersion) }
+  }
+
+  // Jetpack Compose for wrapping Clerk views
+  implementation "androidx.compose.ui:ui:$composeVersion"
+  implementation "androidx.compose.material3:material3:1.3.0"
+  implementation "androidx.activity:activity-compose:$activityComposeVersion"
+  implementation "androidx.lifecycle:lifecycle-runtime-compose:$lifecycleVersion"
+  implementation "androidx.lifecycle:lifecycle-viewmodel-compose:$lifecycleVersion"
+
+  testImplementation "junit:junit:4.13.2"
+}

package/android/src/main/AndroidManifest.xml

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

package/android/src/main/java/expo/modules/clerk/ClerkAuthViewModule.kt

@@ -0,0 +1,241 @@
+@file:OptIn(FrameworkIntegrationApi::class)
+
+package expo.modules.clerk
+
+import android.content.Context
+import android.util.Log
+import android.view.View
+import android.view.ViewGroup
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.wrapContentSize
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.key
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.viewinterop.AndroidView
+import androidx.lifecycle.ViewModelStore
+import androidx.lifecycle.ViewModelStoreOwner
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
+import com.clerk.api.Clerk
+import com.clerk.api.FrameworkIntegrationApi
+import com.clerk.api.ui.ClerkDesign
+import com.clerk.api.ui.ClerkTheme
+import com.clerk.ui.auth.AuthMode
+import com.clerk.ui.auth.AuthView
+import com.clerk.ui.navigation.ClerkHostBackActionProvider
+import expo.modules.kotlin.AppContext
+import expo.modules.kotlin.modules.Module
+import expo.modules.kotlin.modules.ModuleDefinition
+import expo.modules.kotlin.viewevent.EventDispatcher
+
+private const val TAG = "ClerkAuthViewModule"
+
+private fun debugLog(tag: String, message: String) {
+  if (BuildConfig.DEBUG) {
+    Log.d(tag, message)
+  }
+}
+
+class ClerkAuthNativeView(context: Context, appContext: AppContext) : ClerkComposeNativeViewHost(context, appContext) {
+  var isDismissible: Boolean = true
+  var logoMaxHeight: Float? = null
+  var mode: String? = null
+  var logoView: View? = null
+    private set
+  var hostBackButton: Boolean = false
+
+  private var logoWidth = 0
+  private var logoHeight = 0
+  private val logoLayoutListener =
+    View.OnLayoutChangeListener { view, left, top, right, bottom, _, _, _, _ ->
+      val width = right - left
+      val height = bottom - top
+      if (view === logoView && (width != logoWidth || height != logoHeight)) {
+        logoWidth = width
+        logoHeight = height
+        setupView()
+      }
+    }
+
+  private val onAuthEvent by EventDispatcher()
+  private val onHostBack by EventDispatcher()
+
+  init {
+    // At cold start, ClerkExpoModule.configure() may run before React's
+    // host-resume sync, so this view's construction is a reliable second hook.
+    activity?.let { Clerk.attachActivity(it) }
+  }
+
+  // Per-view ViewModelStoreOwner so the AuthView's ViewModels (including its
+  // navigation state) are scoped to THIS view instance, not the activity.
+  // Without this, the AuthView's navigation persists across mount/unmount
+  // cycles within the same activity, leaving the user stuck on whatever screen
+  // (e.g. "Get help") was last navigated to before sign-out.
+  private val viewModelStoreOwner = object : ViewModelStoreOwner {
+    private val store = ViewModelStore()
+    override val viewModelStore: ViewModelStore = store
+  }
+
+  private var dismissalEventSent: Boolean = false
+
+  override fun localViewModelStoreOwner(): ViewModelStoreOwner = viewModelStoreOwner
+
+  override fun onHostDetachedFromWindow() {
+    // Clear our per-view ViewModelStore so any AuthView ViewModels are GC'd.
+    viewModelStoreOwner.viewModelStore.clear()
+    // Reset so a detached-then-reattached view can emit dismissed again.
+    dismissalEventSent = false
+  }
+
+  @Composable
+  override fun Content() {
+    debugLog(TAG, "setupView - mode: $mode, isDismissible: $isDismissible, hostBackButton: $hostBackButton, activity: $activity")
+
+    if (hostBackButton) {
+      ClerkHostBackActionProvider(onHostBack = { onHostBack(mapOf()) }) { AuthContent() }
+    } else {
+      AuthContent()
+    }
+  }
+
+  @Composable
+  private fun AuthContent() {
+    // An AuthView composed before Clerk has loaded the environment renders no
+    // form and never recovers, so recreate it once loaded.
+    val isInitialized by Clerk.isInitialized.collectAsStateWithLifecycle()
+    key(isInitialized) {
+      AuthContentBody()
+    }
+  }
+
+  @Composable
+  private fun AuthContentBody() {
+    AuthView(
+      modifier = Modifier.fillMaxSize(),
+      clerkTheme = authTheme(),
+      logo = logoView?.let { view ->
+        { ReactLogoView(view = view, width = logoWidth, height = logoHeight) }
+      },
+      mode = authMode(mode),
+      isDismissible = isDismissible,
+      onDismiss = ::sendDismissEvent,
+      onAuthComplete = {
+        sendDismissEvent()
+      },
+    )
+  }
+
+  fun setLogoView(view: View) {
+    if (logoView === view) return
+    logoView?.removeOnLayoutChangeListener(logoLayoutListener)
+    logoView = view
+    logoWidth = view.width
+    logoHeight = view.height
+    view.addOnLayoutChangeListener(logoLayoutListener)
+    setupView()
+  }
+
+  fun removeLogoView(view: View) {
+    if (logoView !== view) return
+    view.removeOnLayoutChangeListener(logoLayoutListener)
+    logoView = null
+    logoWidth = 0
+    logoHeight = 0
+    setupView()
+  }
+
+  private fun authTheme(): ClerkTheme? {
+    val maxHeight = logoMaxHeight ?: return Clerk.customTheme
+    val theme = Clerk.customTheme ?: ClerkTheme()
+    val design = theme.design ?: ClerkDesign()
+    return theme.copy(design = design.copy(logoMaxHeight = maxHeight.dp))
+  }
+
+  private fun sendEvent(type: String) {
+    onAuthEvent(mapOf("type" to type))
+  }
+
+  private fun sendDismissEvent() {
+    if (dismissalEventSent) return
+    dismissalEventSent = true
+    sendEvent("dismissed")
+  }
+
+  private fun authMode(mode: String?): AuthMode = when (mode) {
+    "signIn" -> AuthMode.SignIn
+    "signUp" -> AuthMode.SignUp
+    else -> AuthMode.SignInOrUp
+  }
+}
+
+@Composable
+private fun ReactLogoView(view: View, width: Int, height: Int) {
+  val density = LocalDensity.current
+  val modifier =
+    if (width > 0 && height > 0) {
+      with(density) { Modifier.size(width.toDp(), height.toDp()) }
+    } else {
+      Modifier.wrapContentSize()
+    }
+
+  AndroidView(
+    modifier = modifier,
+    factory = {
+      (view.parent as? ViewGroup)?.removeView(view)
+      view
+    },
+  )
+}
+
+class ClerkAuthViewModule : Module() {
+  override fun definition() = ModuleDefinition {
+    Name("ClerkAuthView")
+
+    View(ClerkAuthNativeView::class) {
+      Events("onAuthEvent", "onHostBack")
+
+      GroupView<ClerkAuthNativeView> {
+        AddChildView<View> { parent, child, _ ->
+          parent.setLogoView(child)
+        }
+        GetChildCount { parent ->
+          if (parent.logoView == null) 0 else 1
+        }
+        GetChildViewAt<View> { parent, index ->
+          if (index == 0) parent.logoView else null
+        }
+        RemoveChildView<View> { parent, child ->
+          parent.removeLogoView(child)
+        }
+        RemoveChildViewAt { parent, index ->
+          if (index == 0) {
+            parent.logoView?.let(parent::removeLogoView)
+          }
+        }
+      }
+
+      Prop("mode") { view: ClerkAuthNativeView, mode: String? ->
+        view.mode = mode
+      }
+
+      Prop("isDismissible") { view: ClerkAuthNativeView, isDismissible: Boolean ->
+        view.isDismissible = isDismissible
+      }
+
+      Prop("logoMaxHeight") { view: ClerkAuthNativeView, logoMaxHeight: Float? ->
+        view.logoMaxHeight = logoMaxHeight
+      }
+
+      Prop("hostBackButton") { view: ClerkAuthNativeView, hostBackButton: Boolean ->
+        view.hostBackButton = hostBackButton
+      }
+
+      OnViewDidUpdateProps { view: ClerkAuthNativeView ->
+        view.setupView()
+      }
+    }
+  }
+}

package/android/src/main/java/expo/modules/clerk/ClerkComposeNativeViewHost.kt

@@ -0,0 +1,148 @@
+package expo.modules.clerk
+
+import android.content.Context
+import android.content.ContextWrapper
+import android.view.View
+import androidx.activity.ComponentActivity
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.Recomposer
+import androidx.compose.ui.platform.AndroidUiDispatcher
+import androidx.compose.ui.platform.ComposeView
+import androidx.compose.ui.platform.ViewCompositionStrategy
+import androidx.lifecycle.ViewModelStoreOwner
+import androidx.lifecycle.compose.LocalLifecycleOwner
+import androidx.lifecycle.setViewTreeLifecycleOwner
+import androidx.lifecycle.setViewTreeViewModelStoreOwner
+import androidx.lifecycle.viewmodel.compose.LocalViewModelStoreOwner
+import androidx.savedstate.compose.LocalSavedStateRegistryOwner
+import androidx.savedstate.setViewTreeSavedStateRegistryOwner
+import expo.modules.kotlin.AppContext
+import expo.modules.kotlin.views.ExpoView
+import kotlinx.coroutines.CoroutineScope
+import kotlinx.coroutines.Job
+import kotlinx.coroutines.launch
+
+abstract class ClerkComposeNativeViewHost(
+  context: Context,
+  appContext: AppContext,
+  private val retainCompositionOnDetach: Boolean = false,
+) : ExpoView(context, appContext) {
+  protected val activity: ComponentActivity? = findActivity(context)
+
+  private var recomposer: Recomposer? = null
+  private var recomposerJob: Job? = null
+
+  private val composeView = ComposeView(context).also { view ->
+    if (retainCompositionOnDetach) {
+      // Native tab navigators detach inactive screens from the window. Keep the
+      // composition alive until React actually destroys this Expo view so Clerk's
+      // internal navigation back stack survives a tab switch.
+      view.setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
+    }
+    activity?.let { act ->
+      view.setViewTreeLifecycleOwner(act)
+      view.setViewTreeViewModelStoreOwner(act)
+      view.setViewTreeSavedStateRegistryOwner(act)
+    }
+    addView(view, LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT))
+  }
+
+  init {
+    // Fabric measures before window attach; without a parent composition context, ComposeView.onMeasure throws.
+    startRecomposer()
+  }
+
+  override fun onAttachedToWindow() {
+    super.onAttachedToWindow()
+    setupView()
+  }
+
+  override fun onDetachedFromWindow() {
+    if (!retainCompositionOnDetach) {
+      stopRecomposer()
+    }
+    onHostDetachedFromWindow()
+    super.onDetachedFromWindow()
+  }
+
+  fun destroyHost() {
+    composeView.disposeComposition()
+    stopRecomposer()
+    onHostDestroyed()
+  }
+
+  private fun startRecomposer() {
+    if (activity == null || recomposerJob?.isActive == true) return
+
+    // Navigation can detach and later reattach the same host, so a reattached ComposeView needs a fresh recomposer.
+    val recomposerContext = AndroidUiDispatcher.Main
+    val newRecomposer = Recomposer(recomposerContext)
+    recomposer = newRecomposer
+    composeView.setParentCompositionContext(newRecomposer)
+    recomposerJob = CoroutineScope(recomposerContext).launch {
+      newRecomposer.runRecomposeAndApplyChanges()
+    }
+  }
+
+  private fun stopRecomposer() {
+    recomposer?.cancel()
+    recomposerJob?.cancel()
+    recomposer = null
+    recomposerJob = null
+  }
+
+  fun setupView() {
+    startRecomposer()
+    composeView.setContent {
+      val viewModelStoreOwner = localViewModelStoreOwner()
+
+      if (activity != null && viewModelStoreOwner != null) {
+        CompositionLocalProvider(
+          LocalViewModelStoreOwner provides viewModelStoreOwner,
+          LocalLifecycleOwner provides activity,
+          LocalSavedStateRegistryOwner provides activity,
+        ) {
+          Content()
+        }
+      } else {
+        Content()
+      }
+    }
+  }
+
+  protected open fun localViewModelStoreOwner(): ViewModelStoreOwner? = activity
+
+  protected open fun onHostDetachedFromWindow() {}
+
+  protected open fun onHostDestroyed() {}
+
+  protected fun layoutAndroidViewHandler(view: View) {
+    view.post {
+      val holder = view.parent as? View ?: return@post
+      val handler = holder.parent as? View ?: return@post
+      val owner = handler.parent as? View ?: return@post
+
+      // AndroidView's handler can enter the hierarchy after its Compose owner was laid out.
+      handler.measure(
+        View.MeasureSpec.makeMeasureSpec(owner.width, View.MeasureSpec.EXACTLY),
+        View.MeasureSpec.makeMeasureSpec(owner.height, View.MeasureSpec.EXACTLY),
+      )
+      handler.layout(0, 0, owner.width, owner.height)
+    }
+  }
+
+  @Composable
+  protected abstract fun Content()
+
+  companion object {
+    fun findActivity(context: Context): ComponentActivity? {
+      var ctx: Context? = context
+      while (ctx != null) {
+        if (ctx is ComponentActivity) return ctx
+        ctx = (ctx as? ContextWrapper)?.baseContext
+      }
+      return null
+    }
+  }
+}