@lodev09/react-native-true-sheet 4.0.0-beta.1 → 4.0.0-beta.11

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

@@ -1,6 +1,10 @@
 #include "TrueSheetContentViewShadowNode.h"
 
+#include <limits>
+
 #include <react/renderer/components/view/conversions.h>
+#include <react/renderer/core/LayoutConstraints.h>
+#include <react/renderer/core/LayoutContext.h>
 
 namespace facebook::react {
 
@@ -8,35 +12,54 @@ using namespace yoga;
 
 extern const char TrueSheetContentViewComponentName[] = "TrueSheetContentView";
 
-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 pinned 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 ScrollView's content
-  // size instead (see ContentView's naturalHeight on each platform). 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);
+// measure() lays out a clone of this node, which re-enters layout() on the
+// clone — guard so the measurement pass doesn't measure again recursively.
+static thread_local bool gIsMeasuringNaturalHeight = false;
+
+void TrueSheetContentViewShadowNode::layout(LayoutContext layoutContext) {
+  ConcreteViewShadowNode::layout(layoutContext);
+  updateNaturalHeightIfNeeded(layoutContext);
+}
+
+// Even auto-height content can be constrained by the container when a
+// descendant ScrollView shrinks to fit. Its committed height then hides
+// content growth, so only a fixed, non-flexible height can be used directly.
+static bool isHeightContainerDerived(const yoga::Style &style) {
+  return style.flexGrow().unwrapOrDefault(0) > 0 ||
+      style.flexShrink().unwrapOrDefault(0) > 0 ||
+      !style.dimension(Dimension::Height).isPoints();
+}
+
+// The natural height is the height the content wants when unbounded — the
+// 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) {
+    return;
+  }
+
+  auto stateData = getStateData();
+  auto size = getLayoutMetrics().frame.size;
+
+  Float naturalHeight = size.height;
+  if (isHeightContainerDerived(getConcreteProps().yogaStyle)) {
+    auto constraints = LayoutConstraints{};
+    constraints.minimumSize = {size.width, 0};
+    constraints.maximumSize = {size.width, std::numeric_limits<Float>::infinity()};
+    constraints.layoutDirection = getLayoutMetrics().layoutDirection;
+
+    gIsMeasuringNaturalHeight = true;
+    naturalHeight = measure(layoutContext, constraints).height;
+    gIsMeasuringNaturalHeight = false;
+  }
+
+  if (stateData.naturalHeight != naturalHeight) {
+    stateData.naturalHeight = naturalHeight;
+    setStateData(std::move(stateData));
   }
 }
 

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

@@ -22,7 +22,12 @@ class JSI_EXPORT TrueSheetContentViewShadowNode final
   using ConcreteViewShadowNode::ConcreteViewShadowNode;
 
  public:
-  void adjustLayoutWithState();
+#pragma mark - LayoutableShadowNode
+
+  void layout(LayoutContext layoutContext) override;
+
+ private:
+  void updateNaturalHeightIfNeeded(const LayoutContext &layoutContext);
 };
 
 } // namespace facebook::react

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

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

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

@@ -1,5 +1,7 @@
 #pragma once
 
+#include <react/renderer/graphics/Float.h>
+
 #ifdef ANDROID
 #include <folly/dynamic.h>
 #include <react/renderer/mapbuffer/MapBuffer.h>
