@expo/ui 55.0.3 → 55.0.5

package/CHANGELOG.md

@@ -10,6 +10,19 @@
 
 ### 💡 Others
 
+## 55.0.5 — 2026-03-19
+
+### 🛠 Breaking changes
+
+- [android] Split `Carousel` into `HorizontalCenteredHeroCarousel`, `HorizontalMultiBrowseCarousel`, and `HorizontalUncontainedCarousel` matching native Compose components. Added `HorizontalCenteredHeroCarousel`. ([#44034](https://github.com/expo/expo/pull/44034) by [@nishan](https://github.com/intergalacticspacehighway))
+
+## 55.0.4 — 2026-03-18
+
+### 🎉 New features
+
+- [iOS] Add `Link` view. ([#43983](https://github.com/expo/expo/pull/43983) by [@jakex7](https://github.com/jakex7))
+- [iOS] Add `widgetURL` modifier. ([#43984](https://github.com/expo/expo/pull/43984) by [@jakex7](https://github.com/jakex7))
+
 ## 55.0.3 — 2026-03-17
 
 ### 🛠 Breaking changes
@@ -30,6 +43,10 @@
 
 ### 🎉 New features
 
+- [android] Added `outlined` variant to `TextInput` component. ([#43719](https://github.com/expo/expo/pull/43719) by [@benjaminkomen](https://github.com/benjaminkomen))
+- Added `@expo/ui/datetimepicker` — a cross-platform `DateTimePicker` drop-in replacement for `@react-native-community/datetimepicker`. ([#44014](https://github.com/expo/expo/pull/44014) by [@vonovak](https://github.com/vonovak))
+- [iOS] Added `locale` and `timeZone` support to `modifiers`. ([#44013](https://github.com/expo/expo/pull/44013) by [@vonovak](https://github.com/vonovak))
+- [android] Added `ref.hide()` for animated dismiss and more configurable props (`containerColor`, `contentColor`, `scrimColor`, `showDragHandle`, `sheetGesturesEnabled`, `properties`, `DragHandle` slot) to `BottomSheet`. ([#43972](https://github.com/expo/expo/pull/43972) by [@nishan](https://github.com/intergalacticspacehighway))
 - [iOS] Added `date`, `dateStyle`, `timerInterval`, `countsDown`, and `pauseTime` props to `Text` component for displaying auto-updating dates, timers, and countdowns using SwiftUI's `Text.DateStyle`. ([#43552](https://github.com/expo/expo/pull/43552) by [@LouisRaverdy](https://github.com/LouisRaverdy))
 - [android] Added `Checkbox` and `TriStateCheckbox` components. ([#43887](https://github.com/expo/expo/pull/43887) by [@nishan](https://github.com/intergalacticspacehighway))
 - [Android] Added `DatePickerDialog` and `TimePickerDialog` components, and `selectableDates` prop to `DateTimePicker`. ([#43895](https://github.com/expo/expo/pull/43895) by [@vonovak](https://github.com/vonovak))

package/android/build.gradle

@@ -12,13 +12,13 @@ apply plugin: 'expo-module-gradle-plugin'
 apply plugin: 'org.jetbrains.kotlin.plugin.compose'
 
 group = 'expo.modules.ui'
-version = '55.0.3'
+version = '55.0.5'
 
 android {
   namespace "expo.modules.ui"
   defaultConfig {
     versionCode 1
-    versionName "55.0.3"
+    versionName "55.0.5"
     testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
   }
   buildFeatures {

package/android/src/main/java/expo/modules/ui/BottomSheetView.kt

@@ -2,28 +2,106 @@
 
 package expo.modules.ui
 
+import android.annotation.SuppressLint
+import android.content.Context
+import android.graphics.Color
+import androidx.compose.material3.BottomSheetDefaults
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.ModalBottomSheet
+import androidx.compose.material3.ModalBottomSheetProperties
+import androidx.compose.material3.SheetState
+import androidx.compose.material3.contentColorFor
 import androidx.compose.material3.rememberModalBottomSheetState
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.MutableState
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.rememberCoroutineScope
+import kotlin.coroutines.cancellation.CancellationException
+import kotlinx.coroutines.CoroutineScope
+import kotlinx.coroutines.withContext
+import expo.modules.kotlin.AppContext
+import expo.modules.kotlin.records.Field
+import expo.modules.kotlin.records.Record
+import expo.modules.kotlin.viewevent.EventDispatcher
 import expo.modules.kotlin.views.ComposableScope
 import expo.modules.kotlin.views.ComposeProps
-import expo.modules.kotlin.views.FunctionalComposableScope
+import expo.modules.kotlin.views.ExpoComposeView
 
-data class ModalBottomSheetProps(
-  val skipPartiallyExpanded: Boolean = false,
-  val modifiers: ModifierList = emptyList()
+data class ModalBottomSheetPropertiesRecord(
+  @Field val shouldDismissOnBackPress: Boolean = true,
+  @Field val shouldDismissOnClickOutside: Boolean = true
+) : Record
+
+data class ModalBottomSheetViewProps(
+  val skipPartiallyExpanded: MutableState<Boolean> = mutableStateOf(false),
+  val containerColor: MutableState<Color?> = mutableStateOf(null),
+  val contentColor: MutableState<Color?> = mutableStateOf(null),
+  val scrimColor: MutableState<Color?> = mutableStateOf(null),
+  val showDragHandle: MutableState<Boolean> = mutableStateOf(true),
+  val sheetGesturesEnabled: MutableState<Boolean> = mutableStateOf(true),
+  val properties: MutableState<ModalBottomSheetPropertiesRecord> = mutableStateOf(ModalBottomSheetPropertiesRecord()),
+  val modifiers: MutableState<ModifierList> = mutableStateOf(emptyList())
 ) : ComposeProps
 
-@Composable
-fun FunctionalComposableScope.ModalBottomSheetContent(props: ModalBottomSheetProps, onDismissRequest: () -> Unit) {
-  val sheetState = rememberModalBottomSheetState(props.skipPartiallyExpanded)
+@SuppressLint("ViewConstructor")
+class ModalBottomSheetView(context: Context, appContext: AppContext) :
+  ExpoComposeView<ModalBottomSheetViewProps>(context, appContext) {
+  override val props = ModalBottomSheetViewProps()
+  internal val onDismissRequest by EventDispatcher<Unit>()
+
+  internal var sheetState: SheetState? = null
+  private var composeScope: CoroutineScope? = null
+
+  suspend fun hide() {
+    val scope = composeScope ?: return
+    val state = sheetState ?: return
+    try {
+      withContext(scope.coroutineContext) {
+        state.hide()
+      }
+    } catch (_: CancellationException) {
+      // Swipe-dismiss may cancel the coroutine scope while hide() is in-flight.
+      // Swallowing the exception avoids an unhandled promise rejection on the JS side.
+    }
+  }
+
+  @Composable
+  override fun ComposableScope.Content() {
+    val sheetState = rememberModalBottomSheetState(props.skipPartiallyExpanded.value)
+    val scope = rememberCoroutineScope()
+    this@ModalBottomSheetView.sheetState = sheetState
+    this@ModalBottomSheetView.composeScope = scope
+
+    val resolvedContainerColor = props.containerColor.value.composeOrNull ?: BottomSheetDefaults.ContainerColor
+    val resolvedContentColor = props.contentColor.value.composeOrNull ?: contentColorFor(resolvedContainerColor)
+    val resolvedScrimColor = props.scrimColor.value.composeOrNull ?: BottomSheetDefaults.ScrimColor
+    val dragHandleSlotView = findChildSlotView(this@ModalBottomSheetView, "dragHandle")
 
-  ModalBottomSheet(
-    sheetState = sheetState,
-    onDismissRequest = { onDismissRequest() },
-    modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher)
-  ) {
-    Children(ComposableScope())
+    ModalBottomSheet(
+      sheetState = sheetState,
+      onDismissRequest = {
+        onDismissRequest(Unit)
+      },
+      containerColor = resolvedContainerColor,
+      contentColor = resolvedContentColor,
+      scrimColor = resolvedScrimColor,
+      sheetGesturesEnabled = props.sheetGesturesEnabled.value,
+      dragHandle = when {
+        dragHandleSlotView != null -> {
+          { with(ComposableScope()) { with(dragHandleSlotView) { Content() } } }
+        }
+        props.showDragHandle.value -> {
+          { BottomSheetDefaults.DragHandle() }
+        }
+        else -> null
+      },
+      properties = ModalBottomSheetProperties(
+        shouldDismissOnBackPress = props.properties.value.shouldDismissOnBackPress,
+        shouldDismissOnClickOutside = props.properties.value.shouldDismissOnClickOutside
+      ),
+      modifier = ModifierRegistry.applyModifiers(props.modifiers.value, appContext, this@Content, globalEventDispatcher)
+    ) {
+      Children(ComposableScope(), filter = { !isSlotView(it) })
+    }
   }
 }

package/android/src/main/java/expo/modules/ui/CarouselView.kt

@@ -4,10 +4,12 @@ import androidx.compose.foundation.gestures.TargetedFlingBehavior
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.carousel.CarouselDefaults
+import androidx.compose.material3.carousel.HorizontalCenteredHeroCarousel
 import androidx.compose.material3.carousel.HorizontalMultiBrowseCarousel
 import androidx.compose.material3.carousel.HorizontalUncontainedCarousel
 import androidx.compose.material3.carousel.rememberCarouselState
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.core.view.size
 import expo.modules.kotlin.records.Field
@@ -18,28 +20,16 @@ import expo.modules.kotlin.views.ComposableScope
 import expo.modules.kotlin.views.ComposeProps
 import expo.modules.kotlin.views.FunctionalComposableScope
 
-enum class CarouselVariant(val value: String) : Enumerable {
-  MULTI_BROWSE("multiBrowse"),
-  UNCONSTRAINED("unconstrained")
-}
-
 enum class FlingBehaviorType(val value: String) : Enumerable {
   SINGLE_ADVANCE("singleAdvance"),
   NO_SNAP("noSnap")
 }
 
 class PaddingValuesRecord : Record {
-  @Field
-  val start: Float? = null
-
-  @Field
-  val top: Float? = null
-
-  @Field
-  val end: Float? = null
-
-  @Field
-  val bottom: Float? = null
+  @Field val start: Float? = null
+  @Field val top: Float? = null
+  @Field val end: Float? = null
+  @Field val bottom: Float? = null
 
   fun toPaddingValues(): PaddingValues {
     return PaddingValues(
@@ -63,77 +53,113 @@ fun paddingValuesFromEither(either: Either<Float, PaddingValuesRecord>?): Paddin
   }
 }
 
-data class CarouselProps(
-  val variant: CarouselVariant? = null,
+data class HorizontalCenteredHeroCarouselProps(
+  val maxItemWidth: Float? = null,
   val itemSpacing: Float? = null,
   val contentPadding: Either<Float, PaddingValuesRecord>? = null,
   val minSmallItemWidth: Float? = null,
   val maxSmallItemWidth: Float? = null,
   val flingBehavior: FlingBehaviorType? = null,
-  val preferredItemWidth: Float? = null,
-  val itemWidth: Float? = null,
+  val userScrollEnabled: Boolean? = null,
   val modifiers: ModifierList = emptyList()
 ) : ComposeProps
 
-const val DEFAULT_MIN_SMALL_ITEM_WIDTH = 40f
-const val DEFAULT_MAX_SMALL_ITEM_WIDTH = 56f
-const val DEFAULT_PREFERRED_ITEM_WIDTH = 200f
-const val DEFAULT_ITEM_WIDTH = 200f
-
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
-fun FunctionalComposableScope.CarouselContent(props: CarouselProps) {
-  val variant = props.variant ?: CarouselVariant.MULTI_BROWSE
-  val modifiers = props.modifiers ?: emptyList()
-  val itemSpacing = (props.itemSpacing ?: 0f).dp
-  val minSmallItemWidth = (props.minSmallItemWidth ?: DEFAULT_MIN_SMALL_ITEM_WIDTH).dp
-
-  // we need to constrain maxSmallItemWidth to be at least minSmallItemWidth or the app will crash
-  val maxSmallItemWidth = minSmallItemWidth.coerceAtLeast((props.maxSmallItemWidth ?: DEFAULT_MAX_SMALL_ITEM_WIDTH).dp)
-  val preferredItemWidth = (props.preferredItemWidth ?: DEFAULT_PREFERRED_ITEM_WIDTH).dp
-  val itemWidth = (props.itemWidth ?: DEFAULT_ITEM_WIDTH).dp
-  val flingBehaviorType = props.flingBehavior ?: FlingBehaviorType.SINGLE_ADVANCE
+fun FunctionalComposableScope.HorizontalCenteredHeroCarouselContent(props: HorizontalCenteredHeroCarouselProps) {
   val contentPadding = paddingValuesFromEither(props.contentPadding)
-
   val carouselState = rememberCarouselState(0) { view.size }
+  val flingBehavior: TargetedFlingBehavior = when (props.flingBehavior ?: FlingBehaviorType.SINGLE_ADVANCE) {
+    FlingBehaviorType.SINGLE_ADVANCE -> CarouselDefaults.singleAdvanceFlingBehavior(state = carouselState)
+    FlingBehaviorType.NO_SNAP -> CarouselDefaults.noSnapFlingBehavior()
+  }
+
+  val minSmallItemWidth = props.minSmallItemWidth?.dp ?: CarouselDefaults.MinSmallItemSize
+  val maxSmallItemWidth = (props.maxSmallItemWidth?.dp ?: CarouselDefaults.MaxSmallItemSize).coerceAtLeast(minSmallItemWidth)
+
+  HorizontalCenteredHeroCarousel(
+    state = carouselState,
+    modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher),
+    maxItemWidth = props.maxItemWidth?.dp ?: Dp.Unspecified,
+    itemSpacing = (props.itemSpacing ?: 0f).dp,
+    flingBehavior = flingBehavior,
+    userScrollEnabled = props.userScrollEnabled ?: true,
+    minSmallItemWidth = minSmallItemWidth,
+    maxSmallItemWidth = maxSmallItemWidth,
+    contentPadding = contentPadding
+  ) { itemIndex ->
+    Child(ComposableScope(), itemIndex)
+  }
+}
+
+data class HorizontalMultiBrowseCarouselProps(
+  val preferredItemWidth: Float = 200f,
+  val itemSpacing: Float? = null,
+  val contentPadding: Either<Float, PaddingValuesRecord>? = null,
+  val minSmallItemWidth: Float? = null,
+  val maxSmallItemWidth: Float? = null,
+  val flingBehavior: FlingBehaviorType? = null,
+  val userScrollEnabled: Boolean? = null,
+  val modifiers: ModifierList = emptyList()
+) : ComposeProps
 
-  val flingBehavior: TargetedFlingBehavior = when (flingBehaviorType) {
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun FunctionalComposableScope.HorizontalMultiBrowseCarouselContent(props: HorizontalMultiBrowseCarouselProps) {
+  val contentPadding = paddingValuesFromEither(props.contentPadding)
+  val carouselState = rememberCarouselState(0) { view.size }
+  val flingBehavior: TargetedFlingBehavior = when (props.flingBehavior ?: FlingBehaviorType.SINGLE_ADVANCE) {
     FlingBehaviorType.SINGLE_ADVANCE -> CarouselDefaults.singleAdvanceFlingBehavior(state = carouselState)
     FlingBehaviorType.NO_SNAP -> CarouselDefaults.noSnapFlingBehavior()
   }
 
-  @Composable
-  fun MultiBrowseCarouselComposable() {
-    HorizontalMultiBrowseCarousel(
-      state = carouselState,
-      preferredItemWidth = preferredItemWidth,
-      modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher),
-      itemSpacing = itemSpacing,
-      flingBehavior = flingBehavior,
-      minSmallItemWidth = minSmallItemWidth,
-      maxSmallItemWidth = maxSmallItemWidth,
-      contentPadding = contentPadding
-    ) { itemIndex ->
-      Child(ComposableScope(), itemIndex)
-    }
+  val minSmallItemWidth = props.minSmallItemWidth?.dp ?: CarouselDefaults.MinSmallItemSize
+  val maxSmallItemWidth = (props.maxSmallItemWidth?.dp ?: CarouselDefaults.MaxSmallItemSize).coerceAtLeast(minSmallItemWidth)
+
+  HorizontalMultiBrowseCarousel(
+    state = carouselState,
+    preferredItemWidth = props.preferredItemWidth.dp,
+    modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher),
+    itemSpacing = (props.itemSpacing ?: 0f).dp,
+    flingBehavior = flingBehavior,
+    userScrollEnabled = props.userScrollEnabled ?: true,
+    minSmallItemWidth = minSmallItemWidth,
+    maxSmallItemWidth = maxSmallItemWidth,
+    contentPadding = contentPadding
+  ) { itemIndex ->
+    Child(ComposableScope(), itemIndex)
   }
+}
 
-  @Composable
-  fun UnconstrainedCarouselComposable() {
-    HorizontalUncontainedCarousel(
-      state = carouselState,
-      itemWidth = itemWidth,
-      modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher),
-      itemSpacing = itemSpacing,
-      flingBehavior = flingBehavior,
-      contentPadding = contentPadding
-    ) { itemIndex ->
-      Child(ComposableScope(), itemIndex)
-    }
+data class HorizontalUncontainedCarouselProps(
+  val itemWidth: Float = 200f,
+  val itemSpacing: Float? = null,
+  val contentPadding: Either<Float, PaddingValuesRecord>? = null,
+  val flingBehavior: FlingBehaviorType? = null,
+  val userScrollEnabled: Boolean? = null,
+  val modifiers: ModifierList = emptyList()
+) : ComposeProps
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun FunctionalComposableScope.HorizontalUncontainedCarouselContent(props: HorizontalUncontainedCarouselProps) {
+  val contentPadding = paddingValuesFromEither(props.contentPadding)
+  val carouselState = rememberCarouselState(0) { view.size }
+  // Uncontained defaults to noSnap, unlike the other two which default to singleAdvance
+  val flingBehavior: TargetedFlingBehavior = when (props.flingBehavior ?: FlingBehaviorType.NO_SNAP) {
+    FlingBehaviorType.SINGLE_ADVANCE -> CarouselDefaults.singleAdvanceFlingBehavior(state = carouselState)
+    FlingBehaviorType.NO_SNAP -> CarouselDefaults.noSnapFlingBehavior()
   }
 
-  when (variant) {
-    CarouselVariant.MULTI_BROWSE -> MultiBrowseCarouselComposable()
-    CarouselVariant.UNCONSTRAINED -> UnconstrainedCarouselComposable()
+  HorizontalUncontainedCarousel(
+    state = carouselState,
+    itemWidth = props.itemWidth.dp,
+    modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher),
+    itemSpacing = (props.itemSpacing ?: 0f).dp,
+    flingBehavior = flingBehavior,
+    userScrollEnabled = props.userScrollEnabled ?: true,
+    contentPadding = contentPadding
+  ) { itemIndex ->
+    Child(ComposableScope(), itemIndex)
   }
 }

package/android/src/main/java/expo/modules/ui/ExpoUIModule.kt

@@ -6,6 +6,7 @@ import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
 import androidx.compose.material3.SwitchDefaults
 import androidx.compose.material3.ToggleButtonDefaults
 import androidx.compose.runtime.remember
+import expo.modules.kotlin.functions.Coroutine
 import expo.modules.kotlin.modules.Module
 import expo.modules.kotlin.modules.ModuleDefinition
 import expo.modules.kotlin.viewevent.getValue
@@ -92,11 +93,11 @@ class ExpoUIModule : Module() {
 
     //region Expo UI views
 
-    ExpoUIView("ModalBottomSheetView", events = {
+    View(ModalBottomSheetView::class) {
       Events("onDismissRequest")
-    }) { props: ModalBottomSheetProps ->
-      val onDismissRequest by remember { EventDispatcher<Unit>() }
-      ModalBottomSheetContent(props) { onDismissRequest(Unit) }
+      AsyncFunction("hide") Coroutine { view: ModalBottomSheetView ->
+        view.hide()
+      }
     }
 
     ExpoUIView("SingleChoiceSegmentedButtonRowView") { props: SingleChoiceSegmentedButtonRowProps ->
@@ -311,8 +312,16 @@ class ExpoUIModule : Module() {
       PullToRefreshBoxContent(props) { onRefresh(Unit) }
     }
 
-    ExpoUIView("CarouselView") { props: CarouselProps ->
-      CarouselContent(props)
+    ExpoUIView("HorizontalCenteredHeroCarouselView") { props: HorizontalCenteredHeroCarouselProps ->
+      HorizontalCenteredHeroCarouselContent(props)
+    }
+
+    ExpoUIView("HorizontalMultiBrowseCarouselView") { props: HorizontalMultiBrowseCarouselProps ->
+      HorizontalMultiBrowseCarouselContent(props)
+    }
+
+    ExpoUIView("HorizontalUncontainedCarouselView") { props: HorizontalUncontainedCarouselProps ->
+      HorizontalUncontainedCarouselContent(props)
     }
 
     ExpoUIView("AlertDialogView", events = {

package/android/src/main/java/expo/modules/ui/TextInputView.kt

@@ -1,7 +1,9 @@
 package expo.modules.ui
 
+import android.annotation.SuppressLint
 import android.content.Context
 import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.material3.OutlinedTextField
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextField
 import androidx.compose.runtime.Composable
@@ -18,6 +20,7 @@ import expo.modules.kotlin.views.ExpoComposeView
 data class TextInputProps(
   val defaultValue: MutableState<String> = mutableStateOf(""),
   val placeholder: MutableState<String> = mutableStateOf(""),
+  val variant: MutableState<String> = mutableStateOf("filled"),
   val multiline: MutableState<Boolean> = mutableStateOf(false),
   val numberOfLines: MutableState<Int?> = mutableStateOf(null),
   val keyboardType: MutableState<String> = mutableStateOf("default"),
@@ -52,6 +55,7 @@ private fun String.autoCapitalize(): KeyboardCapitalization {
   }
 }
 
+@SuppressLint("ViewConstructor")
 class TextInputView(context: Context, appContext: AppContext) :
   ExpoComposeView<TextInputProps>(context, appContext) {
   override val props = TextInputProps()
@@ -68,21 +72,41 @@ class TextInputView(context: Context, appContext: AppContext) :
 
   @Composable
   override fun ComposableScope.Content() {
-    TextField(
-      value = requireNotNull(textState.value),
-      onValueChange = {
-        textState.value = it
-        onValueChanged(mapOf("value" to it))
-      },
-      placeholder = { Text(props.placeholder.value) },
-      maxLines = if (props.multiline.value) props.numberOfLines.value ?: Int.MAX_VALUE else 1,
-      singleLine = !props.multiline.value,
-      keyboardOptions = KeyboardOptions.Default.copy(
-        keyboardType = props.keyboardType.value.keyboardType(),
-        autoCorrectEnabled = props.autocorrection.value,
-        capitalization = props.autoCapitalize.value.autoCapitalize()
-      ),
-      modifier = ModifierRegistry.applyModifiers(props.modifiers.value, appContext, this@Content, globalEventDispatcher)
+    val value = textState.value ?: props.defaultValue.value
+    val onValueChange: (String) -> Unit = {
+      textState.value = it
+      onValueChanged(mapOf("value" to it))
+    }
+    val placeholder: @Composable () -> Unit = { Text(props.placeholder.value) }
+    val maxLines = if (props.multiline.value) props.numberOfLines.value ?: Int.MAX_VALUE else 1
+    val singleLine = !props.multiline.value
+    val keyboardOptions = KeyboardOptions.Default.copy(
+      keyboardType = props.keyboardType.value.keyboardType(),
+      autoCorrectEnabled = props.autocorrection.value,
+      capitalization = props.autoCapitalize.value.autoCapitalize()
     )
+    val modifier = ModifierRegistry.applyModifiers(props.modifiers.value, appContext, this@Content, globalEventDispatcher)
+
+    if (props.variant.value == "outlined") {
+      OutlinedTextField(
+        value = value,
+        onValueChange = onValueChange,
+        placeholder = placeholder,
+        maxLines = maxLines,
+        singleLine = singleLine,
+        keyboardOptions = keyboardOptions,
+        modifier = modifier
+      )
+    } else {
+      TextField(
+        value = value,
+        onValueChange = onValueChange,
+        placeholder = placeholder,
+        maxLines = maxLines,
+        singleLine = singleLine,
+        keyboardOptions = keyboardOptions,
+        modifier = modifier
+      )
+    }
   }
 }

package/build/datetime-picker/DateTimePicker.android.d.ts

@@ -0,0 +1,3 @@
+import { type DateTimePickerProps } from './types';
+export declare function DateTimePicker(props: DateTimePickerProps): import("react").JSX.Element;
+//# sourceMappingURL=DateTimePicker.android.d.ts.map

package/build/datetime-picker/DateTimePicker.android.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimePicker.android.d.ts","sourceRoot":"","sources":["../../src/datetime-picker/DateTimePicker.android.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgC,KAAK,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAmCjF,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,+BA0FxD"}

package/build/datetime-picker/DateTimePicker.d.ts

@@ -0,0 +1,3 @@
+import { type DateTimePickerProps } from './types';
+export declare function DateTimePicker(props: DateTimePickerProps): import("react").JSX.Element;
+//# sourceMappingURL=DateTimePicker.d.ts.map

package/build/datetime-picker/DateTimePicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimePicker.d.ts","sourceRoot":"","sources":["../../src/datetime-picker/DateTimePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgC,KAAK,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAoCjF,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,+BAyDxD"}

package/build/datetime-picker/DateTimePicker.web.d.ts

@@ -0,0 +1,3 @@
+import type { DateTimePickerProps } from './types';
+export declare function DateTimePicker(_props: DateTimePickerProps): null;
+//# sourceMappingURL=DateTimePicker.web.d.ts.map

package/build/datetime-picker/DateTimePicker.web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimePicker.web.d.ts","sourceRoot":"","sources":["../../src/datetime-picker/DateTimePicker.web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAEnD,wBAAgB,cAAc,CAAC,MAAM,EAAE,mBAAmB,QAEzD"}

package/build/datetime-picker/index.d.ts

@@ -0,0 +1,5 @@
+import { DateTimePicker } from './DateTimePicker';
+export { type DateTimePickerEvent, type DateTimePickerChangeEvent, type DateTimePickerProps, } from './types';
+export default DateTimePicker;
+export { DateTimePicker };
+//# sourceMappingURL=index.d.ts.map

package/build/datetime-picker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/datetime-picker/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,OAAO,EACL,KAAK,mBAAmB,EACxB,KAAK,yBAAyB,EAC9B,KAAK,mBAAmB,GACzB,MAAM,SAAS,CAAC;AAEjB,eAAe,cAAc,CAAC;AAE9B,OAAO,EAAE,cAAc,EAAE,CAAC"}