feat(expo): Part 1 - add native logo max height theme option

.changeset/expo-native-logo-max-height.md

@@ -0,0 +1,11 @@
+---
+'@clerk/expo': patch
+---
+
+Add a `logoMaxHeight` prop to `AuthView`, allowing Expo apps to control the maximum height of the managed logo on Android and iOS.
+
+Usage:
+
+```tsx
+<AuthView logoMaxHeight={64} />
+```

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

@@ -5,9 +5,12 @@ import android.util.Log
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
 import androidx.lifecycle.ViewModelStore
 import androidx.lifecycle.ViewModelStoreOwner
 import com.clerk.api.Clerk
+import com.clerk.api.ui.ClerkDesign
+import com.clerk.api.ui.ClerkTheme
 import com.clerk.ui.auth.AuthMode
 import com.clerk.ui.auth.AuthView
 import expo.modules.kotlin.AppContext
@@ -25,6 +28,7 @@ private fun debugLog(tag: String, message: String) {
 
 class ClerkAuthNativeView(context: Context, appContext: AppContext) : ClerkComposeNativeViewHost(context, appContext) {
  var isDismissible: Boolean = true
+ var logoMaxHeight: Float? = null
  var mode: String? = null
 
  private val onAuthEvent by EventDispatcher()
@@ -60,7 +64,7 @@ class ClerkAuthNativeView(context: Context, appContext: AppContext) : ClerkCompo
 
  AuthView(
  modifier = Modifier.fillMaxSize(),
- clerkTheme = Clerk.customTheme,
+ clerkTheme = authTheme(),
  mode = authMode(mode),
  isDismissible = isDismissible,
  onDismiss = ::sendDismissEvent,
@@ -70,6 +74,13 @@ class ClerkAuthNativeView(context: Context, appContext: AppContext) : ClerkCompo
  )
  }
 
+ private fun authTheme(): ClerkTheme? {
+ val maxHeight = logoMaxHeight ?: return Clerk.customTheme
+ val theme = Clerk.customTheme ?: ClerkTheme()
+ val design = theme.design ?: ClerkDesign()
+ return theme.copy(design = design.copy(logoMaxHeight = maxHeight.dp))
+ }
+
  private fun sendEvent(type: String) {
  onAuthEvent(mapOf("type" to type))
  }
@@ -102,6 +113,10 @@ class ClerkAuthViewModule : Module() {
  view.isDismissible = isDismissible
  }
 
+ Prop("logoMaxHeight") { view: ClerkAuthNativeView, logoMaxHeight: Float? ->
+ view.logoMaxHeight = logoMaxHeight
+ }
+
  OnViewDidUpdateProps { view: ClerkAuthNativeView ->
  view.setupView()
  }

packages/expo/ios/ClerkAuthNativeView.swift

@@ -4,6 +4,7 @@ import UIKit
 public class ClerkAuthNativeView: ClerkNativeViewHost {
  private var currentMode: String = "signInOrUp"
  private var currentDismissible: Bool = true
+ private var currentLogoMaxHeight: CGFloat?
  private var didSendDismiss = false
 
  let onAuthEvent = EventDispatcher()
@@ -22,6 +23,12 @@ public class ClerkAuthNativeView: ClerkNativeViewHost {
  setNeedsHostedViewUpdate()
  }
 
+ func setLogoMaxHeight(_ logoMaxHeight: CGFloat?) {
+ guard logoMaxHeight != currentLogoMaxHeight else { return }
+ currentLogoMaxHeight = logoMaxHeight
+ setNeedsHostedViewUpdate()
+ }
+
  private func sendAuthEvent(type: ClerkNativeViewEvent) {
  onAuthEvent(["type": type.rawValue])
  }
@@ -45,6 +52,7 @@ public class ClerkAuthNativeView: ClerkNativeViewHost {
  return ClerkNativeBridge.shared.makeAuthViewController(
  mode: currentMode,
  dismissible: currentDismissible,
+ logoMaxHeight: currentLogoMaxHeight,
  onEvent: { [weak self] event, _ in
  if event == .dismissed {
  self?.sendDismissIfNeeded()
@@ -68,6 +76,10 @@ public class ClerkAuthViewModule: Module {
  Prop("isDismissible") { (view: ClerkAuthNativeView, isDismissible: Bool?) in
  view.setDismissible(isDismissible)
  }
+
+ Prop("logoMaxHeight") { (view: ClerkAuthNativeView, logoMaxHeight: CGFloat?) in
+ view.setLogoMaxHeight(logoMaxHeight)
+ }
  }
  }
 }

packages/expo/ios/ClerkNativeBridge.swift

@@ -229,6 +229,7 @@ final class ClerkNativeBridge {
  func makeAuthViewController(
  mode: String,
  dismissible: Bool,
+ logoMaxHeight: CGFloat?,
  onEvent: @escaping (ClerkNativeViewEvent, [String: Any]) -> Void
  ) -> UIViewController? {
  guard Self.clerkConfigured else { return nil }
@@ -238,7 +239,8 @@ final class ClerkNativeBridge {
  mode: Self.authMode(from: mode),
  dismissible: dismissible,
  lightTheme: lightTheme,
- darkTheme: darkTheme
+ darkTheme: darkTheme,
+ logoMaxHeight: logoMaxHeight
  ),
  onDismiss: dismissible ? { onEvent(.dismissed, [:]) } : nil
  )
@@ -465,20 +467,27 @@ struct ClerkInlineAuthWrapperView: View {
  let dismissible: Bool
  let lightTheme: ClerkTheme?
  let darkTheme: ClerkTheme?
+ let logoMaxHeight: CGFloat?
 
  @Environment(\.colorScheme) private var colorScheme
 
- private var themedAuthView: some View {
+@ViewBuilder private var themedAuthView: some View {
  let view = AuthView(mode: mode, isDismissible: dismissible)
  .environment(Clerk.shared)
  let theme = colorScheme == .dark ? (darkTheme ?? lightTheme) : lightTheme
-return Group {
+let themedView = Group {
  if let theme {
  view.environment(\.clerkTheme, theme)
  } else {
  view
  }
  }
+
+ if let logoMaxHeight {
+ themedView.clerkAppIcon(maxHeight: logoMaxHeight)
+ } else {
+ themedView
+ }
  }
 
  var body: some View {

packages/expo/src/native/AuthView.tsx

@@ -37,7 +37,12 @@ type AuthNativeEvent = NativeSyntheticEvent<Readonly<{ type: string }>>;
  *
  * @see {@link https://clerk.com/docs/components/authentication/sign-in} Clerk Sign-In Documentation
  */
-export function AuthView({ mode = 'signInOrUp', isDismissible = true, onDismiss }: AuthViewProps): ReactElement {
+export function AuthView({
+ mode = 'signInOrUp',
+ isDismissible = true,
+ logoMaxHeight,
+ onDismiss,
+}: AuthViewProps): ReactElement {
  const handleAuthEvent = useCallback(
  (event: AuthNativeEvent) => {
  if (event.nativeEvent.type === 'dismissed') {
@@ -64,6 +69,7 @@ export function AuthView({ mode = 'signInOrUp', isDismissible = true, onDismiss
  style={{ flex: 1 }}
  mode={mode}
  isDismissible={isDismissible}
+ logoMaxHeight={logoMaxHeight}
  onAuthEvent={handleAuthEvent}
  />
  );

packages/expo/src/native/AuthView.types.ts

@@ -38,6 +38,13 @@ export interface AuthViewProps {
  */
  isDismissible?: boolean;
 
+ /**
+ * Maximum height of the Clerk application logo, in density-independent pixels.
+ *
+ * @default 44
+ */
+ logoMaxHeight?: number;
+
  /**
  * Called when the native authentication view requests dismissal.
  *

packages/expo/src/native/__tests__/AuthView.test.tsx

@@ -1,6 +1,6 @@
 import { render } from '@testing-library/react';
 import React from 'react';
-import { describe, expect, test, vi } from 'vitest';
+import { beforeEach, describe, expect, test, vi } from 'vitest';
 
 import { AuthView } from '../AuthView';
 
@@ -30,6 +30,16 @@ vi.mock('react-native', () => {
 });
 
 describe('AuthView', () => {
+ beforeEach(() => {
+ mocks.NativeClerkAuthView.mockClear();
+ });
+
+ test('passes logoMaxHeight to the native auth view', () => {
+ render(<AuthView logoMaxHeight={64} />);
+
+ expect(mocks.NativeClerkAuthView.mock.calls[0]?.[0]).toMatchObject({ logoMaxHeight: 64 });
+ });
+
  test('calls onDismiss when the native auth view emits dismissed', () => {
  const onDismiss = vi.fn();
 

packages/expo/src/specs/NativeClerkAuthView.android.ts

@@ -6,6 +6,7 @@ type AuthEvent = Readonly<{ type: string }>;
 interface NativeProps extends ViewProps {
  mode?: string;
  isDismissible?: boolean;
+ logoMaxHeight?: number;
  onAuthEvent?: (event: NativeSyntheticEvent<AuthEvent>) => void;
 }
 

packages/expo/src/specs/NativeClerkAuthView.ts

@@ -7,6 +7,7 @@ type AuthEvent = Readonly<{ type: string }>;
 interface NativeProps extends ViewProps {
  mode?: string;
  isDismissible?: boolean;
+ logoMaxHeight?: number;
  onAuthEvent?: (event: NativeSyntheticEvent<AuthEvent>) => void;
 }
 

.changeset/expo-native-logo-max-height.md

@@ -0,0 +1,11 @@
+---
+'@clerk/expo': patch
+---
+
+Add a `logoMaxHeight` prop to `AuthView`, allowing Expo apps to control the maximum height of the managed logo on Android and iOS.
+
+Usage:
+
+```tsx
+<AuthView logoMaxHeight={64} />
+```

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

@@ -5,9 +5,12 @@ import android.util.Log
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
 import androidx.lifecycle.ViewModelStore
 import androidx.lifecycle.ViewModelStoreOwner
 import com.clerk.api.Clerk
+import com.clerk.api.ui.ClerkDesign
+import com.clerk.api.ui.ClerkTheme
 import com.clerk.ui.auth.AuthMode
 import com.clerk.ui.auth.AuthView
 import expo.modules.kotlin.AppContext
@@ -25,6 +28,7 @@ private fun debugLog(tag: String, message: String) {
 
 class ClerkAuthNativeView(context: Context, appContext: AppContext) : ClerkComposeNativeViewHost(context, appContext) {
  var isDismissible: Boolean = true
+ var logoMaxHeight: Float? = null
  var mode: String? = null
 
  private val onAuthEvent by EventDispatcher()
@@ -60,7 +64,7 @@ class ClerkAuthNativeView(context: Context, appContext: AppContext) : ClerkCompo
 
  AuthView(
  modifier = Modifier.fillMaxSize(),
- clerkTheme = Clerk.customTheme,
+ clerkTheme = authTheme(),
  mode = authMode(mode),
  isDismissible = isDismissible,
  onDismiss = ::sendDismissEvent,
@@ -70,6 +74,13 @@ class ClerkAuthNativeView(context: Context, appContext: AppContext) : ClerkCompo
  )
  }
 
+ private fun authTheme(): ClerkTheme? {
+ val maxHeight = logoMaxHeight ?: return Clerk.customTheme
+ val theme = Clerk.customTheme ?: ClerkTheme()
+ val design = theme.design ?: ClerkDesign()
+ return theme.copy(design = design.copy(logoMaxHeight = maxHeight.dp))
+ }
+
  private fun sendEvent(type: String) {
  onAuthEvent(mapOf("type" to type))
  }
@@ -102,6 +113,10 @@ class ClerkAuthViewModule : Module() {
  view.isDismissible = isDismissible
  }
 
+ Prop("logoMaxHeight") { view: ClerkAuthNativeView, logoMaxHeight: Float? ->
+ view.logoMaxHeight = logoMaxHeight
+ }
+
  OnViewDidUpdateProps { view: ClerkAuthNativeView ->
  view.setupView()
  }

packages/expo/ios/ClerkAuthNativeView.swift

@@ -4,6 +4,7 @@ import UIKit
 public class ClerkAuthNativeView: ClerkNativeViewHost {
  private var currentMode: String = "signInOrUp"
  private var currentDismissible: Bool = true
+ private var currentLogoMaxHeight: CGFloat?
  private var didSendDismiss = false
 
  let onAuthEvent = EventDispatcher()
@@ -22,6 +23,12 @@ public class ClerkAuthNativeView: ClerkNativeViewHost {
  setNeedsHostedViewUpdate()
  }
 
+ func setLogoMaxHeight(_ logoMaxHeight: CGFloat?) {
+ guard logoMaxHeight != currentLogoMaxHeight else { return }
+ currentLogoMaxHeight = logoMaxHeight
+ setNeedsHostedViewUpdate()
+ }
+
  private func sendAuthEvent(type: ClerkNativeViewEvent) {
  onAuthEvent(["type": type.rawValue])
  }
@@ -45,6 +52,7 @@ public class ClerkAuthNativeView: ClerkNativeViewHost {
  return ClerkNativeBridge.shared.makeAuthViewController(
  mode: currentMode,
  dismissible: currentDismissible,
+ logoMaxHeight: currentLogoMaxHeight,
  onEvent: { [weak self] event, _ in
  if event == .dismissed {
  self?.sendDismissIfNeeded()
@@ -68,6 +76,10 @@ public class ClerkAuthViewModule: Module {
  Prop("isDismissible") { (view: ClerkAuthNativeView, isDismissible: Bool?) in
  view.setDismissible(isDismissible)
  }
+
+ Prop("logoMaxHeight") { (view: ClerkAuthNativeView, logoMaxHeight: CGFloat?) in
+ view.setLogoMaxHeight(logoMaxHeight)
+ }
  }
  }
 }

packages/expo/ios/ClerkNativeBridge.swift

@@ -229,6 +229,7 @@ final class ClerkNativeBridge {
  func makeAuthViewController(
  mode: String,
  dismissible: Bool,
+ logoMaxHeight: CGFloat?,
  onEvent: @escaping (ClerkNativeViewEvent, [String: Any]) -> Void
  ) -> UIViewController? {
  guard Self.clerkConfigured else { return nil }
@@ -238,7 +239,8 @@ final class ClerkNativeBridge {
  mode: Self.authMode(from: mode),
  dismissible: dismissible,
  lightTheme: lightTheme,
- darkTheme: darkTheme
+ darkTheme: darkTheme,
+ logoMaxHeight: logoMaxHeight
  ),
  onDismiss: dismissible ? { onEvent(.dismissed, [:]) } : nil
  )
@@ -465,20 +467,27 @@ struct ClerkInlineAuthWrapperView: View {
  let dismissible: Bool
  let lightTheme: ClerkTheme?
  let darkTheme: ClerkTheme?
+ let logoMaxHeight: CGFloat?
 
  @Environment(\.colorScheme) private var colorScheme
 
- private var themedAuthView: some View {
+@ViewBuilder private var themedAuthView: some View {
  let view = AuthView(mode: mode, isDismissible: dismissible)
  .environment(Clerk.shared)
  let theme = colorScheme == .dark ? (darkTheme ?? lightTheme) : lightTheme
-return Group {
+let themedView = Group {
  if let theme {
  view.environment(\.clerkTheme, theme)
  } else {
  view
  }
  }
+
+ if let logoMaxHeight {
+ themedView.clerkAppIcon(maxHeight: logoMaxHeight)
+ } else {
+ themedView
+ }
  }
 
  var body: some View {

packages/expo/src/native/AuthView.tsx

@@ -37,7 +37,12 @@ type AuthNativeEvent = NativeSyntheticEvent<Readonly<{ type: string }>>;
  *
  * @see {@link https://clerk.com/docs/components/authentication/sign-in} Clerk Sign-In Documentation
  */
-export function AuthView({ mode = 'signInOrUp', isDismissible = true, onDismiss }: AuthViewProps): ReactElement {
+export function AuthView({
+ mode = 'signInOrUp',
+ isDismissible = true,
+ logoMaxHeight,
+ onDismiss,
+}: AuthViewProps): ReactElement {
  const handleAuthEvent = useCallback(
  (event: AuthNativeEvent) => {
  if (event.nativeEvent.type === 'dismissed') {
@@ -64,6 +69,7 @@ export function AuthView({ mode = 'signInOrUp', isDismissible = true, onDismiss
  style={{ flex: 1 }}
  mode={mode}
  isDismissible={isDismissible}
+ logoMaxHeight={logoMaxHeight}
  onAuthEvent={handleAuthEvent}
  />
  );

packages/expo/src/native/AuthView.types.ts

@@ -38,6 +38,13 @@ export interface AuthViewProps {
  */
  isDismissible?: boolean;
 
+ /**
+ * Maximum height of the Clerk application logo, in density-independent pixels.
+ *
+ * @default 44
+ */
+ logoMaxHeight?: number;
+
  /**
  * Called when the native authentication view requests dismissal.
  *

packages/expo/src/native/__tests__/AuthView.test.tsx

@@ -1,6 +1,6 @@
 import { render } from '@testing-library/react';
 import React from 'react';
-import { describe, expect, test, vi } from 'vitest';
+import { beforeEach, describe, expect, test, vi } from 'vitest';
 
 import { AuthView } from '../AuthView';
 
@@ -30,6 +30,16 @@ vi.mock('react-native', () => {
 });
 
 describe('AuthView', () => {
+ beforeEach(() => {
+ mocks.NativeClerkAuthView.mockClear();
+ });
+
+ test('passes logoMaxHeight to the native auth view', () => {
+ render(<AuthView logoMaxHeight={64} />);
+
+ expect(mocks.NativeClerkAuthView.mock.calls[0]?.[0]).toMatchObject({ logoMaxHeight: 64 });
+ });
+
  test('calls onDismiss when the native auth view emits dismissed', () => {
  const onDismiss = vi.fn();
 

packages/expo/src/specs/NativeClerkAuthView.android.ts

@@ -6,6 +6,7 @@ type AuthEvent = Readonly<{ type: string }>;
 interface NativeProps extends ViewProps {
  mode?: string;
  isDismissible?: boolean;
+ logoMaxHeight?: number;
  onAuthEvent?: (event: NativeSyntheticEvent<AuthEvent>) => void;
 }
 

packages/expo/src/specs/NativeClerkAuthView.ts

@@ -7,6 +7,7 @@ type AuthEvent = Readonly<{ type: string }>;
 interface NativeProps extends ViewProps {
  mode?: string;
  isDismissible?: boolean;
+ logoMaxHeight?: number;
  onAuthEvent?: (event: NativeSyntheticEvent<AuthEvent>) => void;
 }
 

.changeset/expo-native-logo-max-height.md

@@ -0,0 +1,11 @@
+---
+'@clerk/expo': patch
+---
+
+Add a `logoMaxHeight` prop to `AuthView`, allowing Expo apps to control the maximum height of the managed logo on Android and iOS.
+
+Usage:
+
+```tsx
+<AuthView logoMaxHeight={64} />
+```

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

@@ -5,9 +5,12 @@ import android.util.Log
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
 import androidx.lifecycle.ViewModelStore
 import androidx.lifecycle.ViewModelStoreOwner
 import com.clerk.api.Clerk
+import com.clerk.api.ui.ClerkDesign
+import com.clerk.api.ui.ClerkTheme
 import com.clerk.ui.auth.AuthMode
 import com.clerk.ui.auth.AuthView
 import expo.modules.kotlin.AppContext
@@ -25,6 +28,7 @@ private fun debugLog(tag: String, message: String) {
 
 class ClerkAuthNativeView(context: Context, appContext: AppContext) : ClerkComposeNativeViewHost(context, appContext) {
  var isDismissible: Boolean = true
+ var logoMaxHeight: Float? = null
  var mode: String? = null
 
  private val onAuthEvent by EventDispatcher()
@@ -60,7 +64,7 @@ class ClerkAuthNativeView(context: Context, appContext: AppContext) : ClerkCompo
 
  AuthView(
  modifier = Modifier.fillMaxSize(),
- clerkTheme = Clerk.customTheme,
+ clerkTheme = authTheme(),
  mode = authMode(mode),
  isDismissible = isDismissible,
  onDismiss = ::sendDismissEvent,
@@ -70,6 +74,13 @@ class ClerkAuthNativeView(context: Context, appContext: AppContext) : ClerkCompo
  )
  }
 
+ private fun authTheme(): ClerkTheme? {
+ val maxHeight = logoMaxHeight ?: return Clerk.customTheme
+ val theme = Clerk.customTheme ?: ClerkTheme()
+ val design = theme.design ?: ClerkDesign()
+ return theme.copy(design = design.copy(logoMaxHeight = maxHeight.dp))
+ }
+
  private fun sendEvent(type: String) {
  onAuthEvent(mapOf("type" to type))
  }
@@ -102,6 +113,10 @@ class ClerkAuthViewModule : Module() {
  view.isDismissible = isDismissible
  }
 
+ Prop("logoMaxHeight") { view: ClerkAuthNativeView, logoMaxHeight: Float? ->
+ view.logoMaxHeight = logoMaxHeight
+ }
+
  OnViewDidUpdateProps { view: ClerkAuthNativeView ->
  view.setupView()
  }

packages/expo/ios/ClerkAuthNativeView.swift

@@ -4,6 +4,7 @@ import UIKit
 public class ClerkAuthNativeView: ClerkNativeViewHost {
  private var currentMode: String = "signInOrUp"
  private var currentDismissible: Bool = true
+ private var currentLogoMaxHeight: CGFloat?
  private var didSendDismiss = false
 
  let onAuthEvent = EventDispatcher()
@@ -22,6 +23,12 @@ public class ClerkAuthNativeView: ClerkNativeViewHost {
  setNeedsHostedViewUpdate()
  }
 
+ func setLogoMaxHeight(_ logoMaxHeight: CGFloat?) {
+ guard logoMaxHeight != currentLogoMaxHeight else { return }
+ currentLogoMaxHeight = logoMaxHeight
+ setNeedsHostedViewUpdate()
+ }
+
  private func sendAuthEvent(type: ClerkNativeViewEvent) {
  onAuthEvent(["type": type.rawValue])
  }
@@ -45,6 +52,7 @@ public class ClerkAuthNativeView: ClerkNativeViewHost {
  return ClerkNativeBridge.shared.makeAuthViewController(
  mode: currentMode,
  dismissible: currentDismissible,
+ logoMaxHeight: currentLogoMaxHeight,
  onEvent: { [weak self] event, _ in
  if event == .dismissed {
  self?.sendDismissIfNeeded()
@@ -68,6 +76,10 @@ public class ClerkAuthViewModule: Module {
  Prop("isDismissible") { (view: ClerkAuthNativeView, isDismissible: Bool?) in
  view.setDismissible(isDismissible)
  }
+
+ Prop("logoMaxHeight") { (view: ClerkAuthNativeView, logoMaxHeight: CGFloat?) in
+ view.setLogoMaxHeight(logoMaxHeight)
+ }
  }
  }
 }

packages/expo/ios/ClerkNativeBridge.swift

@@ -229,6 +229,7 @@ final class ClerkNativeBridge {
  func makeAuthViewController(
  mode: String,
  dismissible: Bool,
+ logoMaxHeight: CGFloat?,
  onEvent: @escaping (ClerkNativeViewEvent, [String: Any]) -> Void
  ) -> UIViewController? {
  guard Self.clerkConfigured else { return nil }
@@ -238,7 +239,8 @@ final class ClerkNativeBridge {
  mode: Self.authMode(from: mode),
  dismissible: dismissible,
  lightTheme: lightTheme,
- darkTheme: darkTheme
+ darkTheme: darkTheme,
+ logoMaxHeight: logoMaxHeight
  ),
  onDismiss: dismissible ? { onEvent(.dismissed, [:]) } : nil
  )
@@ -465,20 +467,27 @@ struct ClerkInlineAuthWrapperView: View {
  let dismissible: Bool
  let lightTheme: ClerkTheme?
  let darkTheme: ClerkTheme?
+ let logoMaxHeight: CGFloat?
 
  @Environment(\.colorScheme) private var colorScheme
 
- private var themedAuthView: some View {
+@ViewBuilder private var themedAuthView: some View {
  let view = AuthView(mode: mode, isDismissible: dismissible)
  .environment(Clerk.shared)
  let theme = colorScheme == .dark ? (darkTheme ?? lightTheme) : lightTheme
-return Group {
+let themedView = Group {
  if let theme {
  view.environment(\.clerkTheme, theme)
  } else {
  view
  }
  }
+
+ if let logoMaxHeight {
+ themedView.clerkAppIcon(maxHeight: logoMaxHeight)
+ } else {
+ themedView
+ }
  }
 
  var body: some View {

packages/expo/src/native/AuthView.tsx

@@ -37,7 +37,12 @@ type AuthNativeEvent = NativeSyntheticEvent<Readonly<{ type: string }>>;
  *
  * @see {@link https://clerk.com/docs/components/authentication/sign-in} Clerk Sign-In Documentation
  */
-export function AuthView({ mode = 'signInOrUp', isDismissible = true, onDismiss }: AuthViewProps): ReactElement {
+export function AuthView({
+ mode = 'signInOrUp',
+ isDismissible = true,
+ logoMaxHeight,
+ onDismiss,
+}: AuthViewProps): ReactElement {
  const handleAuthEvent = useCallback(
  (event: AuthNativeEvent) => {
  if (event.nativeEvent.type === 'dismissed') {
@@ -64,6 +69,7 @@ export function AuthView({ mode = 'signInOrUp', isDismissible = true, onDismiss
  style={{ flex: 1 }}
  mode={mode}
  isDismissible={isDismissible}
+ logoMaxHeight={logoMaxHeight}
  onAuthEvent={handleAuthEvent}
  />
  );

packages/expo/src/native/AuthView.types.ts

@@ -38,6 +38,13 @@ export interface AuthViewProps {
  */
  isDismissible?: boolean;
 
+ /**
+ * Maximum height of the Clerk application logo, in density-independent pixels.
+ *
+ * @default 44
+ */
+ logoMaxHeight?: number;
+
  /**
  * Called when the native authentication view requests dismissal.
  *

packages/expo/src/native/__tests__/AuthView.test.tsx

@@ -1,6 +1,6 @@
 import { render } from '@testing-library/react';
 import React from 'react';
-import { describe, expect, test, vi } from 'vitest';
+import { beforeEach, describe, expect, test, vi } from 'vitest';
 
 import { AuthView } from '../AuthView';
 
@@ -30,6 +30,16 @@ vi.mock('react-native', () => {
 });
 
 describe('AuthView', () => {
+ beforeEach(() => {
+ mocks.NativeClerkAuthView.mockClear();
+ });
+
+ test('passes logoMaxHeight to the native auth view', () => {
+ render(<AuthView logoMaxHeight={64} />);
+
+ expect(mocks.NativeClerkAuthView.mock.calls[0]?.[0]).toMatchObject({ logoMaxHeight: 64 });
+ });
+
  test('calls onDismiss when the native auth view emits dismissed', () => {
  const onDismiss = vi.fn();
 

packages/expo/src/specs/NativeClerkAuthView.android.ts

@@ -6,6 +6,7 @@ type AuthEvent = Readonly<{ type: string }>;
 interface NativeProps extends ViewProps {
  mode?: string;
  isDismissible?: boolean;
+ logoMaxHeight?: number;
  onAuthEvent?: (event: NativeSyntheticEvent<AuthEvent>) => void;
 }
 

packages/expo/src/specs/NativeClerkAuthView.ts

@@ -7,6 +7,7 @@ type AuthEvent = Readonly<{ type: string }>;
 interface NativeProps extends ViewProps {
  mode?: string;
  isDismissible?: boolean;
+ logoMaxHeight?: number;
  onAuthEvent?: (event: NativeSyntheticEvent<AuthEvent>) => void;
 }
 

.changeset/expo-native-logo-max-height.md

@@ -0,0 +1,11 @@
+---
+'@clerk/expo': patch
+---
+
+Add a `logoMaxHeight` prop to `AuthView`, allowing Expo apps to control the maximum height of the managed logo on Android and iOS.
+
+Usage:
+
+```tsx
+<AuthView logoMaxHeight={64} />
+```

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

@@ -5,9 +5,12 @@ import android.util.Log
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
 import androidx.lifecycle.ViewModelStore
 import androidx.lifecycle.ViewModelStoreOwner
 import com.clerk.api.Clerk
+import com.clerk.api.ui.ClerkDesign
+import com.clerk.api.ui.ClerkTheme
 import com.clerk.ui.auth.AuthMode
 import com.clerk.ui.auth.AuthView
 import expo.modules.kotlin.AppContext
@@ -25,6 +28,7 @@ private fun debugLog(tag: String, message: String) {
 
 class ClerkAuthNativeView(context: Context, appContext: AppContext) : ClerkComposeNativeViewHost(context, appContext) {
  var isDismissible: Boolean = true
+ var logoMaxHeight: Float? = null
  var mode: String? = null
 
  private val onAuthEvent by EventDispatcher()
@@ -60,7 +64,7 @@ class ClerkAuthNativeView(context: Context, appContext: AppContext) : ClerkCompo
 
  AuthView(
  modifier = Modifier.fillMaxSize(),
- clerkTheme = Clerk.customTheme,
+ clerkTheme = authTheme(),
  mode = authMode(mode),
  isDismissible = isDismissible,
  onDismiss = ::sendDismissEvent,
@@ -70,6 +74,13 @@ class ClerkAuthNativeView(context: Context, appContext: AppContext) : ClerkCompo
  )
  }
 
+ private fun authTheme(): ClerkTheme? {
+ val maxHeight = logoMaxHeight ?: return Clerk.customTheme
+ val theme = Clerk.customTheme ?: ClerkTheme()
+ val design = theme.design ?: ClerkDesign()
+ return theme.copy(design = design.copy(logoMaxHeight = maxHeight.dp))
+ }
+
  private fun sendEvent(type: String) {
  onAuthEvent(mapOf("type" to type))
  }
@@ -102,6 +113,10 @@ class ClerkAuthViewModule : Module() {
  view.isDismissible = isDismissible
  }
 
+ Prop("logoMaxHeight") { view: ClerkAuthNativeView, logoMaxHeight: Float? ->
+ view.logoMaxHeight = logoMaxHeight
+ }
+
  OnViewDidUpdateProps { view: ClerkAuthNativeView ->
  view.setupView()
  }

packages/expo/ios/ClerkAuthNativeView.swift

@@ -4,6 +4,7 @@ import UIKit
 public class ClerkAuthNativeView: ClerkNativeViewHost {
  private var currentMode: String = "signInOrUp"
  private var currentDismissible: Bool = true
+ private var currentLogoMaxHeight: CGFloat?
  private var didSendDismiss = false
 
  let onAuthEvent = EventDispatcher()
@@ -22,6 +23,12 @@ public class ClerkAuthNativeView: ClerkNativeViewHost {
  setNeedsHostedViewUpdate()
  }
 
+ func setLogoMaxHeight(_ logoMaxHeight: CGFloat?) {
+ guard logoMaxHeight != currentLogoMaxHeight else { return }
+ currentLogoMaxHeight = logoMaxHeight
+ setNeedsHostedViewUpdate()
+ }
+
  private func sendAuthEvent(type: ClerkNativeViewEvent) {
  onAuthEvent(["type": type.rawValue])
  }
@@ -45,6 +52,7 @@ public class ClerkAuthNativeView: ClerkNativeViewHost {
  return ClerkNativeBridge.shared.makeAuthViewController(
  mode: currentMode,
  dismissible: currentDismissible,
+ logoMaxHeight: currentLogoMaxHeight,
  onEvent: { [weak self] event, _ in
  if event == .dismissed {
  self?.sendDismissIfNeeded()
@@ -68,6 +76,10 @@ public class ClerkAuthViewModule: Module {
  Prop("isDismissible") { (view: ClerkAuthNativeView, isDismissible: Bool?) in
  view.setDismissible(isDismissible)
  }
+
+ Prop("logoMaxHeight") { (view: ClerkAuthNativeView, logoMaxHeight: CGFloat?) in
+ view.setLogoMaxHeight(logoMaxHeight)
+ }
  }
  }
 }

packages/expo/ios/ClerkNativeBridge.swift

@@ -229,6 +229,7 @@ final class ClerkNativeBridge {
  func makeAuthViewController(
  mode: String,
  dismissible: Bool,
+ logoMaxHeight: CGFloat?,
  onEvent: @escaping (ClerkNativeViewEvent, [String: Any]) -> Void
  ) -> UIViewController? {
  guard Self.clerkConfigured else { return nil }
@@ -238,7 +239,8 @@ final class ClerkNativeBridge {
  mode: Self.authMode(from: mode),
  dismissible: dismissible,
  lightTheme: lightTheme,
- darkTheme: darkTheme
+ darkTheme: darkTheme,
+ logoMaxHeight: logoMaxHeight
  ),
  onDismiss: dismissible ? { onEvent(.dismissed, [:]) } : nil
  )
@@ -465,20 +467,27 @@ struct ClerkInlineAuthWrapperView: View {
  let dismissible: Bool
  let lightTheme: ClerkTheme?
  let darkTheme: ClerkTheme?
+ let logoMaxHeight: CGFloat?
 
  @Environment(\.colorScheme) private var colorScheme
 
- private var themedAuthView: some View {
+@ViewBuilder private var themedAuthView: some View {
  let view = AuthView(mode: mode, isDismissible: dismissible)
  .environment(Clerk.shared)
  let theme = colorScheme == .dark ? (darkTheme ?? lightTheme) : lightTheme
-return Group {
+let themedView = Group {
  if let theme {
  view.environment(\.clerkTheme, theme)
  } else {
  view
  }
  }
+
+ if let logoMaxHeight {
+ themedView.clerkAppIcon(maxHeight: logoMaxHeight)
+ } else {
+ themedView
+ }
  }
 
  var body: some View {

packages/expo/src/native/AuthView.tsx

@@ -37,7 +37,12 @@ type AuthNativeEvent = NativeSyntheticEvent<Readonly<{ type: string }>>;
  *
  * @see {@link https://clerk.com/docs/components/authentication/sign-in} Clerk Sign-In Documentation
  */
-export function AuthView({ mode = 'signInOrUp', isDismissible = true, onDismiss }: AuthViewProps): ReactElement {
+export function AuthView({
+ mode = 'signInOrUp',
+ isDismissible = true,
+ logoMaxHeight,
+ onDismiss,
+}: AuthViewProps): ReactElement {
  const handleAuthEvent = useCallback(
  (event: AuthNativeEvent) => {
  if (event.nativeEvent.type === 'dismissed') {
@@ -64,6 +69,7 @@ export function AuthView({ mode = 'signInOrUp', isDismissible = true, onDismiss
  style={{ flex: 1 }}
  mode={mode}
  isDismissible={isDismissible}
+ logoMaxHeight={logoMaxHeight}
  onAuthEvent={handleAuthEvent}
  />
  );

packages/expo/src/native/AuthView.types.ts

@@ -38,6 +38,13 @@ export interface AuthViewProps {
  */
  isDismissible?: boolean;
 
+ /**
+ * Maximum height of the Clerk application logo, in density-independent pixels.
+ *
+ * @default 44
+ */
+ logoMaxHeight?: number;
+
  /**
  * Called when the native authentication view requests dismissal.
  *

packages/expo/src/native/__tests__/AuthView.test.tsx

@@ -1,6 +1,6 @@
 import { render } from '@testing-library/react';
 import React from 'react';
-import { describe, expect, test, vi } from 'vitest';
+import { beforeEach, describe, expect, test, vi } from 'vitest';
 
 import { AuthView } from '../AuthView';
 
@@ -30,6 +30,16 @@ vi.mock('react-native', () => {
 });
 
 describe('AuthView', () => {
+ beforeEach(() => {
+ mocks.NativeClerkAuthView.mockClear();
+ });
+
+ test('passes logoMaxHeight to the native auth view', () => {
+ render(<AuthView logoMaxHeight={64} />);
+
+ expect(mocks.NativeClerkAuthView.mock.calls[0]?.[0]).toMatchObject({ logoMaxHeight: 64 });
+ });
+
  test('calls onDismiss when the native auth view emits dismissed', () => {
  const onDismiss = vi.fn();
 

packages/expo/src/specs/NativeClerkAuthView.android.ts

@@ -6,6 +6,7 @@ type AuthEvent = Readonly<{ type: string }>;
 interface NativeProps extends ViewProps {
  mode?: string;
  isDismissible?: boolean;
+ logoMaxHeight?: number;
  onAuthEvent?: (event: NativeSyntheticEvent<AuthEvent>) => void;
 }
 

packages/expo/src/specs/NativeClerkAuthView.ts

@@ -7,6 +7,7 @@ type AuthEvent = Readonly<{ type: string }>;
 interface NativeProps extends ViewProps {
  mode?: string;
  isDismissible?: boolean;
+ logoMaxHeight?: number;
  onAuthEvent?: (event: NativeSyntheticEvent<AuthEvent>) => void;
 }
 

.changeset/expo-native-logo-max-height.md

@@ -0,0 +1,11 @@
+---
+'@clerk/expo': patch
+---
+
+Add a `logoMaxHeight` prop to `AuthView`, allowing Expo apps to control the maximum height of the managed logo on Android and iOS.
+
+Usage:
+
+```tsx
+<AuthView logoMaxHeight={64} />
+```

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

@@ -5,9 +5,12 @@ import android.util.Log
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
 import androidx.lifecycle.ViewModelStore
 import androidx.lifecycle.ViewModelStoreOwner
 import com.clerk.api.Clerk
+import com.clerk.api.ui.ClerkDesign
+import com.clerk.api.ui.ClerkTheme
 import com.clerk.ui.auth.AuthMode
 import com.clerk.ui.auth.AuthView
 import expo.modules.kotlin.AppContext
@@ -25,6 +28,7 @@ private fun debugLog(tag: String, message: String) {
 
 class ClerkAuthNativeView(context: Context, appContext: AppContext) : ClerkComposeNativeViewHost(context, appContext) {
  var isDismissible: Boolean = true
+ var logoMaxHeight: Float? = null
  var mode: String? = null
 
  private val onAuthEvent by EventDispatcher()
@@ -60,7 +64,7 @@ class ClerkAuthNativeView(context: Context, appContext: AppContext) : ClerkCompo
 
  AuthView(
  modifier = Modifier.fillMaxSize(),
- clerkTheme = Clerk.customTheme,
+ clerkTheme = authTheme(),
  mode = authMode(mode),
  isDismissible = isDismissible,
  onDismiss = ::sendDismissEvent,
@@ -70,6 +74,13 @@ class ClerkAuthNativeView(context: Context, appContext: AppContext) : ClerkCompo
  )
  }
 
+ private fun authTheme(): ClerkTheme? {
+ val maxHeight = logoMaxHeight ?: return Clerk.customTheme
+ val theme = Clerk.customTheme ?: ClerkTheme()
+ val design = theme.design ?: ClerkDesign()
+ return theme.copy(design = design.copy(logoMaxHeight = maxHeight.dp))
+ }
+
  private fun sendEvent(type: String) {
  onAuthEvent(mapOf("type" to type))
  }
@@ -102,6 +113,10 @@ class ClerkAuthViewModule : Module() {
  view.isDismissible = isDismissible
  }
 
+ Prop("logoMaxHeight") { view: ClerkAuthNativeView, logoMaxHeight: Float? ->
+ view.logoMaxHeight = logoMaxHeight
+ }
+
  OnViewDidUpdateProps { view: ClerkAuthNativeView ->
  view.setupView()
  }

packages/expo/ios/ClerkAuthNativeView.swift

@@ -4,6 +4,7 @@ import UIKit
 public class ClerkAuthNativeView: ClerkNativeViewHost {
  private var currentMode: String = "signInOrUp"
  private var currentDismissible: Bool = true
+ private var currentLogoMaxHeight: CGFloat?
  private var didSendDismiss = false
 
  let onAuthEvent = EventDispatcher()
@@ -22,6 +23,12 @@ public class ClerkAuthNativeView: ClerkNativeViewHost {
  setNeedsHostedViewUpdate()
  }
 
+ func setLogoMaxHeight(_ logoMaxHeight: CGFloat?) {
+ guard logoMaxHeight != currentLogoMaxHeight else { return }
+ currentLogoMaxHeight = logoMaxHeight
+ setNeedsHostedViewUpdate()
+ }
+
  private func sendAuthEvent(type: ClerkNativeViewEvent) {
  onAuthEvent(["type": type.rawValue])
  }
@@ -45,6 +52,7 @@ public class ClerkAuthNativeView: ClerkNativeViewHost {
  return ClerkNativeBridge.shared.makeAuthViewController(
  mode: currentMode,
  dismissible: currentDismissible,
+ logoMaxHeight: currentLogoMaxHeight,
  onEvent: { [weak self] event, _ in
  if event == .dismissed {
  self?.sendDismissIfNeeded()
@@ -68,6 +76,10 @@ public class ClerkAuthViewModule: Module {
  Prop("isDismissible") { (view: ClerkAuthNativeView, isDismissible: Bool?) in
  view.setDismissible(isDismissible)
  }
+
+ Prop("logoMaxHeight") { (view: ClerkAuthNativeView, logoMaxHeight: CGFloat?) in
+ view.setLogoMaxHeight(logoMaxHeight)
+ }
  }
  }
 }

packages/expo/ios/ClerkNativeBridge.swift

@@ -229,6 +229,7 @@ final class ClerkNativeBridge {
  func makeAuthViewController(
  mode: String,
  dismissible: Bool,
+ logoMaxHeight: CGFloat?,
  onEvent: @escaping (ClerkNativeViewEvent, [String: Any]) -> Void
  ) -> UIViewController? {
  guard Self.clerkConfigured else { return nil }
@@ -238,7 +239,8 @@ final class ClerkNativeBridge {
  mode: Self.authMode(from: mode),
  dismissible: dismissible,
  lightTheme: lightTheme,
- darkTheme: darkTheme
+ darkTheme: darkTheme,
+ logoMaxHeight: logoMaxHeight
  ),
  onDismiss: dismissible ? { onEvent(.dismissed, [:]) } : nil
  )
@@ -465,20 +467,27 @@ struct ClerkInlineAuthWrapperView: View {
  let dismissible: Bool
  let lightTheme: ClerkTheme?
  let darkTheme: ClerkTheme?
+ let logoMaxHeight: CGFloat?
 
  @Environment(\.colorScheme) private var colorScheme
 
- private var themedAuthView: some View {
+@ViewBuilder private var themedAuthView: some View {
  let view = AuthView(mode: mode, isDismissible: dismissible)
  .environment(Clerk.shared)
  let theme = colorScheme == .dark ? (darkTheme ?? lightTheme) : lightTheme
-return Group {
+let themedView = Group {
  if let theme {
  view.environment(\.clerkTheme, theme)
  } else {
  view
  }
  }
+
+ if let logoMaxHeight {
+ themedView.clerkAppIcon(maxHeight: logoMaxHeight)
+ } else {
+ themedView
+ }
  }
 
  var body: some View {

packages/expo/src/native/AuthView.tsx

@@ -37,7 +37,12 @@ type AuthNativeEvent = NativeSyntheticEvent<Readonly<{ type: string }>>;
  *
  * @see {@link https://clerk.com/docs/components/authentication/sign-in} Clerk Sign-In Documentation
  */
-export function AuthView({ mode = 'signInOrUp', isDismissible = true, onDismiss }: AuthViewProps): ReactElement {
+export function AuthView({
+ mode = 'signInOrUp',
+ isDismissible = true,
+ logoMaxHeight,
+ onDismiss,
+}: AuthViewProps): ReactElement {
  const handleAuthEvent = useCallback(
  (event: AuthNativeEvent) => {
  if (event.nativeEvent.type === 'dismissed') {
@@ -64,6 +69,7 @@ export function AuthView({ mode = 'signInOrUp', isDismissible = true, onDismiss
  style={{ flex: 1 }}
  mode={mode}
  isDismissible={isDismissible}
+ logoMaxHeight={logoMaxHeight}
  onAuthEvent={handleAuthEvent}
  />
  );

packages/expo/src/native/AuthView.types.ts

@@ -38,6 +38,13 @@ export interface AuthViewProps {
  */
  isDismissible?: boolean;
 
+ /**
+ * Maximum height of the Clerk application logo, in density-independent pixels.
+ *
+ * @default 44
+ */
+ logoMaxHeight?: number;
+
  /**
  * Called when the native authentication view requests dismissal.
  *

packages/expo/src/native/__tests__/AuthView.test.tsx

@@ -1,6 +1,6 @@
 import { render } from '@testing-library/react';
 import React from 'react';
-import { describe, expect, test, vi } from 'vitest';
+import { beforeEach, describe, expect, test, vi } from 'vitest';
 
 import { AuthView } from '../AuthView';
 
@@ -30,6 +30,16 @@ vi.mock('react-native', () => {
 });
 
 describe('AuthView', () => {
+ beforeEach(() => {
+ mocks.NativeClerkAuthView.mockClear();
+ });
+
+ test('passes logoMaxHeight to the native auth view', () => {
+ render(<AuthView logoMaxHeight={64} />);
+
+ expect(mocks.NativeClerkAuthView.mock.calls[0]?.[0]).toMatchObject({ logoMaxHeight: 64 });
+ });
+
  test('calls onDismiss when the native auth view emits dismissed', () => {
  const onDismiss = vi.fn();
 

packages/expo/src/specs/NativeClerkAuthView.android.ts

@@ -6,6 +6,7 @@ type AuthEvent = Readonly<{ type: string }>;
 interface NativeProps extends ViewProps {
  mode?: string;
  isDismissible?: boolean;
+ logoMaxHeight?: number;
  onAuthEvent?: (event: NativeSyntheticEvent<AuthEvent>) => void;
 }
 

packages/expo/src/specs/NativeClerkAuthView.ts

@@ -7,6 +7,7 @@ type AuthEvent = Readonly<{ type: string }>;
 interface NativeProps extends ViewProps {
  mode?: string;
  isDismissible?: boolean;
+ logoMaxHeight?: number;
  onAuthEvent?: (event: NativeSyntheticEvent<AuthEvent>) => void;
 }
 

.changeset/expo-native-logo-max-height.md

@@ -0,0 +1,11 @@
+---
+'@clerk/expo': patch
+---
+
+Add a `logoMaxHeight` prop to `AuthView`, allowing Expo apps to control the maximum height of the managed logo on Android and iOS.
+
+Usage:
+
+```tsx
+<AuthView logoMaxHeight={64} />
+```

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

@@ -5,9 +5,12 @@ import android.util.Log
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
 import androidx.lifecycle.ViewModelStore
 import androidx.lifecycle.ViewModelStoreOwner
 import com.clerk.api.Clerk
+import com.clerk.api.ui.ClerkDesign
+import com.clerk.api.ui.ClerkTheme
 import com.clerk.ui.auth.AuthMode
 import com.clerk.ui.auth.AuthView
 import expo.modules.kotlin.AppContext
@@ -25,6 +28,7 @@ private fun debugLog(tag: String, message: String) {
 
 class ClerkAuthNativeView(context: Context, appContext: AppContext) : ClerkComposeNativeViewHost(context, appContext) {
  var isDismissible: Boolean = true
+ var logoMaxHeight: Float? = null
  var mode: String? = null
 
  private val onAuthEvent by EventDispatcher()
@@ -60,7 +64,7 @@ class ClerkAuthNativeView(context: Context, appContext: AppContext) : ClerkCompo
 
  AuthView(
  modifier = Modifier.fillMaxSize(),
- clerkTheme = Clerk.customTheme,
+ clerkTheme = authTheme(),
  mode = authMode(mode),
  isDismissible = isDismissible,
  onDismiss = ::sendDismissEvent,
@@ -70,6 +74,13 @@ class ClerkAuthNativeView(context: Context, appContext: AppContext) : ClerkCompo
  )
  }
 
+ private fun authTheme(): ClerkTheme? {
+ val maxHeight = logoMaxHeight ?: return Clerk.customTheme
+ val theme = Clerk.customTheme ?: ClerkTheme()
+ val design = theme.design ?: ClerkDesign()
+ return theme.copy(design = design.copy(logoMaxHeight = maxHeight.dp))
+ }
+
  private fun sendEvent(type: String) {
  onAuthEvent(mapOf("type" to type))
  }
@@ -102,6 +113,10 @@ class ClerkAuthViewModule : Module() {
  view.isDismissible = isDismissible
  }
 
+ Prop("logoMaxHeight") { view: ClerkAuthNativeView, logoMaxHeight: Float? ->
+ view.logoMaxHeight = logoMaxHeight
+ }
+
  OnViewDidUpdateProps { view: ClerkAuthNativeView ->
  view.setupView()
  }

packages/expo/ios/ClerkAuthNativeView.swift

@@ -4,6 +4,7 @@ import UIKit
 public class ClerkAuthNativeView: ClerkNativeViewHost {
  private var currentMode: String = "signInOrUp"
  private var currentDismissible: Bool = true
+ private var currentLogoMaxHeight: CGFloat?
  private var didSendDismiss = false
 
  let onAuthEvent = EventDispatcher()
@@ -22,6 +23,12 @@ public class ClerkAuthNativeView: ClerkNativeViewHost {
  setNeedsHostedViewUpdate()
  }
 
+ func setLogoMaxHeight(_ logoMaxHeight: CGFloat?) {
+ guard logoMaxHeight != currentLogoMaxHeight else { return }
+ currentLogoMaxHeight = logoMaxHeight
+ setNeedsHostedViewUpdate()
+ }
+
  private func sendAuthEvent(type: ClerkNativeViewEvent) {
  onAuthEvent(["type": type.rawValue])
  }
@@ -45,6 +52,7 @@ public class ClerkAuthNativeView: ClerkNativeViewHost {
  return ClerkNativeBridge.shared.makeAuthViewController(
  mode: currentMode,
  dismissible: currentDismissible,
+ logoMaxHeight: currentLogoMaxHeight,
  onEvent: { [weak self] event, _ in
  if event == .dismissed {
  self?.sendDismissIfNeeded()
@@ -68,6 +76,10 @@ public class ClerkAuthViewModule: Module {
  Prop("isDismissible") { (view: ClerkAuthNativeView, isDismissible: Bool?) in
  view.setDismissible(isDismissible)
  }
+
+ Prop("logoMaxHeight") { (view: ClerkAuthNativeView, logoMaxHeight: CGFloat?) in
+ view.setLogoMaxHeight(logoMaxHeight)
+ }
  }
  }
 }

packages/expo/ios/ClerkNativeBridge.swift

@@ -229,6 +229,7 @@ final class ClerkNativeBridge {
  func makeAuthViewController(
  mode: String,
  dismissible: Bool,
+ logoMaxHeight: CGFloat?,
  onEvent: @escaping (ClerkNativeViewEvent, [String: Any]) -> Void
  ) -> UIViewController? {
  guard Self.clerkConfigured else { return nil }
@@ -238,7 +239,8 @@ final class ClerkNativeBridge {
  mode: Self.authMode(from: mode),
  dismissible: dismissible,
  lightTheme: lightTheme,
- darkTheme: darkTheme
+ darkTheme: darkTheme,
+ logoMaxHeight: logoMaxHeight
  ),
  onDismiss: dismissible ? { onEvent(.dismissed, [:]) } : nil
  )
@@ -465,20 +467,27 @@ struct ClerkInlineAuthWrapperView: View {
  let dismissible: Bool
  let lightTheme: ClerkTheme?
  let darkTheme: ClerkTheme?
+ let logoMaxHeight: CGFloat?
 
  @Environment(\.colorScheme) private var colorScheme
 
- private var themedAuthView: some View {
+@ViewBuilder private var themedAuthView: some View {
  let view = AuthView(mode: mode, isDismissible: dismissible)
  .environment(Clerk.shared)
  let theme = colorScheme == .dark ? (darkTheme ?? lightTheme) : lightTheme
-return Group {
+let themedView = Group {
  if let theme {
  view.environment(\.clerkTheme, theme)
  } else {
  view
  }
  }
+
+ if let logoMaxHeight {
+ themedView.clerkAppIcon(maxHeight: logoMaxHeight)
+ } else {
+ themedView
+ }
  }
 
  var body: some View {

packages/expo/src/native/AuthView.tsx

@@ -37,7 +37,12 @@ type AuthNativeEvent = NativeSyntheticEvent<Readonly<{ type: string }>>;
  *
  * @see {@link https://clerk.com/docs/components/authentication/sign-in} Clerk Sign-In Documentation
  */
-export function AuthView({ mode = 'signInOrUp', isDismissible = true, onDismiss }: AuthViewProps): ReactElement {
+export function AuthView({
+ mode = 'signInOrUp',
+ isDismissible = true,
+ logoMaxHeight,
+ onDismiss,
+}: AuthViewProps): ReactElement {
  const handleAuthEvent = useCallback(
  (event: AuthNativeEvent) => {
  if (event.nativeEvent.type === 'dismissed') {
@@ -64,6 +69,7 @@ export function AuthView({ mode = 'signInOrUp', isDismissible = true, onDismiss
  style={{ flex: 1 }}
  mode={mode}
  isDismissible={isDismissible}
+ logoMaxHeight={logoMaxHeight}
  onAuthEvent={handleAuthEvent}
  />
  );

packages/expo/src/native/AuthView.types.ts

@@ -38,6 +38,13 @@ export interface AuthViewProps {
  */
  isDismissible?: boolean;
 
+ /**
+ * Maximum height of the Clerk application logo, in density-independent pixels.
+ *
+ * @default 44
+ */
+ logoMaxHeight?: number;
+
  /**
  * Called when the native authentication view requests dismissal.
  *

packages/expo/src/native/__tests__/AuthView.test.tsx

@@ -1,6 +1,6 @@
 import { render } from '@testing-library/react';
 import React from 'react';
-import { describe, expect, test, vi } from 'vitest';
+import { beforeEach, describe, expect, test, vi } from 'vitest';
 
 import { AuthView } from '../AuthView';
 
@@ -30,6 +30,16 @@ vi.mock('react-native', () => {
 });
 
 describe('AuthView', () => {
+ beforeEach(() => {
+ mocks.NativeClerkAuthView.mockClear();
+ });
+
+ test('passes logoMaxHeight to the native auth view', () => {
+ render(<AuthView logoMaxHeight={64} />);
+
+ expect(mocks.NativeClerkAuthView.mock.calls[0]?.[0]).toMatchObject({ logoMaxHeight: 64 });
+ });
+
  test('calls onDismiss when the native auth view emits dismissed', () => {
  const onDismiss = vi.fn();
 

packages/expo/src/specs/NativeClerkAuthView.android.ts

@@ -6,6 +6,7 @@ type AuthEvent = Readonly<{ type: string }>;
 interface NativeProps extends ViewProps {
  mode?: string;
  isDismissible?: boolean;
+ logoMaxHeight?: number;
  onAuthEvent?: (event: NativeSyntheticEvent<AuthEvent>) => void;
 }
 

packages/expo/src/specs/NativeClerkAuthView.ts

@@ -7,6 +7,7 @@ type AuthEvent = Readonly<{ type: string }>;
 interface NativeProps extends ViewProps {
  mode?: string;
  isDismissible?: boolean;
+ logoMaxHeight?: number;
  onAuthEvent?: (event: NativeSyntheticEvent<AuthEvent>) => void;
 }
 

.changeset/expo-native-logo-max-height.md

@@ -0,0 +1,11 @@
+---
+'@clerk/expo': patch
+---
+
+Add a `logoMaxHeight` prop to `AuthView`, allowing Expo apps to control the maximum height of the managed logo on Android and iOS.
+
+Usage:
+
+```tsx
+<AuthView logoMaxHeight={64} />
+```

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

@@ -5,9 +5,12 @@ import android.util.Log
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
 import androidx.lifecycle.ViewModelStore
 import androidx.lifecycle.ViewModelStoreOwner
 import com.clerk.api.Clerk
+import com.clerk.api.ui.ClerkDesign
+import com.clerk.api.ui.ClerkTheme
 import com.clerk.ui.auth.AuthMode
 import com.clerk.ui.auth.AuthView
 import expo.modules.kotlin.AppContext
@@ -25,6 +28,7 @@ private fun debugLog(tag: String, message: String) {
 
 class ClerkAuthNativeView(context: Context, appContext: AppContext) : ClerkComposeNativeViewHost(context, appContext) {
  var isDismissible: Boolean = true
+ var logoMaxHeight: Float? = null
  var mode: String? = null
 
  private val onAuthEvent by EventDispatcher()
@@ -60,7 +64,7 @@ class ClerkAuthNativeView(context: Context, appContext: AppContext) : ClerkCompo
 
  AuthView(
  modifier = Modifier.fillMaxSize(),
- clerkTheme = Clerk.customTheme,
+ clerkTheme = authTheme(),
  mode = authMode(mode),
  isDismissible = isDismissible,
  onDismiss = ::sendDismissEvent,
@@ -70,6 +74,13 @@ class ClerkAuthNativeView(context: Context, appContext: AppContext) : ClerkCompo
  )
  }
 
+ private fun authTheme(): ClerkTheme? {
+ val maxHeight = logoMaxHeight ?: return Clerk.customTheme
+ val theme = Clerk.customTheme ?: ClerkTheme()
+ val design = theme.design ?: ClerkDesign()
+ return theme.copy(design = design.copy(logoMaxHeight = maxHeight.dp))
+ }
+
  private fun sendEvent(type: String) {
  onAuthEvent(mapOf("type" to type))
  }
@@ -102,6 +113,10 @@ class ClerkAuthViewModule : Module() {
  view.isDismissible = isDismissible
  }
 
+ Prop("logoMaxHeight") { view: ClerkAuthNativeView, logoMaxHeight: Float? ->
+ view.logoMaxHeight = logoMaxHeight
+ }
+
  OnViewDidUpdateProps { view: ClerkAuthNativeView ->
  view.setupView()
  }

packages/expo/ios/ClerkAuthNativeView.swift

@@ -4,6 +4,7 @@ import UIKit
 public class ClerkAuthNativeView: ClerkNativeViewHost {
  private var currentMode: String = "signInOrUp"
  private var currentDismissible: Bool = true
+ private var currentLogoMaxHeight: CGFloat?
  private var didSendDismiss = false
 
  let onAuthEvent = EventDispatcher()
@@ -22,6 +23,12 @@ public class ClerkAuthNativeView: ClerkNativeViewHost {
  setNeedsHostedViewUpdate()
  }
 
+ func setLogoMaxHeight(_ logoMaxHeight: CGFloat?) {
+ guard logoMaxHeight != currentLogoMaxHeight else { return }
+ currentLogoMaxHeight = logoMaxHeight
+ setNeedsHostedViewUpdate()
+ }
+
  private func sendAuthEvent(type: ClerkNativeViewEvent) {
  onAuthEvent(["type": type.rawValue])
  }
@@ -45,6 +52,7 @@ public class ClerkAuthNativeView: ClerkNativeViewHost {
  return ClerkNativeBridge.shared.makeAuthViewController(
  mode: currentMode,
  dismissible: currentDismissible,
+ logoMaxHeight: currentLogoMaxHeight,
  onEvent: { [weak self] event, _ in
  if event == .dismissed {
  self?.sendDismissIfNeeded()
@@ -68,6 +76,10 @@ public class ClerkAuthViewModule: Module {
  Prop("isDismissible") { (view: ClerkAuthNativeView, isDismissible: Bool?) in
  view.setDismissible(isDismissible)
  }
+
+ Prop("logoMaxHeight") { (view: ClerkAuthNativeView, logoMaxHeight: CGFloat?) in
+ view.setLogoMaxHeight(logoMaxHeight)
+ }
  }
  }
 }

packages/expo/ios/ClerkNativeBridge.swift

@@ -229,6 +229,7 @@ final class ClerkNativeBridge {
  func makeAuthViewController(
  mode: String,
  dismissible: Bool,
+ logoMaxHeight: CGFloat?,
  onEvent: @escaping (ClerkNativeViewEvent, [String: Any]) -> Void
  ) -> UIViewController? {
  guard Self.clerkConfigured else { return nil }
@@ -238,7 +239,8 @@ final class ClerkNativeBridge {
  mode: Self.authMode(from: mode),
  dismissible: dismissible,
  lightTheme: lightTheme,
- darkTheme: darkTheme
+ darkTheme: darkTheme,
+ logoMaxHeight: logoMaxHeight
  ),
  onDismiss: dismissible ? { onEvent(.dismissed, [:]) } : nil
  )
@@ -465,20 +467,27 @@ struct ClerkInlineAuthWrapperView: View {
  let dismissible: Bool
  let lightTheme: ClerkTheme?
  let darkTheme: ClerkTheme?
+ let logoMaxHeight: CGFloat?
 
  @Environment(\.colorScheme) private var colorScheme
 
- private var themedAuthView: some View {
+@ViewBuilder private var themedAuthView: some View {
  let view = AuthView(mode: mode, isDismissible: dismissible)
  .environment(Clerk.shared)
  let theme = colorScheme == .dark ? (darkTheme ?? lightTheme) : lightTheme
-return Group {
+let themedView = Group {
  if let theme {
  view.environment(\.clerkTheme, theme)
  } else {
  view
  }
  }
+
+ if let logoMaxHeight {
+ themedView.clerkAppIcon(maxHeight: logoMaxHeight)
+ } else {
+ themedView
+ }
  }
 
  var body: some View {

packages/expo/src/native/AuthView.tsx

@@ -37,7 +37,12 @@ type AuthNativeEvent = NativeSyntheticEvent<Readonly<{ type: string }>>;
  *
  * @see {@link https://clerk.com/docs/components/authentication/sign-in} Clerk Sign-In Documentation
  */
-export function AuthView({ mode = 'signInOrUp', isDismissible = true, onDismiss }: AuthViewProps): ReactElement {
+export function AuthView({
+ mode = 'signInOrUp',
+ isDismissible = true,
+ logoMaxHeight,
+ onDismiss,
+}: AuthViewProps): ReactElement {
  const handleAuthEvent = useCallback(
  (event: AuthNativeEvent) => {
  if (event.nativeEvent.type === 'dismissed') {
@@ -64,6 +69,7 @@ export function AuthView({ mode = 'signInOrUp', isDismissible = true, onDismiss
  style={{ flex: 1 }}
  mode={mode}
  isDismissible={isDismissible}
+ logoMaxHeight={logoMaxHeight}
  onAuthEvent={handleAuthEvent}
  />
  );

packages/expo/src/native/AuthView.types.ts

@@ -38,6 +38,13 @@ export interface AuthViewProps {
  */
  isDismissible?: boolean;
 
+ /**
+ * Maximum height of the Clerk application logo, in density-independent pixels.
+ *
+ * @default 44
+ */
+ logoMaxHeight?: number;
+
  /**
  * Called when the native authentication view requests dismissal.
  *

packages/expo/src/native/__tests__/AuthView.test.tsx

@@ -1,6 +1,6 @@
 import { render } from '@testing-library/react';
 import React from 'react';
-import { describe, expect, test, vi } from 'vitest';
+import { beforeEach, describe, expect, test, vi } from 'vitest';
 
 import { AuthView } from '../AuthView';
 
@@ -30,6 +30,16 @@ vi.mock('react-native', () => {
 });
 
 describe('AuthView', () => {
+ beforeEach(() => {
+ mocks.NativeClerkAuthView.mockClear();
+ });
+
+ test('passes logoMaxHeight to the native auth view', () => {
+ render(<AuthView logoMaxHeight={64} />);
+
+ expect(mocks.NativeClerkAuthView.mock.calls[0]?.[0]).toMatchObject({ logoMaxHeight: 64 });
+ });
+
  test('calls onDismiss when the native auth view emits dismissed', () => {
  const onDismiss = vi.fn();
 

packages/expo/src/specs/NativeClerkAuthView.android.ts

@@ -6,6 +6,7 @@ type AuthEvent = Readonly<{ type: string }>;
 interface NativeProps extends ViewProps {
  mode?: string;
  isDismissible?: boolean;
+ logoMaxHeight?: number;
  onAuthEvent?: (event: NativeSyntheticEvent<AuthEvent>) => void;
 }
 

packages/expo/src/specs/NativeClerkAuthView.ts

@@ -7,6 +7,7 @@ type AuthEvent = Readonly<{ type: string }>;
 interface NativeProps extends ViewProps {
  mode?: string;
  isDismissible?: boolean;
+ logoMaxHeight?: number;
  onAuthEvent?: (event: NativeSyntheticEvent<AuthEvent>) => void;
 }
 

.changeset/expo-native-logo-max-height.md

@@ -0,0 +1,11 @@
+---
+'@clerk/expo': patch
+---
+
+Add a `logoMaxHeight` prop to `AuthView`, allowing Expo apps to control the maximum height of the managed logo on Android and iOS.
+
+Usage:
+
+```tsx
+<AuthView logoMaxHeight={64} />
+```

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

@@ -5,9 +5,12 @@ import android.util.Log
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
 import androidx.lifecycle.ViewModelStore
 import androidx.lifecycle.ViewModelStoreOwner
 import com.clerk.api.Clerk
+import com.clerk.api.ui.ClerkDesign
+import com.clerk.api.ui.ClerkTheme
 import com.clerk.ui.auth.AuthMode
 import com.clerk.ui.auth.AuthView
 import expo.modules.kotlin.AppContext
@@ -25,6 +28,7 @@ private fun debugLog(tag: String, message: String) {
 
 class ClerkAuthNativeView(context: Context, appContext: AppContext) : ClerkComposeNativeViewHost(context, appContext) {
  var isDismissible: Boolean = true
+ var logoMaxHeight: Float? = null
  var mode: String? = null
 
  private val onAuthEvent by EventDispatcher()
@@ -60,7 +64,7 @@ class ClerkAuthNativeView(context: Context, appContext: AppContext) : ClerkCompo
 
  AuthView(
  modifier = Modifier.fillMaxSize(),
- clerkTheme = Clerk.customTheme,
+ clerkTheme = authTheme(),
  mode = authMode(mode),
  isDismissible = isDismissible,
  onDismiss = ::sendDismissEvent,
@@ -70,6 +74,13 @@ class ClerkAuthNativeView(context: Context, appContext: AppContext) : ClerkCompo
  )
  }
 
+ private fun authTheme(): ClerkTheme? {
+ val maxHeight = logoMaxHeight ?: return Clerk.customTheme
+ val theme = Clerk.customTheme ?: ClerkTheme()
+ val design = theme.design ?: ClerkDesign()
+ return theme.copy(design = design.copy(logoMaxHeight = maxHeight.dp))
+ }
+
  private fun sendEvent(type: String) {
  onAuthEvent(mapOf("type" to type))
  }
@@ -102,6 +113,10 @@ class ClerkAuthViewModule : Module() {
  view.isDismissible = isDismissible
  }
 
+ Prop("logoMaxHeight") { view: ClerkAuthNativeView, logoMaxHeight: Float? ->
+ view.logoMaxHeight = logoMaxHeight
+ }
+
  OnViewDidUpdateProps { view: ClerkAuthNativeView ->
  view.setupView()
  }

packages/expo/ios/ClerkAuthNativeView.swift

@@ -4,6 +4,7 @@ import UIKit
 public class ClerkAuthNativeView: ClerkNativeViewHost {
  private var currentMode: String = "signInOrUp"
  private var currentDismissible: Bool = true
+ private var currentLogoMaxHeight: CGFloat?
  private var didSendDismiss = false
 
  let onAuthEvent = EventDispatcher()
@@ -22,6 +23,12 @@ public class ClerkAuthNativeView: ClerkNativeViewHost {
  setNeedsHostedViewUpdate()
  }
 
+ func setLogoMaxHeight(_ logoMaxHeight: CGFloat?) {
+ guard logoMaxHeight != currentLogoMaxHeight else { return }
+ currentLogoMaxHeight = logoMaxHeight
+ setNeedsHostedViewUpdate()
+ }
+
  private func sendAuthEvent(type: ClerkNativeViewEvent) {
  onAuthEvent(["type": type.rawValue])
  }
@@ -45,6 +52,7 @@ public class ClerkAuthNativeView: ClerkNativeViewHost {
  return ClerkNativeBridge.shared.makeAuthViewController(
  mode: currentMode,
  dismissible: currentDismissible,
+ logoMaxHeight: currentLogoMaxHeight,
  onEvent: { [weak self] event, _ in
  if event == .dismissed {
  self?.sendDismissIfNeeded()
@@ -68,6 +76,10 @@ public class ClerkAuthViewModule: Module {
  Prop("isDismissible") { (view: ClerkAuthNativeView, isDismissible: Bool?) in
  view.setDismissible(isDismissible)
  }
+
+ Prop("logoMaxHeight") { (view: ClerkAuthNativeView, logoMaxHeight: CGFloat?) in
+ view.setLogoMaxHeight(logoMaxHeight)
+ }
  }
  }
 }

packages/expo/ios/ClerkNativeBridge.swift

@@ -229,6 +229,7 @@ final class ClerkNativeBridge {
  func makeAuthViewController(
  mode: String,
  dismissible: Bool,
+ logoMaxHeight: CGFloat?,
  onEvent: @escaping (ClerkNativeViewEvent, [String: Any]) -> Void
  ) -> UIViewController? {
  guard Self.clerkConfigured else { return nil }
@@ -238,7 +239,8 @@ final class ClerkNativeBridge {
  mode: Self.authMode(from: mode),
  dismissible: dismissible,
  lightTheme: lightTheme,
- darkTheme: darkTheme
+ darkTheme: darkTheme,
+ logoMaxHeight: logoMaxHeight
  ),
  onDismiss: dismissible ? { onEvent(.dismissed, [:]) } : nil
  )
@@ -465,20 +467,27 @@ struct ClerkInlineAuthWrapperView: View {
  let dismissible: Bool
  let lightTheme: ClerkTheme?
  let darkTheme: ClerkTheme?
+ let logoMaxHeight: CGFloat?
 
  @Environment(\.colorScheme) private var colorScheme
 
- private var themedAuthView: some View {
+@ViewBuilder private var themedAuthView: some View {
  let view = AuthView(mode: mode, isDismissible: dismissible)
  .environment(Clerk.shared)
  let theme = colorScheme == .dark ? (darkTheme ?? lightTheme) : lightTheme
-return Group {
+let themedView = Group {
  if let theme {
  view.environment(\.clerkTheme, theme)
  } else {
  view
  }
  }
+
+ if let logoMaxHeight {
+ themedView.clerkAppIcon(maxHeight: logoMaxHeight)
+ } else {
+ themedView
+ }
  }
 
  var body: some View {

packages/expo/src/native/AuthView.tsx

@@ -37,7 +37,12 @@ type AuthNativeEvent = NativeSyntheticEvent<Readonly<{ type: string }>>;
  *
  * @see {@link https://clerk.com/docs/components/authentication/sign-in} Clerk Sign-In Documentation
  */
-export function AuthView({ mode = 'signInOrUp', isDismissible = true, onDismiss }: AuthViewProps): ReactElement {
+export function AuthView({
+ mode = 'signInOrUp',
+ isDismissible = true,
+ logoMaxHeight,
+ onDismiss,
+}: AuthViewProps): ReactElement {
  const handleAuthEvent = useCallback(
  (event: AuthNativeEvent) => {
  if (event.nativeEvent.type === 'dismissed') {
@@ -64,6 +69,7 @@ export function AuthView({ mode = 'signInOrUp', isDismissible = true, onDismiss
  style={{ flex: 1 }}
  mode={mode}
  isDismissible={isDismissible}
+ logoMaxHeight={logoMaxHeight}
  onAuthEvent={handleAuthEvent}
  />
  );

packages/expo/src/native/AuthView.types.ts

@@ -38,6 +38,13 @@ export interface AuthViewProps {
  */
  isDismissible?: boolean;
 
+ /**
+ * Maximum height of the Clerk application logo, in density-independent pixels.
+ *
+ * @default 44
+ */
+ logoMaxHeight?: number;
+
  /**
  * Called when the native authentication view requests dismissal.
  *

packages/expo/src/native/__tests__/AuthView.test.tsx

@@ -1,6 +1,6 @@
 import { render } from '@testing-library/react';
 import React from 'react';
-import { describe, expect, test, vi } from 'vitest';
+import { beforeEach, describe, expect, test, vi } from 'vitest';
 
 import { AuthView } from '../AuthView';
 
@@ -30,6 +30,16 @@ vi.mock('react-native', () => {
 });
 
 describe('AuthView', () => {
+ beforeEach(() => {
+ mocks.NativeClerkAuthView.mockClear();
+ });
+
+ test('passes logoMaxHeight to the native auth view', () => {
+ render(<AuthView logoMaxHeight={64} />);
+
+ expect(mocks.NativeClerkAuthView.mock.calls[0]?.[0]).toMatchObject({ logoMaxHeight: 64 });
+ });
+
  test('calls onDismiss when the native auth view emits dismissed', () => {
  const onDismiss = vi.fn();
 

packages/expo/src/specs/NativeClerkAuthView.android.ts

@@ -6,6 +6,7 @@ type AuthEvent = Readonly<{ type: string }>;
 interface NativeProps extends ViewProps {
  mode?: string;
  isDismissible?: boolean;
+ logoMaxHeight?: number;
  onAuthEvent?: (event: NativeSyntheticEvent<AuthEvent>) => void;
 }
 

packages/expo/src/specs/NativeClerkAuthView.ts

@@ -7,6 +7,7 @@ type AuthEvent = Readonly<{ type: string }>;
 interface NativeProps extends ViewProps {
  mode?: string;
  isDismissible?: boolean;
+ logoMaxHeight?: number;
  onAuthEvent?: (event: NativeSyntheticEvent<AuthEvent>) => void;
 }