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

package/src/navigation/useTrueSheetNavigation.ts

@@ -0,0 +1,26 @@
+import { useNavigation, type ParamListBase } from '@react-navigation/native';
+
+import type { TrueSheetNavigationProp } from './types';
+
+/**
+ * Hook to access TrueSheet navigation with the resize helper.
+ *
+ * @example
+ * ```tsx
+ * function MySheet() {
+ *   const navigation = useTrueSheetNavigation();
+ *
+ *   // Resize to a specific detent
+ *   const handleExpand = () => {
+ *     navigation.resize(1); // Resize to second detent
+ *   };
+ *
+ *   return (
+ *     <Button title="Expand" onPress={handleExpand} />
+ *   );
+ * }
+ * ```
+ */
+export const useTrueSheetNavigation = <
+  T extends ParamListBase = ParamListBase,
+>(): TrueSheetNavigationProp<T> => useNavigation<TrueSheetNavigationProp<T>>();

package/src/reanimated/ReanimatedTrueSheet.tsx

@@ -70,24 +70,29 @@ const AnimatedTrueSheet = Animated.createAnimatedComponent(TrueSheet);
 export const ReanimatedTrueSheet = forwardRef<TrueSheet, ReanimatedTrueSheetProps>((props, ref) => {
   const { onPositionChange, ...rest } = props;
 
-  const { animatedPosition, animatedIndex } = useReanimatedTrueSheet();
+  const { animatedPosition, animatedIndex, animatedDetent } = useReanimatedTrueSheet();
 
   const positionChangeHandler = useReanimatedPositionChangeHandler((payload) => {
     'worklet';
 
-    // When transitioning=true, we animate the position manually for smooth transitions.
-    // This is used when native can't provide real-time position updates during animations.
-    if (payload.transitioning) {
+    if (payload.realtime) {
+      // Update directly when we have real-time values (during drag or animation tracking)
+      animatedPosition.value = payload.position;
+      animatedIndex.value = payload.index;
+      animatedDetent.value = payload.detent;
+    } else {
+      // Animate position, index, and detent when not real-time
       if (Platform.OS === 'android') {
         animatedPosition.value = withTiming(payload.position, TIMING_CONFIG);
+        animatedIndex.value = withTiming(payload.index, TIMING_CONFIG);
+        animatedDetent.value = withTiming(payload.detent, TIMING_CONFIG);
       } else {
         animatedPosition.value = withSpring(payload.position, SPRING_CONFIG);
+        animatedIndex.value = withSpring(payload.index, SPRING_CONFIG);
+        animatedDetent.value = withSpring(payload.detent, SPRING_CONFIG);
       }
-    } else {
-      animatedPosition.value = payload.position;
     }
 
-    animatedIndex.value = payload.index;
     onPositionChange?.({ nativeEvent: payload } as PositionChangeEvent);
   });
 

package/src/reanimated/ReanimatedTrueSheet.web.tsx

@@ -0,0 +1,75 @@
+import { forwardRef, useEffect } from 'react';
+import { useWindowDimensions } from 'react-native';
+
+import { TrueSheet } from '../TrueSheet';
+import type { TrueSheetProps, PositionChangeEvent } from '../TrueSheet.types';
+import { useReanimatedTrueSheet } from './ReanimatedTrueSheetProvider';
+
+interface ReanimatedTrueSheetProps extends TrueSheetProps {
+  /**
+   * Callback for position changes.
+   *
+   * @see {@link TrueSheetProps.onPositionChange}
+   */
+  onPositionChange?: TrueSheetProps['onPositionChange'];
+}
+
+/**
+ * Reanimated-enabled version of TrueSheet for web that automatically syncs
+ * position with the provider's shared value.
+ * Must be used within a ReanimatedTrueSheetProvider.
+ *
+ * @example
+ * ```tsx
+ * import { ReanimatedTrueSheet, ReanimatedTrueSheetProvider } from '@lodev09/react-native-true-sheet/reanimated'
+ *
+ * function MyScreen() {
+ *   const sheetRef = useRef<TrueSheet>(null)
+ *
+ *   return (
+ *     <ReanimatedTrueSheetProvider>
+ *       <View>
+ *         <ReanimatedTrueSheet
+ *           ref={sheetRef}
+ *           detents={[0.25, 0.5, 1]}
+ *           initialDetentIndex={1}
+ *         >
+ *           <Text>Sheet Content</Text>
+ *         </ReanimatedTrueSheet>
+ *       </View>
+ *     </ReanimatedTrueSheetProvider>
+ *   )
+ * }
+ * ```
+ */
+export const ReanimatedTrueSheet = forwardRef<TrueSheet, ReanimatedTrueSheetProps>((props, ref) => {
+  const { onPositionChange, detents = [0.5, 1], ...rest } = props;
+  const { height: windowHeight } = useWindowDimensions();
+
+  const { animatedPosition, animatedIndex, animatedDetent } = useReanimatedTrueSheet();
+
+  // Reset animated values when component unmounts
+  useEffect(() => {
+    return () => {
+      animatedPosition.value = windowHeight;
+      animatedIndex.value = -1;
+      animatedDetent.value = 0;
+    };
+  }, [windowHeight]);
+
+  const handlePositionChange = (event: PositionChangeEvent) => {
+    const { position, index, detent } = event.nativeEvent;
+
+    // Sync with provider's shared values
+    animatedPosition.value = position;
+    animatedIndex.value = index;
+    animatedDetent.value = detent;
+
+    // Call user's callback
+    onPositionChange?.(event);
+  };
+
+  return (
+    <TrueSheet ref={ref} detents={detents} onPositionChange={handlePositionChange} {...rest} />
+  );
+});

package/src/reanimated/ReanimatedTrueSheetProvider.tsx

@@ -4,13 +4,19 @@ import { useSharedValue, type SharedValue } from 'react-native-reanimated';
 
 export interface ReanimatedTrueSheetContextValue {
   /**
-   * Shared value representing the current sheet position (Y offset from bottom)
+   * Shared value representing the current sheet position (Y offset from top of screen)
    */
   animatedPosition: SharedValue<number>;
   /**
-   * Shared value representing the current detent index
+   * Shared value representing the current detent index as a continuous float.
+   * Interpolates smoothly between -1 (off-screen) and the target detent index.
    */
   animatedIndex: SharedValue<number>;
+  /**
+   * Shared value representing the current detent value (0-1 fraction of screen height).
+   * Interpolates smoothly between detent values as the sheet is dragged.
+   */
+  animatedDetent: SharedValue<number>;
 }
 
 const ReanimatedTrueSheetContext = createContext<ReanimatedTrueSheetContextValue | null>(null);
@@ -40,13 +46,11 @@ export const ReanimatedTrueSheetProvider = ({ children }: ReanimatedTrueSheetPro
   const { height } = useWindowDimensions();
   const animatedPosition = useSharedValue(height);
   const animatedIndex = useSharedValue(-1);
+  const animatedDetent = useSharedValue(0);
 
-  const value = useMemo(
-    () => ({
-      animatedPosition,
-      animatedIndex,
-    }),
-    [animatedPosition, animatedIndex]
+  const value = useMemo<ReanimatedTrueSheetContextValue>(
+    () => ({ animatedPosition, animatedIndex, animatedDetent }),
+    [animatedPosition, animatedIndex, animatedDetent]
   );
 
   return (

package/src/reanimated/useReanimatedPositionChangeHandler.web.ts

@@ -0,0 +1,31 @@
+import { useCallback } from 'react';
+import type { PositionChangeEvent, PositionChangeEventPayload } from '../TrueSheet.types';
+
+type PositionChangeHandler = (
+  payload: PositionChangeEventPayload,
+  context: Record<string, unknown>
+) => void;
+
+/**
+ * Web implementation of useReanimatedPositionChangeHandler.
+ *
+ * Returns a simple callback wrapper. The worklet directive is ignored on web
+ * since there's no native UI thread.
+ *
+ * @param handler - The position change handler function
+ * @param _dependencies - Unused on web, kept for API compatibility
+ * @returns An event handler compatible with onPositionChange prop
+ */
+export const useReanimatedPositionChangeHandler = (
+  handler: PositionChangeHandler,
+  _dependencies: unknown[] = []
+) => {
+  const context: Record<string, unknown> = {};
+
+  return useCallback(
+    (event: PositionChangeEvent) => {
+      handler(event.nativeEvent, context);
+    },
+    [handler]
+  );
+};

package/src/specs/NativeTrueSheetModule.ts

@@ -13,18 +13,29 @@ interface Spec extends TurboModule {
    * Present a sheet by reference
    * @param viewTag - Native view tag of the sheet component
    * @param index - Detent index to present at
+   * @param animated - Whether to animate the presentation
    * @returns Promise that resolves when sheet is fully presented
    * @throws PRESENT_FAILED if presentation fails
    */
-  presentByRef(viewTag: number, index: number): Promise<void>;
+  presentByRef(viewTag: number, index: number, animated: boolean): Promise<void>;
 
   /**
-   * Dismiss a sheet by reference
+   * Dismiss a sheet and all sheets presented on top of it
    * @param viewTag - Native view tag of the sheet component
+   * @param animated - Whether to animate the dismissal
    * @returns Promise that resolves when sheet is fully dismissed
    * @throws DISMISS_FAILED if dismissal fails
    */
-  dismissByRef(viewTag: number): Promise<void>;
+  dismissByRef(viewTag: number, animated: boolean): Promise<void>;
+
+  /**
+   * Dismiss only the sheets presented on top of this sheet, keeping this sheet presented
+   * @param viewTag - Native view tag of the sheet component
+   * @param animated - Whether to animate the dismissal
+   * @returns Promise that resolves when all child sheets are fully dismissed
+   * @throws DISMISS_FAILED if dismissal fails
+   */
+  dismissStackByRef(viewTag: number, animated: boolean): Promise<void>;
 
   /**
    * Resize a sheet to a different index by reference
@@ -33,6 +44,20 @@ interface Spec extends TurboModule {
    * @returns Promise that resolves when resize is complete
    */
   resizeByRef(viewTag: number, index: number): Promise<void>;
+
+  /**
+   * Dismiss all presented sheets
+   * @param animated - Whether to animate the dismissals
+   * @returns Promise that resolves when all sheets are dismissed
+   */
+  dismissAll(animated: boolean): Promise<void>;
+
+  /**
+   * Handle back press for a sheet (Android only)
+   * Dismisses or collapses to the lowest detent natively
+   * @param viewTag - Native view tag of the sheet component
+   */
+  handleBackPress(viewTag: number): Promise<void>;
 }
 
 export default TurboModuleRegistry.get<Spec>('TrueSheetModule');

package/src/web/constants.ts

@@ -0,0 +1,13 @@
+export const DEFAULT_CORNER_RADIUS = 16;
+export const DEFAULT_MAX_WIDTH = 640;
+export const DEFAULT_FORM_SHEET_WIDTH = 580;
+export const DEFAULT_FORM_SHEET_HEIGHT_RATIO = 0.5;
+export const COLOR_SURFACE_CONTAINER_LOW_LIGHT = '#F7F2FA';
+export const COLOR_SURFACE_CONTAINER_LOW_DARK = '#1D1B20';
+export const DEFAULT_ANCHOR_OFFSET = 16;
+export const DEFAULT_DETACHED_OFFSET = 16;
+export const DEFAULT_GRABBER_COLOR_LIGHT = 'rgba(0, 0, 0, 0.3)';
+export const DEFAULT_GRABBER_COLOR_DARK = 'rgba(255, 255, 255, 0.3)';
+export const DEFAULT_GRABBER_WIDTH = 32;
+export const DEFAULT_GRABBER_HEIGHT = 4;
+export const DEFAULT_GRABBER_TOP_MARGIN = 8;

package/src/web/dom.ts

@@ -0,0 +1,9 @@
+/// <reference lib="dom" />
+import type { View } from 'react-native';
+
+/**
+ * Resolves a React Native web `View` ref value to its underlying DOM element —
+ * RN-web refs expose the host DOM node directly.
+ */
+export const getDOMElement = (view: View | null): HTMLElement | null =>
+  view instanceof HTMLElement ? view : null;

package/src/web/vaul/README.md

@@ -0,0 +1,9 @@
+# vaul
+
+Originally forked from [vaul](https://github.com/emilkowalski/vaul) by Emil Kowalski at `v1.1.2`. Upstream is unmaintained; maintained here as part of truesheet's web renderer.
+
+Only external runtime dep: `@radix-ui/react-dialog`.
+
+## License
+
+vaul is MIT-licensed. See the [upstream LICENSE](https://github.com/emilkowalski/vaul/blob/main/LICENSE.md). Original copyright remains with Emil Kowalski.

package/src/web/vaul/browser.ts

@@ -0,0 +1,38 @@
+export function isMobileFirefox(): boolean | undefined {
+  const userAgent = navigator.userAgent;
+  return (
+    typeof window !== 'undefined' &&
+    ((/Firefox/.test(userAgent) && /Mobile/.test(userAgent)) || // Android Firefox
+      /FxiOS/.test(userAgent)) // iOS Firefox
+  );
+}
+
+export function isMac(): boolean | undefined {
+  return testPlatform(/^Mac/);
+}
+
+export function isIPhone(): boolean | undefined {
+  return testPlatform(/^iPhone/);
+}
+
+export function isSafari(): boolean | undefined {
+  return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+}
+
+export function isIPad(): boolean | undefined {
+  return (
+    testPlatform(/^iPad/) ||
+    // iPadOS 13 lies and says it's a Mac, but we can distinguish by detecting touch support.
+    (isMac() && navigator.maxTouchPoints > 1)
+  );
+}
+
+export function isIOS(): boolean | undefined {
+  return isIPhone() || isIPad();
+}
+
+export function testPlatform(re: RegExp): boolean | undefined {
+  return typeof window !== 'undefined' && window.navigator != null
+    ? re.test(window.navigator.platform)
+    : undefined;
+}

package/src/web/vaul/constants.ts

@@ -0,0 +1,20 @@
+export const TRANSITIONS = {
+  DURATION: 0.5,
+  EASE: [0.32, 0.72, 0, 1],
+};
+
+export const VELOCITY_THRESHOLD = 0.4;
+
+export const DEFAULT_PEEK_HEIGHT = 150;
+
+export const CLOSE_THRESHOLD = 0.25;
+
+export const SCROLL_LOCK_TIMEOUT = 100;
+
+export const BORDER_RADIUS = 8;
+
+export const NESTED_DISPLACEMENT = 16;
+
+export const WINDOW_TOP_OFFSET = 26;
+
+export const DRAG_CLASS = 'vaul-dragging';

package/src/web/vaul/context.ts

@@ -0,0 +1,101 @@
+import React from 'react';
+import type { DrawerDirection } from './types';
+
+export interface DragEvent {
+  target: EventTarget;
+  pageX: number;
+  pageY: number;
+  pointerType: string;
+}
+
+interface DrawerContextValue {
+  drawerRef: React.RefObject<HTMLDivElement | null>;
+  overlayRef: React.RefObject<HTMLDivElement | null>;
+  onPress: (event: React.PointerEvent<HTMLDivElement>) => void;
+  onRelease: (event: React.PointerEvent<HTMLDivElement> | null) => void;
+  onDrag: (event: React.PointerEvent<HTMLDivElement>) => void;
+  onTouchDrag: (event: DragEvent, pointerEvent?: React.PointerEvent<HTMLDivElement>) => void;
+  onTouchRelease: (
+    event: DragEvent | null,
+    pointerEvent?: React.PointerEvent<HTMLDivElement>
+  ) => void;
+  onNestedDrag: (event: React.PointerEvent<HTMLDivElement>, percentageDragged: number) => void;
+  onNestedOpenChange: (o: boolean) => void;
+  onNestedRelease: (event: React.PointerEvent<HTMLDivElement>, open: boolean) => void;
+  dismissible: boolean;
+  isOpen: boolean;
+  isDragging: boolean;
+  keyboardIsOpen: React.MutableRefObject<boolean>;
+  snapPointsOffset: number[] | null;
+  snapPoints?: (number | string)[] | null;
+  activeSnapPointIndex?: number | null;
+  fadeFromIndex?: number;
+  modal: boolean;
+  shouldFade: boolean;
+  activeSnapPoint?: number | string | null;
+  setActiveSnapPoint: (o: number | string | null) => void;
+  closeDrawer: () => void;
+  openProp?: boolean;
+  onOpenChange?: (o: boolean) => void;
+  direction: DrawerDirection;
+  shouldScaleBackground: boolean;
+  setBackgroundColorOnScale: boolean;
+  noBodyStyles: boolean;
+  handleOnly?: boolean;
+  container?: HTMLElement | null;
+  autoFocus?: boolean;
+  shouldAnimate?: React.RefObject<boolean>;
+  onPositionChangeRef: React.RefObject<((position: number) => void) | undefined>;
+  setContentHeight: (height: number) => void;
+  detached: boolean;
+  detachedOffset: number;
+  detachedRadius: number;
+  detachedWrapperStyle?: React.CSSProperties;
+}
+
+export const DrawerContext = React.createContext<DrawerContextValue>({
+  drawerRef: { current: null },
+  overlayRef: { current: null },
+  onPress: () => {},
+  onRelease: () => {},
+  onDrag: () => {},
+  onTouchDrag: () => {},
+  onTouchRelease: () => {},
+  onNestedDrag: () => {},
+  onNestedOpenChange: () => {},
+  onNestedRelease: () => {},
+  openProp: undefined,
+  dismissible: false,
+  isOpen: false,
+  isDragging: false,
+  keyboardIsOpen: { current: false },
+  snapPointsOffset: null,
+  snapPoints: null,
+  handleOnly: false,
+  modal: false,
+  shouldFade: false,
+  activeSnapPoint: null,
+  onOpenChange: () => {},
+  setActiveSnapPoint: () => {},
+  closeDrawer: () => {},
+  direction: 'bottom',
+  shouldAnimate: { current: true },
+  shouldScaleBackground: false,
+  setBackgroundColorOnScale: true,
+  noBodyStyles: false,
+  container: null,
+  autoFocus: false,
+  onPositionChangeRef: { current: undefined },
+  setContentHeight: () => {},
+  detached: false,
+  detachedOffset: 0,
+  detachedRadius: 0,
+});
+
+export const useDrawerContext = () => {
+  const context = React.useContext(DrawerContext);
+  if (!context) {
+    throw new Error('useDrawerContext must be used within a Drawer.Root');
+  }
+  return context;
+};

package/src/web/vaul/helpers.ts

@@ -0,0 +1,131 @@
+import type { AnyFunction, DrawerDirection } from './types';
+
+interface Style {
+  [key: string]: string;
+}
+
+// CSSStyleDeclaration has no string index signature, so dynamic camelCase
+// keys are assigned through this writable-record view. Values include
+// undefined: originals captured for unknown keys read back as undefined.
+type IndexableStyle = CSSStyleDeclaration & Record<string, string | undefined>;
+
+const cache = new WeakMap<HTMLElement, Record<string, string | undefined>>();
+
+export function isInView(el: HTMLElement): boolean {
+  const rect = el.getBoundingClientRect();
+
+  if (!window.visualViewport) return false;
+
+  return (
+    rect.top >= 0 &&
+    rect.left >= 0 &&
+    // Need + 40 for safari detection
+    rect.bottom <= window.visualViewport.height - 40 &&
+    rect.right <= window.visualViewport.width
+  );
+}
+
+export function set(
+  el: Element | HTMLElement | null | undefined,
+  styles: Style,
+  ignoreCache = false
+) {
+  if (!el || !(el instanceof HTMLElement)) return;
+  let originalStyles: Record<string, string | undefined> = {};
+  const style = el.style as IndexableStyle;
+
+  Object.entries(styles).forEach(([key, value]: [string, string]) => {
+    if (key.startsWith('--')) {
+      el.style.setProperty(key, value);
+      return;
+    }
+
+    originalStyles[key] = style[key];
+    style[key] = value;
+  });
+
+  if (ignoreCache) return;
+
+  cache.set(el, originalStyles);
+}
+
+export function reset(el: Element | HTMLElement | null, prop?: string) {
+  if (!el || !(el instanceof HTMLElement)) return;
+  let originalStyles = cache.get(el);
+
+  if (!originalStyles) {
+    return;
+  }
+
+  const style = el.style as IndexableStyle;
+  if (prop) {
+    style[prop] = originalStyles[prop];
+  } else {
+    Object.entries(originalStyles).forEach(([key, value]) => {
+      style[key] = value;
+    });
+  }
+}
+
+export const isVertical = (direction: DrawerDirection) => {
+  switch (direction) {
+    case 'top':
+    case 'bottom':
+      return true;
+    case 'left':
+    case 'right':
+      return false;
+    default:
+      return direction satisfies never;
+  }
+};
+
+export function getTranslate(element: HTMLElement, direction: DrawerDirection): number | null {
+  if (!element) {
+    return null;
+  }
+  const style = window.getComputedStyle(element);
+  const transform =
+    // @ts-ignore
+    style.transform || style.webkitTransform || style.mozTransform;
+  let mat = transform.match(/^matrix3d\((.+)\)$/);
+  if (mat) {
+    // https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix3d
+    return parseFloat(mat[1].split(', ')[isVertical(direction) ? 13 : 12]);
+  }
+  // https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix
+  mat = transform.match(/^matrix\((.+)\)$/);
+  return mat ? parseFloat(mat[1].split(', ')[isVertical(direction) ? 5 : 4]) : null;
+}
+
+export function dampenValue(v: number) {
+  return 8 * (Math.log(v + 1) - 2);
+}
+
+export function assignStyle(
+  element: HTMLElement | null | undefined,
+  style: Partial<CSSStyleDeclaration>
+) {
+  if (!element) return () => {};
+
+  const prevStyle = element.style.cssText;
+  Object.assign(element.style, style);
+
+  return () => {
+    element.style.cssText = prevStyle;
+  };
+}
+
+/**
+ * Receives functions as arguments and returns a new function that calls all.
+ */
+export function chain<T>(...fns: T[]) {
+  return (...args: T extends AnyFunction ? Parameters<T> : never) => {
+    for (const fn of fns) {
+      if (typeof fn === 'function') {
+        // @ts-ignore
+        fn(...args);
+      }
+    }
+  };
+}