@lodev09/react-native-true-sheet 4.0.0-beta.2 → 4.0.0-beta.20

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

@@ -0,0 +1,43 @@
+#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,33 @@
+#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/TrueSheetViewComponentDescriptor.h

@@ -8,13 +8,11 @@ namespace facebook::react {
 /*
  * Descriptor for <TrueSheetView> component.
  */
-class TrueSheetViewComponentDescriptor final
-    : public ConcreteComponentDescriptor<TrueSheetViewShadowNode> {
+class TrueSheetViewComponentDescriptor final : public ConcreteComponentDescriptor<TrueSheetViewShadowNode> {
   using ConcreteComponentDescriptor::ConcreteComponentDescriptor;
 
   void adopt(ShadowNode &shadowNode) const override {
-    auto &concreteShadowNode =
-        static_cast<TrueSheetViewShadowNode &>(shadowNode);
+    auto &concreteShadowNode = static_cast<TrueSheetViewShadowNode &>(shadowNode);
     concreteShadowNode.adjustLayoutWithState();
 
     ConcreteComponentDescriptor::adopt(shadowNode);
@@ -25,4 +23,4 @@ class TrueSheetViewComponentDescriptor final
   }
 };
 
-} // namespace facebook::react
+}  // namespace facebook::react

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

@@ -1,61 +1,28 @@
 #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)
-void TrueSheetViewShadowNode::setEventDispatcher(
-    std::weak_ptr<const EventDispatcher> dispatcher) {
+void TrueSheetViewShadowNode::setEventDispatcher(std::weak_ptr<const EventDispatcher> dispatcher) {
   getStateDataMutable().setEventDispatcher(dispatcher);
 }
 
-TrueSheetViewShadowNode::StateData &
-TrueSheetViewShadowNode::getStateDataMutable() {
+TrueSheetViewShadowNode::StateData &TrueSheetViewShadowNode::getStateDataMutable() {
   ensureUnsealed();
   return const_cast<TrueSheetViewShadowNode::StateData &>(getStateData());
 }
 #endif
 
-} // namespace facebook::react
+}  // namespace facebook::react

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

@@ -15,12 +15,8 @@ JSI_EXPORT extern const char TrueSheetViewComponentName[];
 /*
  * `ShadowNode` for <TrueSheetView> component.
  */
-class JSI_EXPORT TrueSheetViewShadowNode final
-    : public ConcreteViewShadowNode<
-          TrueSheetViewComponentName,
-          TrueSheetViewProps,
-          TrueSheetViewEventEmitter,
-          TrueSheetViewState> {
+class JSI_EXPORT TrueSheetViewShadowNode final : public ConcreteViewShadowNode<TrueSheetViewComponentName,
+                                                   TrueSheetViewProps, TrueSheetViewEventEmitter, TrueSheetViewState> {
   using ConcreteViewShadowNode::ConcreteViewShadowNode;
 
  public:
@@ -42,4 +38,4 @@ class JSI_EXPORT TrueSheetViewShadowNode final
 #endif
 };
 
-} // namespace facebook::react
+}  // namespace facebook::react

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

@@ -9,15 +9,13 @@ folly::dynamic TrueSheetViewState::getDynamic() const {
 #endif
 
 #if !defined(ANDROID)
-void TrueSheetViewState::setEventDispatcher(
-    std::weak_ptr<const EventDispatcher> dispatcher) {
+void TrueSheetViewState::setEventDispatcher(std::weak_ptr<const EventDispatcher> dispatcher) {
   eventDispatcher_ = dispatcher;
 }
 
-std::weak_ptr<const EventDispatcher> TrueSheetViewState::getEventDispatcher()
-    const noexcept {
+std::weak_ptr<const EventDispatcher> TrueSheetViewState::getEventDispatcher() const noexcept {
   return eventDispatcher_;
 }
 #endif
 
-} // namespace facebook::react
+}  // namespace facebook::react

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

@@ -23,11 +23,10 @@ class TrueSheetViewState final {
   TrueSheetViewState() = default;
 
 #ifdef ANDROID
-  TrueSheetViewState(
-      TrueSheetViewState const &previousState,
-      folly::dynamic data)
+  TrueSheetViewState(TrueSheetViewState const &previousState, folly::dynamic data)
       : containerWidth(static_cast<float>(data["containerWidth"].getDouble())),
-        containerHeight(static_cast<float>(data["containerHeight"].getDouble())) {}
+        containerHeight(static_cast<float>(data["containerHeight"].getDouble())) {
+  }
 #endif
 
   float containerWidth{0};
@@ -49,4 +48,4 @@ class TrueSheetViewState final {
 #endif
 };
 
-} // namespace facebook::react
+}  // namespace facebook::react

package/ios/TrueSheetContainerView.h

@@ -16,11 +16,19 @@ NS_ASSUME_NONNULL_BEGIN
 
 @interface ScrollableOptions : NSObject
 
+@property (nonatomic, assign) facebook::react::TrueSheetViewContentInsetAdjustment 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;
 
