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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lodev09/react-native-true-sheet",
-  "version": "3.3.0-beta.0",
+  "version": "3.3.0-beta.2",
   "description": "The true native bottom sheet experience for your React Native Apps.",
   "source": "./src/index.ts",
   "main": "./lib/module/index.js",
@@ -42,8 +42,8 @@
     "!**/.*"
   ],
   "scripts": {
-    "example": "yarn workspace react-native-true-sheet-example",
-    "expo-example": "yarn workspace expo-example",
+    "bare": "yarn workspace @example/bare",
+    "expo": "yarn workspace @example/expo",
     "docs": "yarn workspace docs",
     "test": "jest",
     "typecheck": "tsc",
@@ -52,8 +52,8 @@
     "tidy": "yarn typecheck && yarn lint && yarn format && scripts/objclint.sh && scripts/ktlint.sh",
     "clean": "scripts/clean.sh",
     "prepare": "bob build",
-    "release": "release-it --only-version",
-    "release:beta": "yarn release --preRelease=beta"
+    "release": "release-it",
+    "release:beta": "yarn release -i prerelease"
   },
   "keywords": [
     "react-native",
@@ -105,15 +105,17 @@
     "react": "19.1.1",
     "react-native": "0.82.1",
     "react-native-builder-bob": "^0.40.15",
-    "react-native-reanimated": "^4.1.5",
-    "react-native-worklets": "^0.6.1",
+    "react-native-reanimated": "^4.2.0",
+    "react-native-worklets": "^0.7.0",
     "react-test-renderer": "19.1.1",
     "release-it": "^19.0.4",
     "turbo": "^2.5.6",
     "typescript": "^5.9.2"
   },
   "resolutions": {
-    "@types/react": "19.1.1"
+    "@types/react": "19.1.1",
+    "react-native-reanimated": "^4.2.0",
+    "react-native-worklets": "^0.7.0"
   },
   "peerDependencies": {
     "@gorhom/bottom-sheet": ">=5",
@@ -138,8 +140,9 @@
     }
   },
   "workspaces": [
-    "example",
-    "expo-example",
+    "example/bare",
+    "example/expo",
+    "example/shared",
     "docs"
   ],
   "packageManager": "yarn@4.11.0",
