@lodev09/react-native-true-sheet 4.0.0-beta.6 → 4.0.0-beta.8

package/README.md

@@ -32,6 +32,7 @@ The true native bottom sheet experience for your React Native Apps. 💩
 * 📜 **`scrollableRef`** - Pass a `ScrollView`/`FlatList` ref to wire nested scrolling, keyboard insets, and `auto` detent sizing
 * 🦶 **Relative footers** - Footers take up space below the content by default
 * 🧭 **Expo Router** - First-class support via the `Sheet` layout from `/navigation/expo-router`
+* 🍞 **`TrueSheetOverlay`** - Render toasts, dialogs, and other [overlays above your sheets](https://sheet.lodev09.com/guides/overlays) — no more `FullWindowOverlay`/`Modal` workarounds
 
 ```sh
 npx expo install @lodev09/react-native-true-sheet@beta

package/android/build.gradle

@@ -17,7 +17,28 @@ buildscript {
 
 
 apply plugin: "com.android.library"
-apply plugin: "kotlin-android"
+// Android Gradle Plugin 9 ships built-in Kotlin support and applies the Kotlin
+// plugin itself. Applying it a second time fails the configuration phase with
+// "Cannot add extension with name 'kotlin'". Apply it only when AGP is not
+// providing Kotlin: AGP 8 and older, or AGP 9 with android.builtInKotlin=false.
+def shouldApplyKotlinPlugin() {
+  def agpMajor = com.android.Version.ANDROID_GRADLE_PLUGIN_VERSION.tokenize('.')[0].toInteger()
+  if (agpMajor <= 8) {
+    return true
+  }
+  // AGP 10 removes the opt-out: built-in Kotlin is always active there.
+  if (agpMajor >= 10) {
+    return false
+  }
+  def propertyVal = providers.gradleProperty("android.builtInKotlin").orNull
+  def builtInKotlinEnabled = propertyVal != null ? propertyVal.toBoolean() : true
+  return !builtInKotlinEnabled
+}
+
+if (shouldApplyKotlinPlugin()) {
+  apply plugin: "kotlin-android"
+}
+
 apply plugin: "com.facebook.react"
 
 def getExtOrIntegerDefault(name) {

package/android/src/main/java/com/lodev09/truesheet/TrueSheetOverlayView.kt

@@ -0,0 +1,106 @@
+package com.lodev09.truesheet
+
+import android.annotation.SuppressLint
+import android.view.View
+import android.view.ViewGroup
+import android.view.accessibility.AccessibilityEvent
+import com.facebook.react.uimanager.StateWrapper
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.events.EventDispatcher
+import com.facebook.react.views.view.ReactViewGroup
+import com.lodev09.truesheet.core.TrueSheetOverlayRootView
+import com.lodev09.truesheet.core.TrueSheetOverlayRootViewDelegate
+import com.lodev09.truesheet.utils.findRootContainerView
+
+/**
+ * Hidden host that renders its children in a root view attached to the
+ * activity's content view, above every presented sheet.
+ */
+@SuppressLint("ViewConstructor")
+class TrueSheetOverlayView(private val reactContext: ThemedReactContext) :
+  ReactViewGroup(reactContext),
+  TrueSheetOverlayRootViewDelegate {
+
+  private val rootView = TrueSheetOverlayRootView(reactContext).apply {
+    delegate = this@TrueSheetOverlayView
+  }
+
+  private var rootContainerView: ViewGroup? = null
+
+  override var eventDispatcher: EventDispatcher? = null
+
+  private var lastWidth = 0
+  private var lastHeight = 0
+
+  var stateWrapper: StateWrapper? = null
+    set(value) {
+      field = value
+      pushState()
+    }
+
+  init {
+    // The host stays in the React tree for layout only — children render in the root view
+    visibility = GONE
+  }
+
+  // ==================== View Hierarchy Management ====================
+
+  override fun onAttachedToWindow() {
+    super.onAttachedToWindow()
+    attachRootView()
+  }
+
+  override fun onDetachedFromWindow() {
+    detachRootView()
+    super.onDetachedFromWindow()
+  }
+
+  private fun attachRootView() {
+    if (rootView.parent != null) return
+
+    val container = findRootContainerView(reactContext) ?: return
+    container.addView(rootView)
+    rootContainerView = container
+  }
+
+  private fun detachRootView() {
+    rootContainerView?.removeView(rootView)
+    rootContainerView = null
+  }
+
+  fun onDropInstance() {
+    detachRootView()
+    rootView.delegate = null
+  }
+
+  override fun addView(child: View?, index: Int) {
+    rootView.addView(child, index)
+  }
+
+  override fun getChildCount(): Int = rootView.childCount
+
+  override fun getChildAt(index: Int): View? = rootView.getChildAt(index)
+
+  override fun removeViewAt(index: Int) {
+    rootView.removeViewAt(index)
+  }
+
+  // Accessibility: children live in the root view since this view is hidden
+  override fun addChildrenForAccessibility(outChildren: ArrayList<View>) {}
+  override fun dispatchPopulateAccessibilityEvent(event: AccessibilityEvent): Boolean = false
+
+  // ==================== State ====================
+
+  override fun overlayRootViewDidChangeSize(width: Int, height: Int) {
+    if (width == lastWidth && height == lastHeight) return
+
+    lastWidth = width
+    lastHeight = height
+    pushState()
+  }
+
+  private fun pushState() {
+    if (lastWidth == 0 && lastHeight == 0) return
+    stateWrapper?.let { TrueSheetStateUpdater.updateContainerSize(it, lastWidth, lastHeight) }
+  }
+}

package/android/src/main/java/com/lodev09/truesheet/TrueSheetOverlayViewManager.kt

@@ -0,0 +1,45 @@
+package com.lodev09.truesheet
+
+import com.facebook.react.module.annotations.ReactModule
+import com.facebook.react.uimanager.PointerEvents
+import com.facebook.react.uimanager.ReactStylesDiffMap
+import com.facebook.react.uimanager.StateWrapper
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.UIManagerHelper
+import com.facebook.react.uimanager.ViewGroupManager
+import com.facebook.react.uimanager.annotations.ReactProp
+
+/**
+ * ViewManager for TrueSheetOverlayView
+ * Renders content above every presented sheet
+ */
+@ReactModule(name = TrueSheetOverlayViewManager.REACT_CLASS)
+class TrueSheetOverlayViewManager : ViewGroupManager<TrueSheetOverlayView>() {
+
+  override fun getName(): String = REACT_CLASS
+
+  override fun createViewInstance(reactContext: ThemedReactContext): TrueSheetOverlayView = TrueSheetOverlayView(reactContext)
+
+  override fun onDropViewInstance(view: TrueSheetOverlayView) {
+    super.onDropViewInstance(view)
+    view.onDropInstance()
+  }
+
+  override fun addEventEmitters(reactContext: ThemedReactContext, view: TrueSheetOverlayView) {
+    view.eventDispatcher = UIManagerHelper.getEventDispatcherForReactTag(reactContext, view.id)
+  }
+
+  override fun updateState(view: TrueSheetOverlayView, props: ReactStylesDiffMap?, stateWrapper: StateWrapper?): Any? {
+    view.stateWrapper = stateWrapper
+    return null
+  }
+
+  @ReactProp(name = "pointerEvents")
+  fun setPointerEvents(view: TrueSheetOverlayView, pointerEventsStr: String?) {
+    view.pointerEvents = PointerEvents.parsePointerEvents(pointerEventsStr)
+  }
+
+  companion object {
+    const val REACT_CLASS = "TrueSheetOverlayView"
+  }
+}

package/android/src/main/java/com/lodev09/truesheet/TrueSheetPackage.kt

@@ -40,6 +40,7 @@ class TrueSheetPackage : BaseReactPackage() {
       TrueSheetContentViewManager(),
       TrueSheetHeaderViewManager(),
       TrueSheetFooterViewManager(),
-      TrueSheetPeekViewManager()
+      TrueSheetPeekViewManager(),
+      TrueSheetOverlayViewManager()
     )
 }

package/android/src/main/java/com/lodev09/truesheet/TrueSheetStateUpdater.kt

@@ -1,5 +1,7 @@
 package com.lodev09.truesheet
 
+import com.facebook.react.bridge.WritableNativeMap
+import com.facebook.react.uimanager.PixelUtil.pxToDp
 import com.facebook.react.uimanager.StateWrapper
 
 /**
@@ -22,6 +24,22 @@ object TrueSheetStateUpdater {
   fun updateState(stateWrapper: StateWrapper, widthDp: Float, heightDp: Float): Boolean =
     isAvailable && nativeUpdateState(stateWrapper, widthDp, heightDp)
 
+  /**
+   * Pushes the container size (px) into the Fabric state — synchronously when
+   * the bridge is available, async otherwise.
+   */
+  fun updateContainerSize(stateWrapper: StateWrapper, widthPx: Int, heightPx: Int) {
+    val widthDp = widthPx.toFloat().pxToDp()
+    val heightDp = heightPx.toFloat().pxToDp()
+
+    if (updateState(stateWrapper, widthDp, heightDp)) return
+
+    val newStateData = WritableNativeMap()
+    newStateData.putDouble("containerWidth", widthDp.toDouble())
+    newStateData.putDouble("containerHeight", heightDp.toDouble())
+    stateWrapper.updateState(newStateData)
+  }
+
   /** Returns false when unavailable — caller should fall back to async updateState. */
   fun updateFooterState(stateWrapper: StateWrapper, bottomInsetDp: Float): Boolean =
     isAvailable && nativeUpdateFooterState(stateWrapper, bottomInsetDp)

package/android/src/main/java/com/lodev09/truesheet/TrueSheetView.kt

@@ -6,7 +6,6 @@ import android.view.ViewGroup
 import android.view.accessibility.AccessibilityEvent
 import androidx.annotation.UiThread
 import com.facebook.react.bridge.LifecycleEventListener
-import com.facebook.react.bridge.WritableNativeMap
 import com.facebook.react.uimanager.PixelUtil.dpToPx
 import com.facebook.react.uimanager.PixelUtil.pxToDp
 import com.facebook.react.uimanager.StateWrapper
@@ -22,6 +21,7 @@ import com.lodev09.truesheet.core.RNScreensEventObserverDelegate
 import com.lodev09.truesheet.core.TrueSheetStackManager
 import com.lodev09.truesheet.events.*
 import com.lodev09.truesheet.utils.KeyboardUtils
+import com.lodev09.truesheet.utils.findRootContainerView
 
 /**
  * Main TrueSheet host view that manages the sheet and dispatches events to JavaScript.
@@ -376,18 +376,7 @@ class TrueSheetView(private val reactContext: ThemedReactContext) :
     lastContainerWidth = width
     lastContainerHeight = height
 
-    val sw = stateWrapper ?: return
-    val widthDp = width.toFloat().pxToDp()
-    val heightDp = height.toFloat().pxToDp()
-
-    // Synchronous update — commits and mounts within the same UI-thread frame
-    if (TrueSheetStateUpdater.updateState(sw, widthDp, heightDp)) return
-
-    // Fallback: async state update
-    val newStateData = WritableNativeMap()
-    newStateData.putDouble("containerWidth", widthDp.toDouble())
-    newStateData.putDouble("containerHeight", heightDp.toDouble())
-    sw.updateState(newStateData)
+    stateWrapper?.let { TrueSheetStateUpdater.updateContainerSize(it, width, height) }
   }
 
   // ==================== Sheet Actions ====================
@@ -731,16 +720,5 @@ class TrueSheetView(private val reactContext: ThemedReactContext) :
    * of whichever window this view is in - whether that's the activity's window or a
    * Modal's dialog window.
    */
-  override fun findRootContainerView(): ViewGroup? {
-    var current: android.view.ViewParent? = parent
-
-    while (current != null) {
-      if (current is ViewGroup && current.id == android.R.id.content) {
-        return current
-      }
-      current = current.parent
-    }
-
-    return reactContext.currentActivity?.findViewById(android.R.id.content)
-  }
+  override fun findRootContainerView(): ViewGroup? = findRootContainerView(reactContext)
 }

package/android/src/main/java/com/lodev09/truesheet/core/TrueSheetOverlayRootView.kt

@@ -0,0 +1,137 @@
+package com.lodev09.truesheet.core
+
+import android.annotation.SuppressLint
+import android.view.MotionEvent
+import android.view.View
+import android.widget.FrameLayout
+import com.facebook.react.uimanager.JSPointerDispatcher
+import com.facebook.react.uimanager.JSTouchDispatcher
+import com.facebook.react.uimanager.RootView
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.TouchTargetHelper
+import com.facebook.react.uimanager.events.EventDispatcher
+import com.lodev09.truesheet.utils.TouchEventDeduper
+
+interface TrueSheetOverlayRootViewDelegate {
+  val eventDispatcher: EventDispatcher?
+  fun overlayRootViewDidChangeSize(width: Int, height: Int)
+}
+
+/**
+ * Window-level view hosting an overlay's children, attached to the activity's
+ * content view above the sheet coordinators.
+ *
+ * Implements RootView to dispatch touches to JS. Touches that miss every child
+ * fall through to the views beneath.
+ */
+@SuppressLint("ViewConstructor")
+class TrueSheetOverlayRootView(private val reactContext: ThemedReactContext) :
+  FrameLayout(reactContext),
+  RootView {
+
+  var delegate: TrueSheetOverlayRootViewDelegate? = null
+
+  private val eventDispatcher: EventDispatcher?
+    get() = delegate?.eventDispatcher
+
+  private val jsTouchDispatcher = JSTouchDispatcher(this)
+  private val jsPointerDispatcher = JSPointerDispatcher(this)
+  private val touchDeduper = TouchEventDeduper()
+
+  // Whether the current touch stream landed on a child
+  private var isHandlingStream = false
+
+  init {
+    layoutParams = LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)
+
+    // Draws and receives touches above the sheet coordinators regardless of add order
+    translationZ = OVERLAY_Z
+  }
+
+  // Children are positioned by Fabric — a FrameLayout pass would stretch them to match_parent
+  override fun onLayout(
+    changed: Boolean,
+    left: Int,
+    top: Int,
+    right: Int,
+    bottom: Int
+  ) {
+  }
+
+  override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
+    super.onSizeChanged(w, h, oldw, oldh)
+    delegate?.overlayRootViewDidChangeSize(w, h)
+  }
+
+  override fun dispatchTouchEvent(ev: MotionEvent): Boolean {
+    if (ev.actionMasked == MotionEvent.ACTION_DOWN) {
+      // The path ends with this root, so a touch that misses every child resolves to it
+      val target = TouchTargetHelper
+        .findTargetPathAndCoordinatesForTouch(ev.x, ev.y, this, FloatArray(2))
+        .firstNotNullOfOrNull { it.getView() }
+      isHandlingStream = target != null && target !== this
+    }
+    if (!isHandlingStream) return false
+    return super.dispatchTouchEvent(ev)
+  }
+
+  // ==================== RootView Implementation ====================
+
+  override fun onInterceptTouchEvent(event: MotionEvent): Boolean {
+    eventDispatcher?.let { dispatcher ->
+      if (touchDeduper.shouldDispatch(event)) {
+        jsTouchDispatcher.handleTouchEvent(event, dispatcher, reactContext)
+      }
+      jsPointerDispatcher.handleMotionEvent(event, dispatcher, true)
+    }
+    return super.onInterceptTouchEvent(event)
+  }
+
+  override fun requestDisallowInterceptTouchEvent(disallowIntercept: Boolean) {
+    // Mirrors ReactSurfaceView: keep receiving onInterceptTouchEvent so
+    // jsTouchDispatcher sees the gesture end, but forward the request up the tree.
+    parent?.requestDisallowInterceptTouchEvent(disallowIntercept)
+  }
+
+  @SuppressLint("ClickableViewAccessibility")
+  override fun onTouchEvent(event: MotionEvent): Boolean {
+    eventDispatcher?.let { dispatcher ->
+      if (touchDeduper.shouldDispatch(event)) {
+        jsTouchDispatcher.handleTouchEvent(event, dispatcher, reactContext)
+      }
+      jsPointerDispatcher.handleMotionEvent(event, dispatcher, false)
+    }
+    super.onTouchEvent(event)
+    return true
+  }
+
+  override fun onInterceptHoverEvent(event: MotionEvent): Boolean {
+    eventDispatcher?.let { jsPointerDispatcher.handleMotionEvent(event, it, true) }
+    return super.onHoverEvent(event)
+  }
+
+  override fun onHoverEvent(event: MotionEvent): Boolean {
+    eventDispatcher?.let { jsPointerDispatcher.handleMotionEvent(event, it, false) }
+    return super.onHoverEvent(event)
+  }
+
+  override fun onChildStartedNativeGesture(childView: View?, ev: MotionEvent) {
+    eventDispatcher?.let { dispatcher ->
+      jsTouchDispatcher.onChildStartedNativeGesture(ev, dispatcher)
+      jsPointerDispatcher.onChildStartedNativeGesture(childView, ev, dispatcher)
+    }
+  }
+
+  override fun onChildEndedNativeGesture(childView: View, ev: MotionEvent) {
+    eventDispatcher?.let { jsTouchDispatcher.onChildEndedNativeGesture(ev, it) }
+    jsPointerDispatcher.onChildEndedNativeGesture()
+  }
+
+  override fun handleException(t: Throwable) {
+    reactContext.reactApplicationContext.handleException(RuntimeException(t))
+  }
+
+  companion object {
+    private const val OVERLAY_Z = 1000f
+  }
+}

package/android/src/main/java/com/lodev09/truesheet/utils/ViewUtils.kt

@@ -2,8 +2,10 @@ package com.lodev09.truesheet.utils
 
 import android.view.View
 import android.view.ViewGroup
+import android.view.ViewParent
 import android.widget.ScrollView
 import androidx.core.widget.NestedScrollView
+import com.facebook.react.uimanager.ThemedReactContext
 
 fun View.isDescendantOf(ancestor: View): Boolean {
   if (!isAttachedToWindow) return false
@@ -21,3 +23,20 @@ fun ViewGroup.smoothScrollTo(x: Int, y: Int) {
     is NestedScrollView -> smoothScrollTo(x, y)
   }
 }
+
+/**
+ * The content view hosting this view — the activity's, or a Modal dialog's.
+ * Window-level views (sheet coordinators, overlays) attach here.
+ */
+fun View.findRootContainerView(reactContext: ThemedReactContext): ViewGroup? {
+  var current: ViewParent? = parent
+
+  while (current != null) {
+    if (current is ViewGroup && current.id == android.R.id.content) {
+      return current
+    }
+    current = current.parent
+  }
+
+  return reactContext.currentActivity?.findViewById(android.R.id.content)
+}

package/android/src/main/jni/TrueSheetSpec.h

@@ -5,6 +5,7 @@
 #include <jsi/jsi.h>
 #include <react/renderer/components/TrueSheetSpec/TrueSheetContentViewComponentDescriptor.h>
 #include <react/renderer/components/TrueSheetSpec/TrueSheetFooterViewComponentDescriptor.h>
+#include <react/renderer/components/TrueSheetSpec/TrueSheetOverlayViewComponentDescriptor.h>
 #include <react/renderer/components/TrueSheetSpec/TrueSheetViewComponentDescriptor.h>
 
 namespace facebook {

package/common/cpp/react/renderer/components/TrueSheetSpec/TrueSheetLayoutUtils.h

@@ -0,0 +1,46 @@
+#pragma once
+
+#include <react/renderer/components/view/conversions.h>
+#include <yoga/node/Node.h>
+#include <yoga/style/Style.h>
+
+namespace facebook::react {
+
+/*
+ * Overrides a node's Yoga dimensions with the container size reported from
+ * native. A zero dimension leaves that axis to Yoga.
+ */
+inline void applyContainerSizeToYogaNode(
+    yoga::Node &node,
+    const yoga::Style &baseStyle,
+    float containerWidth,
+    float containerHeight) {
+  if (containerWidth <= 0 && containerHeight <= 0) {
+    return;
+  }
+
+  yoga::Style adjustedStyle = baseStyle;
+  const auto &currentStyle = node.style();
+  bool needsUpdate = false;
+
+  if (containerWidth > 0) {
+    adjustedStyle.setDimension(yoga::Dimension::Width, yoga::StyleSizeLength::points(containerWidth));
+    if (adjustedStyle.dimension(yoga::Dimension::Width) != currentStyle.dimension(yoga::Dimension::Width)) {
+      needsUpdate = true;
+    }
+  }
+
+  if (containerHeight > 0) {
+    adjustedStyle.setDimension(yoga::Dimension::Height, yoga::StyleSizeLength::points(containerHeight));
+    if (adjustedStyle.dimension(yoga::Dimension::Height) != currentStyle.dimension(yoga::Dimension::Height)) {
+      needsUpdate = true;
+    }
+  }
+
+  if (needsUpdate) {
+    node.setStyle(adjustedStyle);
+    node.setDirty(true);
+  }
+}
+
+} // namespace facebook::react

package/common/cpp/react/renderer/components/TrueSheetSpec/TrueSheetOverlayViewComponentDescriptor.h

@@ -0,0 +1,21 @@
+#pragma once
+
+#include <react/renderer/components/TrueSheetSpec/TrueSheetOverlayViewShadowNode.h>
+#include <react/renderer/core/ConcreteComponentDescriptor.h>
+
+namespace facebook::react {
+
+/*
+ * Descriptor for <TrueSheetOverlayView> component.
+ */
+class TrueSheetOverlayViewComponentDescriptor final
+    : public ConcreteComponentDescriptor<TrueSheetOverlayViewShadowNode> {
+  using ConcreteComponentDescriptor::ConcreteComponentDescriptor;
+
+  void adopt(ShadowNode &shadowNode) const override {
+    static_cast<TrueSheetOverlayViewShadowNode &>(shadowNode).adjustLayoutWithState();
+    ConcreteComponentDescriptor::adopt(shadowNode);
+  }
+};
+
+} // namespace facebook::react

package/common/cpp/react/renderer/components/TrueSheetSpec/TrueSheetOverlayViewShadowNode.cpp

@@ -0,0 +1,17 @@
+#include "TrueSheetOverlayViewShadowNode.h"
+
+#include "TrueSheetLayoutUtils.h"
+
+namespace facebook::react {
+
+extern const char TrueSheetOverlayViewComponentName[] = "TrueSheetOverlayView";
+
+void TrueSheetOverlayViewShadowNode::adjustLayoutWithState() {
+  ensureUnsealed();
+
+  const auto &stateData = getStateData();
+  applyContainerSizeToYogaNode(
+      yogaNode_, getConcreteProps().yogaStyle, stateData.containerWidth, stateData.containerHeight);
+}
+
+} // namespace facebook::react

package/common/cpp/react/renderer/components/TrueSheetSpec/TrueSheetOverlayViewShadowNode.h

@@ -0,0 +1,36 @@
+#pragma once
+
+#include <jsi/jsi.h>
+#include <react/renderer/components/TrueSheetSpec/EventEmitters.h>
+#include <react/renderer/components/TrueSheetSpec/Props.h>
+#include <react/renderer/components/TrueSheetSpec/TrueSheetViewState.h>
+#include <react/renderer/components/view/ConcreteViewShadowNode.h>
+
+namespace facebook::react {
+
+JSI_EXPORT extern const char TrueSheetOverlayViewComponentName[];
+
+/*
+ * `ShadowNode` for <TrueSheetOverlayView> component.
+ * Sized to the window from native (via TrueSheetViewState) so its children
+ * lay out against the full window like the sheet's container.
+ */
+class JSI_EXPORT TrueSheetOverlayViewShadowNode final
+    : public ConcreteViewShadowNode<
+          TrueSheetOverlayViewComponentName,
+          TrueSheetOverlayViewProps,
+          TrueSheetOverlayViewEventEmitter,
+          TrueSheetViewState> {
+  using ConcreteViewShadowNode::ConcreteViewShadowNode;
+
+ public:
+  static ShadowNodeTraits BaseTraits() {
+    auto traits = ConcreteViewShadowNode::BaseTraits();
+    traits.set(ShadowNodeTraits::Trait::RootNodeKind);
+    return traits;
+  }
+
+  void adjustLayoutWithState();
+};
+
+} // namespace facebook::react

package/common/cpp/react/renderer/components/TrueSheetSpec/TrueSheetViewShadowNode.cpp

@@ -1,48 +1,17 @@
 #include "TrueSheetViewShadowNode.h"
 
-#include <react/renderer/components/view/conversions.h>
+#include "TrueSheetLayoutUtils.h"
 
 namespace facebook::react {
 
-using namespace yoga;
-
 extern const char TrueSheetViewComponentName[] = "TrueSheetView";
 
 void TrueSheetViewShadowNode::adjustLayoutWithState() {
   ensureUnsealed();
 
-  auto state = std::static_pointer_cast<
-      const TrueSheetViewShadowNode::ConcreteState>(getState());
-  auto stateData = state->getData();
-
-  // If container dimensions are set from native, override Yoga's dimensions
-  if (stateData.containerWidth > 0 || stateData.containerHeight > 0) {
-    auto &props = getConcreteProps();
-    yoga::Style adjustedStyle = props.yogaStyle;
-    auto currentStyle = yogaNode_.style();
-    bool needsUpdate = false;
-
-    // Set width if provided
-    if (stateData.containerWidth > 0) {
-      adjustedStyle.setDimension(yoga::Dimension::Width, StyleSizeLength::points(stateData.containerWidth));
-      if (adjustedStyle.dimension(yoga::Dimension::Width) != currentStyle.dimension(yoga::Dimension::Width)) {
-        needsUpdate = true;
-      }
-    }
-
-    // Set height if provided
-    if (stateData.containerHeight > 0) {
-      adjustedStyle.setDimension(yoga::Dimension::Height, StyleSizeLength::points(stateData.containerHeight));
-      if (adjustedStyle.dimension(yoga::Dimension::Height) != currentStyle.dimension(yoga::Dimension::Height)) {
-        needsUpdate = true;
-      }
-    }
-
-    if (needsUpdate) {
-      yogaNode_.setStyle(adjustedStyle);
-      yogaNode_.setDirty(true);
-    }
-  }
+  const auto &stateData = getStateData();
+  applyContainerSizeToYogaNode(
+      yogaNode_, getConcreteProps().yogaStyle, stateData.containerWidth, stateData.containerHeight);
 }
 
 #if !defined(ANDROID)

package/ios/TrueSheetContentView.h

@@ -8,6 +8,7 @@
 
 #ifdef RCT_NEW_ARCH_ENABLED
 
+#import <React/RCTMountingTransactionObserving.h>
 #import <React/RCTSurfaceTouchHandler.h>
 #import <React/RCTViewComponentView.h>
 #import <UIKit/UIKit.h>
@@ -28,7 +29,8 @@ NS_ASSUME_NONNULL_BEGIN
 
 @end
 
-@interface TrueSheetContentView : RCTViewComponentView <TrueSheetKeyboardObserverDelegate>
+@interface TrueSheetContentView
+    : RCTViewComponentView <TrueSheetKeyboardObserverDelegate, RCTMountingTransactionObserving>
 
 @property (nonatomic, weak, nullable) id<TrueSheetContentViewDelegate> delegate;
 @property (nonatomic, assign) CGFloat keyboardScrollOffset;

package/ios/TrueSheetContentView.mm

@@ -159,6 +159,17 @@ using namespace facebook::react;
   }
 }
 
+// A handle that commits in the same transaction as the ScrollView's insertion
+// resolves to nothing — prop updates process before mount instructions, and a
+// deep insertion doesn't pass through this view's mount hooks. Retry once the
+// whole transaction has mounted.
+- (void)mountingTransactionDidMount:(const MountingTransaction &)transaction
+               withSurfaceTelemetry:(const SurfaceTelemetry &)surfaceTelemetry {
+  if (_scrollableHandle > 0 && !_detectedScrollView) {
+    [self.delegate contentViewScrollViewDidChange];
+  }
+}
+
 #pragma mark - Scrollable
 
 // The scroll indicator follows automatically — UIKit derives its insets from