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

package/src/TrueSheet.tsx

@@ -4,8 +4,10 @@ import {
   createRef,
   type ReactNode,
   type ComponentRef,
+  type ComponentType,
   isValidElement,
   createElement,
+  useEffect,
 } from 'react';
 
 import type {
@@ -21,6 +23,7 @@ import type {
   PositionChangeEvent,
   DidDismissEvent,
   WillDismissEvent,
+  DismissAttemptEvent,
   MountEvent,
   WillFocusEvent,
   DidFocusEvent,
@@ -34,17 +37,38 @@ import TrueSheetHeaderViewNativeComponent from './fabric/TrueSheetHeaderViewNati
 import TrueSheetFooterViewNativeComponent from './fabric/TrueSheetFooterViewNativeComponent';
 
 import TrueSheetModule from './specs/NativeTrueSheetModule';
+import { TrueSheetBackground } from './TrueSheetBackground';
+import { normalizeDetentBackground } from './detentBackgrounds';
 
 import {
   Platform,
   StyleSheet,
   BackHandler,
+  RootTagContext,
   findNodeHandle,
   processColor,
   type NativeEventSubscription,
   type GestureResponderEvent,
+  type RootTag,
+  type StyleProp,
+  type ViewStyle,
 } from 'react-native';
 
+interface AppContainerProps {
+  rootTag: RootTag;
+  rootViewStyle?: StyleProp<ViewStyle>;
+  internal_excludeLogBox?: boolean;
+  children?: ReactNode;
+}
+
+// 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: ComponentType<AppContainerProps> | null = __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: '' }) +
@@ -58,23 +82,49 @@ if (!TrueSheetModule) {
 
 type NativeRef = ComponentRef<typeof TrueSheetViewNativeComponent>;
 
-// Claim touches that no descendant claimed so the responder negotiation
-// doesn't bubble up to touchables outside the sheet
-const absorbUnclaimedTouches = () => true;
-
 // Stop raw touch events from bubbling past the sheet to outside ancestors
 const stopTouchPropagation = (event: GestureResponderEvent) => 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: GestureResponderEvent) => {
+  event.stopPropagation();
+  return false;
+};
+
 interface TrueSheetState {
   shouldRenderNativeView: boolean;
+  initialPresentReady: boolean;
+  scrollableHandle: number | null;
 }
 
+// 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 }: { onReady: () => void }) => {
+  useEffect(() => {
+    onReady();
+  }, [onReady]);
+
+  return null;
+};
+
 export class TrueSheet
   extends PureComponent<TrueSheetProps, TrueSheetState>
   implements TrueSheetMethods
 {
   displayName = 'TrueSheet';
 
+  static contextType = RootTagContext;
+
   private readonly nativeRef: RefObject<NativeRef | null>;
 
   private cachedGrabberOptions: TrueSheetProps['grabberOptions'] | undefined;
@@ -105,17 +155,21 @@ export class TrueSheet
 
     this.validateDetents();
 
-    // Lazy load by default, except when initialDetentIndex is set (for auto-presentation)
+    // Lazy load by default, except when auto-presenting or when lazy is disabled
     const shouldRenderImmediately =
-      props.initialDetentIndex !== undefined && props.initialDetentIndex >= 0;
+      (props.initialDetentIndex !== undefined && props.initialDetentIndex >= 0) ||
+      props.lazy === false;
 
     this.state = {
       shouldRenderNativeView: shouldRenderImmediately,
+      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);
@@ -129,6 +183,33 @@ export class TrueSheet
     this.onDidBlur = this.onDidBlur.bind(this);
     this.handleBackPress = this.handleBackPress.bind(this);
     this.onVisibilityChange = this.onVisibilityChange.bind(this);
+    this.onInitialPresentReady = this.onInitialPresentReady.bind(this);
+  }
+
+  private onInitialPresentReady(): void {
+    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.
+  private updateScrollableHandle(): void {
+    const { scrollableRef } = this.props;
+    let scrollableHandle: number | null = null;
+    if (scrollableRef?.current) {
+      try {
+        scrollableHandle = findNodeHandle(scrollableRef.current);
+      } catch (error) {
+        // A stale ref (e.g. a wrapper that never clears it on unmount) makes
+        // findNodeHandle throw. Treat it as no scrollable instead of crashing.
+        if (__DEV__) {
+          console.warn('TrueSheet: scrollableRef points to an unmounted component.', error);
+        }
+      }
+    }
+
+    if (scrollableHandle !== this.state.scrollableHandle) {
+      this.setState({ scrollableHandle });
+    }
   }
 
   private validateDetents(): void {
@@ -301,15 +382,18 @@ export class TrueSheet
     this.props.onWillDismiss?.(event);
   }
 
+  private onDismissAttempt(event: DismissAttemptEvent): void {
+    this.props.onDismissAttempt?.(event);
+  }
+
   private onDidDismiss(event: DidDismissEvent): void {
     this.isPresented = false;
     this.isSheetVisible = true;
     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 });
     }
 