@@ -152,14 +155,17 @@
       "node_modules/(?!(react-native|@react-native|react-native-reanimated|react-native-worklets|react-native-worklets-core)/)"
     ],
     "modulePathIgnorePatterns": [
-      "<rootDir>/example/node_modules",
+      "<rootDir>/example/bare/node_modules",
+      "<rootDir>/example/expo/node_modules",
+      "<rootDir>/example/shared/node_modules",
       "<rootDir>/lib/",
       "<rootDir>/docs/node_modules",
       "<rootDir>/docs/build"
     ],
     "testPathIgnorePatterns": [
       "/node_modules/",
-      "<rootDir>/src/__mocks__/"
+      "<rootDir>/src/__mocks__/",
+      "<rootDir>/example/"
     ]
   },
   "commitlint": {
@@ -208,6 +214,7 @@
   "react-native-builder-bob": {
     "source": "src",
     "output": "lib",
+    "exclude": "**/{__tests__,__fixtures__}/**",
     "targets": [
       [
         "module",

package/src/TrueSheet.tsx

@@ -364,7 +364,7 @@ export class TrueSheet
       dimmed = true,
       initialDetentIndex = -1,
       initialDetentAnimated = true,
-      keyboardMode = 'resize',
+
       dimmedDetentIndex,
       blurTint,
       blurOptions,
@@ -421,7 +421,6 @@ export class TrueSheet
         }}
         dimmed={dimmed}
         dimmedDetentIndex={dimmedDetentIndex}
-        keyboardMode={keyboardMode}
         initialDetentIndex={initialDetentIndex}
         initialDetentAnimated={initialDetentAnimated}
         dismissible={dismissible}

package/src/TrueSheet.types.ts

@@ -143,6 +143,25 @@ export interface BlurOptions {
   interaction?: boolean;
 }
 
+/**
+ * Defines the stack behavior when a modal is presented on web.
+ *
+ * @platform web
+ */
+export type StackBehavior =
+  /**
+   * Mount the modal on top of the current one.
+   */
+  | 'push'
+  /**
+   * Minimize the current modal then mount the new one.
+   */
+  | 'switch'
+  /**
+   * Dismiss the current modal then mount the new one.
+   */
+  | 'replace';
+
 /**
  * Inset adjustment behavior for the sheet content.
  */
@@ -393,13 +412,15 @@ export interface TrueSheetProps extends ViewProps {
   scrollable?: boolean;
 
   /**
-   * Determines how the software keyboard will impact the layout of the sheet.
-   * Set to `pan` if you're working with `FlatList` with a `TextInput`.
+   * Defines the stack behavior when a modal is presented.
+   * - `push`: Mount the modal on top of the current one.
+   * - `switch`: Minimize the current modal then mount the new one.
+   * - `replace`: Dismiss the current modal then mount the new one.
    *
-   * @platform android
-   * @default resize
+   * @platform web
+   * @default 'switch'
    */
-  keyboardMode?: 'resize' | 'pan';
+  stackBehavior?: StackBehavior;
 
   /**
    * Called when the sheet's content is mounted and ready.

package/src/TrueSheet.web.tsx

@@ -6,6 +6,7 @@ import {
   useCallback,
   useContext,
   useEffect,
+  useId,
   useImperativeHandle,
   useMemo,
   useRef,
@@ -22,6 +23,7 @@ import {
   type BottomSheetHandleProps,
   BottomSheetModal,
   BottomSheetView,
+  BottomSheetScrollView,
   type SNAP_POINT_TYPE,
 } from '@gorhom/bottom-sheet';
 import { useDerivedValue, useSharedValue } from 'react-native-reanimated';
@@ -47,7 +49,10 @@ import type {
 } from './TrueSheet.types';
 
 const DEFAULT_CORNER_RADIUS = 16;
+
 const DEFAULT_GRABBER_COLOR = 'rgba(0, 0, 0, 0.3)';
+const DEFAULT_GRABBER_WIDTH = 32;
+const DEFAULT_GRABBER_HEIGHT = 4;
 
 const renderSlot = (slot: TrueSheetProps['header'] | TrueSheetProps['footer']) => {
   if (!slot) return null;
@@ -87,10 +92,13 @@ export const TrueSheet = forwardRef<TrueSheetRef, TrueSheetProps>((props, ref) =
     onDidFocus,
     onWillBlur,
     onDidBlur,
+    stackBehavior = 'switch',
     style,
   } = props;
 
   const { height: windowHeight } = useWindowDimensions();
+  const defaultName = useId();
+  const sheetName = name ?? defaultName;
   const bottomSheetContext = useContext(BottomSheetContext);
   const modalRef = useRef<BottomSheetModal>(null);
   const initialDetentIndexRef = useRef(initialDetentIndex);
@@ -100,6 +108,9 @@ export const TrueSheet = forwardRef<TrueSheetRef, TrueSheetProps>((props, ref) =
   const isMinimized = useRef(false);
   const isDragging = useRef(false);
 
+  const presentResolver = useRef<(() => void) | null>(null);
+  const dismissResolver = useRef<(() => void) | null>(null);
+
   const animatedPosition = useSharedValue(windowHeight);
   const animatedIndex = useSharedValue(0);
 
@@ -158,6 +169,12 @@ export const TrueSheet = forwardRef<TrueSheetRef, TrueSheetProps>((props, ref) =
       if (isPresenting.current) {
         isPresenting.current = false;
 
+        // Resolve present promise
+        if (presentResolver.current) {
+          presentResolver.current();
+          presentResolver.current = null;
+        }
+
         onDidPresent?.({
           nativeEvent: {
             index,
@@ -184,6 +201,12 @@ export const TrueSheet = forwardRef<TrueSheetRef, TrueSheetProps>((props, ref) =
   );
 
   const handleDismiss = useCallback(() => {
+    // Resolve dismiss promise
+    if (dismissResolver.current) {
+      dismissResolver.current();
+      dismissResolver.current = null;
+    }
+
     onDidDismiss?.({ nativeEvent: null } as DidDismissEvent);
 
     // Reset states since sheet is being dismissed
@@ -271,22 +294,20 @@ export const TrueSheet = forwardRef<TrueSheetRef, TrueSheetProps>((props, ref) =
       if (!grabber) {
         return null;
       }
+
+      const height = grabberOptions?.height ?? DEFAULT_GRABBER_HEIGHT;
+      const borderRadius = grabberOptions?.cornerRadius ?? height / 2;
+
       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 },
-          ]}
+          style={[styles.handle, { paddingTop: grabberOptions?.topMargin }]}
+          indicatorStyle={{
+            height,
+            borderRadius,
+            width: grabberOptions?.width ?? DEFAULT_GRABBER_WIDTH,
+            backgroundColor: grabberOptions?.color ?? DEFAULT_GRABBER_COLOR,
+          }}
         />
       );
     },
@@ -307,14 +328,20 @@ export const TrueSheet = forwardRef<TrueSheetRef, TrueSheetProps>((props, ref) =
   const ContainerComponent = scrollable ? Fragment : BottomSheetView;
 
   const sheetMethodsRef = useRef<TrueSheetRef>({
-    present: async (index = 0) => {
-      setSnapIndex(index);
-      isPresenting.current = true;
-      modalRef.current?.present();
+    present: (index = 0) => {
+      return new Promise<void>((resolve) => {
+        presentResolver.current = resolve;
+        setSnapIndex(index);
+        isPresenting.current = true;
+        modalRef.current?.present();
+      });
     },
-    dismiss: async () => {
-      isDismissing.current = true;
-      modalRef.current?.dismiss();
+    dismiss: () => {
+      return new Promise<void>((resolve) => {
+        dismissResolver.current = resolve;
+        isDismissing.current = true;
+        modalRef.current?.dismiss();
+      });
     },
     resize: async (index: number) => {
       modalRef.current?.snapToIndex(index);
@@ -325,15 +352,11 @@ export const TrueSheet = forwardRef<TrueSheetRef, TrueSheetProps>((props, ref) =
 
   // Register with context provider
   useEffect(() => {
-    if (name) {
-      bottomSheetContext?.register(name, sheetMethodsRef);
-    }
+    bottomSheetContext?.register(sheetName, sheetMethodsRef);
     return () => {
-      if (name) {
-        bottomSheetContext?.unregister(name);
-      }
+      bottomSheetContext?.unregister(sheetName);
     };
-  }, [name]);
+  }, [sheetName]);
 
   // Auto-present on mount if initialDetentIndex is set
   useEffect(() => {
@@ -353,7 +376,7 @@ export const TrueSheet = forwardRef<TrueSheetRef, TrueSheetProps>((props, ref) =
   return (
     <BottomSheetModal
       ref={modalRef}
-      name={name}
+      name={sheetName}
       style={[
         styles.root,
         { backgroundColor, borderTopLeftRadius: cornerRadius, borderTopRightRadius: cornerRadius },
@@ -372,15 +395,18 @@ export const TrueSheet = forwardRef<TrueSheetRef, TrueSheetProps>((props, ref) =
       maxDynamicContentSize={maxHeight}
       snapPoints={snapPoints.length > 0 ? snapPoints : undefined}
       onDismiss={handleDismiss}
-      stackBehavior="switch"
+      stackBehavior={stackBehavior}
       backdropComponent={backdropComponent}
+      backgroundComponent={null}
       footerComponent={footerComponent}
     >
       <ContainerComponent>
-        <View style={[styles.container, style]}>
-          {renderSlot(header)}
-          {children}
-        </View>
+        {renderSlot(header)}
+        {scrollable ? (
+          <BottomSheetScrollView contentContainerStyle={style}>{children}</BottomSheetScrollView>
+        ) : (
+          <View style={style}>{children}</View>
+        )}
       </ContainerComponent>
     </BottomSheetModal>
   );
@@ -390,18 +416,13 @@ const styles = StyleSheet.create({
   root: {
     overflow: 'hidden',
   },
-  container: {},
   handle: {
     position: 'absolute',
     top: 0,
     left: 0,
     right: 0,
-    zIndex: 1,
+    zIndex: 999,
     paddingVertical: 10,
     pointerEvents: 'none',
   },
-  handleIndicator: {
-    width: 36,
-    height: 5,
-  },
 });

package/src/fabric/TrueSheetViewNativeComponent.ts

@@ -48,7 +48,7 @@ export interface NativeProps extends ViewProps {
 
   // String properties - use empty string as default to avoid nil insertion
   blurTint?: WithDefault<string, ''>;
-  keyboardMode?: WithDefault<'resize' | 'pan', 'resize'>;
+
   insetAdjustment?: WithDefault<'automatic' | 'never', 'automatic'>;
 
   // Blur options

package/src/navigation/types.ts

@@ -138,10 +138,11 @@ export type TrueSheetNavigationOptions = Pick<
   | 'maxHeight'
   | 'edgeToEdgeFullScreen'
   | 'scrollable'
-  | 'keyboardMode'
   | 'pageSizing'
   | 'header'
   | 'footer'
+  | 'insetAdjustment'
+  | 'stackBehavior'
 > & {
   /**
    * The detent index to present at.