feat(expo): support custom logos in native AuthView

.changeset/expo-native-custom-logo.md

@@ -0,0 +1,5 @@
+---
+'@clerk/expo': patch
+---
+
+Add a `logo` prop to the native `AuthView`, allowing Expo apps to replace the dashboard-configured logo with custom React Native content on Android and iOS.

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

@@ -2,10 +2,16 @@ 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.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 com.clerk.api.Clerk
@@ -30,6 +36,21 @@ class ClerkAuthNativeView(context: Context, appContext: AppContext) : ClerkCompo
   var isDismissible: Boolean = true
   var logoMaxHeight: Float? = null
   var mode: String? = null
+  var logoView: View? = null
+    private set
+
+  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()
 
@@ -65,6 +86,9 @@ class ClerkAuthNativeView(context: Context, appContext: AppContext) : ClerkCompo
     AuthView(
       modifier = Modifier.fillMaxSize(),
       clerkTheme = authTheme(),
+      logo = logoView?.let { view ->
+        { ReactLogoView(view = view, width = logoWidth, height = logoHeight) }
+      },
       mode = authMode(mode),
       isDismissible = isDismissible,
       onDismiss = ::sendDismissEvent,
@@ -74,6 +98,25 @@ class ClerkAuthNativeView(context: Context, appContext: AppContext) : ClerkCompo
     )
   }
 
+  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()
@@ -98,13 +141,52 @@ class ClerkAuthNativeView(context: Context, appContext: AppContext) : ClerkCompo
   }
 }
 
+@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")
 
+      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
       }

packages/expo/ios/ClerkAuthNativeView.swift