@@ -371,9 +455,12 @@ export class TrueSheet
     const nodeHandle = findNodeHandle(this.nativeRef.current);
     if (nodeHandle == null || nodeHandle === -1) return false;
 
-    // When not dismissible, let back propagate (e.g. navigation goes back to the previous screen)
+    // 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) {
-      return this.props.onBackPress?.() ?? false;
+      const { onDismissAttempt, onBackPress } = this.props;
+      onDismissAttempt?.({ nativeEvent: null } as DismissAttemptEvent);
+      return onBackPress?.() ?? onDismissAttempt != null;
     }
 
     TrueSheetModule?.handleBackPress(nodeHandle);
@@ -434,15 +521,38 @@ export class TrueSheet
 
   componentDidMount(): void {
     this.registerInstance();
+    this.updateScrollableHandle();
   }
 
   componentDidUpdate(prevProps: TrueSheetProps): void {
     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(): void {
@@ -456,6 +566,9 @@ export class TrueSheet
     const {
       detents = [0.5, 1],
       backgroundColor,
+      detentBackgrounds,
+      background,
+      backgroundStyle,
       dismissible = true,
       draggable = true,
       grabber = true,
@@ -466,12 +579,11 @@ export class TrueSheet
       initialDetentAnimated = true,
       dimmedDetentIndex,
       backgroundBlur,
-      blurOptions,
       cornerRadius,
       maxContentHeight,
       maxContentWidth,
-      anchor = 'center',
-      anchorOffset,
+      placement = 'automatic',
+      placementOffset,
       scrollableOptions,
       footerOptions,
       presentation = 'page',
@@ -485,6 +597,7 @@ export class TrueSheet
       insetAdjustment = 'automatic',
       ...rest
     } = this.props;
+    delete rest.lazy;
 
     // Trim to max 3 detents and clamp fractions
     const resolvedDetents: number[] = detents.slice(0, 3).map((detent) => {
@@ -498,6 +611,12 @@ export class TrueSheet
       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;
@@ -507,6 +626,43 @@ export class TrueSheet
       };
     }
 
+    const sheetContent = (
+      <>
+        <TrueSheetBackground background={background} backgroundStyle={backgroundStyle} />
+        {header && (
+          <TrueSheetHeaderViewNativeComponent
+            style={[
+              styles.header,
+              headerOptions?.position === 'absolute' && styles.absoluteHeader,
+              headerStyle,
+            ]}
+          >
+            {isValidElement(header) ? header : createElement(header)}
+          </TrueSheetHeaderViewNativeComponent>
+        )}
+        <TrueSheetContentViewNativeComponent style={style}>
+          {children}
+        </TrueSheetContentViewNativeComponent>
+        {footer && (
+          <TrueSheetFooterViewNativeComponent
+            autoBottomInset={insetAdjustment === 'automatic'}
+            style={[
+              styles.footer,
+              footerOptions?.position === 'absolute'
+                ? styles.absoluteFooter
+                : styles.relativeFooter,
+              footerStyle,
+            ]}
+          >
+            {isValidElement(footer) ? footer : createElement(footer)}
+          </TrueSheetFooterViewNativeComponent>
+        )}
+        {autoPresent && !this.state.initialPresentReady && (
+          <InitialPresentGate onReady={this.onInitialPresentReady} />
+        )}
+      </>
+    );
+
     return (
       <TrueSheetViewNativeComponent
         {...rest}
@@ -514,27 +670,35 @@ export class TrueSheet
         style={styles.sheetView}
         detents={resolvedDetents}
         backgroundBlur={backgroundBlur}
-        blurOptions={blurOptions}
         backgroundColor={backgroundColor}
+        detentBackgrounds={
+          detentBackgrounds &&
+          Array.from(detentBackgrounds.slice(0, 3), (entry) => {
+            const normalized = normalizeDetentBackground(entry);
+            return normalized ? { ...normalized, color: processColor(normalized.color) } : {};
+          })
+        }
         cornerRadius={cornerRadius}
         grabber={grabber}
         grabberOptions={this.resolvedGrabberOptions}
         accessibilityOptions={accessibilityOptions}
         dimmed={dimmed}
         dimmedDetentIndex={dimmedDetentIndex}
-        initialDetentIndex={initialDetentIndex}
+        initialDetentIndex={gatedInitialDetentIndex}
         initialDetentAnimated={initialDetentAnimated}
         dismissible={dismissible}
         draggable={draggable}
         maxContentHeight={maxContentHeight}
         maxContentWidth={maxContentWidth}
-        anchor={anchor}
-        anchorOffset={anchorOffset}
+        placement={placement}
+        placementOffset={placementOffset}
+        scrollableHandle={this.state.scrollableHandle ?? -1}
         scrollableOptions={scrollableOptions}
         headerOptions={headerOptions}
         footerOptions={{
           footerPosition: footerOptions?.position,
           keyboardOffset: footerOptions?.keyboardOffset,
+          avoidKeyboard: footerOptions?.avoidKeyboard,
         }}
         presentation={presentation}
         insetAdjustment={insetAdjustment}
@@ -543,6 +707,7 @@ export class TrueSheet
         onDidPresent={this.onDidPresent}
         onWillDismiss={this.onWillDismiss}
         onDidDismiss={this.onDidDismiss}
+        onDismissAttempt={this.onDismissAttempt}
         onDetentChange={this.onDetentChange}
         onDragBegin={this.onDragBegin}
         onDragChange={this.onDragChange}
@@ -555,10 +720,11 @@ export class TrueSheet
         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. Claiming the responder here stops the negotiation at the
-        // sheet boundary without making an ancestor of the content the JS responder,
-        // which would block scrolling inside the sheet.
-        onStartShouldSetResponder={absorbUnclaimedTouches}
+        // 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}
@@ -566,33 +732,22 @@ export class TrueSheet
       >
         {this.state.shouldRenderNativeView && (
           <TrueSheetContainerViewNativeComponent style={styles.container}>
-            {header && (
-              <TrueSheetHeaderViewNativeComponent
-                style={[
-                  styles.header,
-                  headerOptions?.position === 'absolute' && styles.absoluteHeader,
-                  headerStyle,
-                ]}
+            {AppContainer ? (
+              // 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.
+              <AppContainer
+                rootTag={this.context as RootTag}
+                rootViewStyle={styles.inspectorHost}
+                internal_excludeLogBox
               >
-                {isValidElement(header) ? header : createElement(header)}
-              </TrueSheetHeaderViewNativeComponent>
-            )}
-            <TrueSheetContentViewNativeComponent style={style}>
-              {children}
-            </TrueSheetContentViewNativeComponent>
-            {footer && (
-              <TrueSheetFooterViewNativeComponent
-                autoBottomInset={insetAdjustment === 'automatic'}
-                style={[
-                  styles.footer,
-                  footerOptions?.position === 'absolute'
-                    ? styles.absoluteFooter
-                    : styles.relativeFooter,
-                  footerStyle,
-                ]}
-              >
-                {isValidElement(footer) ? footer : createElement(footer)}
-              </TrueSheetFooterViewNativeComponent>
+                {sheetContent}
+              </AppContainer>
+            ) : (
+              sheetContent
             )}
           </TrueSheetContainerViewNativeComponent>
         )}
@@ -614,6 +769,9 @@ const styles = StyleSheet.create({
   container: {
     ...StyleSheet.absoluteFill,
   },
+  inspectorHost: {
+    display: 'contents',
+  },
   header: {
     pointerEvents: 'box-none',
   },