@lodev09/react-native-true-sheet 3.11.4 → 3.11.6

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

@@ -2,8 +2,10 @@ package com.lodev09.truesheet
 
 import android.annotation.SuppressLint
 import android.view.View
+import android.view.ViewGroup
 import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.uimanager.events.EventDispatcher
+import com.facebook.react.util.RNLog
 import com.facebook.react.views.view.ReactViewGroup
 
 interface TrueSheetContainerViewDelegate {
@@ -13,6 +15,7 @@ interface TrueSheetContainerViewDelegate {
   fun containerViewScrollViewDidChange()
   fun containerViewHeaderDidChangeSize(width: Int, height: Int)
   fun containerViewFooterDidChangeSize(width: Int, height: Int)
+  fun containerViewPeekDidChangeSize(width: Int, height: Int)
 }
 
 /**
@@ -24,18 +27,40 @@ class TrueSheetContainerView(reactContext: ThemedReactContext) :
   ReactViewGroup(reactContext),
   TrueSheetContentViewDelegate,
   TrueSheetHeaderViewDelegate,
-  TrueSheetFooterViewDelegate {
+  TrueSheetFooterViewDelegate,
+  TrueSheetPeekViewDelegate {
 
   var delegate: TrueSheetContainerViewDelegate? = null
 
   var contentView: TrueSheetContentView? = null
   var headerView: TrueSheetHeaderView? = null
   var footerView: TrueSheetFooterView? = null
+  var peekView: TrueSheetPeekView? = null
 
   var contentHeight: Int = 0
   var headerHeight: Int = 0
   var footerHeight: Int = 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.
+   */
+  val peekContentHeight: Int
+    get() {
+      val peek = peekView ?: return 0
+      val content = contentView ?: return peek.height
+
+      var bottom = peek.height
+      var view: View = peek
+      while (view !== content) {
+        bottom += view.top
+        view = view.parent as? View ?: return peek.height
+      }
+
+      return bottom
+    }
+
   var insetAdjustment: TrueSheetInsetAdjustment = TrueSheetInsetAdjustment.AUTOMATIC
   var scrollViewBottomInset: Int = 0
   var scrollableEnabled: Boolean = false
@@ -75,6 +100,10 @@ class TrueSheetContainerView(reactContext: ThemedReactContext) :
         child.delegate = this
         child.scrollableOptions = scrollableOptions
         contentView = child
+
+        // Children mount bottom-up, so the content subtree is complete here.
+        // Late-mounted peek views attach themselves instead (see TrueSheetPeekView).
+        findPeekView(child)?.let { attachPeekView(it) }
       }
 
       is TrueSheetHeaderView -> {
@@ -113,6 +142,41 @@ class TrueSheetContainerView(reactContext: ThemedReactContext) :
     super.removeViewAt(index)
   }
 
+  // ==================== Peek View ====================
+
+  private fun findPeekView(view: View): TrueSheetPeekView? {
+    if (view is TrueSheetPeekView) return view
+
+    if (view is ViewGroup) {
+      for (i in 0 until view.childCount) {
+        findPeekView(view.getChildAt(i))?.let { return it }
+      }
+    }
+
+    return null
+  }
+
+  fun attachPeekView(view: TrueSheetPeekView) {
+    if (peekView === view) return
+
+    if (peekView != null) {
+      RNLog.w(context as ThemedReactContext, "TrueSheet: Sheet can only have one peek component.")
+      return
+    }
+
+    peekView = view
+    view.delegate = this
+    peekViewDidChangeSize(view.width, view.height)
+  }
+
+  fun detachPeekView(view: TrueSheetPeekView) {
+    if (peekView !== view) return
+
+    view.delegate = null
+    peekView = null
+    peekViewDidChangeSize(0, 0)
+  }
+
   // ==================== Delegate Implementations ====================
 
   override fun contentViewDidChangeSize(width: Int, height: Int) {
@@ -138,6 +202,10 @@ class TrueSheetContainerView(reactContext: ThemedReactContext) :
     delegate?.containerViewFooterDidChangeSize(width, height)
   }
 
+  override fun peekViewDidChangeSize(width: Int, height: Int) {
+    delegate?.containerViewPeekDidChangeSize(width, height)
+  }
+
   companion object {
     const val TAG_NAME = "TrueSheet"
   }

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

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

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

