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

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

@@ -0,0 +1,156 @@
+package expo.modules.clerk
+
+import android.content.Context
+import android.view.View
+import android.view.ViewGroup
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.DisposableEffect
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.viewinterop.AndroidView
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
+import com.clerk.api.Clerk
+import com.clerk.ui.userprofile.custom.LocalUserProfileCustomNavigator
+import com.clerk.ui.userprofile.custom.UserProfileCustomRow
+import com.clerk.ui.userbutton.UserButton
+import expo.modules.kotlin.AppContext
+import expo.modules.kotlin.modules.Module
+import expo.modules.kotlin.modules.ModuleDefinition
+import expo.modules.kotlin.viewevent.EventDispatcher
+
+class ClerkUserButtonNativeView(context: Context, appContext: AppContext) : ClerkComposeNativeViewHost(context, appContext) {
+  private var customPagesJson: String = "[]"
+  private val customPageViews = mutableListOf<View>()
+  private val onCustomPageEvent by EventDispatcher()
+  private val customPageState =
+    ClerkUserProfileCustomPageState(resetCoveredPathsWhenInactive = true) { type, path ->
+      onCustomPageEvent(mapOf("type" to type, "path" to path))
+    }
+
+  init {
+    activity?.let { Clerk.attachActivity(it) }
+  }
+
+  @Composable
+  override fun Content() {
+    val user by Clerk.userFlow.collectAsStateWithLifecycle()
+
+    LaunchedEffect(user?.id) { customPageState.userDidChange(user?.id) }
+
+    Box(
+      modifier = Modifier.fillMaxSize(),
+      contentAlignment = Alignment.Center,
+    ) {
+      UserButton(
+        clerkTheme = Clerk.customTheme,
+        customRows = customRows(),
+        customDestination =
+          if (customPageViews.isEmpty()) null
+          else { routeKey -> CustomPageDestination(routeKey) },
+      )
+    }
+  }
+
+  fun addCustomPageView(view: View, index: Int) {
+    (view.parent as? ViewGroup)?.removeView(view)
+    customPageViews.add(index.coerceIn(0, customPageViews.size), view)
+    setupView()
+  }
+
+  fun removeCustomPageView(view: View) {
+    customPageViews.remove(view)
+    (view.parent as? ViewGroup)?.removeView(view)
+    setupView()
+  }
+
+  fun customPageViewAt(index: Int): View? = customPageViews.getOrNull(index)
+
+  fun customPageCount(): Int = customPageViews.size
+
+  fun setCustomPages(customPages: String) {
+    if (customPagesJson == customPages) return
+    val validPaths = runCatching { userProfileCustomPagePaths(customPages) }.getOrDefault(emptySet())
+    customPageState.reconcileCustomPagePaths(validPaths)
+    customPagesJson = customPages
+  }
+
+  fun navigateCustomPage(action: String, routeKey: String?) {
+    customPageState.navigate(action, routeKey)
+  }
+
+  @Composable
+  private fun CustomPageDestination(routeKey: String) {
+    val customNavigator = LocalUserProfileCustomNavigator.current
+    val pages = customPages()
+    val view = customPageViews.getOrNull(pages.indexOfFirst { it.routeKey == routeKey })
+
+    LaunchedEffect(routeKey, customNavigator, view) {
+      customPageState.configureNavigation(
+        navigateBack = customNavigator::navigateBack,
+        popToRoot = customNavigator::popToRoot,
+        push = customNavigator::push,
+      )
+      if (view == null) {
+        customNavigator.popToRoot()
+        return@LaunchedEffect
+      }
+      layoutAndroidViewHandler(view)
+      customPageState.pageDidPresent(routeKey)
+    }
+
+    if (view == null) return
+
+    DisposableEffect(routeKey) {
+      onDispose { customPageState.pageDidDismiss(routeKey) }
+    }
+
+    AndroidView(
+      modifier = Modifier.fillMaxSize(),
+      factory = {
+        (view.parent as? ViewGroup)?.removeView(view)
+        view
+      },
+    )
+  }
+
+  private fun customRows(): List<UserProfileCustomRow> = customPages().filter { it.showAsRow }.map { it.nativeRow }
+
+  private fun customPages(): List<ClerkUserProfileCustomPageConfig> =
+    runCatching { parseUserProfileCustomPages(customPagesJson, customPageViews.size) }.getOrDefault(emptyList())
+}
+
+class ClerkUserButtonViewModule : Module() {
+  override fun definition() = ModuleDefinition {
+    Name("ClerkUserButtonView")
+
+    View(ClerkUserButtonNativeView::class) {
+      Events("onCustomPageEvent")
+
+      GroupView<ClerkUserButtonNativeView> {
+        AddChildView<View> { parent, child, index -> parent.addCustomPageView(child, index) }
+        GetChildCount { parent -> parent.customPageCount() }
+        GetChildViewAt<View> { parent, index -> parent.customPageViewAt(index) }
+        RemoveChildView<View> { parent, child -> parent.removeCustomPageView(child) }
+        RemoveChildViewAt { parent, index -> parent.customPageViewAt(index)?.let(parent::removeCustomPageView) }
+      }
+
+      Prop("customPages") { view: ClerkUserButtonNativeView, customPages: String ->
+        view.setCustomPages(customPages)
+      }
+
+      AsyncFunction("navigateCustomPage") {
+        view: ClerkUserButtonNativeView,
+        action: String,
+        routeKey: String? -> view.navigateCustomPage(action, routeKey)
+      }
+
+      OnViewDidUpdateProps { view: ClerkUserButtonNativeView ->
+        view.setupView()
+      }
+    }
+  }
+}

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

