@lodev09/react-native-true-sheet 3.2.2 → 3.3.0-beta.0

package/src/TrueSheet.web.tsx

@@ -0,0 +1,407 @@
+import {
+  createElement,
+  Fragment,
+  forwardRef,
+  isValidElement,
+  useCallback,
+  useContext,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { View, StyleSheet, useWindowDimensions } from 'react-native';
+
+import {
+  BottomSheetBackdrop,
+  type BottomSheetBackdropProps,
+  BottomSheetFooter,
+  type BottomSheetFooterProps,
+  BottomSheetHandle,
+  type BottomSheetHandleProps,
+  BottomSheetModal,
+  BottomSheetView,
+  type SNAP_POINT_TYPE,
+} from '@gorhom/bottom-sheet';
+import { useDerivedValue, useSharedValue } from 'react-native-reanimated';
+
+import { BottomSheetContext } from './TrueSheetProvider.web';
+import type {
+  TrueSheetProps,
+  TrueSheetRef,
+  DetentChangeEvent,
+  DidBlurEvent,
+  DidDismissEvent,
+  DidFocusEvent,
+  DidPresentEvent,
+  MountEvent,
+  PositionChangeEvent,
+  WillBlurEvent,
+  WillDismissEvent,
+  WillFocusEvent,
+  WillPresentEvent,
+  DragBeginEvent,
+  DragChangeEvent,
+  DragEndEvent,
+} from './TrueSheet.types';
+
+const DEFAULT_CORNER_RADIUS = 16;
+const DEFAULT_GRABBER_COLOR = 'rgba(0, 0, 0, 0.3)';
+
+const renderSlot = (slot: TrueSheetProps['header'] | TrueSheetProps['footer']) => {
+  if (!slot) return null;
+  if (isValidElement(slot)) return slot;
+  return createElement(slot);
+};
+
+export const TrueSheet = forwardRef<TrueSheetRef, TrueSheetProps>((props, ref) => {
+  const {
+    name,
+    detents = [0.5, 1],
+    dismissible = true,
+    draggable = true,
+    dimmed = true,
+    dimmedDetentIndex = 0,
+    children,
+    scrollable = false,
+    initialDetentIndex = -1,
+    backgroundColor = '#ffffff',
+    cornerRadius = DEFAULT_CORNER_RADIUS,
+    grabber = true,
+    grabberOptions,
+    maxHeight,
+    header,
+    footer,
+    onMount,
+    onWillPresent,
+    onDidPresent,
+    onWillDismiss,
+    onDidDismiss,
+    onDetentChange,
+    onPositionChange,
+    onDragBegin,
+    onDragChange,
+    onDragEnd,
+    onWillFocus,
+    onDidFocus,
+    onWillBlur,
+    onDidBlur,
+    style,
+  } = props;
+
+  const { height: windowHeight } = useWindowDimensions();
+  const bottomSheetContext = useContext(BottomSheetContext);
+  const modalRef = useRef<BottomSheetModal>(null);
+  const initialDetentIndexRef = useRef(initialDetentIndex);
+  const currentIndexRef = useRef(0);
+  const isPresenting = useRef(false);
+  const isDismissing = useRef(false);
+  const isMinimized = useRef(false);
+  const isDragging = useRef(false);
+
+  const animatedPosition = useSharedValue(windowHeight);
+  const animatedIndex = useSharedValue(0);
+
+  const [snapIndex, setSnapIndex] = useState(initialDetentIndex);
+  const [isMounted, setIsMounted] = useState(false);
+
+  useDerivedValue(() => {
+    onPositionChange?.({
+      nativeEvent: {
+        position: animatedPosition.value,
+        index: animatedIndex.value,
+        detent: detents[animatedIndex.value] ?? 0,
+        realtime: true,
+      },
+    } as PositionChangeEvent);
+  });
+
+  const hasAutoDetent = detents.includes('auto');
+
+  const containerHeight = maxHeight ?? windowHeight;
+  const snapPoints = useMemo(
+    () =>
+      detents
+        .filter((detent): detent is number => detent !== 'auto' && typeof detent === 'number')
+        .map((detent) => Math.min(1, Math.max(0.1, detent)) * containerHeight),
+    [detents, containerHeight]
+  );
+
+  const handleChange = useCallback(
+    (index: number, _position: number, _type: SNAP_POINT_TYPE) => {
+      const previousIndex = currentIndexRef.current;
+      currentIndexRef.current = index;
+
+      // Handle drag end
+      if (isDragging.current && !isPresenting.current) {
+        isDragging.current = false;
+        onDragEnd?.({
+          nativeEvent: {
+            index,
+            position: animatedPosition.value,
+            detent: detents[index] ?? 0,
+          },
+        } as DragEndEvent);
+      }
+
+      if (!isPresenting.current && !isMinimized.current && previousIndex !== index && index >= 0) {
+        onDetentChange?.({
+          nativeEvent: {
+            index,
+            position: animatedPosition.value,
+            detent: detents[index] ?? 0,
+          },
+        } as DetentChangeEvent);
+      }
+
+      if (isPresenting.current) {
+        isPresenting.current = false;
+
+        onDidPresent?.({
+          nativeEvent: {
+            index,
+            position: animatedPosition.value,
+            detent: detents[index] ?? 0,
+          },
+        } as DidPresentEvent);
+
+        onDidFocus?.({ nativeEvent: null } as DidFocusEvent);
+      }
+
+      // Fire onDidBlur when sheet reaches minimized state (index -1 but still mounted)
+      if (isMinimized.current && index === -1) {
+        onDidBlur?.({ nativeEvent: null } as DidBlurEvent);
+      }
+
+      // Fire onDidFocus when sheet is restored from minimized state
+      if (isMinimized.current && index >= 0) {
+        isMinimized.current = false;
+        onDidFocus?.({ nativeEvent: null } as DidFocusEvent);
+      }
+    },
+    [detents, animatedPosition]
+  );
+
+  const handleDismiss = useCallback(() => {
+    onDidDismiss?.({ nativeEvent: null } as DidDismissEvent);
+
+    // Reset states since sheet is being dismissed
+    isMinimized.current = false;
+    isDismissing.current = false;
+    isDragging.current = false;
+  }, []);
+
+  const handleAnimate = useCallback(
+    (_fromIndex: number, toIndex: number) => {
+      // Detect drag begin (when not presenting or dismissing)
+      if (!isPresenting.current && !isDismissing.current && !isDragging.current && toIndex >= 0) {
+        isDragging.current = true;
+        onDragBegin?.({
+          nativeEvent: {
+            index: currentIndexRef.current,
+            position: animatedPosition.value,
+            detent: detents[currentIndexRef.current] ?? 0,
+          },
+        } as DragBeginEvent);
+      }
+
+      // Drag change during animation
+      if (isDragging.current && toIndex >= 0) {
+        onDragChange?.({
+          nativeEvent: {
+            index: toIndex,
+            position: animatedPosition.value,
+            detent: detents[toIndex] ?? 0,
+          },
+        } as DragChangeEvent);
+      }
+
+      if (isPresenting.current) {
+        onWillPresent?.({
+          nativeEvent: {
+            index: toIndex,
+            position: animatedPosition.value,
+            detent: detents[toIndex] ?? 0,
+          },
+        } as WillPresentEvent);
+
+        // Focus events fire together with present events
+        onWillFocus?.({ nativeEvent: null } as WillFocusEvent);
+      }
+
+      // Detect if sheet is being restored (will focus)
+      if (isMinimized.current && toIndex >= 0) {
+        onWillFocus?.({ nativeEvent: null } as WillFocusEvent);
+      }
+
+      if (toIndex === -1 && !isPresenting.current) {
+        // Will be handled as blur if the sheet doesn't actually dismiss
+        isMinimized.current = true;
+        onWillBlur?.({ nativeEvent: null } as WillBlurEvent);
+
+        if (isDismissing.current) {
+          onWillDismiss?.({ nativeEvent: null } as WillDismissEvent);
+        }
+      }
+    },
+    [detents, animatedPosition]
+  );
+
+  const backdropComponent = useCallback(
+    (backdropProps: BottomSheetBackdropProps) => {
+      if (!dimmed) {
+        return null;
+      }
+      return (
+        <BottomSheetBackdrop
+          {...backdropProps}
+          opacity={0.5}
+          appearsOnIndex={dimmedDetentIndex}
+          disappearsOnIndex={dimmedDetentIndex - 1}
+          pressBehavior={dismissible ? 'close' : 'none'}
+        />
+      );
+    },
+    [dimmed, dimmedDetentIndex, dismissible]
+  );
+
+  const handleComponent = useCallback(
+    (handleProps: BottomSheetHandleProps) => {
+      if (!grabber) {
+        return null;
+      }
+      return (
+        <BottomSheetHandle
+          {...handleProps}
+          style={[
+            styles.handle,
+            grabberOptions?.topMargin !== undefined && { paddingTop: grabberOptions.topMargin },
+          ]}
+          indicatorStyle={[
+            styles.handleIndicator,
+            grabberOptions?.width !== undefined && { width: grabberOptions.width },
+            grabberOptions?.height !== undefined && { height: grabberOptions.height },
+            grabberOptions?.cornerRadius !== undefined && {
+              borderRadius: grabberOptions.cornerRadius,
+            },
+            { backgroundColor: grabberOptions?.color ?? DEFAULT_GRABBER_COLOR },
+          ]}
+        />
+      );
+    },
+    [grabber, grabberOptions]
+  );
+
+  const footerComponent = useMemo(
+    () =>
+      footer
+        ? (footerProps: BottomSheetFooterProps) => (
+            <BottomSheetFooter {...footerProps}>{renderSlot(footer)}</BottomSheetFooter>
+          )
+        : undefined,
+    [footer]
+  );
+
+  // For scrollable, we render the child directly
+  const ContainerComponent = scrollable ? Fragment : BottomSheetView;
+
+  const sheetMethodsRef = useRef<TrueSheetRef>({
+    present: async (index = 0) => {
+      setSnapIndex(index);
+      isPresenting.current = true;
+      modalRef.current?.present();
+    },
+    dismiss: async () => {
+      isDismissing.current = true;
+      modalRef.current?.dismiss();
+    },
+    resize: async (index: number) => {
+      modalRef.current?.snapToIndex(index);
+    },
+  });
+
+  useImperativeHandle(ref, () => sheetMethodsRef.current);
+
+  // Register with context provider
+  useEffect(() => {
+    if (name) {
+      bottomSheetContext?.register(name, sheetMethodsRef);
+    }
+    return () => {
+      if (name) {
+        bottomSheetContext?.unregister(name);
+      }
+    };
+  }, [name]);
+
+  // Auto-present on mount if initialDetentIndex is set
+  useEffect(() => {
+    if (initialDetentIndexRef.current >= 0) {
+      sheetMethodsRef.current.present(initialDetentIndexRef.current);
+    }
+  }, []);
+
+  // Handle mount event after first render
+  useEffect(() => {
+    if (!isMounted) {
+      setIsMounted(true);
+      onMount?.({ nativeEvent: null } as MountEvent);
+    }
+  }, [isMounted, onMount]);
+
+  return (
+    <BottomSheetModal
+      ref={modalRef}
+      name={name}
+      style={[
+        styles.root,
+        { backgroundColor, borderTopLeftRadius: cornerRadius, borderTopRightRadius: cornerRadius },
+      ]}
+      index={snapIndex}
+      animateOnMount
+      enablePanDownToClose={dismissible}
+      enableContentPanningGesture={draggable}
+      enableHandlePanningGesture={draggable}
+      animatedPosition={animatedPosition}
+      animatedIndex={animatedIndex}
+      handleComponent={handleComponent}
+      onChange={handleChange}
+      onAnimate={handleAnimate}
+      enableDynamicSizing={hasAutoDetent}
+      maxDynamicContentSize={maxHeight}
+      snapPoints={snapPoints.length > 0 ? snapPoints : undefined}
+      onDismiss={handleDismiss}
+      stackBehavior="switch"
+      backdropComponent={backdropComponent}
+      footerComponent={footerComponent}
+    >
+      <ContainerComponent>
+        <View style={[styles.container, style]}>
+          {renderSlot(header)}
+          {children}
+        </View>
+      </ContainerComponent>
+    </BottomSheetModal>
+  );
+});
+
+const styles = StyleSheet.create({
+  root: {
+    overflow: 'hidden',
+  },
+  container: {},
+  handle: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    zIndex: 1,
+    paddingVertical: 10,
+    pointerEvents: 'none',
+  },
+  handleIndicator: {
+    width: 36,
+    height: 5,
+  },
+});

