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

Co-authored-by: Robert Soriano <sorianorobertc@gmail.com>

Author: swolfand

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