@@ -10,8 +12,8 @@ namespace facebook::react {
 
 /*
  * State for <TrueSheetContentView> component.
- * Set from native when a ScrollView is pinned so the shadow node bounds the
- * content to the container via flexShrink (see TrueSheetContentViewShadowNode).
+ * `naturalHeight` is measured by the shadow node during layout — the height
+ * the content wants when unbounded (see TrueSheetContentViewShadowNode).
  */
 class TrueSheetContentViewState final {
  public:
@@ -21,10 +23,10 @@ class TrueSheetContentViewState final {
   TrueSheetContentViewState(
       TrueSheetContentViewState const &previousState,
       folly::dynamic data)
-      : scrollableBounded(data["scrollableBounded"].getBool()) {}
+      : naturalHeight(previousState.naturalHeight) {}
 #endif
 
-  bool scrollableBounded{false};
+  Float naturalHeight{0};
 
 #ifdef ANDROID
   folly::dynamic getDynamic() const;

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

@@ -25,6 +25,13 @@ void TrueSheetFooterViewShadowNode::adjustLayoutWithState() {
   float bottomInset = stateData.bottomInset;
   if (!stateData.initialized && props.autoBottomInset) {
     bottomInset = TrueSheetInsets::bottomSafeArea();
+    if (bottomInset != stateData.bottomInset) {
+      // Record the seeded value so the mounted view reads exactly the inset
+      // baked into this layout — the global may change before mount.
+      auto seededData = stateData;
+      seededData.bottomInset = bottomInset;
+      setStateData(std::move(seededData));
+    }
   }
 
   // A footer pinned to the sheet's bottom edge owns the bottom safe-area

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/TrueSheetContainerView.h

@@ -16,7 +16,9 @@ NS_ASSUME_NONNULL_BEGIN
 
 @interface ScrollableOptions : NSObject
 
+@property (nonatomic, assign) BOOL contentInsetAdjustment;
 @property (nonatomic, assign) CGFloat keyboardScrollOffset;
+@property (nonatomic, assign) CGFloat keyboardOffset;
 @property (nonatomic, assign) BOOL scrollingExpandsSheet;
 @property (nonatomic, assign) facebook::react::TrueSheetViewTopScrollEdgeEffect topScrollEdgeEffect;
 @property (nonatomic, assign) facebook::react::TrueSheetViewBottomScrollEdgeEffect bottomScrollEdgeEffect;
@@ -46,20 +48,20 @@ NS_ASSUME_NONNULL_BEGIN
 @property (nonatomic, weak, nullable) id<TrueSheetContainerViewDelegate> delegate;
 
 /**
- * Inset adjustment mode for scrollable content
+ * Options for scrollable behavior
  */
-@property (nonatomic, assign) facebook::react::TrueSheetViewInsetAdjustment insetAdjustment;
+@property (nonatomic, strong, nullable) ScrollableOptions *scrollableOptions;
 
 /**
- * Options for scrollable behavior
+ * React tag of the user-provided scrollable within the content (see the `scrollableRef` prop)
  */
-@property (nonatomic, strong, nullable) ScrollableOptions *scrollableOptions;
+@property (nonatomic, assign) NSInteger scrollableHandle;
 
 /**
- * Whether the sheet has an `auto` detent — bounds the pinned scrollable's
- * viewport to the container so the sheet height can derive from its content size
+ * Whether the resolved scrollable's `contentInsetAdjustmentBehavior` is set to
+ * `automatic` — already gated by the sheet's `insetAdjustment`
  */
-@property (nonatomic, assign) BOOL hasAutoDetent;
+@property (nonatomic, assign) BOOL contentInsetAdjustment;
 
 /**
  * Bottom safe-area inset the footer absorbs as padding — the footer
@@ -82,6 +84,11 @@ NS_ASSUME_NONNULL_BEGIN
  */
 - (CGFloat)footerHeight;
 
+/**
+ * Returns the bottom inset currently baked into the footer's height
+ */
+- (CGFloat)footerAppliedBottomInset;
+
 /**
  * Returns the current height of the peek view within the content
  */

package/ios/TrueSheetContainerView.mm

@@ -17,7 +17,6 @@
 #import "TrueSheetViewController.h"
 #import "core/TrueSheetKeyboardObserver.h"
 #import "utils/UIView+ScrollEdgeInteraction.h"
-#import "utils/WindowUtil.h"
 
 #import <react/renderer/components/TrueSheetSpec/ComponentDescriptors.h>
 #import <react/renderer/components/TrueSheetSpec/EventEmitters.h>
@@ -33,7 +32,9 @@ using namespace facebook::react;
 
 - (instancetype)init {
   if (self = [super init]) {
+    _contentInsetAdjustment = YES;
     _keyboardScrollOffset = 0;
+    _keyboardOffset = 0;
     _scrollingExpandsSheet = YES;
     _topScrollEdgeEffect = TrueSheetViewTopScrollEdgeEffect::Hidden;
     _bottomScrollEdgeEffect = TrueSheetViewBottomScrollEdgeEffect::Hidden;
@@ -118,6 +119,10 @@ using namespace facebook::react;
   return _footerView ? _footerView.frame.size.height : 0;
 }
 
+- (CGFloat)footerAppliedBottomInset {
+  return _footerView ? _footerView.appliedBottomInset : 0;
+}
+
 // Distance from the top of the content view to the bottom of the peek view.
 // Includes the peek view's offset within the content (padding, views above it)
 // so the peek detent reveals everything down to the peek content's bottom edge.
@@ -145,16 +150,14 @@ using namespace facebook::react;
 - (void)setScrollableOptions:(ScrollableOptions *)scrollableOptions {
   _scrollableOptions = scrollableOptions;
   _contentView.keyboardScrollOffset = scrollableOptions ? scrollableOptions.keyboardScrollOffset : 0;
+  _contentView.keyboardOffset = scrollableOptions ? scrollableOptions.keyboardOffset : 0;
 }
 
 - (void)setupScrollable {
   if (_contentView) {
-    CGFloat bottomInset = 0;
-    if (_insetAdjustment == TrueSheetViewInsetAdjustment::Automatic) {
-      bottomInset = [WindowUtil keyWindow].safeAreaInsets.bottom;
-    }
-    _contentView.hasAutoDetent = _hasAutoDetent;
-    [_contentView setupScrollableWithBottomInset:bottomInset];
+    _contentView.scrollableHandle = _scrollableHandle;
+    _contentView.contentInsetAdjustment = _contentInsetAdjustment;
+    [_contentView setupScrollable];
     [_contentView applyScrollEdgeEffects:_scrollableOptions];
     if (@available(iOS 26.0, *)) {
       [self setupEdgeInteractions];

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,42 +29,57 @@ 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;
+
+/**
+ * Adjustment added to the keyboard bottom inset applied to the detected
+ * scrollable — negative values reduce the inset (e.g. to cancel out safe-area
+ * padding already baked into the content's paddingBottom).
+ */
+@property (nonatomic, assign) CGFloat keyboardOffset;
+
 @property (nonatomic, weak, nullable) TrueSheetKeyboardObserver *keyboardObserver;
 
 /**
- * Sibling footer view — an absolute footer rises above the keyboard and
- * occludes the content's bottom edge, so it counts toward the keyboard inset.
+ * Sibling footer view — a relative footer shields part of the keyboard's
+ * overlap from the inset; an absolute footer extends the caret reveal target.
  */
 @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 pinned ScrollView's
- * viewport is force-bounded to the container only in this case.
+ * Content height measured unconstrained by the shadow node — the height the
+ * content wants regardless of container bounds (see
+ * TrueSheetContentViewShadowNode). Falls back to the frame height before the
+ * first state update.
  */
-@property (nonatomic, assign) BOOL hasAutoDetent;
+@property (nonatomic, readonly) CGFloat naturalHeight;
 
 /**
- * Content height with the pinned ScrollView's viewport replaced by its content
- * size — the height the content wants regardless of container bounds.
- * Falls back to the frame height when no ScrollView is pinned.
+ * React tag of the user-provided scrollable (see the `scrollableRef` prop).
+ * Setting a new handle clears the currently resolved ScrollView.
  */
-@property (nonatomic, readonly) CGFloat naturalHeight;
+@property (nonatomic, assign) NSInteger scrollableHandle;
+
+/**
+ * Sets the resolved ScrollView's `contentInsetAdjustmentBehavior` to
+ * `automatic` while plugged so UIKit applies the bottom safe-area inset to
+ * the scroll content. The previous behavior is restored on clear.
+ */
+@property (nonatomic, assign) BOOL contentInsetAdjustment;
 
 - (RCTScrollViewComponentView *_Nullable)findScrollView;
 
 /**
- * Pin the first ScrollView found in the content, wiring insets and keyboard handling
- * @param bottomInset Bottom content inset for the scroll view
+ * Resolve the ScrollView from `scrollableHandle`, wiring keyboard handling
  */
-- (void)setupScrollableWithBottomInset:(CGFloat)bottomInset;
+- (void)setupScrollable;
 
 /**
- * Apply scroll edge effects to the pinned scroll view (iOS 26+)
+ * Apply scroll edge effects to the detected scroll view (iOS 26+)
  */
 - (void)applyScrollEdgeEffects:(nullable ScrollableOptions *)options;