package/src/TrueSheetProvider.tsx

@@ -0,0 +1,29 @@
+import type { ReactNode } from 'react';
+
+import { TrueSheet } from './TrueSheet';
+import type { TrueSheetContextMethods } from './TrueSheet.types';
+
+export interface TrueSheetProviderProps {
+  children: ReactNode;
+}
+
+/**
+ * Provider for TrueSheet on native platforms.
+ * This is a pass-through component - no context is needed on native
+ * since TrueSheet uses static instance methods internally.
+ */
+export function TrueSheetProvider({ children }: TrueSheetProviderProps) {
+  return children;
+}
+
+/**
+ * Hook to control TrueSheet instances by name.
+ * On native, this maps directly to TrueSheet static methods.
+ */
+export function useTrueSheet(): TrueSheetContextMethods {
+  return {
+    present: TrueSheet.present,
+    dismiss: TrueSheet.dismiss,
+    resize: TrueSheet.resize,
+  };
+}

package/src/TrueSheetProvider.web.tsx

@@ -0,0 +1,81 @@
+import { createContext, useContext, useRef, type ReactNode, type RefObject } from 'react';
+import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
+import type { TrueSheetContextMethods, TrueSheetRef } from './TrueSheet.types';
+
+interface BottomSheetContextValue extends TrueSheetContextMethods {
+  register: (name: string, methods: RefObject<TrueSheetRef>) => void;
+  unregister: (name: string) => void;
+}
+
+export const BottomSheetContext = createContext<BottomSheetContextValue | null>(null);
+
+export interface TrueSheetProviderProps {
+  children: ReactNode;
+}
+
+/**
+ * Provider for TrueSheet on web.
+ * Required to wrap your app for sheet management via useTrueSheet hook.
+ */
+export function TrueSheetProvider({ children }: TrueSheetProviderProps) {
+  const sheetsRef = useRef<Map<string, RefObject<TrueSheetRef>>>(new Map());
+
+  const register = (name: string, methods: RefObject<TrueSheetRef>) => {
+    sheetsRef.current.set(name, methods);
+  };
+
+  const unregister = (name: string) => {
+    sheetsRef.current.delete(name);
+  };
+
+  const present = async (name: string, index: number = 0) => {
+    const sheet = sheetsRef.current.get(name);
+    if (!sheet?.current) {
+      console.warn(`TrueSheet: Could not find sheet with name "${name}"`);
+      return;
+    }
+    return sheet.current.present(index);
+  };
+
+  const dismiss = async (name: string) => {
+    const sheet = sheetsRef.current.get(name);
+    if (!sheet?.current) {
+      console.warn(`TrueSheet: Could not find sheet with name "${name}"`);
+      return;
+    }
+    return sheet.current.dismiss();
+  };
+
+  const resize = async (name: string, index: number) => {
+    const sheet = sheetsRef.current.get(name);
+    if (!sheet?.current) {
+      console.warn(`TrueSheet: Could not find sheet with name "${name}"`);
+      return;
+    }
+    return sheet.current.resize(index);
+  };
+
+  return (
+    <BottomSheetContext.Provider value={{ register, unregister, present, dismiss, resize }}>
+      <BottomSheetModalProvider>{children}</BottomSheetModalProvider>
+    </BottomSheetContext.Provider>
+  );
+}
+
+/**
+ * Hook to control TrueSheet instances by name.
+ * On web, this uses the TrueSheetContext from TrueSheetProvider.
+ */
+export function useTrueSheet(): TrueSheetContextMethods {
+  const context = useContext(BottomSheetContext);
+
+  if (!context) {
+    throw new Error('useTrueSheet must be used within a TrueSheetProvider');
+  }
+
+  return {
+    present: context.present,
+    dismiss: context.dismiss,
+    resize: context.resize,
+  };
+}