@@ -5,6 +5,8 @@ public class ClerkAuthNativeView: ClerkNativeViewHost {
   private var currentMode: String = "signInOrUp"
   private var currentDismissible: Bool = true
   private var currentLogoMaxHeight: CGFloat?
+  private let logoState = ClerkInlineAuthLogoState()
+  private var logoBoundsObservation: NSKeyValueObservation?
   private var didSendDismiss = false
 
   let onAuthEvent = EventDispatcher()
@@ -48,10 +50,58 @@ public class ClerkAuthNativeView: ClerkNativeViewHost {
     sendDismissIfNeeded()
   }
 
+  override public func layoutSubviews() {
+    super.layoutSubviews()
+    guard let logoView = logoState.content?.view else { return }
+    logoState.updateSize(for: logoView)
+  }
+
+#if RCT_NEW_ARCH_ENABLED
+  override public func mountChildComponentView(_ childComponentView: UIView, index: Int) {
+    setLogoView(childComponentView)
+  }
+
+  override public func unmountChildComponentView(_ childComponentView: UIView, index: Int) {
+    removeLogoView(childComponentView)
+  }
+#else
+  override public func insertReactSubview(_ subview: UIView!, at atIndex: Int) {
+    super.insertReactSubview(subview, at: atIndex)
+    setLogoView(subview)
+  }
+
+  override public func removeReactSubview(_ subview: UIView!) {
+    removeLogoView(subview)
+    super.removeReactSubview(subview)
+  }
+
+  override public func didUpdateReactSubviews() {}
+#endif
+
+  private func setLogoView(_ view: UIView) {
+    guard logoState.content?.view !== view else { return }
+    logoBoundsObservation = nil
+    logoState.setView(view)
+    logoBoundsObservation = view.observe(\.bounds, options: [.new]) { [weak self, weak view] _, _ in
+      DispatchQueue.main.async { [weak self, weak view] in
+        guard let self, let view, self.logoState.content?.view === view else { return }
+        self.logoState.updateSize(for: view)
+      }
+    }
+  }
+
+  private func removeLogoView(_ view: UIView) {
+    guard logoState.content?.view === view else { return }
+    logoBoundsObservation = nil
+    view.removeFromSuperview()
+    logoState.removeView(view)
+  }
+
   override func makeHostedController() -> UIViewController? {
     return ClerkNativeBridge.shared.makeAuthViewController(
       mode: currentMode,
       dismissible: currentDismissible,
+      logoState: logoState,
       logoMaxHeight: currentLogoMaxHeight,
       onEvent: { [weak self] event, _ in
         if event == .dismissed {

packages/expo/ios/ClerkExpo.podspec

@@ -58,5 +58,9 @@ Pod::Spec.new do |s|
                    "ClerkUserProfileNativeView.swift",
                    "ClerkUserButtonNativeView.swift"
 
+  s.test_spec 'Tests' do |test_spec|
+    test_spec.source_files = 'Tests/**/*.swift'
+  end
+
   install_modules_dependencies(s)
 end

packages/expo/ios/ClerkNativeBridge.swift

@@ -16,6 +16,32 @@ extension Notification.Name {
   static let clerkNativeSDKDidConfigure = Notification.Name("com.clerk.expo.native-sdk.did-configure")
 }
 
+@Observable
+final class ClerkInlineAuthLogoState {
+  struct Content {
+    let view: UIView
+    let size: CGSize
+  }
+
+  private(set) var content: Content?
+
+  func setView(_ view: UIView) {
+    content = Content(view: view, size: view.bounds.size)
+  }
+
+  func updateSize(for view: UIView) {
+    guard content?.view === view else { return }
+    let currentSize = view.bounds.size
+    guard content?.size != currentSize else { return }
+    content = Content(view: view, size: currentSize)
+  }
+
+  func removeView(_ view: UIView) {
+    guard content?.view === view else { return }
+    content = nil
+  }
+}
+
 private let clerkNativeClientEventQueue = DispatchQueue(label: "com.clerk.expo.native-client-events")
 private var clerkNativeClientChangedEmitter: (([String: Any]?) -> Void)?
 
@@ -229,6 +255,7 @@ final class ClerkNativeBridge {
   func makeAuthViewController(
     mode: String,
     dismissible: Bool,
+    logoState: ClerkInlineAuthLogoState,
     logoMaxHeight: CGFloat?,
     onEvent: @escaping (ClerkNativeViewEvent, [String: Any]) -> Void
   ) -> UIViewController? {
@@ -240,6 +267,7 @@ final class ClerkNativeBridge {
         dismissible: dismissible,
         lightTheme: lightTheme,
         darkTheme: darkTheme,
+        logoState: logoState,
         logoMaxHeight: logoMaxHeight
       ),
       onDismiss: dismissible ? { onEvent(.dismissed, [:]) } : nil
@@ -467,6 +495,7 @@ struct ClerkInlineAuthWrapperView: View {
   let dismissible: Bool
   let lightTheme: ClerkTheme?
   let darkTheme: ClerkTheme?
+  let logoState: ClerkInlineAuthLogoState
   let logoMaxHeight: CGFloat?
 
   @Environment(\.colorScheme) private var colorScheme
@@ -483,7 +512,12 @@ struct ClerkInlineAuthWrapperView: View {
       }
     }
 
-    if let logoMaxHeight {
+    if let logo = logoState.content {
+      themedView.clerkAppIconView {
+        ClerkReactLogoView(view: logo.view)
+          .frame(width: logo.size.width, height: logo.size.height)
+      }
+    } else if let logoMaxHeight {
       themedView.clerkAppIcon(maxHeight: logoMaxHeight)
     } else {
       themedView
@@ -495,6 +529,45 @@ struct ClerkInlineAuthWrapperView: View {
   }
 }
 
+private struct ClerkReactLogoView: UIViewRepresentable {
+  let view: UIView
+
+  func makeUIView(context: Context) -> ClerkReactLogoContainerView {
+    return ClerkReactLogoContainerView(contentView: view)
+  }
+
+  func updateUIView(_ uiView: ClerkReactLogoContainerView, context: Context) {
+    uiView.setContentView(view)
+  }
+}
+
+private final class ClerkReactLogoContainerView: UIView {
+  private var contentView: UIView?
+
+  init(contentView: UIView) {
+    super.init(frame: .zero)
+    setContentView(contentView)
+  }
+
+  required init?(coder: NSCoder) {
+    return nil
+  }
+
+  func setContentView(_ view: UIView) {
+    guard contentView !== view else { return }
+    contentView?.removeFromSuperview()
+    view.removeFromSuperview()
+    contentView = view
+    addSubview(view)
+    setNeedsLayout()
+  }
+
+  override func layoutSubviews() {
+    super.layoutSubviews()
+    contentView?.frame = bounds
+  }
+}
+
 private final class ClerkNativeHostingController<Content: View>: UIHostingController<Content> {
   private let onDismiss: (() -> Void)?
   private var didSendDismiss = false

packages/expo/ios/Tests/ClerkAuthNativeViewPaperTests.swift

@@ -0,0 +1,30 @@
+#if !RCT_NEW_ARCH_ENABLED
+import ExpoModulesCore
+import UIKit
+import XCTest
+import ClerkExpo
+
+final class ClerkAuthNativeViewPaperTests: XCTestCase {
+  @MainActor
+  func testAddingAndRemovingLogoAfterMountKeepsReactChildOutOfHostHierarchy() {
+    let window = UIWindow(frame: UIScreen.main.bounds)
+    let viewController = UIViewController()
+    let authView = ClerkAuthNativeView(appContext: nil)
+    window.rootViewController = viewController
+    viewController.view.addSubview(authView)
+    window.makeKeyAndVisible()
+
+    let logoView = UIView(frame: CGRect(x: 0, y: 0, width: 120, height: 40))
+    authView.insertReactSubview(logoView, at: 0)
+    authView.didUpdateReactSubviews()
+
+    XCTAssertFalse(logoView.superview === authView)
+
+    authView.removeReactSubview(logoView)
+    authView.didUpdateReactSubviews()
+
+    XCTAssertNil(logoView.superview)
+    window.isHidden = true
+  }
+}
+#endif

packages/expo/src/native/AuthView.tsx

@@ -38,6 +38,7 @@ type AuthNativeEvent = NativeSyntheticEvent<Readonly<{ type: string }>>;
  * @see {@link https://clerk.com/docs/components/authentication/sign-in} Clerk Sign-In Documentation
  */
 export function AuthView({
+  logo,
   mode = 'signInOrUp',
   isDismissible = true,
   logoMaxHeight,
@@ -71,6 +72,15 @@ export function AuthView({
       isDismissible={isDismissible}
       logoMaxHeight={logoMaxHeight}
       onAuthEvent={handleAuthEvent}
-    />
+    >
+      {logo ? (
+        <View
+          collapsable={false}
+          style={{ alignSelf: 'flex-start' }}
+        >
+          {logo}
+        </View>
+      ) : null}
+    </NativeClerkAuthView>
   );
 }