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.

integration/templates/expo-native/App.tsx

@@ -52,7 +52,17 @@ function NativeBuildFixture() {
  presentationStyle='pageSheet'
  onRequestClose={() => setIsAuthOpen(false)}
  >
- <AuthView onDismiss={() => setIsAuthOpen(false)} />
+ <AuthView
+ logo={
+ <View
+ testID='custom-logo'
+ style={styles.customLogo}
+ >
+ <Text style={styles.customLogoText}>E2E Custom Logo</Text>
+ </View>
+ }
+ onDismiss={() => setIsAuthOpen(false)}
+ />
  </Modal>
  </View>
  );
@@ -76,6 +86,17 @@ const styles = StyleSheet.create({
  justifyContent: 'center',
  padding: 24,
  },
+ customLogo: {
+ backgroundColor: '#6C47FF',
+ borderRadius: 8,
+ paddingHorizontal: 16,
+ paddingVertical: 10,
+ },
+ customLogoText: {
+ color: '#FFFFFF',
+ fontSize: 16,
+ fontWeight: '600',
+ },
  header: {
  alignItems: 'center',
  flexDirection: 'row',

integration/tests/expo-native/flows/authview-detach-reattach.yaml

@@ -3,6 +3,8 @@
 # is the platform-native gesture: Android's system back button (doubling as
 # the back-dismisses-AuthView regression), iOS's sheet Close control
 # (clerk-ios exposes the stable clerk.dismissButton identifier).
+# Also asserts the custom `logo` React element is rehosted into the native
+# logo slot with a nonzero size, both on first mount and after reattach.
 appId: com.clerk.exponativebuildfixture
 name: AuthView survives detach and reattach
 ---
@@ -12,6 +14,11 @@ name: AuthView survives detach and reattach
 - extendedWaitUntil:
  visible: 'Welcome! Sign in to continue\.?'
  timeout: 25000
+# Retrying wait (not assertVisible): the rehosted logo is sized on the first
+# RN layout pass, so it can lag the welcome copy by a frame or two.
+- extendedWaitUntil:
+ visible: 'E2E Custom Logo'
+ timeout: 10000
 - runFlow:
  when:
  platform: Android
@@ -29,6 +36,9 @@ name: AuthView survives detach and reattach
  timeout: 15000
 - tapOn:
  id: 'open-auth-view-button'
+- extendedWaitUntil:
+ visible: 'E2E Custom Logo'
+ timeout: 15000
 - runFlow: subflows/sign-in-email-password.yaml
 - runFlow: subflows/assert-signed-in.yaml
 - tapOn:

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()
 
@@ -67,6 +88,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,
@@ -76,6 +100,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()
@@ -100,13 +143,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)?
 
@@ -243,6 +269,7 @@ final class ClerkNativeBridge {
  func makeAuthViewController(
  mode: String,
  dismissible: Bool,
+ logoState: ClerkInlineAuthLogoState,
  logoMaxHeight: CGFloat?,
  onEvent: @escaping (ClerkNativeViewEvent, [String: Any]) -> Void
  ) -> UIViewController? {
@@ -254,6 +281,7 @@ final class ClerkNativeBridge {
  dismissible: dismissible,
  lightTheme: lightTheme,
  darkTheme: darkTheme,
+ logoState: logoState,
  logoMaxHeight: logoMaxHeight
  ),
  onDismiss: dismissible ? { onEvent(.dismissed, [:]) } : nil
@@ -505,6 +533,7 @@ struct ClerkInlineAuthWrapperView: View {
  let dismissible: Bool
  let lightTheme: ClerkTheme?
  let darkTheme: ClerkTheme?
+ let logoState: ClerkInlineAuthLogoState
  let logoMaxHeight: CGFloat?
 
  @Environment(\.colorScheme) private var colorScheme
@@ -521,7 +550,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
@@ -533,6 +567,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

.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.

integration/templates/expo-native/App.tsx

@@ -52,7 +52,17 @@ function NativeBuildFixture() {
  presentationStyle='pageSheet'
  onRequestClose={() => setIsAuthOpen(false)}
  >
- <AuthView onDismiss={() => setIsAuthOpen(false)} />
+ <AuthView
+ logo={
+ <View
+ testID='custom-logo'
+ style={styles.customLogo}
+ >
+ <Text style={styles.customLogoText}>E2E Custom Logo</Text>
+ </View>
+ }
+ onDismiss={() => setIsAuthOpen(false)}
+ />
  </Modal>
  </View>
  );
@@ -76,6 +86,17 @@ const styles = StyleSheet.create({
  justifyContent: 'center',
  padding: 24,
  },
+ customLogo: {
+ backgroundColor: '#6C47FF',
+ borderRadius: 8,
+ paddingHorizontal: 16,
+ paddingVertical: 10,
+ },
+ customLogoText: {
+ color: '#FFFFFF',
+ fontSize: 16,
+ fontWeight: '600',
+ },
  header: {
  alignItems: 'center',
  flexDirection: 'row',

integration/tests/expo-native/flows/authview-detach-reattach.yaml

@@ -3,6 +3,8 @@
 # is the platform-native gesture: Android's system back button (doubling as
 # the back-dismisses-AuthView regression), iOS's sheet Close control
 # (clerk-ios exposes the stable clerk.dismissButton identifier).
+# Also asserts the custom `logo` React element is rehosted into the native
+# logo slot with a nonzero size, both on first mount and after reattach.
 appId: com.clerk.exponativebuildfixture
 name: AuthView survives detach and reattach
 ---
@@ -12,6 +14,11 @@ name: AuthView survives detach and reattach
 - extendedWaitUntil:
  visible: 'Welcome! Sign in to continue\.?'
  timeout: 25000
+# Retrying wait (not assertVisible): the rehosted logo is sized on the first
+# RN layout pass, so it can lag the welcome copy by a frame or two.
+- extendedWaitUntil:
+ visible: 'E2E Custom Logo'
+ timeout: 10000
 - runFlow:
  when:
  platform: Android
@@ -29,6 +36,9 @@ name: AuthView survives detach and reattach
  timeout: 15000
 - tapOn:
  id: 'open-auth-view-button'
+- extendedWaitUntil:
+ visible: 'E2E Custom Logo'
+ timeout: 15000
 - runFlow: subflows/sign-in-email-password.yaml
 - runFlow: subflows/assert-signed-in.yaml
 - tapOn:

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()
 
@@ -67,6 +88,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,
@@ -76,6 +100,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()
@@ -100,13 +143,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)?
 
@@ -243,6 +269,7 @@ final class ClerkNativeBridge {
  func makeAuthViewController(
  mode: String,
  dismissible: Bool,
+ logoState: ClerkInlineAuthLogoState,
  logoMaxHeight: CGFloat?,
  onEvent: @escaping (ClerkNativeViewEvent, [String: Any]) -> Void
  ) -> UIViewController? {
@@ -254,6 +281,7 @@ final class ClerkNativeBridge {
  dismissible: dismissible,
  lightTheme: lightTheme,
  darkTheme: darkTheme,
+ logoState: logoState,
  logoMaxHeight: logoMaxHeight
  ),
  onDismiss: dismissible ? { onEvent(.dismissed, [:]) } : nil
@@ -505,6 +533,7 @@ struct ClerkInlineAuthWrapperView: View {
  let dismissible: Bool
  let lightTheme: ClerkTheme?
  let darkTheme: ClerkTheme?
+ let logoState: ClerkInlineAuthLogoState
  let logoMaxHeight: CGFloat?
 
  @Environment(\.colorScheme) private var colorScheme
@@ -521,7 +550,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
@@ -533,6 +567,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

.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.

integration/templates/expo-native/App.tsx

@@ -52,7 +52,17 @@ function NativeBuildFixture() {
  presentationStyle='pageSheet'
  onRequestClose={() => setIsAuthOpen(false)}
  >
- <AuthView onDismiss={() => setIsAuthOpen(false)} />
+ <AuthView
+ logo={
+ <View
+ testID='custom-logo'
+ style={styles.customLogo}
+ >
+ <Text style={styles.customLogoText}>E2E Custom Logo</Text>
+ </View>
+ }
+ onDismiss={() => setIsAuthOpen(false)}
+ />
  </Modal>
  </View>
  );
@@ -76,6 +86,17 @@ const styles = StyleSheet.create({
  justifyContent: 'center',
  padding: 24,
  },
+ customLogo: {
+ backgroundColor: '#6C47FF',
+ borderRadius: 8,
+ paddingHorizontal: 16,
+ paddingVertical: 10,
+ },
+ customLogoText: {
+ color: '#FFFFFF',
+ fontSize: 16,
+ fontWeight: '600',
+ },
  header: {
  alignItems: 'center',
  flexDirection: 'row',

integration/tests/expo-native/flows/authview-detach-reattach.yaml

@@ -3,6 +3,8 @@
 # is the platform-native gesture: Android's system back button (doubling as
 # the back-dismisses-AuthView regression), iOS's sheet Close control
 # (clerk-ios exposes the stable clerk.dismissButton identifier).
+# Also asserts the custom `logo` React element is rehosted into the native
+# logo slot with a nonzero size, both on first mount and after reattach.
 appId: com.clerk.exponativebuildfixture
 name: AuthView survives detach and reattach
 ---
@@ -12,6 +14,11 @@ name: AuthView survives detach and reattach
 - extendedWaitUntil:
  visible: 'Welcome! Sign in to continue\.?'
  timeout: 25000
+# Retrying wait (not assertVisible): the rehosted logo is sized on the first
+# RN layout pass, so it can lag the welcome copy by a frame or two.
+- extendedWaitUntil:
+ visible: 'E2E Custom Logo'
+ timeout: 10000
 - runFlow:
  when:
  platform: Android
@@ -29,6 +36,9 @@ name: AuthView survives detach and reattach
  timeout: 15000
 - tapOn:
  id: 'open-auth-view-button'
+- extendedWaitUntil:
+ visible: 'E2E Custom Logo'
+ timeout: 15000
 - runFlow: subflows/sign-in-email-password.yaml
 - runFlow: subflows/assert-signed-in.yaml
 - tapOn:

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()
 
@@ -67,6 +88,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,
@@ -76,6 +100,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()
@@ -100,13 +143,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)?
 
@@ -243,6 +269,7 @@ final class ClerkNativeBridge {
  func makeAuthViewController(
  mode: String,
  dismissible: Bool,
+ logoState: ClerkInlineAuthLogoState,
  logoMaxHeight: CGFloat?,
  onEvent: @escaping (ClerkNativeViewEvent, [String: Any]) -> Void
  ) -> UIViewController? {
@@ -254,6 +281,7 @@ final class ClerkNativeBridge {
  dismissible: dismissible,
  lightTheme: lightTheme,
  darkTheme: darkTheme,
+ logoState: logoState,
  logoMaxHeight: logoMaxHeight
  ),
  onDismiss: dismissible ? { onEvent(.dismissed, [:]) } : nil
@@ -505,6 +533,7 @@ struct ClerkInlineAuthWrapperView: View {
  let dismissible: Bool
  let lightTheme: ClerkTheme?
  let darkTheme: ClerkTheme?
+ let logoState: ClerkInlineAuthLogoState
  let logoMaxHeight: CGFloat?
 
  @Environment(\.colorScheme) private var colorScheme
@@ -521,7 +550,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
@@ -533,6 +567,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

.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.

integration/templates/expo-native/App.tsx

@@ -52,7 +52,17 @@ function NativeBuildFixture() {
  presentationStyle='pageSheet'
  onRequestClose={() => setIsAuthOpen(false)}
  >
- <AuthView onDismiss={() => setIsAuthOpen(false)} />
+ <AuthView
+ logo={
+ <View
+ testID='custom-logo'
+ style={styles.customLogo}
+ >
+ <Text style={styles.customLogoText}>E2E Custom Logo</Text>
+ </View>
+ }
+ onDismiss={() => setIsAuthOpen(false)}
+ />
  </Modal>
  </View>
  );
@@ -76,6 +86,17 @@ const styles = StyleSheet.create({
  justifyContent: 'center',
  padding: 24,
  },
+ customLogo: {
+ backgroundColor: '#6C47FF',
+ borderRadius: 8,
+ paddingHorizontal: 16,
+ paddingVertical: 10,
+ },
+ customLogoText: {
+ color: '#FFFFFF',
+ fontSize: 16,
+ fontWeight: '600',
+ },
  header: {
  alignItems: 'center',
  flexDirection: 'row',

integration/tests/expo-native/flows/authview-detach-reattach.yaml

@@ -3,6 +3,8 @@
 # is the platform-native gesture: Android's system back button (doubling as
 # the back-dismisses-AuthView regression), iOS's sheet Close control
 # (clerk-ios exposes the stable clerk.dismissButton identifier).
+# Also asserts the custom `logo` React element is rehosted into the native
+# logo slot with a nonzero size, both on first mount and after reattach.
 appId: com.clerk.exponativebuildfixture
 name: AuthView survives detach and reattach
 ---
@@ -12,6 +14,11 @@ name: AuthView survives detach and reattach
 - extendedWaitUntil:
  visible: 'Welcome! Sign in to continue\.?'
  timeout: 25000
+# Retrying wait (not assertVisible): the rehosted logo is sized on the first
+# RN layout pass, so it can lag the welcome copy by a frame or two.
+- extendedWaitUntil:
+ visible: 'E2E Custom Logo'
+ timeout: 10000
 - runFlow:
  when:
  platform: Android
@@ -29,6 +36,9 @@ name: AuthView survives detach and reattach
  timeout: 15000
 - tapOn:
  id: 'open-auth-view-button'
+- extendedWaitUntil:
+ visible: 'E2E Custom Logo'
+ timeout: 15000
 - runFlow: subflows/sign-in-email-password.yaml
 - runFlow: subflows/assert-signed-in.yaml
 - tapOn:

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()
 
@@ -67,6 +88,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,
@@ -76,6 +100,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()
@@ -100,13 +143,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)?
 
@@ -243,6 +269,7 @@ final class ClerkNativeBridge {
  func makeAuthViewController(
  mode: String,
  dismissible: Bool,
+ logoState: ClerkInlineAuthLogoState,
  logoMaxHeight: CGFloat?,
  onEvent: @escaping (ClerkNativeViewEvent, [String: Any]) -> Void
  ) -> UIViewController? {
@@ -254,6 +281,7 @@ final class ClerkNativeBridge {
  dismissible: dismissible,
  lightTheme: lightTheme,
  darkTheme: darkTheme,
+ logoState: logoState,
  logoMaxHeight: logoMaxHeight
  ),
  onDismiss: dismissible ? { onEvent(.dismissed, [:]) } : nil
@@ -505,6 +533,7 @@ struct ClerkInlineAuthWrapperView: View {
  let dismissible: Bool
  let lightTheme: ClerkTheme?
  let darkTheme: ClerkTheme?
+ let logoState: ClerkInlineAuthLogoState
  let logoMaxHeight: CGFloat?
 
  @Environment(\.colorScheme) private var colorScheme
@@ -521,7 +550,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
@@ -533,6 +567,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

.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.

integration/templates/expo-native/App.tsx

@@ -52,7 +52,17 @@ function NativeBuildFixture() {
  presentationStyle='pageSheet'
  onRequestClose={() => setIsAuthOpen(false)}
  >
- <AuthView onDismiss={() => setIsAuthOpen(false)} />
+ <AuthView
+ logo={
+ <View
+ testID='custom-logo'
+ style={styles.customLogo}
+ >
+ <Text style={styles.customLogoText}>E2E Custom Logo</Text>
+ </View>
+ }
+ onDismiss={() => setIsAuthOpen(false)}
+ />
  </Modal>
  </View>
  );
@@ -76,6 +86,17 @@ const styles = StyleSheet.create({
  justifyContent: 'center',
  padding: 24,
  },
+ customLogo: {
+ backgroundColor: '#6C47FF',
+ borderRadius: 8,
+ paddingHorizontal: 16,
+ paddingVertical: 10,
+ },
+ customLogoText: {
+ color: '#FFFFFF',
+ fontSize: 16,
+ fontWeight: '600',
+ },
  header: {
  alignItems: 'center',
  flexDirection: 'row',

integration/tests/expo-native/flows/authview-detach-reattach.yaml

@@ -3,6 +3,8 @@
 # is the platform-native gesture: Android's system back button (doubling as
 # the back-dismisses-AuthView regression), iOS's sheet Close control
 # (clerk-ios exposes the stable clerk.dismissButton identifier).
+# Also asserts the custom `logo` React element is rehosted into the native
+# logo slot with a nonzero size, both on first mount and after reattach.
 appId: com.clerk.exponativebuildfixture
 name: AuthView survives detach and reattach
 ---
@@ -12,6 +14,11 @@ name: AuthView survives detach and reattach
 - extendedWaitUntil:
  visible: 'Welcome! Sign in to continue\.?'
  timeout: 25000
+# Retrying wait (not assertVisible): the rehosted logo is sized on the first
+# RN layout pass, so it can lag the welcome copy by a frame or two.
+- extendedWaitUntil:
+ visible: 'E2E Custom Logo'
+ timeout: 10000
 - runFlow:
  when:
  platform: Android
@@ -29,6 +36,9 @@ name: AuthView survives detach and reattach
  timeout: 15000
 - tapOn:
  id: 'open-auth-view-button'
+- extendedWaitUntil:
+ visible: 'E2E Custom Logo'
+ timeout: 15000
 - runFlow: subflows/sign-in-email-password.yaml
 - runFlow: subflows/assert-signed-in.yaml
 - tapOn:

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()
 
@@ -67,6 +88,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,
@@ -76,6 +100,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()
@@ -100,13 +143,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)?
 
@@ -243,6 +269,7 @@ final class ClerkNativeBridge {
  func makeAuthViewController(
  mode: String,
  dismissible: Bool,
+ logoState: ClerkInlineAuthLogoState,
  logoMaxHeight: CGFloat?,
  onEvent: @escaping (ClerkNativeViewEvent, [String: Any]) -> Void
  ) -> UIViewController? {
@@ -254,6 +281,7 @@ final class ClerkNativeBridge {
  dismissible: dismissible,
  lightTheme: lightTheme,
  darkTheme: darkTheme,
+ logoState: logoState,
  logoMaxHeight: logoMaxHeight
  ),
  onDismiss: dismissible ? { onEvent(.dismissed, [:]) } : nil
@@ -505,6 +533,7 @@ struct ClerkInlineAuthWrapperView: View {
  let dismissible: Bool
  let lightTheme: ClerkTheme?
  let darkTheme: ClerkTheme?
+ let logoState: ClerkInlineAuthLogoState
  let logoMaxHeight: CGFloat?
 
  @Environment(\.colorScheme) private var colorScheme
@@ -521,7 +550,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
@@ -533,6 +567,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

.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.

integration/templates/expo-native/App.tsx

@@ -52,7 +52,17 @@ function NativeBuildFixture() {
  presentationStyle='pageSheet'
  onRequestClose={() => setIsAuthOpen(false)}
  >
- <AuthView onDismiss={() => setIsAuthOpen(false)} />
+ <AuthView
+ logo={
+ <View
+ testID='custom-logo'
+ style={styles.customLogo}
+ >
+ <Text style={styles.customLogoText}>E2E Custom Logo</Text>
+ </View>
+ }
+ onDismiss={() => setIsAuthOpen(false)}
+ />
  </Modal>
  </View>
  );
@@ -76,6 +86,17 @@ const styles = StyleSheet.create({
  justifyContent: 'center',
  padding: 24,
  },
+ customLogo: {
+ backgroundColor: '#6C47FF',
+ borderRadius: 8,
+ paddingHorizontal: 16,
+ paddingVertical: 10,
+ },
+ customLogoText: {
+ color: '#FFFFFF',
+ fontSize: 16,
+ fontWeight: '600',
+ },
  header: {
  alignItems: 'center',
  flexDirection: 'row',

integration/tests/expo-native/flows/authview-detach-reattach.yaml

@@ -3,6 +3,8 @@
 # is the platform-native gesture: Android's system back button (doubling as
 # the back-dismisses-AuthView regression), iOS's sheet Close control
 # (clerk-ios exposes the stable clerk.dismissButton identifier).
+# Also asserts the custom `logo` React element is rehosted into the native
+# logo slot with a nonzero size, both on first mount and after reattach.
 appId: com.clerk.exponativebuildfixture
 name: AuthView survives detach and reattach
 ---
@@ -12,6 +14,11 @@ name: AuthView survives detach and reattach
 - extendedWaitUntil:
  visible: 'Welcome! Sign in to continue\.?'
  timeout: 25000
+# Retrying wait (not assertVisible): the rehosted logo is sized on the first
+# RN layout pass, so it can lag the welcome copy by a frame or two.
+- extendedWaitUntil:
+ visible: 'E2E Custom Logo'
+ timeout: 10000
 - runFlow:
  when:
  platform: Android
@@ -29,6 +36,9 @@ name: AuthView survives detach and reattach
  timeout: 15000
 - tapOn:
  id: 'open-auth-view-button'
+- extendedWaitUntil:
+ visible: 'E2E Custom Logo'
+ timeout: 15000
 - runFlow: subflows/sign-in-email-password.yaml
 - runFlow: subflows/assert-signed-in.yaml
 - tapOn:

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()
 
@@ -67,6 +88,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,
@@ -76,6 +100,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()
@@ -100,13 +143,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)?
 
@@ -243,6 +269,7 @@ final class ClerkNativeBridge {
  func makeAuthViewController(
  mode: String,
  dismissible: Bool,
+ logoState: ClerkInlineAuthLogoState,
  logoMaxHeight: CGFloat?,
  onEvent: @escaping (ClerkNativeViewEvent, [String: Any]) -> Void
  ) -> UIViewController? {
@@ -254,6 +281,7 @@ final class ClerkNativeBridge {
  dismissible: dismissible,
  lightTheme: lightTheme,
  darkTheme: darkTheme,
+ logoState: logoState,
  logoMaxHeight: logoMaxHeight
  ),
  onDismiss: dismissible ? { onEvent(.dismissed, [:]) } : nil
@@ -505,6 +533,7 @@ struct ClerkInlineAuthWrapperView: View {
  let dismissible: Bool
  let lightTheme: ClerkTheme?
  let darkTheme: ClerkTheme?
+ let logoState: ClerkInlineAuthLogoState
  let logoMaxHeight: CGFloat?
 
  @Environment(\.colorScheme) private var colorScheme
@@ -521,7 +550,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
@@ -533,6 +567,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

.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.

integration/templates/expo-native/App.tsx

@@ -52,7 +52,17 @@ function NativeBuildFixture() {
  presentationStyle='pageSheet'
  onRequestClose={() => setIsAuthOpen(false)}
  >
- <AuthView onDismiss={() => setIsAuthOpen(false)} />
+ <AuthView
+ logo={
+ <View
+ testID='custom-logo'
+ style={styles.customLogo}
+ >
+ <Text style={styles.customLogoText}>E2E Custom Logo</Text>
+ </View>
+ }
+ onDismiss={() => setIsAuthOpen(false)}
+ />
  </Modal>
  </View>
  );
@@ -76,6 +86,17 @@ const styles = StyleSheet.create({
  justifyContent: 'center',
  padding: 24,
  },
+ customLogo: {
+ backgroundColor: '#6C47FF',
+ borderRadius: 8,
+ paddingHorizontal: 16,
+ paddingVertical: 10,
+ },
+ customLogoText: {
+ color: '#FFFFFF',
+ fontSize: 16,
+ fontWeight: '600',
+ },
  header: {
  alignItems: 'center',
  flexDirection: 'row',

integration/tests/expo-native/flows/authview-detach-reattach.yaml

@@ -3,6 +3,8 @@
 # is the platform-native gesture: Android's system back button (doubling as
 # the back-dismisses-AuthView regression), iOS's sheet Close control
 # (clerk-ios exposes the stable clerk.dismissButton identifier).
+# Also asserts the custom `logo` React element is rehosted into the native
+# logo slot with a nonzero size, both on first mount and after reattach.
 appId: com.clerk.exponativebuildfixture
 name: AuthView survives detach and reattach
 ---
@@ -12,6 +14,11 @@ name: AuthView survives detach and reattach
 - extendedWaitUntil:
  visible: 'Welcome! Sign in to continue\.?'
  timeout: 25000
+# Retrying wait (not assertVisible): the rehosted logo is sized on the first
+# RN layout pass, so it can lag the welcome copy by a frame or two.
+- extendedWaitUntil:
+ visible: 'E2E Custom Logo'
+ timeout: 10000
 - runFlow:
  when:
  platform: Android
@@ -29,6 +36,9 @@ name: AuthView survives detach and reattach
  timeout: 15000
 - tapOn:
  id: 'open-auth-view-button'
+- extendedWaitUntil:
+ visible: 'E2E Custom Logo'
+ timeout: 15000
 - runFlow: subflows/sign-in-email-password.yaml
 - runFlow: subflows/assert-signed-in.yaml
 - tapOn:

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()
 
@@ -67,6 +88,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,
@@ -76,6 +100,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()
@@ -100,13 +143,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)?
 
@@ -243,6 +269,7 @@ final class ClerkNativeBridge {
  func makeAuthViewController(
  mode: String,
  dismissible: Bool,
+ logoState: ClerkInlineAuthLogoState,
  logoMaxHeight: CGFloat?,
  onEvent: @escaping (ClerkNativeViewEvent, [String: Any]) -> Void
  ) -> UIViewController? {
@@ -254,6 +281,7 @@ final class ClerkNativeBridge {
  dismissible: dismissible,
  lightTheme: lightTheme,
  darkTheme: darkTheme,
+ logoState: logoState,
  logoMaxHeight: logoMaxHeight
  ),
  onDismiss: dismissible ? { onEvent(.dismissed, [:]) } : nil
@@ -505,6 +533,7 @@ struct ClerkInlineAuthWrapperView: View {
  let dismissible: Bool
  let lightTheme: ClerkTheme?
  let darkTheme: ClerkTheme?
+ let logoState: ClerkInlineAuthLogoState
  let logoMaxHeight: CGFloat?
 
  @Environment(\.colorScheme) private var colorScheme
@@ -521,7 +550,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
@@ -533,6 +567,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

.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.

integration/templates/expo-native/App.tsx

@@ -52,7 +52,17 @@ function NativeBuildFixture() {
  presentationStyle='pageSheet'
  onRequestClose={() => setIsAuthOpen(false)}
  >
- <AuthView onDismiss={() => setIsAuthOpen(false)} />
+ <AuthView
+ logo={
+ <View
+ testID='custom-logo'
+ style={styles.customLogo}
+ >
+ <Text style={styles.customLogoText}>E2E Custom Logo</Text>
+ </View>
+ }
+ onDismiss={() => setIsAuthOpen(false)}
+ />
  </Modal>
  </View>
  );
@@ -76,6 +86,17 @@ const styles = StyleSheet.create({
  justifyContent: 'center',
  padding: 24,
  },
+ customLogo: {
+ backgroundColor: '#6C47FF',
+ borderRadius: 8,
+ paddingHorizontal: 16,
+ paddingVertical: 10,
+ },
+ customLogoText: {
+ color: '#FFFFFF',
+ fontSize: 16,
+ fontWeight: '600',
+ },
  header: {
  alignItems: 'center',
  flexDirection: 'row',

integration/tests/expo-native/flows/authview-detach-reattach.yaml

@@ -3,6 +3,8 @@
 # is the platform-native gesture: Android's system back button (doubling as
 # the back-dismisses-AuthView regression), iOS's sheet Close control
 # (clerk-ios exposes the stable clerk.dismissButton identifier).
+# Also asserts the custom `logo` React element is rehosted into the native
+# logo slot with a nonzero size, both on first mount and after reattach.
 appId: com.clerk.exponativebuildfixture
 name: AuthView survives detach and reattach
 ---
@@ -12,6 +14,11 @@ name: AuthView survives detach and reattach
 - extendedWaitUntil:
  visible: 'Welcome! Sign in to continue\.?'
  timeout: 25000
+# Retrying wait (not assertVisible): the rehosted logo is sized on the first
+# RN layout pass, so it can lag the welcome copy by a frame or two.
+- extendedWaitUntil:
+ visible: 'E2E Custom Logo'
+ timeout: 10000
 - runFlow:
  when:
  platform: Android
@@ -29,6 +36,9 @@ name: AuthView survives detach and reattach
  timeout: 15000
 - tapOn:
  id: 'open-auth-view-button'
+- extendedWaitUntil:
+ visible: 'E2E Custom Logo'
+ timeout: 15000
 - runFlow: subflows/sign-in-email-password.yaml
 - runFlow: subflows/assert-signed-in.yaml
 - tapOn:

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()
 
@@ -67,6 +88,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,
@@ -76,6 +100,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()
@@ -100,13 +143,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)?
 
@@ -243,6 +269,7 @@ final class ClerkNativeBridge {
  func makeAuthViewController(
  mode: String,
  dismissible: Bool,
+ logoState: ClerkInlineAuthLogoState,
  logoMaxHeight: CGFloat?,
  onEvent: @escaping (ClerkNativeViewEvent, [String: Any]) -> Void
  ) -> UIViewController? {
@@ -254,6 +281,7 @@ final class ClerkNativeBridge {
  dismissible: dismissible,
  lightTheme: lightTheme,
  darkTheme: darkTheme,
+ logoState: logoState,
  logoMaxHeight: logoMaxHeight
  ),
  onDismiss: dismissible ? { onEvent(.dismissed, [:]) } : nil
@@ -505,6 +533,7 @@ struct ClerkInlineAuthWrapperView: View {
  let dismissible: Bool
  let lightTheme: ClerkTheme?
  let darkTheme: ClerkTheme?
+ let logoState: ClerkInlineAuthLogoState
  let logoMaxHeight: CGFloat?
 
  @Environment(\.colorScheme) private var colorScheme
@@ -521,7 +550,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
@@ -533,6 +567,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