feat(expo): add Android bottom sheet presentation

Author: swolfand

.changeset/soft-diamonds-slide.md

@@ -0,0 +1,5 @@
+---
+'@clerk/expo': minor
+---
+
+Add an Android `presentation` option to `AuthView`, including a native Material bottom sheet mode.

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

@@ -2,9 +2,19 @@ package expo.modules.clerk
 
 import android.content.Context
 import android.util.Log
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxWithConstraints
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.ModalBottomSheet
+import androidx.compose.material3.SheetValue
+import androidx.compose.material3.rememberModalBottomSheetState
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
 import androidx.lifecycle.ViewModelStore
 import androidx.lifecycle.ViewModelStoreOwner
@@ -30,6 +40,7 @@ class ClerkAuthNativeView(context: Context, appContext: AppContext) : ClerkCompo
   var isDismissible: Boolean = true
   var logoMaxHeight: Float? = null
   var mode: String? = null
+  var presentation: String = "inline"
 
   private val onAuthEvent by EventDispatcher()
 
@@ -61,9 +72,37 @@ class ClerkAuthNativeView(context: Context, appContext: AppContext) : ClerkCompo
   }
 
   @Composable
+  @OptIn(ExperimentalMaterial3Api::class)
   override fun Content() {
-    debugLog(TAG, "setupView - mode: $mode, isDismissible: $isDismissible, activity: $activity")
+    debugLog(
+      TAG,
+      "setupView - mode: $mode, presentation: $presentation, isDismissible: $isDismissible, activity: $activity",
+    )
+
+    if (presentation != "bottomSheet") {
+      ClerkAuthView()
+      return
+    }
+
+    val sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = false)
+    ModalBottomSheet(
+      onDismissRequest = ::sendDismissEvent,
+      sheetState = sheetState,
+      containerColor = clerkBackgroundColor(),
+    ) {
+      BoxWithConstraints(modifier = Modifier.fillMaxSize()) {
+        val authHeight =
+          if (sheetState.currentValue == SheetValue.Expanded) maxHeight else maxHeight / 2
+
+        Box(modifier = Modifier.fillMaxWidth().height(authHeight)) {
+          ClerkAuthView()
+        }
+      }
+    }
+  }
 
+  @Composable
+  private fun ClerkAuthView() {
     AuthView(
       modifier = Modifier.fillMaxSize(),
       clerkTheme = authTheme(),
@@ -76,6 +115,17 @@ class ClerkAuthNativeView(context: Context, appContext: AppContext) : ClerkCompo
     )
   }
 
+  @Composable
+  private fun clerkBackgroundColor(): Color {
+    val isDarkMode = isSystemInDarkTheme()
+    val customTheme = Clerk.customTheme
+    val modeColors = if (isDarkMode) customTheme?.darkColors else customTheme?.lightColors
+
+    return modeColors?.background
+      ?: customTheme?.colors?.background
+      ?: if (isDarkMode) Color(0xFF131316) else Color.White
+  }
+
   private fun authTheme(): ClerkTheme? {
     val maxHeight = logoMaxHeight ?: return Clerk.customTheme
     val theme = Clerk.customTheme ?: ClerkTheme()
@@ -119,6 +169,10 @@ class ClerkAuthViewModule : Module() {
         view.logoMaxHeight = logoMaxHeight
       }
 
+      Prop("presentation") { view: ClerkAuthNativeView, presentation: String? ->
+        view.presentation = presentation ?: "inline"
+      }
+
       OnViewDidUpdateProps { view: ClerkAuthNativeView ->
         view.setupView()
       }

packages/expo/src/native/AuthView.tsx

@@ -1,6 +1,6 @@
 import { type ReactElement, useCallback } from 'react';
 import type { NativeSyntheticEvent } from 'react-native';
-import { Text, View } from 'react-native';
+import { Platform, Text, View } from 'react-native';
 
 import NativeClerkAuthView from '../specs/NativeClerkAuthView';
 import { isNativeSupported } from '../utils/native-module';
@@ -39,6 +39,7 @@ type AuthNativeEvent = NativeSyntheticEvent<Readonly<{ type: string }>>;
  */
 export function AuthView({
   mode = 'signInOrUp',
+  presentation = 'inline',
   isDismissible = true,
   logoMaxHeight,
   onDismiss,
@@ -68,6 +69,7 @@ export function AuthView({
     <NativeClerkAuthView
       style={{ flex: 1 }}
       mode={mode}
+      {...(Platform.OS === 'android' ? { presentation } : {})}
       isDismissible={isDismissible}
       logoMaxHeight={logoMaxHeight}
       onAuthEvent={handleAuthEvent}

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

@@ -7,6 +7,9 @@
  */
 export type AuthViewMode = 'signIn' | 'signUp' | 'signInOrUp';
 
+/** Android presentation used by the native authentication view. */
+export type AuthViewPresentation = 'inline' | 'bottomSheet';
+
 /**
  * Props for the AuthView component.
  *
@@ -26,6 +29,17 @@ export interface AuthViewProps {
    */
   mode?: AuthViewMode;
 
+  /**
+   * Android presentation for the native authentication view.
+   *
+   * `'inline'` preserves the standard behavior and fills the parent container.
+   * `'bottomSheet'` presents the same Clerk flow in a Material bottom sheet.
+   * This option is ignored on iOS, where the parent controls presentation.
+   *
+   * @default 'inline'
+   */
+  presentation?: AuthViewPresentation;
+
   /**
    * Whether the authentication view can be dismissed by the user.
    *

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

@@ -24,6 +24,7 @@ vi.mock('../../utils/native-module', () => {
 
 vi.mock('react-native', () => {
   return {
+    Platform: { OS: 'android' },
     Text: ({ children }: { children?: React.ReactNode }) => React.createElement('span', null, children),
     View: ({ children }: { children?: React.ReactNode }) => React.createElement('div', null, children),
   };
@@ -40,6 +41,18 @@ describe('AuthView', () => {
     expect(mocks.NativeClerkAuthView.mock.calls[0]?.[0]).toMatchObject({ logoMaxHeight: 64 });
   });
 
+  test('uses inline presentation by default', () => {
+    render(<AuthView />);
+
+    expect(mocks.NativeClerkAuthView.mock.calls[0]?.[0]).toMatchObject({ presentation: 'inline' });
+  });
+
+  test('passes bottom sheet presentation to the native auth view', () => {
+    render(<AuthView presentation='bottomSheet' />);
+
+    expect(mocks.NativeClerkAuthView.mock.calls[0]?.[0]).toMatchObject({ presentation: 'bottomSheet' });
+  });
+
   test('calls onDismiss when the native auth view emits dismissed', () => {
     const onDismiss = vi.fn();
 

packages/expo/src/native/index.ts

@@ -29,7 +29,7 @@
  */
 
 export { AuthView } from './AuthView';
-export type { AuthViewProps, AuthViewMode } from './AuthView.types';
+export type { AuthViewProps, AuthViewMode, AuthViewPresentation } from './AuthView.types';
 export { UserButton } from './UserButton';
 export { UserProfileView } from './UserProfileView';
 export type { UserProfileViewProps } from './UserProfileView';

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

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

packages/expo/src/specs/NativeClerkAuthView.ts

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