fix(expo): render auth content in partial sheet

Author: swolfand

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

@@ -2,19 +2,30 @@ package expo.modules.clerk
 
 import android.content.Context
 import android.util.Log
+import androidx.compose.foundation.Canvas
 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.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.material3.BottomSheetDefaults
 import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.IconButton
 import androidx.compose.material3.ModalBottomSheet
 import androidx.compose.material3.SheetValue
 import androidx.compose.material3.rememberModalBottomSheetState
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.StrokeCap
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.semantics.contentDescription
+import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.unit.dp
 import androidx.lifecycle.ViewModelStore
 import androidx.lifecycle.ViewModelStoreOwner
@@ -89,32 +100,76 @@ class ClerkAuthNativeView(context: Context, appContext: AppContext) : ClerkCompo
       onDismissRequest = ::sendDismissEvent,
       sheetState = sheetState,
       containerColor = clerkBackgroundColor(),
+      dragHandle = { SheetDragHandle() },
     ) {
       BoxWithConstraints(modifier = Modifier.fillMaxSize()) {
-        val authHeight =
-          if (sheetState.currentValue == SheetValue.Expanded) maxHeight else maxHeight / 2
-
-        Box(modifier = Modifier.fillMaxWidth().height(authHeight)) {
-          ClerkAuthView()
+        val density = LocalDensity.current
+        val sheetOffsetPx =
+          runCatching { sheetState.requireOffset() }
+            .getOrDefault(with(density) { maxHeight.toPx() })
+        val sheetOffset = with(density) { sheetOffsetPx.toDp() }
+        val authHeight = (maxHeight - sheetOffset).coerceAtLeast(0.dp)
+
+        if (sheetState.currentValue != SheetValue.Hidden) {
+          Box(modifier = Modifier.fillMaxWidth().height(authHeight)) {
+            ClerkAuthView(showDismissAction = false)
+          }
         }
       }
     }
   }
 
   @Composable
-  private fun ClerkAuthView() {
+  private fun ClerkAuthView(showDismissAction: Boolean = isDismissible) {
     AuthView(
       modifier = Modifier.fillMaxSize(),
       clerkTheme = authTheme(),
       mode = authMode(mode),
-      isDismissible = isDismissible,
+      isDismissible = showDismissAction,
       onDismiss = ::sendDismissEvent,
       onAuthComplete = {
         sendDismissEvent()
       },
     )
   }
 
+  @Composable
+  @OptIn(ExperimentalMaterial3Api::class)
+  private fun SheetDragHandle() {
+    Box(modifier = Modifier.fillMaxWidth().height(48.dp)) {
+      BottomSheetDefaults.DragHandle(modifier = Modifier.align(Alignment.Center))
+      if (isDismissible) {
+        IconButton(
+          onClick = ::sendDismissEvent,
+          modifier =
+            Modifier.align(Alignment.CenterEnd)
+              .padding(end = 12.dp)
+              .semantics { contentDescription = "Close" },
+        ) {
+          val color = clerkForegroundColor()
+          Canvas(modifier = Modifier.size(24.dp)) {
+            val inset = 4.dp.toPx()
+            val strokeWidth = 2.dp.toPx()
+            drawLine(
+              color = color,
+              start = Offset(inset, inset),
+              end = Offset(size.width - inset, size.height - inset),
+              strokeWidth = strokeWidth,
+              cap = StrokeCap.Round,
+            )
+            drawLine(
+              color = color,
+              start = Offset(size.width - inset, inset),
+              end = Offset(inset, size.height - inset),
+              strokeWidth = strokeWidth,
+              cap = StrokeCap.Round,
+            )
+          }
+        }
+      }
+    }
+  }
+
   @Composable
   private fun clerkBackgroundColor(): Color {
     val isDarkMode = isSystemInDarkTheme()
@@ -126,6 +181,17 @@ class ClerkAuthNativeView(context: Context, appContext: AppContext) : ClerkCompo
       ?: if (isDarkMode) Color(0xFF131316) else Color.White
   }
 
+  @Composable
+  private fun clerkForegroundColor(): Color {
+    val isDarkMode = isSystemInDarkTheme()
+    val customTheme = Clerk.customTheme
+    val modeColors = if (isDarkMode) customTheme?.darkColors else customTheme?.lightColors
+
+    return modeColors?.foreground
+      ?: customTheme?.colors?.foreground
+      ?: if (isDarkMode) Color.White else Color.Black
+  }
+
   private fun authTheme(): ClerkTheme? {
     val maxHeight = logoMaxHeight ?: return Clerk.customTheme
     val theme = Clerk.customTheme ?: ClerkTheme()