@@ -0,0 +1,72 @@
+package com.lodev09.truesheet
+
+import android.annotation.SuppressLint
+import android.view.ViewParent
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.views.view.ReactViewGroup
+
+/**
+ * Delegate interface for peek view size changes
+ */
+interface TrueSheetPeekViewDelegate {
+  fun peekViewDidChangeSize(width: Int, height: Int)
+}
+
+/**
+ * Peek view that marks part of the content as the sheet's peek content.
+ * The peek detent covers the content through this view's bottom edge.
+ */
+@SuppressLint("ViewConstructor")
+class TrueSheetPeekView(context: ThemedReactContext) : ReactViewGroup(context) {
+  var delegate: TrueSheetPeekViewDelegate? = null
+
+  override fun onLayout(
+    changed: Boolean,
+    left: Int,
+    top: Int,
+    right: Int,
+    bottom: Int
+  ) {
+    super.onLayout(changed, left, top, right, bottom)
+
+    attachToContainerView()
+
+    // Position changes matter too — the peek's offset within the content
+    // affects the peek detent.
+    if (changed) {
+      delegate?.peekViewDidChangeSize(width, height)
+    }
+  }
+
+  override fun onAttachedToWindow() {
+    super.onAttachedToWindow()
+    attachToContainerView()
+  }
+
+  /**
+   * Peek can be nested anywhere within the content, so it attaches itself to the
+   * nearest container instead of being mounted by it. The container also searches
+   * for it when the content is added to cover the initial (bottom-up) mount order.
+   */
+  private fun attachToContainerView() {
+    if (delegate != null) return
+
+    var parent: ViewParent? = parent
+    while (parent != null && parent !is TrueSheetContainerView) {
+      parent = parent.parent
+    }
+
+    (parent as? TrueSheetContainerView)?.attachPeekView(this)
+  }
+
+  /**
+   * Called by the ViewManager when the view is dropped (Fabric unmount)
+   */
+  fun detachFromContainerView() {
+    (delegate as? TrueSheetContainerView)?.detachPeekView(this)
+  }
+
+  companion object {
+    const val TAG_NAME = "TrueSheet"
+  }
+}

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

@@ -0,0 +1,33 @@
+package com.lodev09.truesheet
+
+import com.facebook.react.module.annotations.ReactModule
+import com.facebook.react.uimanager.PointerEvents
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.ViewGroupManager
+import com.facebook.react.uimanager.annotations.ReactProp
+
+/**
+ * ViewManager for TrueSheetPeekView
+ * Marks part of the content as the sheet's peek content
+ */
+@ReactModule(name = TrueSheetPeekViewManager.REACT_CLASS)
+class TrueSheetPeekViewManager : ViewGroupManager<TrueSheetPeekView>() {
+
+  override fun getName(): String = REACT_CLASS
+
+  override fun createViewInstance(reactContext: ThemedReactContext): TrueSheetPeekView = TrueSheetPeekView(reactContext)
+
+  override fun onDropViewInstance(view: TrueSheetPeekView) {
+    super.onDropViewInstance(view)
+    view.detachFromContainerView()
+  }
+
+  @ReactProp(name = "pointerEvents")
+  fun setPointerEvents(view: TrueSheetPeekView, pointerEventsStr: String?) {
+    view.pointerEvents = PointerEvents.parsePointerEvents(pointerEventsStr)
+  }
+
+  companion object {
+    const val REACT_CLASS = "TrueSheetPeekView"
+  }
+}

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

@@ -620,6 +620,11 @@ class TrueSheetView(private val reactContext: ThemedReactContext) :
     viewController.positionFooter()
   }
 
+  override fun containerViewPeekDidChangeSize(width: Int, height: Int) {
+    // Peek content height affects peek detents
+    updateSheetIfNeeded()
+  }
+
   // ==================== RNScreensEventObserverDelegate ====================
 
   override fun presenterScreenWillDisappear() {

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

@@ -276,6 +276,7 @@ class TrueSheetViewController(private val reactContext: ThemedReactContext) :
   private var cachedContentHeight: Int = 0
   private var cachedHeaderHeight: Int = 0
   private var cachedFooterHeight: Int = 0
+  private var cachedPeekContentHeight: Int = 0
 
   override val contentHeight: Int
     get() = containerView?.contentHeight ?: cachedContentHeight
@@ -286,6 +287,9 @@ class TrueSheetViewController(private val reactContext: ThemedReactContext) :
   override val footerHeight: Int
     get() = containerView?.footerHeight ?: cachedFooterHeight
 
+  override val peekContentHeight: Int
+    get() = containerView?.peekContentHeight ?: cachedPeekContentHeight
+
   // Insets
   // Target keyboard height used for detent calculations
   override val keyboardInset: Int
@@ -841,6 +845,7 @@ class TrueSheetViewController(private val reactContext: ThemedReactContext) :
       cachedContentHeight = it.contentHeight
       cachedHeaderHeight = it.headerHeight
       cachedFooterHeight = it.footerHeight
+      cachedPeekContentHeight = it.peekContentHeight
     }
 
     interactionState = InteractionState.Reconfiguring

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