package/src/index.ts

@@ -1,2 +1,3 @@
 export * from './TrueSheet';
 export * from './TrueSheet.types';
+export * from './TrueSheetProvider';

package/src/reanimated/ReanimatedTrueSheet.web.tsx

@@ -0,0 +1,78 @@
+import { forwardRef, useEffect } from 'react';
+import { useWindowDimensions } from 'react-native';
+
+import { TrueSheet } from '../TrueSheet.web';
+import type { TrueSheetProps, TrueSheetRef, PositionChangeEvent } from '../TrueSheet.types';
+import { useReanimatedTrueSheet } from './ReanimatedTrueSheetProvider';
+
+interface ReanimatedTrueSheetProps extends TrueSheetProps {
+  /**
+   * Callback for position changes.
+   * On web, this is called with the position data from @gorhom/bottom-sheet.
+   *
+   * @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<TrueSheetRef>(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<TrueSheetRef, 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/useReanimatedPositionChangeHandler.web.ts

@@ -0,0 +1,32 @@
+import { useCallback } from 'react';
+import type { PositionChangeEvent, PositionChangeEventPayload } from '../TrueSheet.types';
+
+type PositionChangeHandler = (
+  payload: PositionChangeEventPayload,
+  context: Record<string, unknown>
+) => void;
+
+/**
+ * Web implementation of useReanimatedPositionChangeHandler.
+ *
+ * On web, this returns a simple callback wrapper since @gorhom/bottom-sheet
+ * already provides animated position values. The worklet directive is ignored
+ * on web as 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]
+  );
+};