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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lodev09/react-native-true-sheet",
-  "version": "3.2.1",
+  "version": "3.3.0-beta.0",
   "description": "The true native bottom sheet experience for your React Native Apps.",
   "source": "./src/index.ts",
   "main": "./lib/module/index.js",
@@ -43,6 +43,7 @@
   ],
   "scripts": {
     "example": "yarn workspace react-native-true-sheet-example",
+    "expo-example": "yarn workspace expo-example",
     "docs": "yarn workspace docs",
     "test": "jest",
     "typecheck": "tsc",
@@ -84,6 +85,7 @@
     "@eslint/eslintrc": "^3.3.1",
     "@eslint/js": "^9.35.0",
     "@evilmartians/lefthook": "^2.0.4",
+    "@gorhom/bottom-sheet": "^5.2.8",
     "@react-native/babel-preset": "^0.82.1",
     "@react-native/eslint-config": "^0.82.1",
     "@react-navigation/native": "^7.1.6",
@@ -114,13 +116,17 @@
     "@types/react": "19.1.1"
   },
   "peerDependencies": {
-    "@react-navigation/native": ">=6.0.0",
+    "@gorhom/bottom-sheet": ">=5",
+    "@react-navigation/native": ">=7",
     "react": "*",
     "react-native": "*",
-    "react-native-reanimated": ">=4.0.0",
+    "react-native-reanimated": ">=4",
     "react-native-worklets": "*"
   },
   "peerDependenciesMeta": {
+    "@gorhom/bottom-sheet": {
+      "optional": true
+    },
     "@react-navigation/native": {
       "optional": true
     },
@@ -133,6 +139,7 @@
   },
   "workspaces": [
     "example",
+    "expo-example",
     "docs"
   ],
   "packageManager": "yarn@4.11.0",
@@ -166,7 +173,7 @@
       "tagName": "v${version}"
     },
     "npm": {
-      "publish": true
+      "publish": false
     },
     "hooks": {
       "before:init": [

package/src/TrueSheet.tsx

@@ -10,6 +10,7 @@ import {
 
 import type {
   TrueSheetProps,
+  TrueSheetRef,
   DragBeginEvent,
   DragChangeEvent,
   DragEndEvent,
@@ -34,7 +35,7 @@ import TrueSheetFooterViewNativeComponent from './fabric/TrueSheetFooterViewNati
 
 import TrueSheetModule from './specs/NativeTrueSheetModule';
 
-import { Platform, processColor, StyleSheet, findNodeHandle, View } from 'react-native';
+import { Platform, StyleSheet, findNodeHandle, View, processColor } from 'react-native';
 
 const LINKING_ERROR =
   `The package '@lodev09/react-native-true-sheet' doesn't seem to be linked. Make sure: \n\n` +
@@ -56,7 +57,10 @@ interface TrueSheetState {
   shouldRenderNativeView: boolean;
 }
 
-export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
+export class TrueSheet
+  extends PureComponent<TrueSheetProps, TrueSheetState>
+  implements TrueSheetRef
+{
   displayName = 'TrueSheet';
 
   private readonly nativeRef: RefObject<NativeRef | null>;
@@ -413,7 +417,7 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
         grabber={grabber}
         grabberOptions={{
           ...grabberOptions,
-          color: (processColor(grabberOptions?.color) as number) ?? 0,
+          color: processColor(grabberOptions?.color),
         }}
         dimmed={dimmed}
         dimmedDetentIndex={dimmedDetentIndex}

package/src/TrueSheet.types.ts

@@ -40,6 +40,52 @@ export type WillFocusEvent = NativeSyntheticEvent<null>;
 export type WillBlurEvent = NativeSyntheticEvent<null>;
 export type BackPressEvent = NativeSyntheticEvent<null>;
 
+/**
+ * Ref methods exposed by a TrueSheet instance.
+ */
+export interface TrueSheetRef {
+  /**
+   * 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)
+   */
+  present: (index?: number, animated?: boolean) => Promise<void>;
+  /**
+   * Dismiss the sheet.
+   * @param animated - Whether to animate the dismissal (default: true)
+   */
+  dismiss: (animated?: boolean) => Promise<void>;
+  /**
+   * Resize the sheet to a given detent index.
+   * @param index - The detent index to resize to
+   */
+  resize: (index: number) => Promise<void>;
+}
+
+/**
+ * Methods for controlling TrueSheet instances by name.
+ * Returned by the `useTrueSheet` hook.
+ */
+export interface TrueSheetContextMethods {
+  /**
+   * Present a sheet by name.
+   * @param name - The name of the sheet to present
+   * @param index - The detent index to present at (default: 0)
+   */
+  present: (name: string, index?: number) => Promise<void>;
+  /**
+   * Dismiss a sheet by name.
+   * @param name - The name of the sheet to dismiss
+   */
+  dismiss: (name: string) => Promise<void>;
+  /**
+   * Resize a sheet by name.
+   * @param name - The name of the sheet to resize
+   * @param index - The detent index to resize to
+   */
+  resize: (name: string, index: number) => Promise<void>;
+}
+
 /**
  * Options for customizing the grabber (drag handle) appearance.
  */

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/fabric/TrueSheetViewNativeComponent.ts

@@ -1,4 +1,4 @@
-import type { ColorValue, ViewProps } from 'react-native';
+import type { ColorValue, ProcessedColorValue, ViewProps } from 'react-native';
 import type {
   DirectEventHandler,
   Double,
@@ -12,7 +12,7 @@ type GrabberOptionsType = Readonly<{
   height?: Double;
   topMargin?: Double;
   cornerRadius?: WithDefault<Double, -1>;
-  color?: Int32;
+  color?: ProcessedColorValue | null;
 }>;
 
 type BlurOptionsType = Readonly<{

package/src/index.ts

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