+/**
+ * Derived from `contentInsetAdjustment` — which of the two bottom insets apply
+ */
+@property (nonatomic, readonly) BOOL safeAreaInsetAdjustment;
+@property (nonatomic, readonly) BOOL footerInsetAdjustment;
+
 @end
 
 @class TrueSheetPeekView;
@@ -46,20 +54,27 @@ 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 gets the bottom safe-area inset (UIKit's
+ * `contentInsetAdjustmentBehavior` set to `automatic`) — already gated by the
+ * sheet's `insetAdjustment`
  */
-@property (nonatomic, assign) BOOL hasAutoDetent;
+@property (nonatomic, assign) BOOL safeAreaInsetAdjustment;
+
+/**
+ * Whether the resolved scrollable is padded by the absolute footer's height —
+ * already gated by the footer position and a plugged scrollable
+ */
+@property (nonatomic, assign) BOOL footerInsetAdjustment;
 
 /**
  * Bottom safe-area inset the footer absorbs as padding — the footer
@@ -82,6 +97,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 = TrueSheetViewContentInsetAdjustment::Automatic;
     _keyboardScrollOffset = 0;
+    _keyboardOffset = 0;
     _scrollingExpandsSheet = YES;
     _topScrollEdgeEffect = TrueSheetViewTopScrollEdgeEffect::Hidden;
     _bottomScrollEdgeEffect = TrueSheetViewBottomScrollEdgeEffect::Hidden;
@@ -41,6 +42,16 @@ using namespace facebook::react;
   return self;
 }
 
+- (BOOL)safeAreaInsetAdjustment {
+  return _contentInsetAdjustment == TrueSheetViewContentInsetAdjustment::Automatic ||
+         _contentInsetAdjustment == TrueSheetViewContentInsetAdjustment::SafeArea;
+}
+
+- (BOOL)footerInsetAdjustment {
+  return _contentInsetAdjustment == TrueSheetViewContentInsetAdjustment::Automatic ||
+         _contentInsetAdjustment == TrueSheetViewContentInsetAdjustment::Footer;
+}
+
 @end
 
 @interface TrueSheetContainerView () <TrueSheetContentViewDelegate,
@@ -118,6 +129,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 +160,20 @@ using namespace facebook::react;
 - (void)setScrollableOptions:(ScrollableOptions *)scrollableOptions {
   _scrollableOptions = scrollableOptions;
   _contentView.keyboardScrollOffset = scrollableOptions ? scrollableOptions.keyboardScrollOffset : 0;
+  _contentView.keyboardOffset = scrollableOptions ? scrollableOptions.keyboardOffset : 0;
+}
+
+- (void)setFooterInsetAdjustment:(BOOL)footerInsetAdjustment {
+  _footerInsetAdjustment = footerInsetAdjustment;
+  _contentView.footerInsetAdjustment = footerInsetAdjustment;
 }
 
 - (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.safeAreaInsetAdjustment = _safeAreaInsetAdjustment;
+    _contentView.footerInsetAdjustment = _footerInsetAdjustment;
+    [_contentView setupScrollable];
     [_contentView applyScrollEdgeEffects:_scrollableOptions];
     if (@available(iOS 26.0, *)) {
       [self setupEdgeInteractions];
@@ -199,6 +218,7 @@ using namespace facebook::react;
     _contentView = (TrueSheetContentView *)childComponentView;
     _contentView.delegate = self;
     _contentView.footerView = _footerView;
+    _contentView.footerInsetAdjustment = _footerInsetAdjustment;
 
     // Children mount bottom-up, so the content subtree is complete here.
     // Late-mounted peek views attach themselves instead (see TrueSheetPeekView).
@@ -280,6 +300,7 @@ using namespace facebook::react;
 
 - (void)footerViewDidChangeSize:(CGSize)newSize {
   [self.delegate containerViewFooterDidChangeSize:newSize];
+  [_contentView updateBottomInset];
   if (@available(iOS 26.0, *)) {
     [self setupEdgeInteractions];
   }
@@ -307,10 +328,9 @@ using namespace facebook::react;
     return;
   }
 
-  if (_peekView != nil) {
-    RCTLogWarn(@"TrueSheet: Sheet can only have one peek component.");
-    return;
-  }
+  // Last-attached wins. During a screen transition the incoming peek mounts
+  // before the outgoing one detaches, and the outgoing detach is a no-op.
+  _peekView.delegate = nil;
 
   _peekView = peekView;
   peekView.delegate = self;

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,69 @@ 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 safeAreaInsetAdjustment;
+
+/**
+ * Pads the resolved ScrollView's bottom content inset by the absolute
+ * footer's height so the last item scrolls into view above it. Stacks with
+ * the keyboard inset.
+ */
+@property (nonatomic, assign) BOOL footerInsetAdjustment;
 
 - (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
+ * Re-applies the footer and keyboard insets — call when the footer's size changes
+ */
+- (void)updateBottomInset;
+
+/**
+ * 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;