@@ -0,0 +1,120 @@
+package expo.modules.clerk
+
+import android.os.Handler
+import android.os.Looper
+
+private fun postToMainThread(action: () -> Unit) {
+  Handler(Looper.getMainLooper()).post { action() }
+}
+
+internal class ClerkUserProfileCustomPageState(
+  private val resetCoveredPathsWhenInactive: Boolean = false,
+  private val postInactiveReset: ((() -> Unit) -> Unit) = ::postToMainThread,
+  private val pageEventHandler: (type: String, path: String) -> Unit,
+) {
+  private val retainedPaths = mutableListOf<String>()
+  private var navigateBackAction: (() -> Unit)? = null
+  private var popToRootAction: (() -> Unit)? = null
+  private var pushAction: ((String) -> Unit)? = null
+  private var hasObservedUserId = false
+  private var observedUserId: String? = null
+  private var navigationTransitionGeneration = 0
+
+  fun configureNavigation(
+    navigateBack: () -> Unit,
+    popToRoot: () -> Unit,
+    push: (String) -> Unit,
+  ) {
+    navigateBackAction = navigateBack
+    popToRootAction = popToRoot
+    pushAction = push
+  }
+
+  fun pageDidPresent(path: String) {
+    cancelPendingInactiveReset()
+    if (path !in retainedPaths) {
+      retainedPaths.add(path)
+    }
+    pageEventHandler("presented", path)
+  }
+
+  fun pageDidDismiss(path: String) {
+    val pathIndex = retainedPaths.lastIndexOf(path)
+    if (pathIndex == -1) return
+
+    // Navigation 3 disposes a destination when another page covers it. Keep that
+    // earlier path until it is actually removed from the native back stack.
+    if (pathIndex == retainedPaths.lastIndex) {
+      retainedPaths.removeAt(pathIndex)
+      if (resetCoveredPathsWhenInactive) {
+        scheduleInactiveReset()
+      }
+    }
+    pageEventHandler("dismissed", path)
+  }
+
+  fun userDidChange(userId: String?) {
+    if (!hasObservedUserId) {
+      observedUserId = userId
+      hasObservedUserId = true
+      return
+    }
+
+    if (observedUserId == userId) return
+    observedUserId = userId
+    invalidateNavigation()
+  }
+
+  fun reconcileCustomPagePaths(validPaths: Set<String>) {
+    if (retainedPaths.all(validPaths::contains)) return
+    invalidateNavigation()
+  }
+
+  fun navigate(action: String, routeKey: String?) {
+    when (action) {
+      "back" -> navigateBackAction?.invoke()
+      "popToRoot" -> invalidateNavigation()
+      "push" -> {
+        val path = routeKey ?: return
+        val push = pushAction ?: return
+        if (path in retainedPaths) return
+        retainedPaths.add(path)
+        push(path)
+      }
+    }
+  }
+
+  internal fun retainedPathsForTesting(): List<String> = retainedPaths.toList()
+
+  private fun invalidateNavigation() {
+    cancelPendingInactiveReset()
+    if (retainedPaths.isEmpty()) return
+
+    val dismissedPaths = retainedPaths.asReversed().distinct()
+    retainedPaths.clear()
+    popToRootAction?.invoke()
+    dismissedPaths.forEach { pageEventHandler("dismissed", it) }
+  }
+
+  private fun scheduleInactiveReset() {
+    val generation = ++navigationTransitionGeneration
+    postInactiveReset {
+      if (generation == navigationTransitionGeneration) {
+        resetInactivePaths()
+      }
+    }
+  }
+
+  private fun cancelPendingInactiveReset() {
+    navigationTransitionGeneration += 1
+  }
+
+  private fun resetInactivePaths() {
+    navigateBackAction = null
+    popToRootAction = null
+    pushAction = null
+    val dismissedPaths = retainedPaths.asReversed().toList()
+    retainedPaths.clear()
+    dismissedPaths.forEach { pageEventHandler("dismissed", it) }
+  }
+}

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