@@ -16,6 +16,7 @@ interface TrueSheetDetentCalculatorDelegate {
   val contentHeight: Int
   val headerHeight: Int
   val footerHeight: Int
+  val peekContentHeight: Int
   val contentBottomInset: Int
   val maxContentHeight: Int?
   val keyboardInset: Int
@@ -34,17 +35,18 @@ class TrueSheetDetentCalculator(private val reactContext: ThemedReactContext) {
   private val contentHeight: Int get() = delegate?.contentHeight ?: 0
   private val headerHeight: Int get() = delegate?.headerHeight ?: 0
   private val footerHeight: Int get() = delegate?.footerHeight ?: 0
+  private val peekContentHeight: Int get() = delegate?.peekContentHeight ?: 0
   private val contentBottomInset: Int get() = delegate?.contentBottomInset ?: 0
   private val maxContentHeight: Int? get() = delegate?.maxContentHeight
   private val keyboardInset: Int get() = delegate?.keyboardInset ?: 0
 
   /**
-   * Height for peek (-2.0) detents: header + footer height.
-   * Falls back to 150dp when neither is present.
+   * Height for peek (-2.0) detents: header + footer + peek content height.
+   * Falls back to 150dp when none is present.
    */
   private val peekDetentHeight: Int
     get() {
-      val height = headerHeight + footerHeight
+      val height = headerHeight + footerHeight + peekContentHeight
       return if (height > 0) height else DEFAULT_PEEK_HEIGHT.dpToPx().toInt()
     }
 

package/ios/TrueSheetContainerView.h

@@ -23,6 +23,8 @@ NS_ASSUME_NONNULL_BEGIN
 
 @end
 
+@class TrueSheetPeekView;
+
 @protocol TrueSheetContainerViewDelegate <NSObject>
 
 - (void)containerViewContentDidChangeSize:(CGSize)newSize;
@@ -32,6 +34,7 @@ NS_ASSUME_NONNULL_BEGIN
 
 - (void)containerViewHeaderDidChangeSize:(CGSize)newSize;
 - (void)containerViewFooterDidChangeSize:(CGSize)newSize;
+- (void)containerViewPeekDidChangeSize:(CGSize)newSize;
 
 @end
 
@@ -72,6 +75,16 @@ NS_ASSUME_NONNULL_BEGIN
  */
 - (CGFloat)footerHeight;
 
+/**
+ * Returns the current height of the peek view within the content
+ */
+- (CGFloat)peekContentHeight;
+
+/**
+ * Registers a peek view found within the content subtree
+ */
+- (void)attachPeekView:(TrueSheetPeekView *)peekView;
+
 /**
  * Updates footer layout constraints if needed
  */

package/ios/TrueSheetContainerView.mm

@@ -13,6 +13,7 @@
 #import "TrueSheetContentView.h"
 #import "TrueSheetFooterView.h"
 #import "TrueSheetHeaderView.h"
+#import "TrueSheetPeekView.h"
 #import "TrueSheetViewController.h"
 #import "core/TrueSheetKeyboardObserver.h"
 #import "utils/UIView+ScrollEdgeInteraction.h"
@@ -45,13 +46,15 @@ using namespace facebook::react;
 
 @interface TrueSheetContainerView () <TrueSheetContentViewDelegate,
   TrueSheetHeaderViewDelegate,
-  TrueSheetFooterViewDelegate>
+  TrueSheetFooterViewDelegate,
+  TrueSheetPeekViewDelegate>
 @end
 
 @implementation TrueSheetContainerView {
   TrueSheetContentView *_contentView;
   TrueSheetHeaderView *_headerView;
   TrueSheetFooterView *_footerView;
+  TrueSheetPeekView *__weak _peekView;
   TrueSheetKeyboardObserver *_keyboardObserver;
   BOOL _scrollableSet;
 }
@@ -123,6 +126,21 @@ using namespace facebook::react;
   return _footerView ? _footerView.frame.size.height : 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.
+- (CGFloat)peekContentHeight {
+  if (!_peekView) {
+    return 0;
+  }
+
+  if (!_contentView || ![_peekView isDescendantOfView:_contentView]) {
+    return _peekView.frame.size.height;
+  }
+
+  return CGRectGetMaxY([_peekView convertRect:_peekView.bounds toView:_contentView]);
+}
+
 - (void)layoutFooter {
   if (_footerView) {
     CGFloat height = _footerView.frame.size.height;
@@ -196,6 +214,13 @@ using namespace facebook::react;
     }
     _contentView = (TrueSheetContentView *)childComponentView;
     _contentView.delegate = self;
+
+    // Children mount bottom-up, so the content subtree is complete here.
+    // Late-mounted peek views attach themselves instead (see TrueSheetPeekView).
+    TrueSheetPeekView *peekView = [self findPeekViewIn:_contentView];
+    if (peekView) {
+      [self attachPeekView:peekView];
+    }
   }
 
   if ([childComponentView isKindOfClass:[TrueSheetHeaderView class]]) {
@@ -278,6 +303,52 @@ using namespace facebook::react;
   }
 }
 
+#pragma mark - TrueSheetPeekViewDelegate
+
+- (nullable TrueSheetPeekView *)findPeekViewIn:(UIView *)view {
+  if ([view isKindOfClass:[TrueSheetPeekView class]]) {
+    return (TrueSheetPeekView *)view;
+  }
+
+  for (UIView *subview in view.subviews) {
+    TrueSheetPeekView *found = [self findPeekViewIn:subview];
+    if (found) {
+      return found;
+    }
+  }
+
+  return nil;
+}
+
+- (void)attachPeekView:(TrueSheetPeekView *)peekView {
+  if (_peekView == peekView) {
+    return;
+  }
+
+  if (_peekView != nil) {
+    RCTLogWarn(@"TrueSheet: Sheet can only have one peek component.");
+    return;
+  }
+
+  _peekView = peekView;
+  peekView.delegate = self;
+  [self peekViewDidChangeSize:peekView.frame.size];
+}
+
+- (void)peekViewDidChangeSize:(CGSize)newSize {
+  [self.delegate containerViewPeekDidChangeSize:newSize];
+}
+
+- (void)peekViewWillDetach:(TrueSheetPeekView *)peekView {
+  if (_peekView != peekView) {
+    return;
+  }
+
+  _peekView.delegate = nil;
+  _peekView = nil;
+  [self peekViewDidChangeSize:CGSizeZero];
+}
+
 #pragma mark - Keyboard Observer
 
 - (void)setupKeyboardObserverWithViewController:(UIViewController *)viewController {

package/ios/TrueSheetPeekView.h

@@ -0,0 +1,32 @@
+//
+//  Created by Jovanni Lo (@lodev09)
+//  Copyright (c) 2024-present. All rights reserved.
+//
+//  This source code is licensed under the MIT license found in the
+//  LICENSE file in the root directory of this source tree.
+//
+
+#ifdef RCT_NEW_ARCH_ENABLED
+
+#import <React/RCTViewComponentView.h>
+#import <UIKit/UIKit.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@class TrueSheetPeekView;
+
+@protocol TrueSheetPeekViewDelegate <NSObject>
+@optional
+- (void)peekViewDidChangeSize:(CGSize)size;
+- (void)peekViewWillDetach:(TrueSheetPeekView *)peekView;
+@end
+
+@interface TrueSheetPeekView : RCTViewComponentView
+
+@property (nonatomic, weak, nullable) id<TrueSheetPeekViewDelegate> delegate;
+
+@end
+
+NS_ASSUME_NONNULL_END
+
+#endif

package/ios/TrueSheetPeekView.mm

@@ -0,0 +1,99 @@
+//
+//  Created by Jovanni Lo (@lodev09)
+//  Copyright (c) 2024-present. All rights reserved.
+//
+//  This source code is licensed under the MIT license found in the
+//  LICENSE file in the root directory of this source tree.
+//
+
+#ifdef RCT_NEW_ARCH_ENABLED
+
+#import "TrueSheetPeekView.h"
+#import <react/renderer/components/TrueSheetSpec/ComponentDescriptors.h>
+#import <react/renderer/components/TrueSheetSpec/EventEmitters.h>
+#import <react/renderer/components/TrueSheetSpec/Props.h>
+#import <react/renderer/components/TrueSheetSpec/RCTComponentViewHelpers.h>
+#import "TrueSheetContainerView.h"
+
+using namespace facebook::react;
+
+@implementation TrueSheetPeekView {
+  CGRect _lastFrame;
+}
+
++ (ComponentDescriptorProvider)componentDescriptorProvider {
+  return concreteComponentDescriptorProvider<TrueSheetPeekViewComponentDescriptor>();
+}
+
+- (instancetype)initWithFrame:(CGRect)frame {
+  if (self = [super initWithFrame:frame]) {
+    static const auto defaultProps = std::make_shared<const TrueSheetPeekViewProps>();
+    _props = defaultProps;
+
+    _lastFrame = CGRectZero;
+  }
+  return self;
+}
+
+/**
+ * Peek can be nested anywhere within the content, so it attaches itself to the
+ * nearest container instead of being mounted by it. The container also searches
+ * for it when the content mounts to cover the initial (bottom-up) mount order.
+ */
+- (void)attachToContainerView {
+  if (self.delegate) {
+    return;
+  }
+
+  UIView *view = self.superview;
+  while (view && ![view isKindOfClass:[TrueSheetContainerView class]]) {
+    view = view.superview;
+  }
+
+  if (view) {
+    [(TrueSheetContainerView *)view attachPeekView:self];
+  }
+}
+
+- (void)didMoveToSuperview {
+  [super didMoveToSuperview];
+  if (self.superview) {
+    [self attachToContainerView];
+  }
+}
+
+- (void)didMoveToWindow {
+  [super didMoveToWindow];
+  if (self.window) {
+    [self attachToContainerView];
+  }
+}
+
+- (void)updateLayoutMetrics:(const facebook::react::LayoutMetrics &)layoutMetrics
+           oldLayoutMetrics:(const facebook::react::LayoutMetrics &)oldLayoutMetrics {
+  [super updateLayoutMetrics:layoutMetrics oldLayoutMetrics:oldLayoutMetrics];
+
+  // Compare the whole frame — the peek's offset within the content affects
+  // the peek detent, so position changes matter too.
+  CGRect newFrame = CGRectMake(layoutMetrics.frame.origin.x, layoutMetrics.frame.origin.y,
+    layoutMetrics.frame.size.width, layoutMetrics.frame.size.height);
+
+  if (!CGRectEqualToRect(newFrame, _lastFrame)) {
+    _lastFrame = newFrame;
+    [self.delegate peekViewDidChangeSize:newFrame.size];
+  }
+}
+
+- (void)prepareForRecycle {
+  [super prepareForRecycle];
+  _lastFrame = CGRectZero;
+  [self.delegate peekViewWillDetach:self];
+}
+
+@end
+
+Class<RCTComponentViewProtocol> TrueSheetPeekViewCls(void) {
+  return TrueSheetPeekView.class;
+}
+
+#endif

package/ios/TrueSheetView.mm

@@ -398,6 +398,11 @@ using namespace facebook::react;
     _controller.footerHeight = @(footerHeight);
   }
 
+  CGFloat peekContentHeight = [_containerView peekContentHeight];
+  if (peekContentHeight > 0) {
+    _controller.peekContentHeight = @(peekContentHeight);
+  }
+
   if (_eventEmitter) {
     [TrueSheetLifecycleEvents emitMount:_eventEmitter];
   } else {
@@ -570,6 +575,9 @@ using namespace facebook::react;
     if (!self->_containerView)
       return;
 
+    // Refresh here (not just on peek size events) since the peek's offset
+    // within the content can change without its own size changing.
+    self->_controller.peekContentHeight = @([self->_containerView peekContentHeight]);
     [self->_controller setupSheetDetentsForSizeChange];
   });
 }
@@ -590,6 +598,10 @@ using namespace facebook::react;
   [_controller setupAccessibilityContainer];
 }
 
+- (void)containerViewPeekDidChangeSize:(CGSize)newSize {
+  [self setupSheetDetentsForSizeChange];
+}
+
 // When the ScrollView changes (e.g. conditional remount), re-pin the new ScrollView.
 - (void)containerViewScrollViewDidChange {
   [self setupScrollable];

package/ios/TrueSheetViewController.h

@@ -58,6 +58,7 @@ NS_ASSUME_NONNULL_BEGIN
 @property (nonatomic, strong, nullable) NSNumber *contentHeight;
 @property (nonatomic, strong, nullable) NSNumber *headerHeight;
 @property (nonatomic, strong, nullable) NSNumber *footerHeight;
+@property (nonatomic, strong, nullable) NSNumber *peekContentHeight;
 @property (nonatomic, strong, nullable) UIColor *backgroundColor;
 @property (nonatomic, strong, nullable) NSNumber *cornerRadius;
 @property (nonatomic, assign) BOOL grabber;