@expo/ui 56.0.16 → 56.0.17

package/CHANGELOG.md

@@ -10,6 +10,22 @@
 
 ### 💡 Others
 
+## 56.0.17 — 2026-06-10
+
+### 🛠 Breaking changes
+
+- [universal][android] Use `BasicTextField` component instead of Filled Material TextField. ([#46442](https://github.com/expo/expo/pull/46442) by [@nishan](https://github.com/intergalacticspacehighway))
+
+### 🎉 New features
+
+- [iOS] Added the SwiftUI `imageScale` modifier to scale SF Symbols within a view relative to the surrounding text (`small`, `medium`, `large`). ([#46774](https://github.com/expo/expo/pull/46774) by [@ramonclaudio](https://github.com/ramonclaudio))
+- [jetpack-compose] Added `onGloballyPositioned` modifier, which reports a composable's window position and size. ([#46744](https://github.com/expo/expo/pull/46744) by [@nishan](https://github.com/intergalacticspacehighway))
+- [iOS] Extended the SwiftUI `onGeometryChange` modifier to also report the view's global position (`x`/`y`) alongside its size. ([#46744](https://github.com/expo/expo/pull/46744) by [@nishan](https://github.com/intergalacticspacehighway))
+- [iOS] Added the SwiftUI `minimumScaleFactor` modifier to let text shrink down to a given fraction of its size before truncating. ([#46740](https://github.com/expo/expo/pull/46740) by [@nishan](https://github.com/intergalacticspacehighway))
+- [iOS][android] Added React Compiler-friendly `get()` / `set()` accessors to `useNativeState`, as an alternative to reading and writing `.value`. ([#46690](https://github.com/expo/expo/pull/46692) by [@nishan](https://github.com/intergalacticspacehighway))
+- [jetpack-compose] Added `BasicTextField` component. ([#46442](https://github.com/expo/expo/pull/46442) by [@nishan](https://github.com/intergalacticspacehighway))
+- [iOS] Added the SwiftUI `accessibilityInputLabels` modifier to set alternative spoken phrases Voice Control uses to refer to a view (for example "Hang up" for an "End" button). ([#46661](https://github.com/expo/expo/pull/46661) by [@ramonclaudio](https://github.com/ramonclaudio))
+
 ## 56.0.16 — 2026-06-05
 
 ### 🎉 New features
@@ -28,7 +44,13 @@
 
 ### 🐛 Bug fixes
 
+- [android] Fix React Native touchables (e.g. `Pressable`) on `community/pager-view` pages not responding, or triggering the wrong page's handler, after navigating between pages. ([#46778](https://github.com/expo/expo/pull/46778) by [@nishan](https://github.com/intergalacticspacehighway))
+- [iOS] Fix `font`, `dynamicTypeSize`, and `resizable` modifiers not applying to the SwiftUI `Image`. SF Symbols scale with Dynamic Type when a `font` modifier sets a `textStyle`. ([#46714](https://github.com/expo/expo/pull/46714) by [@ramonclaudio](https://github.com/ramonclaudio))
+- [android] Fix React Native `ScrollView` nested scrolling inside `BottomSheet`. ([#46544](https://github.com/expo/expo/pull/46544) by [@nishan](https://github.com/intergalacticspacehighway))
+- [jetpack-compose] Fix layout shift when `Host` with `matchContents` is used inside React Native Screens. ([#46604](https://github.com/expo/expo/pull/46604) by [@nishan](https://github.com/intergalacticspacehighway))
+- [iOS] Fix `PagerView` offsetting `ScrollView` by safe area insets. ([#46637](https://github.com/expo/expo/pull/46637) by [@nishan](https://github.com/intergalacticspacehighway))
 - [iOS] Fix `SegmentedControl` being overlapped by sibling components inside a `ScrollView`, by disabling the `Host` safe area insets. ([#46575](https://github.com/expo/expo/pull/46575) by [@nishan](https://github.com/intergalacticspacehighway))
+- [iOS] Fix the community `DateTimePicker`, `MenuView`, `Picker`, and `Slider` applying safe area insets (including keyboard avoidance) twice, by disabling the `Host` safe area insets (`ignoreSafeArea="all"`). ([#46721](https://github.com/expo/expo/pull/46721) by [@nishan](https://github.com/intergalacticspacehighway))
 - [jetpack-compose] Fix `TextField` jiggling the surrounding content while its label animates on focus (a Material 3 expressive motion spring overshoot). ([#46568](https://github.com/expo/expo/pull/46568) by [@nishan](https://github.com/intergalacticspacehighway))
 - [iOS] Fix `BottomSheet` animating open from the bottom-left corner in `fitToContents` mode. ([#46546](https://github.com/expo/expo/pull/46546) by [@nishan](https://github.com/intergalacticspacehighway))
 - [iOS] Fix `TextField` and `SecureField` worklet `onTextChange` firing more than once per keystroke (when a change triggers reformatting) and on programmatic text updates. ([#46483](https://github.com/expo/expo/pull/46483) by [@nishan](https://github.com/intergalacticspacehighway))

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 = '56.0.16'
+version = '56.0.17'
 
 android {
   namespace "expo.modules.ui"
   defaultConfig {
     versionCode 1
-    versionName "56.0.16"
+    versionName "56.0.17"
     testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
   }
   buildFeatures {

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

@@ -36,6 +36,15 @@ import expo.modules.ui.menu.DropdownMenuItemProps
 import expo.modules.kotlin.jni.worklets.Worklet
 import expo.modules.ui.state.ObservableState
 import expo.modules.ui.state.WorkletCallback
+import expo.modules.ui.textfield.BasicTextFieldContent
+import expo.modules.ui.textfield.BasicTextFieldProps
+import expo.modules.ui.textfield.InnerTextFieldView
+import expo.modules.ui.textfield.KeyboardActionEvent
+import expo.modules.ui.textfield.PlaceholderView
+import expo.modules.ui.textfield.TextFieldContent
+import expo.modules.ui.textfield.TextFieldProps
+import expo.modules.ui.textfield.TextFieldSelectionPayload
+import expo.modules.ui.textfield.TextFieldValuePayload
 import expo.modules.ui.menu.ExposedDropdownMenuBoxContent
 import expo.modules.ui.menu.ExposedDropdownMenuBoxProps
 import expo.modules.ui.menu.ExposedDropdownMenuContent
@@ -109,8 +118,7 @@ class ExpoUIModule : Module() {
     //region Views use expo-modules-core DSL for uncommon features
 
     View(HostView::class) {
-      // See ShadowNodeSyncFlush.kt for why onExpoUISyncFlush is needed.
-      Events("onLayoutContent", "onExpoUISyncFlush")
+      Events("onLayoutContent")
 
       OnViewDidUpdateProps { view ->
         view.onViewDidUpdateProps()
@@ -147,14 +155,13 @@ class ExpoUIModule : Module() {
       colorScheme.toTokenMap()
     }
 
-    View(RNHostView::class) {
-      // See ShadowNodeSyncFlush.kt for why this internal phantom event is needed.
-      Events("onExpoUISyncFlush")
-    }
+    View(RNHostView::class)
 
     View(SlotView::class) {
       Events("onSlotEvent")
     }
+    View(InnerTextFieldView::class)
+    View(PlaceholderView::class)
     View(IconView::class)
     View(LazyColumnView::class)
     View(LazyRowView::class)
@@ -697,6 +704,33 @@ class ExpoUIModule : Module() {
       }
     }
 
+    ExpoUIView<BasicTextFieldProps>("BasicTextFieldView") {
+      val setText by AsyncFunction<String>()
+      val setSelection by AsyncFunction<Int, Int>()
+      val clear by AsyncFunction()
+      val focus by AsyncFunction()
+      val blur by AsyncFunction()
+      val onValueChange by Event<TextFieldValuePayload>()
+      val onFocusChanged by Event<GenericEventPayload1<Boolean>>()
+      val onKeyboardAction by Event<KeyboardActionEvent>()
+      val onSelectionChange by Event<TextFieldSelectionPayload>()
+
+      Content { props ->
+        BasicTextFieldContent(
+          props,
+          setText,
+          setSelection,
+          clear,
+          focus,
+          blur,
+          onValueChanged = { onValueChange(it) },
+          onFocusChange = { onFocusChanged(it) },
+          onKeyboardActionTriggered = { onKeyboardAction(it) },
+          onSelectionChanged = { onSelectionChange(it) }
+        )
+      }
+    }
+
     ExpoUIView<RadioButtonProps>("RadioButtonView") {
       val onButtonPressed by Event<Unit>()
 

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

@@ -193,7 +193,6 @@ internal class HostView(context: Context, appContext: AppContext) :
             if (constraints.maxWidth == 0) widthDp else Double.NaN,
             if (constraints.maxHeight == 0) heightDp else Double.NaN
           )
-          flushPendingStateUpdates()
         }
       }
 
@@ -222,7 +221,6 @@ internal class HostView(context: Context, appContext: AppContext) :
         val styleWidth = if (matchContentsHorizontal == true && width > 0) width else null
         val styleHeight = if (matchContentsVertical == true && height > 0) height else null
         shadowNodeProxy.setStyleSize(styleWidth?.toDouble(), styleHeight?.toDouble())
-        flushPendingStateUpdates()
       }
 
       onLayoutContent(LayoutContentEvent(width.toDouble(), height.toDouble()))

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

@@ -57,8 +57,10 @@ import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.graphics.TransformOrigin
 import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.graphics.shadow.Shadow
+import androidx.compose.ui.layout.onGloballyPositioned
 import androidx.compose.ui.layout.onSizeChanged
 import androidx.compose.ui.layout.onVisibilityChanged
+import androidx.compose.ui.layout.positionInWindow
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.semantics.Role
 import androidx.compose.ui.semantics.contentType
@@ -692,6 +694,24 @@ object ModifierRegistry {
       }
     }
 
+    register("onGloballyPositioned") { _, _, _, eventDispatcher ->
+      val density = LocalDensity.current
+      Modifier.onGloballyPositioned { coordinates ->
+        val position = coordinates.positionInWindow()
+        with(density) {
+          eventDispatcher(
+            "onGloballyPositioned",
+            mapOf(
+              "x" to position.x.toDp().value,
+              "y" to position.y.toDp().value,
+              "width" to coordinates.size.width.toDp().value,
+              "height" to coordinates.size.height.toDp().value
+            )
+          )
+        }
+      }
+    }
+
     register("clickable") { map, _, _, eventDispatcher ->
       val params = recordFromMap<ClickableParams>(map)
       if (params.indication) {

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

@@ -19,6 +19,9 @@ import androidx.compose.ui.layout.onSizeChanged
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.unit.IntSize
 import androidx.compose.ui.viewinterop.AndroidView
+import androidx.core.view.NestedScrollingChild3
+import androidx.core.view.NestedScrollingChildHelper
+import androidx.core.view.ViewCompat
 import com.facebook.react.bridge.ReactContext
 import com.facebook.react.common.annotations.UnstableReactNativeAPI
 import com.facebook.react.config.ReactFeatureFlags
@@ -158,7 +161,6 @@ internal class RNHostView(context: Context, appContext: AppContext) :
           size.width.toDp().value.toDouble(),
           size.height.toDp().value.toDouble()
         )
-        flushPendingStateUpdates()
       }
     }
   }
@@ -168,13 +170,30 @@ internal class RNHostView(context: Context, appContext: AppContext) :
  * A thin FrameLayout that intercepts touch events and dispatches them to JS via
  * JSTouchDispatcher/JSPointerDispatcher, replicating the pattern from React Native's
  * DialogRootViewGroup in ReactModalHostView.
+ * Implements NestedScrollingChild3 to forward scroll events up to the parent Compose view, because Compose only listens for NestedScrollingChild3 nested-scroll events.
  */
 private class TouchDispatchingRootViewGroup(
   context: Context
-) : FrameLayout(context), RootView {
+) : FrameLayout(context), RootView, NestedScrollingChild3 {
   private val jsTouchDispatcher = JSTouchDispatcher(this)
   private var jsPointerDispatcher: JSPointerDispatcher? = null
 
+  // The "child face": this helper does the real work of finding the nearest scrolling-aware
+  // ancestor (Compose, here) and forwarding our scroll offers to it.
+  private val childHelper = NestedScrollingChildHelper(this)
+
+  // How far the sheet has slid this view on-screen since the gesture began. Used to keep the
+  // FlatList's touch coordinates coherent while the view moves under the finger.
+  private val gestureStartLocation = IntArray(2)
+  private val currentLocation = IntArray(2)
+  private var trackingGestureOffset = false
+
+  // True if the sheet consumed scroll on the most recent drag frame; drives the settle decision.
+  private var sheetMovingOnLastDragFrame = false
+
+  // True once a fling was dispatched this gesture, so the gentle-release settle doesn't double-fire.
+  private var flingHandledThisGesture = false
+
   var eventDispatcher: EventDispatcher? = null
 
   private val reactContext: ThemedReactContext
@@ -184,6 +203,7 @@ private class TouchDispatchingRootViewGroup(
     if (ReactFeatureFlags.dispatchPointerEvents) {
       jsPointerDispatcher = JSPointerDispatcher(this)
     }
+    childHelper.isNestedScrollingEnabled = true
   }
 
   override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
@@ -200,6 +220,38 @@ private class TouchDispatchingRootViewGroup(
     // and we must not override those values.
   }
 
+  override fun dispatchTouchEvent(ev: MotionEvent): Boolean {
+    if (ev.actionMasked == MotionEvent.ACTION_DOWN) {
+      // dispatchTouchEvent is the true start of every gesture, so reset all per-gesture state here.
+      getLocationInWindow(gestureStartLocation)
+      trackingGestureOffset = true
+      sheetMovingOnLastDragFrame = false
+      flingHandledThisGesture = false
+    }
+
+    // While a nested scroll is in flight the sheet may be sliding this whole view up/down. Re-express
+    // every event as if the view hadn't moved, so the FlatList's own scroll tracking stays coherent.
+    val handled = if (trackingGestureOffset && hasNestedScrollingParent()) {
+      getLocationInWindow(currentLocation)
+      val dy = currentLocation[1] - gestureStartLocation[1]
+      if (dy != 0) {
+        ev.offsetLocation(0f, dy.toFloat())
+        val result = super.dispatchTouchEvent(ev)
+        ev.offsetLocation(0f, -dy.toFloat())
+        result
+      } else {
+        super.dispatchTouchEvent(ev)
+      }
+    } else {
+      super.dispatchTouchEvent(ev)
+    }
+
+    if (ev.actionMasked == MotionEvent.ACTION_UP || ev.actionMasked == MotionEvent.ACTION_CANCEL) {
+      trackingGestureOffset = false
+    }
+    return handled
+  }
+
   override fun onInterceptTouchEvent(event: MotionEvent): Boolean {
     eventDispatcher?.let { dispatcher ->
       jsTouchDispatcher.handleTouchEvent(event, dispatcher, reactContext)
@@ -241,12 +293,136 @@ private class TouchDispatchingRootViewGroup(
     jsPointerDispatcher?.onChildEndedNativeGesture()
   }
 
+  override fun handleException(t: Throwable) {
+    reactContext.reactApplicationContext.handleException(RuntimeException(t))
+  }
+
   override fun requestDisallowInterceptTouchEvent(disallowIntercept: Boolean) {
-    // No-op - override to still receive events in onInterceptTouchEvent
-    // even when a child view disallows interception
+    // Forward the request up so Compose learns the list claimed the gesture and its own sheet-drag
+    // yields. But don't call super: setting our own FLAG_DISALLOW_INTERCEPT would skip
+    // onInterceptTouchEvent, which must keep firing to dispatch touches to JS (the reason #43716
+    // added this override).
+    parent?.requestDisallowInterceptTouchEvent(disallowIntercept)
   }
 
-  override fun handleException(t: Throwable) {
-    reactContext.reactApplicationContext.handleException(RuntimeException(t))
+  // --- Parent face: catch the FlatList's scroll offers and relay them up via the child face. ---
+  override fun onStartNestedScroll(child: View, target: View, axes: Int): Boolean =
+    axes and ViewCompat.SCROLL_AXIS_VERTICAL != 0
+
+  override fun onNestedScrollAccepted(child: View, target: View, axes: Int) {
+    super.onNestedScrollAccepted(child, target, axes)
+    startNestedScroll(axes)
   }
+
+  override fun onNestedPreScroll(target: View, dx: Int, dy: Int, consumed: IntArray) {
+    // Expand path: offer the delta to the sheet (above us) before the list scrolls with the rest.
+    dispatchNestedPreScroll(dx, dy, consumed, null)
+    // Did the sheet move this frame? consumed[1] is what it consumed in y axis.
+    sheetMovingOnLastDragFrame = consumed[1] != 0
+  }
+
+  override fun onNestedScroll(target: View, dxConsumed: Int, dyConsumed: Int, dxUnconsumed: Int, dyUnconsumed: Int) {
+    // Collapse path: after the list scrolled what it could, hand the leftover up to the sheet.
+    // Use the (…, type, consumed) variant so we can read how much the sheet ate (consumed[1]).
+    val consumed = IntArray(2)
+    dispatchNestedScroll(dxConsumed, dyConsumed, dxUnconsumed, dyUnconsumed, null, ViewCompat.TYPE_TOUCH, consumed)
+    if (consumed[1] != 0) sheetMovingOnLastDragFrame = true
+  }
+
+  override fun onNestedPreFling(target: View, velocityX: Float, velocityY: Float): Boolean {
+    // A real fling is being dispatched, so its settle is already in motion; note that so the
+    // gentle-release fallback in onStopNestedScroll doesn't add a second, redundant settle.
+    flingHandledThisGesture = true
+    val composeConsumed = dispatchNestedPreFling(velocityX, velocityY)
+    // RN's ScrollView wants a synchronous yes/no, but Compose's pre-fling is async (it returns false
+    // now and settles later). So decide here: if the sheet was mid-move and this is an up-flick
+    // (velocityY > 0), swallow the list's fling so the sheet finishes expanding. A down-flick passes
+    // through so it can still settle/collapse.
+    return composeConsumed || (sheetMovingOnLastDragFrame && velocityY > 0)
+  }
+
+  override fun onNestedFling(target: View, velocityX: Float, velocityY: Float, consumed: Boolean): Boolean =
+    // Post-fling: hand the leftover flick up so the sheet can fling to its next anchor.
+    dispatchNestedFling(velocityX, velocityY, consumed)
+
+  override fun onStopNestedScroll(target: View) {
+    // Must run BEFORE stopNestedScroll() so Compose is still our parent and can receive the fling.
+    settleSheetIfNoFling()
+    super.onStopNestedScroll(target)
+    stopNestedScroll()
+  }
+
+  // A slow (sub-threshold) release never flings, so the sheet would hang where it was dragged. If the
+  // sheet moved this gesture and no real fling settled it, dispatch a zero-velocity fling so the
+  // holder snaps it to the nearest anchor.
+  private fun settleSheetIfNoFling() {
+    if (sheetMovingOnLastDragFrame && !flingHandledThisGesture) {
+      flingHandledThisGesture = true
+      dispatchNestedFling(0f, 0f, false)
+    }
+  }
+
+  // --- Child face: the wrapper's upstream voice. The parent hooks above relay through these. ---
+  // So we listen to ViewGroup nested scroll methods and call below methods from them,
+  // which essentially converts regular Nested scrolling methods to NestedScrollingChild3.
+  override fun setNestedScrollingEnabled(enabled: Boolean) {
+    childHelper.isNestedScrollingEnabled = enabled
+  }
+  override fun isNestedScrollingEnabled(): Boolean = childHelper.isNestedScrollingEnabled
+  override fun startNestedScroll(axes: Int): Boolean = childHelper.startNestedScroll(axes)
+  override fun startNestedScroll(axes: Int, type: Int): Boolean = childHelper.startNestedScroll(axes, type)
+  override fun stopNestedScroll() = childHelper.stopNestedScroll()
+  override fun stopNestedScroll(type: Int) = childHelper.stopNestedScroll(type)
+  override fun hasNestedScrollingParent(): Boolean = childHelper.hasNestedScrollingParent()
+  override fun hasNestedScrollingParent(type: Int): Boolean = childHelper.hasNestedScrollingParent(type)
+
+  override fun dispatchNestedScroll(
+    dxConsumed: Int,
+    dyConsumed: Int,
+    dxUnconsumed: Int,
+    dyUnconsumed: Int,
+    offsetInWindow: IntArray?
+  ): Boolean = childHelper.dispatchNestedScroll(dxConsumed, dyConsumed, dxUnconsumed, dyUnconsumed, offsetInWindow)
+
+  override fun dispatchNestedScroll(
+    dxConsumed: Int,
+    dyConsumed: Int,
+    dxUnconsumed: Int,
+    dyUnconsumed: Int,
+    offsetInWindow: IntArray?,
+    type: Int
+  ): Boolean = childHelper.dispatchNestedScroll(dxConsumed, dyConsumed, dxUnconsumed, dyUnconsumed, offsetInWindow, type)
+
+  override fun dispatchNestedScroll(
+    dxConsumed: Int,
+    dyConsumed: Int,
+    dxUnconsumed: Int,
+    dyUnconsumed: Int,
+    offsetInWindow: IntArray?,
+    type: Int,
+    consumed: IntArray
+  ) {
+    childHelper.dispatchNestedScroll(dxConsumed, dyConsumed, dxUnconsumed, dyUnconsumed, offsetInWindow, type, consumed)
+  }
+
+  override fun dispatchNestedPreScroll(
+    dx: Int,
+    dy: Int,
+    consumed: IntArray?,
+    offsetInWindow: IntArray?
+  ): Boolean = childHelper.dispatchNestedPreScroll(dx, dy, consumed, offsetInWindow)
+
+  override fun dispatchNestedPreScroll(
+    dx: Int,
+    dy: Int,
+    consumed: IntArray?,
+    offsetInWindow: IntArray?,
+    type: Int
+  ): Boolean = childHelper.dispatchNestedPreScroll(dx, dy, consumed, offsetInWindow, type)
+
+  override fun dispatchNestedFling(velocityX: Float, velocityY: Float, consumed: Boolean): Boolean =
+    childHelper.dispatchNestedFling(velocityX, velocityY, consumed)
+
+  override fun dispatchNestedPreFling(velocityX: Float, velocityY: Float): Boolean =
+    childHelper.dispatchNestedPreFling(velocityX, velocityY)
 }

package/android/src/main/java/expo/modules/ui/textfield/BasicTextField.kt

@@ -0,0 +1,203 @@
+package expo.modules.ui.textfield
+
+import android.annotation.SuppressLint
+import android.content.Context
+import android.graphics.Color
+import androidx.compose.foundation.text.BasicTextField
+import androidx.compose.foundation.text.selection.LocalTextSelectionColors
+import androidx.compose.foundation.text.selection.TextSelectionColors
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.compositionLocalOf
+import androidx.compose.ui.graphics.SolidColor
+import androidx.compose.ui.graphics.isUnspecified
+import expo.modules.kotlin.AppContext
+import expo.modules.kotlin.views.AsyncFunctionHandle
+import expo.modules.kotlin.views.AsyncFunctionHandle2
+import expo.modules.kotlin.views.ComposableScope
+import expo.modules.kotlin.views.ComposeProps
+import expo.modules.kotlin.views.ExpoComposeView
+import expo.modules.kotlin.views.FunctionalComposableScope
+import expo.modules.kotlin.views.OptimizedComposeProps
+import expo.modules.ui.GenericEventPayload1
+import expo.modules.ui.ModifierList
+import expo.modules.ui.composeOrNull
+import expo.modules.ui.findChildSlotView
+import expo.modules.ui.renderSlot
+import expo.modules.ui.state.ObservableState
+import expo.modules.ui.state.WorkletCallback
+
+// region Inner text field plumbing
+
+/**
+ * Carries the framework-provided `innerTextField` lambda from `BasicTextField`'s
+ * `decorationBox` down to the [InnerTextFieldView] marker, wherever the JS
+ * decoration places it. `null` when read outside a decoration (the marker then
+ * renders nothing rather than crashing).
+ */
+val LocalInnerTextField = compositionLocalOf<(@Composable () -> Unit)?> { null }
+
+class InnerTextFieldProps : ComposeProps
+
+/**
+ * Slot view for `BasicTextField.InnerTextField`.
+ */
+@SuppressLint("ViewConstructor")
+class InnerTextFieldView(context: Context, appContext: AppContext) :
+  ExpoComposeView<InnerTextFieldProps>(context, appContext) {
+  override val props = InnerTextFieldProps()
+
+  @Composable
+  override fun ComposableScope.Content() {
+    LocalInnerTextField.current?.invoke()
+  }
+}
+
+// endregion Inner text field plumbing
+
+// region Placeholder plumbing
+
+/**
+ * Tracks whether textfield is empty, in order to render placeholder slot
+ */
+val LocalTextFieldIsEmpty = compositionLocalOf { true }
+
+class PlaceholderProps : ComposeProps
+
+/**
+ * Slot view for `BasicTextField.Placeholder`. Renders its children only while
+ * the field is empty.
+ */
+@SuppressLint("ViewConstructor")
+class PlaceholderView(context: Context, appContext: AppContext) :
+  ExpoComposeView<PlaceholderProps>(context, appContext) {
+  override val props = PlaceholderProps()
+
+  @Composable
+  override fun ComposableScope.Content() {
+    if (LocalTextFieldIsEmpty.current) {
+      Children(this)
+    }
+  }
+}
+
+// endregion Placeholder plumbing
+
+// region Props
+
+@OptimizedComposeProps
+data class BasicTextFieldProps(
+  val value: ObservableState = ObservableState(""),
+  val selection: ObservableState = ObservableState(mapOf("start" to 0, "end" to 0)),
+  val maxLength: Int? = null,
+  val autoFocus: Boolean = false,
+  val enabled: Boolean = true,
+  val readOnly: Boolean = false,
+  val singleLine: Boolean = false,
+  val maxLines: Int? = null,
+  val minLines: Int? = null,
+  val textStyle: TextFieldTextStyleRecord? = null,
+  val visualTransformation: String? = null,
+  val keyboardOptions: TextFieldKeyboardOptionsRecord? = null,
+  val cursorColor: Color? = null,
+  val textSelectionColors: TextFieldSelectionColorsRecord? = null,
+  val onValueChangeSync: WorkletCallback? = null,
+  val modifiers: ModifierList = emptyList()
+) : ComposeProps
+
+// endregion Props
+
+// region View
+
+@Composable
+fun FunctionalComposableScope.BasicTextFieldContent(
+  props: BasicTextFieldProps,
+  setText: AsyncFunctionHandle<String>,
+  setSelection: AsyncFunctionHandle2<Int, Int>,
+  clear: AsyncFunctionHandle<Unit>,
+  focus: AsyncFunctionHandle<Unit>,
+  blur: AsyncFunctionHandle<Unit>,
+  onValueChanged: (TextFieldValuePayload) -> Unit,
+  onFocusChange: (GenericEventPayload1<Boolean>) -> Unit,
+  onKeyboardActionTriggered: (KeyboardActionEvent) -> Unit,
+  onSelectionChanged: (TextFieldSelectionPayload) -> Unit
+) {
+  val core = rememberTextFieldCore(
+    value = props.value,
+    selection = props.selection,
+    maxLength = props.maxLength,
+    autoFocus = props.autoFocus,
+    keyboardOptionsRecord = props.keyboardOptions,
+    modifiers = props.modifiers,
+    onValueChangeSync = props.onValueChangeSync,
+    setText = setText,
+    setSelection = setSelection,
+    clear = clear,
+    focus = focus,
+    blur = blur,
+    onValueChanged = onValueChanged,
+    onFocusChange = onFocusChange,
+    onKeyboardActionTriggered = onKeyboardActionTriggered,
+    onSelectionChanged = onSelectionChanged
+  )
+
+  val singleLine = props.singleLine
+  val maxLines = props.maxLines ?: if (singleLine) 1 else Int.MAX_VALUE
+  val minLines = props.minLines ?: 1
+
+  val textStyle = props.textStyle.toTextStyle(appContext.reactContext).let {
+    if (it.color.isUnspecified) it.copy(color = MaterialTheme.colorScheme.onSurface) else it
+  }
+  val visualTransformation = props.visualTransformation.toVisualTransformation()
+  val cursorBrush = SolidColor(props.cursorColor.composeOrNull ?: MaterialTheme.colorScheme.primary)
+
+  val current = LocalTextSelectionColors.current
+  val selectionColors = props.textSelectionColors?.let { record ->
+    val handle = record.handleColor.composeOrNull
+    val background = record.backgroundColor.composeOrNull
+    if (handle == null && background == null) {
+      current
+    } else {
+      TextSelectionColors(
+        handleColor = handle ?: current.handleColor,
+        backgroundColor = background ?: handle?.copy(alpha = 0.4f) ?: current.backgroundColor
+      )
+    }
+  } ?: current
+
+  val decoration: (@Composable () -> Unit)? =
+    findChildSlotView(view, "decorationBox")?.let { slot -> { slot.renderSlot() } }
+
+  CompositionLocalProvider(LocalTextSelectionColors provides selectionColors) {
+    BasicTextField(
+      value = core.value,
+      onValueChange = core.onValueChange,
+      modifier = core.modifier,
+      enabled = props.enabled,
+      readOnly = props.readOnly,
+      textStyle = textStyle,
+      keyboardOptions = core.keyboardOptions,
+      keyboardActions = core.keyboardActions,
+      singleLine = singleLine,
+      maxLines = maxLines,
+      minLines = minLines,
+      visualTransformation = visualTransformation,
+      cursorBrush = cursorBrush,
+      decorationBox = { innerTextField ->
+        if (decoration != null) {
+          CompositionLocalProvider(
+            LocalInnerTextField provides innerTextField,
+            LocalTextFieldIsEmpty provides core.value.text.isEmpty()
+          ) {
+            decoration()
+          }
+        } else {
+          innerTextField()
+        }
+      }
+    )
+  }
+}
+
+// endregion View