@@ -0,0 +1,315 @@
+@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.runtime.Composable
+import androidx.compose.runtime.DisposableEffect
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.Modifier
+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.ui.R
+import com.clerk.ui.navigation.ClerkHostBackActionProvider
+import com.clerk.ui.userprofile.UserProfileView
+import com.clerk.ui.userprofile.custom.LocalUserProfileCustomNavigator
+import com.clerk.ui.userprofile.custom.UserProfileCustomRow
+import com.clerk.ui.userprofile.custom.UserProfileCustomRowPlacement
+import com.clerk.ui.userprofile.custom.UserProfileRow
+import com.clerk.ui.userprofile.custom.UserProfileRowIcon
+import com.clerk.ui.userprofile.custom.UserProfileSection
+import expo.modules.kotlin.AppContext
+import expo.modules.kotlin.modules.Module
+import expo.modules.kotlin.modules.ModuleDefinition
+import expo.modules.kotlin.viewevent.EventDispatcher
+import org.json.JSONArray
+import org.json.JSONObject
+
+private const val TAG = "ClerkUserProfileViewModule"
+
+private fun debugLog(tag: String, message: String) {
+  if (BuildConfig.DEBUG) {
+    Log.d(tag, message)
+  }
+}
+
+internal data class ClerkUserProfileCustomPageConfig(
+  val routeKey: String,
+  val title: String,
+  val icon: Int,
+  val placement: UserProfileCustomRowPlacement,
+  val showAsRow: Boolean,
+) {
+  val nativeRow: UserProfileCustomRow
+    get() =
+      UserProfileCustomRow(
+        routeKey = routeKey,
+        title = title,
+        icon = UserProfileRowIcon.Resource(icon),
+        placement = placement,
+      )
+}
+
+internal fun parseUserProfileCustomPages(
+  customPagesJson: String,
+  customPageCount: Int,
+): List<ClerkUserProfileCustomPageConfig> {
+  val pages = JSONArray(customPagesJson)
+  return buildList {
+    for (index in 0 until minOf(pages.length(), customPageCount)) {
+      val page = pages.getJSONObject(index)
+      add(
+        ClerkUserProfileCustomPageConfig(
+          routeKey = page.getString("path"),
+          title = page.getString("label"),
+          icon = userProfileCustomRowIcon(page.optString("icon")),
+          placement = userProfileCustomRowPlacement(page.optJSONObject("placement")),
+          showAsRow = page.optBoolean("showAsRow", true),
+        ),
+      )
+    }
+  }
+}
+
+internal fun userProfileCustomPagePaths(customPagesJson: String): Set<String> {
+  val pages = JSONArray(customPagesJson)
+  return buildSet {
+    for (index in 0 until pages.length()) {
+      add(pages.getJSONObject(index).getString("path"))
+    }
+  }
+}
+
+private fun userProfileCustomRowIcon(icon: String): Int =
+  when (icon) {
+    "user" -> R.drawable.ic_user
+    "profile" -> R.drawable.ic_profile
+    "security" -> R.drawable.ic_security
+    "billing" -> R.drawable.ic_credit_card
+    "key" -> R.drawable.ic_key
+    "lock" -> R.drawable.ic_lock
+    "email" -> R.drawable.ic_email
+    "phone" -> R.drawable.ic_phone
+    "add" -> R.drawable.ic_plus
+    "switch" -> R.drawable.ic_switch
+    "users" -> R.drawable.ic_users
+    "warning" -> R.drawable.ic_warning
+    "info" -> R.drawable.ic_information_circle
+    "globe" -> R.drawable.ic_globe
+    "folder" -> R.drawable.ic_folder
+    "book" -> R.drawable.ic_folder
+    else -> R.drawable.ic_cog
+  }
+
+private fun userProfileCustomRowPlacement(placement: JSONObject?): UserProfileCustomRowPlacement {
+  val type = placement?.optString("type")
+  return when (type) {
+    "sectionStart" -> UserProfileCustomRowPlacement.SectionStart(userProfileSection(placement.optString("section")))
+    "before" -> UserProfileCustomRowPlacement.Before(userProfileRow(placement.optString("row")))
+    "after" -> UserProfileCustomRowPlacement.After(userProfileRow(placement.optString("row")))
+    else -> UserProfileCustomRowPlacement.SectionEnd(userProfileSection(placement?.optString("section")))
+  }
+}
+
+private fun userProfileSection(section: String?): UserProfileSection =
+  if (section == "account") UserProfileSection.Account else UserProfileSection.Profile
+
+private fun userProfileRow(row: String): UserProfileRow =
+  when (row) {
+    "security" -> UserProfileRow.Security
+    "switchAccount" -> UserProfileRow.SwitchAccount
+    "addAccount" -> UserProfileRow.AddAccount
+    "signOut" -> UserProfileRow.SignOut
+    else -> UserProfileRow.ManageAccount
+  }
+
+class ClerkUserProfileNativeView(context: Context, appContext: AppContext) :
+  ClerkComposeNativeViewHost(context, appContext, retainCompositionOnDetach = true) {
+  // clerk-android UserProfileView dismissibility is controlled by its onDismiss callback.
+  var isDismissible: Boolean = true
+  var hostBackButton: Boolean = false
+  private var customPagesJson: String = "[]"
+  private val customPageViews = mutableListOf<View>()
+  private val onProfileEvent by EventDispatcher()
+  private val onCustomPageEvent by EventDispatcher()
+  private val onHostBack by EventDispatcher()
+  private val customPageState =
+    ClerkUserProfileCustomPageState { type, path ->
+      onCustomPageEvent(mapOf("type" to type, "path" to path))
+    }
+
+  private val viewModelStoreOwner = object : ViewModelStoreOwner {
+    private val store = ViewModelStore()
+    override val viewModelStore: ViewModelStore = store
+  }
+
+  override fun localViewModelStoreOwner(): ViewModelStoreOwner = viewModelStoreOwner
+
+  override fun onHostDestroyed() {
+    viewModelStoreOwner.viewModelStore.clear()
+  }
+
+  @Composable
+  override fun Content() {
+    debugLog(TAG, "setupView - isDismissible: $isDismissible, hostBackButton: $hostBackButton")
+
+    if (hostBackButton) {
+      ClerkHostBackActionProvider(onHostBack = { onHostBack(mapOf()) }) { ProfileView() }
+    } else {
+      ProfileView()
+    }
+  }
+
+  @Composable
+  private fun ProfileView() {
+    val user by Clerk.userFlow.collectAsStateWithLifecycle()
+
+    LaunchedEffect(user?.id) { customPageState.userDidChange(user?.id) }
+
+    UserProfileView(
+      clerkTheme = Clerk.customTheme,
+      customRows = customRows(),
+      customDestination =
+        if (customPageViews.isEmpty()) null
+        else { routeKey -> CustomPageDestination(routeKey) },
+      isDismissible = isDismissible,
+      onDismiss = {
+        debugLog(TAG, "Profile dismissed")
+        sendEvent("dismissed")
+      },
+    )
+  }
+
+  fun addCustomPageView(view: View, index: Int) {
+    (view.parent as? ViewGroup)?.removeView(view)
+    customPageViews.add(index.coerceIn(0, customPageViews.size), view)
+    setupView()
+  }
+
+  fun removeCustomPageView(view: View) {
+    customPageViews.remove(view)
+    (view.parent as? ViewGroup)?.removeView(view)
+    setupView()
+  }
+
+  fun customPageViewAt(index: Int): View? = customPageViews.getOrNull(index)
+
+  fun customPageCount(): Int = customPageViews.size
+
+  fun setCustomPages(customPages: String) {
+    if (customPagesJson == customPages) return
+    val validPaths = runCatching { userProfileCustomPagePaths(customPages) }.getOrDefault(emptySet())
+    customPageState.reconcileCustomPagePaths(validPaths)
+    customPagesJson = customPages
+  }
+
+  fun navigateCustomPage(action: String, routeKey: String?) {
+    customPageState.navigate(action, routeKey)
+  }
+
+  @Composable
+  private fun CustomPageDestination(routeKey: String) {
+    val customNavigator = LocalUserProfileCustomNavigator.current
+    val pages = customPages()
+    val view = customPageViews.getOrNull(pages.indexOfFirst { it.routeKey == routeKey })
+
+    LaunchedEffect(routeKey, customNavigator, view) {
+      customPageState.configureNavigation(
+        navigateBack = customNavigator::navigateBack,
+        popToRoot = customNavigator::popToRoot,
+        push = customNavigator::push,
+      )
+      if (view == null) {
+        customNavigator.popToRoot()
+        return@LaunchedEffect
+      }
+      layoutAndroidViewHandler(view)
+      customPageState.pageDidPresent(routeKey)
+    }
+
+    if (view == null) return
+
+    DisposableEffect(routeKey) {
+      onDispose { customPageState.pageDidDismiss(routeKey) }
+    }
+
+    AndroidView(
+      modifier = Modifier.fillMaxSize(),
+      factory = {
+        (view.parent as? ViewGroup)?.removeView(view)
+        view
+      },
+    )
+  }
+
+  private fun customRows(): List<UserProfileCustomRow> {
+    return customPages().filter { it.showAsRow }.map { it.nativeRow }
+  }
+
+  private fun customPages(): List<ClerkUserProfileCustomPageConfig> {
+    return runCatching {
+        parseUserProfileCustomPages(customPagesJson, customPageViews.size)
+      }
+      .getOrElse {
+        debugLog(TAG, "Ignoring invalid custom rows: ${it.message}")
+        emptyList()
+      }
+  }
+
+  private fun sendEvent(type: String) {
+    onProfileEvent(mapOf("type" to type))
+  }
+}
+
+class ClerkUserProfileViewModule : Module() {
+  override fun definition() = ModuleDefinition {
+    Name("ClerkUserProfileView")
+
+    View(ClerkUserProfileNativeView::class) {
+      Events("onProfileEvent", "onCustomPageEvent", "onHostBack")
+
+      GroupView<ClerkUserProfileNativeView> {
+        AddChildView<View> { parent, child, index -> parent.addCustomPageView(child, index) }
+        GetChildCount { parent -> parent.customPageCount() }
+        GetChildViewAt<View> { parent, index -> parent.customPageViewAt(index) }
+        RemoveChildView<View> { parent, child -> parent.removeCustomPageView(child) }
+        RemoveChildViewAt { parent, index -> parent.customPageViewAt(index)?.let(parent::removeCustomPageView) }
+      }
+
+      Prop("isDismissible") { view: ClerkUserProfileNativeView, isDismissible: Boolean ->
+        view.isDismissible = isDismissible
+      }
+
+      Prop("hostBackButton") { view: ClerkUserProfileNativeView, hostBackButton: Boolean ->
+        view.hostBackButton = hostBackButton
+      }
+
+      Prop("customPages") { view: ClerkUserProfileNativeView, customPages: String ->
+        view.setCustomPages(customPages)
+      }
+
+      AsyncFunction("navigateCustomPage") {
+        view: ClerkUserProfileNativeView,
+        action: String,
+        routeKey: String? -> view.navigateCustomPage(action, routeKey)
+      }
+
+      OnViewDidUpdateProps { view: ClerkUserProfileNativeView ->
+        view.setupView()
+      }
+
+      OnViewDestroys { view: ClerkUserProfileNativeView ->
+        view.destroyHost()
+      }
+    }
+  }
+}