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

package/README.md

@@ -22,6 +22,23 @@ The true native bottom sheet experience for your React Native Apps. 💩
 * 🧭 **React Navigation** - Built-in [sheet navigator](https://sheet.lodev09.com/guides/navigation) for seamless navigation integration
 * 🌐 **Web Support** - Full [web support](https://sheet.lodev09.com/guides/web) out of the box
 
+## 🎉 What's New in v4
+
+> [!TIP]
+> ✨ **v4 is in beta!** It rewrites the layout engine — the sheet now lays out synchronously per detent, so the container is sized to the sheet's visible height and tracks it in realtime while dragging.
+
+* 📏 **Synchronous layout** - Content resizes in the same frame as the sheet, no more lag
+* 📐 **`auto` detent with scrollables** - The sheet now sizes itself to a `ScrollView`/`FlatList`'s content height
+* 📜 **`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`
+
+```sh
+npx expo install @lodev09/react-native-true-sheet@beta
+```
+
+See the [Migration Guide](docs/docs/migration.mdx) to upgrade. **v3 is still supported** for React Native 0.81+ and remains the `latest` release on npm.
+
 ## Installation
 
 > [!IMPORTANT]
@@ -30,7 +47,7 @@ The true native bottom sheet experience for your React Native Apps. 💩
 
 ### Prerequisites
 
-- React Native 0.82+
+- React Native 0.82+ (0.81+ on v3)
 - New Architecture enabled
 - Xcode 26.1+
 
@@ -55,6 +72,8 @@ yarn add @lodev09/react-native-true-sheet
 cd ios && pod install
 ```
 
+These install v3. For v4, append `@beta` — see [🎉 What's New in v4](#-whats-new-in-v4).
+
 ## Documentation
 
 - [Example](example)
@@ -63,7 +82,7 @@ cd ios && pod install
 - [React Navigation](https://sheet.lodev09.com/guides/navigation)
 - [Troubleshooting](https://sheet.lodev09.com/troubleshooting)
 - [Testing with Jest](https://sheet.lodev09.com/guides/jest)
-- [Migrating to v3](https://sheet.lodev09.com/migration)
+- [Migrating to v3](https://sheet.lodev09.com/migration-v3)
 
 ## Usage
 

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

@@ -95,12 +95,6 @@ class TrueSheetContainerView(reactContext: ThemedReactContext) :
       contentView?.bottomInset = value
     }
 
-  var hasAutoDetent = false
-    set(value) {
-      field = value
-      contentView?.hasAutoDetent = value
-    }
-
   override val eventDispatcher: EventDispatcher?
     get() = delegate?.eventDispatcher
 
@@ -131,7 +125,6 @@ class TrueSheetContainerView(reactContext: ThemedReactContext) :
         child.scrollableOptions = scrollableOptions
         child.scrollableHandle = scrollableHandle
         child.bottomInset = scrollableBottomInset
-        child.hasAutoDetent = hasAutoDetent
         contentView = child
 
         // State lands before the view is attached, so pull the current value

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

@@ -8,9 +8,7 @@ import android.view.View
 import android.view.ViewGroup
 import android.widget.EditText
 import androidx.swiperefreshlayout.widget.SwipeRefreshLayout
-import com.facebook.react.bridge.WritableNativeMap
 import com.facebook.react.uimanager.PixelUtil.dpToPx
-import com.facebook.react.uimanager.StateWrapper
 import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.views.view.ReactViewGroup
 import com.lodev09.truesheet.core.TrueSheetKeyboardObserver
@@ -57,11 +55,9 @@ interface TrueSheetContentViewDelegate {
 @SuppressLint("ViewConstructor")
 class TrueSheetContentView(private val reactContext: ThemedReactContext) : ReactViewGroup(reactContext) {
   var delegate: TrueSheetContentViewDelegate? = null
-  var stateWrapper: StateWrapper? = null
 
   private var detectedScrollView: ViewGroup? = null
   private var originalScrollViewPaddingBottom: Int = 0
-  private var scrollableBounded = false
 
   /**
    * Content height measured unconstrained by the shadow node — the height the
@@ -141,20 +137,6 @@ class TrueSheetContentView(private val reactContext: ThemedReactContext) : React
       clearScrollable()
     }
 
-  /**
-   * Whether the sheet has an `auto` detent. Deriving the sheet height from the
-   * scroll content is circular with natural layout, so the detected ScrollView's
-   * viewport is force-bounded to the container only in this case.
-   */
-  var hasAutoDetent = false
-    set(value) {
-      if (field == value) return
-      field = value
-      if (detectedScrollView != null) {
-        setScrollableBounded(value)
-      }
-    }
-
   override fun addView(child: View?, index: Int) {
     super.addView(child, index)
     checkScrollViewChanged()
@@ -171,22 +153,6 @@ class TrueSheetContentView(private val reactContext: ThemedReactContext) : React
     }
   }
 
-  /**
-   * Tells the shadow node to fill the container (flexGrow/flexShrink) so the
-   * detected ScrollView's viewport is bounded to the visible space. Only applied
-   * for auto detents — otherwise content lays out naturally like a regular view.
-   */
-  private fun setScrollableBounded(bounded: Boolean) {
-    if (scrollableBounded == bounded) return
-    scrollableBounded = bounded
-
-    stateWrapper?.let {
-      val newState = WritableNativeMap()
-      newState.putBoolean("scrollableBounded", bounded)
-      it.updateState(newState)
-    }
-  }
-
   fun setupScrollable() {
     // Check if the detected scroll view is still valid (still in view hierarchy)
     if (detectedScrollView != null && detectedScrollView?.isDescendantOf(this) == false) {
@@ -216,7 +182,6 @@ class TrueSheetContentView(private val reactContext: ThemedReactContext) : React
     scrollView.addOnLayoutChangeListener(scrollableLayoutListener)
     scrollView.getChildAt(0)?.addOnLayoutChangeListener(scrollableLayoutListener)
 
-    setScrollableBounded(hasAutoDetent)
     updateContentInset()
 
     // If keyboard is currently showing, re-apply the keyboard inset to the new ScrollView
@@ -274,7 +239,6 @@ class TrueSheetContentView(private val reactContext: ThemedReactContext) : React
     detectedScrollView?.isNestedScrollingEnabled = false
     (detectedScrollView?.parent as? SwipeRefreshLayout)?.isNestedScrollingEnabled = true
     setScrollViewPaddingBottom(originalScrollViewPaddingBottom)
-    setScrollableBounded(false)
     detectedScrollView = null
     originalScrollViewPaddingBottom = 0
     baseBottomInset = 0

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

@@ -20,7 +20,6 @@ class TrueSheetContentViewManager : ViewGroupManager<TrueSheetContentView>() {
   override fun createViewInstance(reactContext: ThemedReactContext): TrueSheetContentView = TrueSheetContentView(reactContext)
 
   override fun updateState(view: TrueSheetContentView, props: ReactStylesDiffMap?, stateWrapper: StateWrapper?): Any? {
-    view.stateWrapper = stateWrapper
     stateWrapper?.stateData?.let { data ->
       if (data.hasKey("naturalHeight")) {
         view.updateNaturalHeight(data.getDouble("naturalHeight"))

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

@@ -328,7 +328,6 @@ class TrueSheetView(private val reactContext: ThemedReactContext) :
       it.scrollableOptions = viewController.scrollableOptions
       it.scrollableHandle = viewController.scrollableHandle
       it.scrollableBottomInset = viewController.contentBottomInset
-      it.hasAutoDetent = viewController.detents.contains(-1.0)
       it.footerBottomInset = viewController.contentBottomInset
       it.absoluteFooter = viewController.absoluteFooter
       it.setupScrollable()

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

@@ -11,14 +11,6 @@ namespace facebook::react {
 class TrueSheetContentViewComponentDescriptor final
     : public ConcreteComponentDescriptor<TrueSheetContentViewShadowNode> {
   using ConcreteComponentDescriptor::ConcreteComponentDescriptor;
-
-  void adopt(ShadowNode &shadowNode) const override {
-    auto &concreteShadowNode =
-        static_cast<TrueSheetContentViewShadowNode &>(shadowNode);
-    concreteShadowNode.adjustLayoutWithState();
-
-    ConcreteComponentDescriptor::adopt(shadowNode);
-  }
 };
 
 } // namespace facebook::react

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

@@ -16,49 +16,28 @@ extern const char TrueSheetContentViewComponentName[] = "TrueSheetContentView";
 // clone — guard so the measurement pass doesn't measure again recursively.
 static thread_local bool gIsMeasuringNaturalHeight = false;
 
-void TrueSheetContentViewShadowNode::adjustLayoutWithState() {
-  ensureUnsealed();
-
-  auto state = std::static_pointer_cast<
-      const TrueSheetContentViewShadowNode::ConcreteState>(getState());
-  auto stateData = state->getData();
-
-  auto &props = getConcreteProps();
-
-  // When a ScrollView is detected under an auto detent, fill the container so
-  // descendant flex layouts (flex:1 wrappers, the ScrollView itself) resolve
-  // against a definite height and the viewport is bounded — natural layout is
-  // circular there since the sheet height derives from the content's natural
-  // height instead (see updateNaturalHeightIfNeeded). For fixed detents,
-  // content lays out naturally like a regular view.
-  auto flexGrow = stateData.scrollableBounded
-      ? FloatOptional{1.0f}
-      : props.yogaStyle.flexGrow();
-  auto flexShrink = stateData.scrollableBounded
-      ? FloatOptional{1.0f}
-      : props.yogaStyle.flexShrink();
-
-  if (yogaNode_.style().flexGrow() != flexGrow ||
-      yogaNode_.style().flexShrink() != flexShrink) {
-    yoga::Style adjustedStyle = props.yogaStyle;
-    adjustedStyle.setFlexGrow(flexGrow);
-    adjustedStyle.setFlexShrink(flexShrink);
-    yogaNode_.setStyle(adjustedStyle);
-    yogaNode_.setDirty(true);
-  }
-}
-
 void TrueSheetContentViewShadowNode::layout(LayoutContext layoutContext) {
   ConcreteViewShadowNode::layout(layoutContext);
   updateNaturalHeightIfNeeded(layoutContext);
 }
 
+// The content's committed height follows the container instead of its own
+// content when it can grow/shrink along the main axis or uses a percent
+// height. Reporting that height as the natural height would echo the sheet's
+// own size back as a content size change — e.g. flex: 1 content tracking a
+// drag frame by frame.
+static bool isHeightContainerDerived(const yoga::Style &style) {
+  return style.flexGrow().unwrapOrDefault(0) > 0 ||
+      style.flexShrink().unwrapOrDefault(0) > 0 ||
+      style.dimension(Dimension::Height).isPercent();
+}
+
 // The natural height is the height the content wants when unbounded — the
-// source for the auto detent. Once the container bounds the content
-// (scrollableBounded), the committed layout no longer reflects it, so lay out
-// a clone of the subtree with an unconstrained height. Yoga respects the
-// user's styles: an explicit-height ScrollView keeps its height while a
-// flexible one expands to its content — no ScrollView discovery involved.
+// source for the auto detent. When the content's height derives from the
+// container, the committed layout doesn't reflect it — lay out a clone of the
+// subtree with an unconstrained height instead. Yoga respects the user's
+// styles: an explicit-height ScrollView keeps its height while a flexible one
+// expands to its content — no ScrollView discovery involved.
 void TrueSheetContentViewShadowNode::updateNaturalHeightIfNeeded(
     const LayoutContext &layoutContext) {
   if (gIsMeasuringNaturalHeight) {
@@ -69,7 +48,7 @@ void TrueSheetContentViewShadowNode::updateNaturalHeightIfNeeded(
   auto size = getLayoutMetrics().frame.size;
 
   Float naturalHeight = size.height;
-  if (stateData.scrollableBounded) {
+  if (isHeightContainerDerived(getConcreteProps().yogaStyle)) {
     auto constraints = LayoutConstraints{};
     constraints.minimumSize = {size.width, 0};
     constraints.maximumSize = {size.width, std::numeric_limits<Float>::infinity()};

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

@@ -22,8 +22,6 @@ class JSI_EXPORT TrueSheetContentViewShadowNode final
   using ConcreteViewShadowNode::ConcreteViewShadowNode;
 
  public:
-  void adjustLayoutWithState();
-
 #pragma mark - LayoutableShadowNode
 
   void layout(LayoutContext layoutContext) override;

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

@@ -4,8 +4,7 @@ namespace facebook::react {
 
 #ifdef ANDROID
 folly::dynamic TrueSheetContentViewState::getDynamic() const {
-  return folly::dynamic::object("scrollableBounded", scrollableBounded)(
-      "naturalHeight", naturalHeight);
+  return folly::dynamic::object("naturalHeight", naturalHeight);
 }
 #endif
 

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

@@ -12,8 +12,6 @@ namespace facebook::react {
 
 /*
  * State for <TrueSheetContentView> component.
- * `scrollableBounded` is set from native when a ScrollView is detected so the
- * shadow node bounds the content to the container via flexShrink.
  * `naturalHeight` is measured by the shadow node during layout — the height
  * the content wants when unbounded (see TrueSheetContentViewShadowNode).
  */
@@ -25,13 +23,9 @@ class TrueSheetContentViewState final {
   TrueSheetContentViewState(
       TrueSheetContentViewState const &previousState,
       folly::dynamic data)
-      : scrollableBounded(
-            data.getDefault("scrollableBounded", previousState.scrollableBounded)
-                .getBool()),
-        naturalHeight(previousState.naturalHeight) {}
+      : naturalHeight(previousState.naturalHeight) {}
 #endif
 
-  bool scrollableBounded{false};
   Float naturalHeight{0};
 
 #ifdef ANDROID

package/ios/TrueSheetContainerView.h

@@ -63,12 +63,6 @@ NS_ASSUME_NONNULL_BEGIN
  */
 @property (nonatomic, assign) BOOL contentInsetAdjustment;
 
-/**
- * Whether the sheet has an `auto` detent — bounds the detected scrollable's
- * viewport to the container so the sheet height can derive from its content size
- */
-@property (nonatomic, assign) BOOL hasAutoDetent;
-
 /**
  * Bottom safe-area inset the footer absorbs as padding — the footer
  * owns the sheet's bottom edge, so its background fills the inset

package/ios/TrueSheetContainerView.mm

@@ -157,7 +157,6 @@ using namespace facebook::react;
   if (_contentView) {
     _contentView.scrollableHandle = _scrollableHandle;
     _contentView.contentInsetAdjustment = _contentInsetAdjustment;
-    _contentView.hasAutoDetent = _hasAutoDetent;
     [_contentView setupScrollable];
     [_contentView applyScrollEdgeEffects:_scrollableOptions];
     if (@available(iOS 26.0, *)) {

package/ios/TrueSheetContentView.h

@@ -48,13 +48,6 @@ NS_ASSUME_NONNULL_BEGIN
  */
 @property (nonatomic, weak, nullable) TrueSheetFooterView *footerView;
 
-/**
- * Whether the sheet has an `auto` detent. Deriving the sheet height from the
- * scroll content is circular with natural layout, so the detected ScrollView's
- * viewport is force-bounded to the container only in this case.
- */
-@property (nonatomic, assign) BOOL hasAutoDetent;
-
 /**
  * Content height measured unconstrained by the shadow node — the height the
  * content wants regardless of container bounds (see

package/ios/TrueSheetContentView.mm

@@ -29,7 +29,6 @@ using namespace facebook::react;
   CGFloat _lastReportedNaturalHeight;
   CGFloat _appliedKeyboardOffset;
   BOOL _observingTextChanges;
-  BOOL _scrollableBounded;
   UIScrollViewContentInsetAdjustmentBehavior _originalInsetAdjustmentBehavior;
   BOOL _appliedContentInsetAdjustment;
 }
@@ -60,22 +59,6 @@ using namespace facebook::react;
   }
 }
 
-// Tells the shadow node to fill the container (flexGrow/flexShrink) so the
-// detected ScrollView's viewport is bounded to the visible space. Only applied
-// for auto detents — otherwise content lays out naturally like a regular view.
-- (void)setScrollableBounded:(BOOL)bounded {
-  if (_scrollableBounded == bounded) {
-    return;
-  }
-  _scrollableBounded = bounded;
-
-  if (_state) {
-    auto newState = _state->getData();
-    newState.scrollableBounded = bounded;
-    _state->updateState(std::move(newState));
-  }
-}
-
 - (void)setScrollableHandle:(NSInteger)scrollableHandle {
   if (_scrollableHandle == scrollableHandle) {
     return;
@@ -112,17 +95,6 @@ using namespace facebook::react;
   }
 }
 
-- (void)setHasAutoDetent:(BOOL)hasAutoDetent {
-  if (_hasAutoDetent == hasAutoDetent) {
-    return;
-  }
-  _hasAutoDetent = hasAutoDetent;
-
-  if (_detectedScrollView) {
-    [self setScrollableBounded:hasAutoDetent];
-  }
-}
-
 #pragma mark - Text Change Observing
 
 // The notification is app-wide (object:nil), so only observe while the keyboard is up
@@ -207,7 +179,6 @@ using namespace facebook::react;
     _detectedScrollView.scrollView.contentInsetAdjustmentBehavior = _originalInsetAdjustmentBehavior;
     _appliedContentInsetAdjustment = NO;
   }
-  [self setScrollableBounded:NO];
   _detectedScrollView = nil;
 }
 
@@ -229,7 +200,6 @@ using namespace facebook::react;
   _detectedScrollView = scrollView;
 
   [self applyContentInsetAdjustment];
-  [self setScrollableBounded:_hasAutoDetent];
 
   // If keyboard is currently showing, re-apply the keyboard inset to the new ScrollView
   CGFloat keyboardHeight = _keyboardObserver ? _keyboardObserver.currentHeight : 0;
@@ -443,10 +413,8 @@ using namespace facebook::react;
   [self stopObservingTextChanges];
   [self clearScrollable];
   _state.reset();
-  _scrollableBounded = NO;
   _scrollableHandle = 0;
   _contentInsetAdjustment = NO;
-  _hasAutoDetent = NO;
   _lastReportedNaturalHeight = 0;
 }
 

package/ios/TrueSheetView.mm

@@ -54,7 +54,6 @@ using namespace facebook::react;
   TrueSheetViewInsetAdjustment _insetAdjustment;
   ScrollableOptions *_scrollableOptions;
   NSInteger _scrollableHandle;
-  BOOL _hasAutoDetent;
   BOOL _initialDetentAnimated;
   BOOL _isSheetUpdatePending;
   BOOL _pendingLayoutUpdate;
@@ -193,12 +192,8 @@ using namespace facebook::react;
 
   // Detents (-1 represents "auto")
   NSMutableArray *detents = [NSMutableArray new];
-  _hasAutoDetent = NO;
   for (const auto &detent : newProps.detents) {
     [detents addObject:@(detent)];
-    if (detent == -1) {
-      _hasAutoDetent = YES;
-    }
   }
 
   if (oldProps) {
@@ -833,7 +828,6 @@ using namespace facebook::react;
   _containerView.scrollableHandle = _scrollableHandle;
   _containerView.contentInsetAdjustment = (_scrollableOptions ? _scrollableOptions.contentInsetAdjustment : YES) &&
                                           _insetAdjustment == TrueSheetViewInsetAdjustment::Automatic;
-  _containerView.hasAutoDetent = _hasAutoDetent;
   [self refreshFooterBottomInset];
   [_containerView setupScrollable];
 }

package/ios/TrueSheetViewController.mm

@@ -639,24 +639,26 @@ static BOOL TrueSheetIsPhoneIdiom(void) {
     return;
   }
 
-  if (_pendingContentSizeChange || _pendingDetentsChange) {
+  // Mid-drag the frame tracks the finger — never settle or learn from it;
+  // pending changes keep their flags and settle on the first post-drag layout.
+  if ((_pendingContentSizeChange || _pendingDetentsChange) && !_isDragging) {
     _pendingContentSizeChange = NO;
     _pendingDetentsChange = NO;
     [self settleAtDetentIndex:self.currentDetentIndex debug:@"layout"];
-  } else if (!_isDragging) {
-    // Drags emit from the pan handler. A child on top moves this sheet two
-    // ways: an animated collapse/restore step (presenting/dismissing) — emit
-    // the target non-realtime so JS animates to it — or direct per-frame
-    // re-layouts while the child drags, which stay realtime.
+  } else {
+    // A child on top moves this sheet two ways: an animated collapse/restore
+    // step (presenting/dismissing) — emit the target non-realtime so JS
+    // animates to it — or direct per-frame re-layouts while the child drags,
+    // which stay realtime. Mid-drag no child is on top, so drags emit realtime.
     BOOL realtime = self.presentedViewController == nil || !self.isPresentedViewAnimating;
 
     // A layout pass at rest can nudge the frame by a sub-pixel amount
     // (pixel-grid snapping after present), leaving the interpolated index
     // slightly off the whole number. Re-learn when the frame is effectively
     // at the current detent so the drift is absorbed instead of emitted.
-    // The tight threshold keeps real movement (e.g. scroll-driven expansion)
-    // from being absorbed.
-    if (self.presentedViewController == nil && !self.isPresentedViewAnimating) {
+    // The tight threshold keeps real movement (e.g. scroll-driven expansion
+    // or a drag hovering near the detent) from being absorbed.
+    if (!_isDragging && self.presentedViewController == nil && !self.isPresentedViewAnimating) {
       NSInteger index = self.currentDetentIndex;
       CGFloat expectedHeight = [_detentCalculator resolvedHeightForIndex:index];
       CGFloat actualHeight = self.screenHeight - self.currentPosition;
@@ -780,7 +782,14 @@ static BOOL TrueSheetIsPhoneIdiom(void) {
       _isDragging = YES;
       break;
     case UIGestureRecognizerStateChanged:
-      [self emitChangePositionDelegateWithPosition:self.currentPosition realtime:YES debug:@"drag change"];
+      // Layout owns the emit while the sheet resizes with the finger (a
+      // layout pass is already queued), and the transition tick owns it
+      // during an interactive dismiss. Translation-only movement (e.g.
+      // dragging down to the first detent) triggers neither — emit here as
+      // the backup.
+      if (!_isTransitioning && !self.presentedView.layer.needsLayout && !self.viewIfLoaded.layer.needsLayout) {
+        [self emitChangePositionDelegateWithPosition:self.currentPosition realtime:YES debug:@"drag change"];
+      }
       break;
     case UIGestureRecognizerStateEnded:
     case UIGestureRecognizerStateCancelled: {
@@ -865,27 +874,26 @@ static BOOL TrueSheetIsPhoneIdiom(void) {
 }
 
 - (void)handleTransitionTick {
-  // Interactive dismiss phase (finger down) — the pan handler emits.
-  if (!_isDragging) {
-    CGFloat position = self.livePosition;
-
-    if (self.isBeingDismissed) {
-      // Emit only once the dismiss is committed: on release UIKit moves the
-      // model frame off-screen, while a cancelled drag rewinds it back to the
-      // detent (isBeingDismissed stays YES during the rewind).
-      if (self.currentPosition >= self.screenHeight) {
-        [self emitWillDismissEvents];
-      }
+  // Also covers the interactive dismiss phase (finger down) — layout passes
+  // are skipped while transitioning, so the tick owns position there too.
+  CGFloat position = self.livePosition;
 
-      // Hide blur at the end of dismiss to prevent UIVisualEffectView
-      // from causing a flicker/flash at the bottom edge of the sheet.
-      if (self.screenHeight - position < 1) {
-        _blurView.alpha = 0;
-      }
+  if (self.isBeingDismissed) {
+    // Emit only once the dismiss is committed: on release UIKit moves the
+    // model frame off-screen, while a cancelled drag rewinds it back to the
+    // detent (isBeingDismissed stays YES during the rewind).
+    if (self.currentPosition >= self.screenHeight) {
+      [self emitWillDismissEvents];
     }
 
-    [self emitChangePositionDelegateWithPosition:position realtime:YES debug:@"transition"];
+    // Hide blur at the end of dismiss to prevent UIVisualEffectView
+    // from causing a flicker/flash at the bottom edge of the sheet.
+    if (self.screenHeight - position < 1) {
+      _blurView.alpha = 0;
+    }
   }
+
+  [self emitChangePositionDelegateWithPosition:position realtime:YES debug:@"transition"];
 }
 
 /**

package/lib/module/TrueSheet.js

@@ -69,8 +69,8 @@ export class TrueSheet extends PureComponent {
     this.nativeRef = /*#__PURE__*/createRef();
     this.validateDetents();
 
-    // Lazy load by default, except when initialDetentIndex is set (for auto-presentation)
-    const shouldRenderImmediately = props.initialDetentIndex !== undefined && props.initialDetentIndex >= 0;
+    // Lazy load by default, except when auto-presenting or when lazy is disabled
+    const shouldRenderImmediately = props.initialDetentIndex !== undefined && props.initialDetentIndex >= 0 || props.lazy === false;
     this.state = {
       shouldRenderNativeView: shouldRenderImmediately,
       initialPresentReady: false,
@@ -262,9 +262,8 @@ export class TrueSheet extends PureComponent {
     this.backHandlerSubscription?.remove();
     this.backHandlerSubscription = null;
 
-    // Clean up native view after dismiss for lazy loading.
-    // Skip unmount if a present is in progress to avoid race condition.
-    if (!this.isPresenting) {
+    // Non-lazy content stays mounted; otherwise clean it up unless another presentation is active.
+    if (!this.isPresenting && this.props.lazy !== false) {
       this.setState({
         shouldRenderNativeView: false
       });
@@ -379,6 +378,11 @@ export class TrueSheet extends PureComponent {
   componentDidUpdate(prevProps) {
     this.registerInstance();
     this.updateScrollableHandle();
+    if (prevProps.lazy !== false && this.props.lazy === false && !this.state.shouldRenderNativeView) {
+      this.setState({
+        shouldRenderNativeView: true
+      });
+    }
 
     // Validate when detents prop changes
     if (prevProps.detents !== this.props.detents) {
@@ -435,6 +439,7 @@ export class TrueSheet extends PureComponent {
       insetAdjustment = 'automatic',
       ...rest
     } = this.props;
+    delete rest.lazy;
 
     // Trim to max 3 detents and clamp fractions
     const resolvedDetents = detents.slice(0, 3).map(detent => {