@lodev09/react-native-true-sheet 4.0.0-beta.0 → 4.0.0-beta.10

package/lib/module/TrueSheet.js

@@ -1,13 +1,19 @@
 "use strict";
 
-import { PureComponent, createRef, isValidElement, createElement } from 'react';
+import { PureComponent, createRef, isValidElement, createElement, useEffect } from 'react';
 import TrueSheetViewNativeComponent from './fabric/TrueSheetViewNativeComponent';
 import TrueSheetContainerViewNativeComponent from './fabric/TrueSheetContainerViewNativeComponent';
 import TrueSheetContentViewNativeComponent from './fabric/TrueSheetContentViewNativeComponent';
+import TrueSheetHeaderViewNativeComponent from './fabric/TrueSheetHeaderViewNativeComponent';
 import TrueSheetFooterViewNativeComponent from './fabric/TrueSheetFooterViewNativeComponent';
 import TrueSheetModule from "./specs/NativeTrueSheetModule.js";
-import { Platform, processColor, StyleSheet, findNodeHandle } from 'react-native';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Platform, StyleSheet, BackHandler, RootTagContext, findNodeHandle, processColor } from 'react-native';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+// RN has no public API for hosting the element inspector inside a presented view;
+// this is the internal RN's Modal uses. Dev-only so prod bundles never resolve it.
+// The template literal keeps the RN babel preset's deep-import warning off while
+// Metro still resolves the module statically.
+const AppContainer = __DEV__ ? require(`react-native/Libraries/ReactNative/AppContainer`).default : null;
 const LINKING_ERROR = `The package '@lodev09/react-native-true-sheet' doesn't seem to be linked. Make sure: \n\n` + Platform.select({
   ios: "- You have run 'pod install'\n",
   default: ''
@@ -15,8 +21,41 @@ const LINKING_ERROR = `The package '@lodev09/react-native-true-sheet' doesn't se
 if (!TrueSheetModule) {
   throw new Error(LINKING_ERROR);
 }
+// Stop raw touch events from bubbling past the sheet to outside ancestors
+const stopTouchPropagation = event => event.stopPropagation();
+
+// Stop the responder negotiation at the sheet boundary without claiming the
+// responder. Views inside the sheet are asked before this one, so in-sheet
+// touchables work normally; views outside are asked after, so stopping here
+// keeps unclaimed touches from leaking to touchables behind the sheet.
+// Claiming instead (returning true) would steal the responder from a pressed
+// touchable whenever the negotiation re-runs mid-gesture — e.g. a second
+// finger, or the duplicate touch stream from a nested react-native-screens
+// screen that attaches its own touch handler inside the sheet.
+const stopResponderNegotiation = event => {
+  event.stopPropagation();
+  return false;
+};
+// Gates auto-present (initialDetentIndex) by one commit. Rendered last in the
+// sheet subtree so its mount effect runs after the content's mount effects —
+// updates they schedule (e.g. a navigation footer via setOptions) batch with
+// onReady's, so native receives initialDetentIndex together with the settled
+// tree and presents at the final height instead of resizing mid-flight.
+const InitialPresentGate = ({
+  onReady
+}) => {
+  useEffect(() => {
+    onReady();
+  }, [onReady]);
+  return null;
+};
 export class TrueSheet extends PureComponent {
   displayName = 'TrueSheet';
+  static contextType = RootTagContext;
+  backHandlerSubscription = null;
+  isPresented = false;
+  isSheetVisible = true;
+
   /**
    * Map of sheet names against their instances.
    */
@@ -26,21 +65,27 @@ export class TrueSheet extends PureComponent {
    * Resolver to be called when mount event is received
    */
   presentationResolver = null;
+
+  /**
+   * Tracks if a present operation is in progress
+   */
+  isPresenting = false;
   constructor(props) {
     super(props);
     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,
-      containerWidth: undefined,
-      containerHeight: undefined
+      initialPresentReady: false,
+      scrollableHandle: null
     };
     this.onMount = this.onMount.bind(this);
     this.onWillDismiss = this.onWillDismiss.bind(this);
     this.onDidDismiss = this.onDidDismiss.bind(this);
+    this.onDismissAttempt = this.onDismissAttempt.bind(this);
     this.onWillPresent = this.onWillPresent.bind(this);
     this.onDidPresent = this.onDidPresent.bind(this);
     this.onDetentChange = this.onDetentChange.bind(this);
@@ -48,7 +93,32 @@ export class TrueSheet extends PureComponent {
     this.onDragChange = this.onDragChange.bind(this);
     this.onDragEnd = this.onDragEnd.bind(this);
     this.onPositionChange = this.onPositionChange.bind(this);
-    this.onSizeChange = this.onSizeChange.bind(this);
+    this.onWillFocus = this.onWillFocus.bind(this);
+    this.onDidFocus = this.onDidFocus.bind(this);
+    this.onWillBlur = this.onWillBlur.bind(this);
+    this.onDidBlur = this.onDidBlur.bind(this);
+    this.handleBackPress = this.handleBackPress.bind(this);
+    this.onVisibilityChange = this.onVisibilityChange.bind(this);
+    this.onInitialPresentReady = this.onInitialPresentReady.bind(this);
+  }
+  onInitialPresentReady() {
+    this.setState({
+      initialPresentReady: true
+    });
+  }
+
+  // Resolves after commit (didMount/didUpdate) — the scrollable mounts with the
+  // sheet content, so its ref is only populated once the native tree renders.
+  updateScrollableHandle() {
+    const {
+      scrollableRef
+    } = this.props;
+    const scrollableHandle = scrollableRef?.current ? findNodeHandle(scrollableRef.current) : null;
+    if (scrollableHandle !== this.state.scrollableHandle) {
+      this.setState({
+        scrollableHandle
+      });
+    }
   }
   validateDetents() {
     const {
@@ -64,7 +134,7 @@ export class TrueSheet extends PureComponent {
     // Warn for invalid detent fractions
     if (detents) {
       detents.forEach((detent, index) => {
-        if (detent !== 'auto' && typeof detent === 'number') {
+        if (typeof detent === 'number' && detent !== -1 && detent !== -2) {
           if (detent <= 0 || detent > 1) {
             console.warn(`TrueSheet: detent at index ${index} (${detent}) should be between 0 and 1. It will be clamped.`);
           }
@@ -100,29 +170,46 @@ export class TrueSheet extends PureComponent {
    * Present the sheet by given `name` (Promise-based)
    * @param name - Sheet name (must match sheet's name prop)
    * @param index - Detent index (default: 0)
+   * @param animated - Whether to animate the presentation (default: true)
    * @returns Promise that resolves when sheet is fully presented
    * @throws Error if sheet not found or presentation fails
    */
-  static async present(name, index = 0) {
+  static async present(name, index = 0, animated = true) {
     const instance = TrueSheet.getInstance(name);
     if (!instance) {
       throw new Error(`Sheet with name "${name}" not found`);
     }
-    return instance.present(index);
+    return instance.present(index, animated);
   }
 
   /**
    * Dismiss the sheet by given `name` (Promise-based)
    * @param name - Sheet name
+   * @param animated - Whether to animate the dismissal (default: true)
    * @returns Promise that resolves when sheet is fully dismissed
    * @throws Error if sheet not found or dismissal fails
    */
-  static async dismiss(name) {
+  static async dismiss(name, animated = true) {
     const instance = TrueSheet.getInstance(name);
     if (!instance) {
       throw new Error(`Sheet with name "${name}" not found`);
     }
-    return instance.dismiss();
+    return instance.dismiss(animated);
+  }
+
+  /**
+   * Dismiss only the sheets presented on top of a sheet by given `name`
+   * @param name - Sheet name
+   * @param animated - Whether to animate the dismissal (default: true)
+   * @returns Promise that resolves when all child sheets are dismissed
+   * @throws Error if sheet not found
+   */
+  static async dismissStack(name, animated = true) {
+    const instance = TrueSheet.getInstance(name);
+    if (!instance) {
+      throw new Error(`Sheet with name "${name}" not found`);
+    }
+    return instance.dismissStack(animated);
   }
 
   /**
@@ -139,6 +226,16 @@ export class TrueSheet extends PureComponent {
     }
     return instance.resize(index);
   }
+
+  /**
+   * Dismiss all presented sheets by dismissing from the bottom of the stack.
+   * This ensures child sheets are dismissed first before their parent.
+   * @param animated - Whether to animate the dismissals (default: true)
+   * @returns Promise that resolves when all sheets are dismissed
+   */
+  static async dismissAll(animated = true) {
+    return TrueSheetModule?.dismissAll(animated);
+  }
   registerInstance() {
     if (this.props.name) {
       TrueSheet.instances[this.props.name] = this;
@@ -156,16 +253,31 @@ export class TrueSheet extends PureComponent {
     this.props.onWillPresent?.(event);
   }
   onDidPresent(event) {
+    this.isPresented = true;
+    if (Platform.OS === 'android') {
+      this.backHandlerSubscription?.remove();
+      this.backHandlerSubscription = BackHandler.addEventListener('hardwareBackPress', this.handleBackPress);
+    }
     this.props.onDidPresent?.(event);
   }
   onWillDismiss(event) {
     this.props.onWillDismiss?.(event);
   }
+  onDismissAttempt(event) {
+    this.props.onDismissAttempt?.(event);
+  }
   onDidDismiss(event) {
-    // Clean up native view after dismiss for lazy loading
-    this.setState({
-      shouldRenderNativeView: false
-    });
+    this.isPresented = false;
+    this.isSheetVisible = true;
+    this.backHandlerSubscription?.remove();
+    this.backHandlerSubscription = null;
+
+    // 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
+      });
+    }
     this.props.onDidDismiss?.(event);
   }
   onMount(event) {
@@ -188,30 +300,57 @@ export class TrueSheet extends PureComponent {
   onPositionChange(event) {
     this.props.onPositionChange?.(event);
   }
-  onSizeChange(event) {
-    const {
-      width,
-      height
-    } = event.nativeEvent;
+  onWillFocus(event) {
+    this.props.onWillFocus?.(event);
+  }
+  onDidFocus(event) {
+    this.props.onDidFocus?.(event);
+  }
+  onWillBlur(event) {
+    this.props.onWillBlur?.(event);
+  }
+  onDidBlur(event) {
+    this.props.onDidBlur?.(event);
+  }
+  onVisibilityChange(event) {
+    this.isSheetVisible = event.nativeEvent.visible;
+  }
+  handleBackPress() {
+    if (!this.isPresented || !this.isSheetVisible) return false;
 
-    // Update container view dimensions in state
-    this.setState({
-      containerWidth: width,
-      containerHeight: height
-    });
+    // The native view can be detached (e.g. host screen unmounted by navigation)
+    // before onDidDismiss removes this subscription. Treat back press as a no-op
+    // instead of throwing from the handle getter.
+    const nodeHandle = findNodeHandle(this.nativeRef.current);
+    if (nodeHandle == null || nodeHandle === -1) return false;
 
-    // Internal handler only - not exposed to users
+    // When not dismissible, report the attempt. An attempt handler consumes the back
+    // press; otherwise let it propagate (e.g. navigation goes back to the previous screen)
+    if (this.props.dismissible === false) {
+      const {
+        onDismissAttempt,
+        onBackPress
+      } = this.props;
+      onDismissAttempt?.({
+        nativeEvent: null
+      });
+      return onBackPress?.() ?? onDismissAttempt != null;
+    }
+    TrueSheetModule?.handleBackPress(nodeHandle);
+    return this.props.onBackPress?.() ?? true;
   }
 
   /**
-   * Present the Sheet by `index` (Promise-based)
-   * @param index - Detent index (default: 0)
+   * Present the sheet at a given detent index.
+   * @param index - The detent index to present at (default: 0)
+   * @param animated - Whether to animate the presentation (default: true)
    */
-  async present(index = 0) {
+  async present(index = 0, animated = true) {
     const detentsLength = Math.min(this.props.detents?.length ?? 2, 3); // Max 3 detents
     if (index < 0 || index >= detentsLength) {
       throw new Error(`TrueSheet: present index (${index}) is out of bounds. detents array has ${detentsLength} item(s)`);
     }
+    this.isPresenting = true;
 
     // Lazy load: render native view if not already rendered
     if (!this.state.shouldRenderNativeView) {
@@ -222,64 +361,108 @@ export class TrueSheet extends PureComponent {
         });
       });
     }
-    return TrueSheetModule?.presentByRef(this.handle, index);
+    await TrueSheetModule?.presentByRef(this.handle, index, animated);
+    this.isPresenting = false;
   }
 
   /**
-   * Resizes the Sheet programmatically by `index`.
-   * This is an alias of the `present(index)` method.
+   * Resize the sheet to a given detent index.
+   * @param index - The detent index to resize to
    */
   async resize(index) {
-    await this.present(index);
+    await TrueSheetModule?.resizeByRef(this.handle, index);
+  }
+
+  /**
+   * Dismiss this sheet and all sheets presented on top of it in a single animation.
+   * @param animated - Whether to animate the dismissal (default: true)
+   */
+  async dismiss(animated = true) {
+    return TrueSheetModule?.dismissByRef(this.handle, animated);
   }
 
   /**
-   * Dismisses the Sheet
+   * Dismiss only the sheets presented on top of this sheet, keeping this sheet presented.
+   * If no sheets are presented on top, this method does nothing.
+   * @param animated - Whether to animate the dismissal (default: true)
    */
-  async dismiss() {
-    return TrueSheetModule?.dismissByRef(this.handle);
+  async dismissStack(animated = true) {
+    return TrueSheetModule?.dismissStackByRef(this.handle, animated);
   }
   componentDidMount() {
     this.registerInstance();
+    this.updateScrollableHandle();
   }
   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) {
       this.validateDetents();
     }
+
+    // initialDetentIndex set at runtime on a lazily-mounted sheet: render the
+    // native tree so InitialPresentGate can deliver the index (constructor
+    // only computes this for the initial prop).
+    const prevInitialDetentIndex = prevProps.initialDetentIndex ?? -1;
+    const initialDetentIndex = this.props.initialDetentIndex ?? -1;
+    if (prevInitialDetentIndex < 0 && initialDetentIndex >= 0 && !this.state.shouldRenderNativeView) {
+      this.setState({
+        shouldRenderNativeView: true
+      });
+    }
   }
   componentWillUnmount() {
     this.unregisterInstance();
-
-    // Clean up presentation resolver
+    this.backHandlerSubscription?.remove();
+    this.backHandlerSubscription = null;
     this.presentationResolver = null;
   }
   render() {
     const {
       detents = [0.5, 1],
-      backgroundColor = 'white',
+      backgroundColor,
       dismissible = true,
+      draggable = true,
       grabber = true,
+      grabberOptions,
+      accessibilityOptions,
       dimmed = true,
       initialDetentIndex = -1,
       initialDetentAnimated = true,
-      keyboardMode = 'resize',
-      dimmedIndex,
-      blurTint,
+      dimmedDetentIndex,
+      backgroundBlur,
+      blurOptions,
       cornerRadius,
-      maxHeight,
-      edgeToEdgeFullScreen,
+      maxContentHeight,
+      maxContentWidth,
+      anchor = 'center',
+      anchorOffset,
+      scrollableOptions,
+      footerOptions,
+      presentation = 'page',
       children,
       style,
+      header,
+      headerStyle,
+      headerOptions,
       footer,
-      testID
+      footerStyle,
+      insetAdjustment = 'automatic',
+      ...rest
     } = this.props;
+    delete rest.lazy;
 
     // Trim to max 3 detents and clamp fractions
     const resolvedDetents = detents.slice(0, 3).map(detent => {
       if (detent === 'auto' || detent === -1) return -1;
+      if (detent === 'peek' || detent === -2) return -2;
 
       // Default to 0.1 if zero or below
       if (detent <= 0) return 0.1;
@@ -287,63 +470,155 @@ export class TrueSheet extends PureComponent {
       // Clamp to maximum of 1
       return Math.min(1, detent);
     });
+
+    // Hold initialDetentIndex back from native until the gate's effect flushes
+    // (see InitialPresentGate) — native presents when the prop lands.
+    const autoPresent = initialDetentIndex >= 0;
+    const gatedInitialDetentIndex = autoPresent && !this.state.initialPresentReady ? -1 : initialDetentIndex;
+
+    // Cache grabberOptions to avoid creating a new object every render
+    if (grabberOptions !== this.cachedGrabberOptions) {
+      this.cachedGrabberOptions = grabberOptions;
+      this.resolvedGrabberOptions = {
+        ...grabberOptions,
+        color: processColor(grabberOptions?.color)
+      };
+    }
+    const sheetContent = /*#__PURE__*/_jsxs(_Fragment, {
+      children: [header && /*#__PURE__*/_jsx(TrueSheetHeaderViewNativeComponent, {
+        style: [styles.header, headerOptions?.position === 'absolute' && styles.absoluteHeader, headerStyle],
+        children: /*#__PURE__*/isValidElement(header) ? header : /*#__PURE__*/createElement(header)
+      }), /*#__PURE__*/_jsx(TrueSheetContentViewNativeComponent, {
+        style: style,
+        children: children
+      }), footer && /*#__PURE__*/_jsx(TrueSheetFooterViewNativeComponent, {
+        autoBottomInset: insetAdjustment === 'automatic',
+        style: [styles.footer, footerOptions?.position === 'absolute' ? styles.absoluteFooter : styles.relativeFooter, footerStyle],
+        children: /*#__PURE__*/isValidElement(footer) ? footer : /*#__PURE__*/createElement(footer)
+      }), autoPresent && !this.state.initialPresentReady && /*#__PURE__*/_jsx(InitialPresentGate, {
+        onReady: this.onInitialPresentReady
+      })]
+    });
     return /*#__PURE__*/_jsx(TrueSheetViewNativeComponent, {
+      ...rest,
       ref: this.nativeRef,
       style: styles.sheetView,
       detents: resolvedDetents,
-      blurTint: blurTint,
-      background: processColor(backgroundColor) ?? 0,
+      backgroundBlur: backgroundBlur,
+      blurOptions: blurOptions,
+      backgroundColor: backgroundColor,
       cornerRadius: cornerRadius,
       grabber: grabber,
+      grabberOptions: this.resolvedGrabberOptions,
+      accessibilityOptions: accessibilityOptions,
       dimmed: dimmed,
-      dimmedIndex: dimmedIndex,
-      keyboardMode: keyboardMode,
-      initialDetentIndex: initialDetentIndex,
+      dimmedDetentIndex: dimmedDetentIndex,
+      initialDetentIndex: gatedInitialDetentIndex,
       initialDetentAnimated: initialDetentAnimated,
       dismissible: dismissible,
-      maxHeight: maxHeight,
-      edgeToEdgeFullScreen: edgeToEdgeFullScreen,
+      draggable: draggable,
+      maxContentHeight: maxContentHeight,
+      maxContentWidth: maxContentWidth,
+      anchor: anchor,
+      anchorOffset: anchorOffset,
+      scrollableHandle: this.state.scrollableHandle ?? -1,
+      scrollableOptions: scrollableOptions,
+      headerOptions: headerOptions,
+      footerOptions: {
+        footerPosition: footerOptions?.position,
+        keyboardOffset: footerOptions?.keyboardOffset
+      },
+      presentation: presentation,
+      insetAdjustment: insetAdjustment,
       onMount: this.onMount,
       onWillPresent: this.onWillPresent,
       onDidPresent: this.onDidPresent,
       onWillDismiss: this.onWillDismiss,
       onDidDismiss: this.onDidDismiss,
+      onDismissAttempt: this.onDismissAttempt,
       onDetentChange: this.onDetentChange,
       onDragBegin: this.onDragBegin,
       onDragChange: this.onDragChange,
       onDragEnd: this.onDragEnd,
       onPositionChange: this.onPositionChange,
-      onSizeChange: this.onSizeChange,
-      children: this.state.shouldRenderNativeView && /*#__PURE__*/_jsxs(TrueSheetContainerViewNativeComponent, {
-        testID: testID,
-        style: {
-          width: this.state.containerWidth,
-          height: this.state.containerHeight
-        },
-        collapsable: false,
-        children: [/*#__PURE__*/_jsx(TrueSheetContentViewNativeComponent, {
-          style: style,
-          collapsable: false,
-          children: children
-        }), footer && /*#__PURE__*/_jsx(TrueSheetFooterViewNativeComponent, {
-          style: styles.footer,
-          collapsable: false,
-          children: /*#__PURE__*/isValidElement(footer) ? footer : /*#__PURE__*/createElement(footer)
-        })]
+      onWillFocus: this.onWillFocus,
+      onDidFocus: this.onDidFocus,
+      onWillBlur: this.onWillBlur,
+      onDidBlur: this.onDidBlur,
+      onVisibilityChange: this.onVisibilityChange
+      // These must stay on this host view, not on the container. The container is
+      // reparented into the native sheet, so this view is never a native ancestor of
+      // the sheet content — this is the React-tree boundary between the sheet and
+      // the presenting screen, where both the responder negotiation and raw touch
+      // bubbling must stop.
+      ,
+      onStartShouldSetResponder: stopResponderNegotiation,
+      onMoveShouldSetResponder: stopResponderNegotiation,
+      onTouchStart: stopTouchPropagation,
+      onTouchMove: stopTouchPropagation,
+      onTouchEnd: stopTouchPropagation,
+      onTouchCancel: stopTouchPropagation,
+      children: this.state.shouldRenderNativeView && /*#__PURE__*/_jsx(TrueSheetContainerViewNativeComponent, {
+        style: styles.container,
+        children: AppContainer ?
+        /*#__PURE__*/
+        // Hosts the element inspector inside the sheet, like RN's Modal does —
+        // the app-level one sits behind the presented sheet.
+        // `display: contents` keeps AppContainer's wrapper views out of both
+        // Yoga layout and the native tree, so header/content/footer remain the
+        // container's direct native children, while the inspector overlay
+        // anchors to the container and lines up with measured frames.
+        _jsx(AppContainer, {
+          rootTag: this.context,
+          rootViewStyle: styles.inspectorHost,
+          internal_excludeLogBox: true,
+          children: sheetContent
+        }) : sheetContent
       })
     });
   }
 }
+
+// Compile-time check: `TrueSheet`'s static surface must satisfy `TrueSheetStaticMethods`.
+TrueSheet;
 const styles = StyleSheet.create({
   sheetView: {
+    ...StyleSheet.absoluteFill,
+    zIndex: -9999,
+    pointerEvents: 'box-none'
+  },
+  // Fill the sheet so flex layouts track the sheet's size per detent
+  container: {
+    ...StyleSheet.absoluteFill
+  },
+  inspectorHost: {
+    display: 'contents'
+  },
+  header: {
+    pointerEvents: 'box-none'
+  },
+  // Floats over the content so it doesn't take up layout space
+  absoluteHeader: {
     position: 'absolute',
-    width: '100%',
-    zIndex: -9999
+    top: 0,
+    left: 0,
+    right: 0,
+    zIndex: 1
   },
   footer: {
+    pointerEvents: 'box-none'
+  },
+  // Pinned to the sheet's bottom edge via Yoga since the container tracks the
+  // sheet's visible height — takes up layout space below the content
+  relativeFooter: {
+    marginTop: 'auto'
+  },
+  // Floats over the content so it doesn't take up layout space
+  absoluteFooter: {
     position: 'absolute',
     left: 0,
-    right: 0
+    right: 0,
+    bottom: 0
   }
 });
 //# sourceMappingURL=TrueSheet.js.map