react-native-bottom-sheet-stack 1.4.2 → 1.5.0

package/lib/typescript/src/useBottomSheetControl.d.ts

@@ -1,6 +1,11 @@
-import { type BottomSheetStatus, type PortalOpenOptions } from './bottomSheet.store';
+import { type BottomSheetStatus, type OpenMode } from './bottomSheet.store';
 import type { BottomSheetPortalId, BottomSheetPortalParams, HasParams } from './portal.types';
-type OpenOptions<T extends BottomSheetPortalId> = Omit<PortalOpenOptions<BottomSheetPortalParams<T>>, 'params'> & (HasParams<T> extends true ? {
+interface BaseOpenOptions<TParams> {
+    mode?: OpenMode;
+    scaleBackground?: boolean;
+    params?: TParams;
+}
+type OpenOptions<T extends BottomSheetPortalId> = Omit<BaseOpenOptions<BottomSheetPortalParams<T>>, 'params'> & (HasParams<T> extends true ? {
     params: BottomSheetPortalParams<T>;
 } : {
     params?: BottomSheetPortalParams<T>;

package/lib/typescript/src/useBottomSheetControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useBottomSheetControl.d.ts","sourceRoot":"","sources":["../../../src/useBottomSheetControl.ts"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,iBAAiB,EACtB,KAAK,iBAAiB,EACvB,MAAM,qBAAqB,CAAC;AAE7B,OAAO,KAAK,EACV,mBAAmB,EACnB,uBAAuB,EACvB,SAAS,EACV,MAAM,gBAAgB,CAAC;AAGxB,KAAK,WAAW,CAAC,CAAC,SAAS,mBAAmB,IAAI,IAAI,CACpD,iBAAiB,CAAC,uBAAuB,CAAC,CAAC,CAAC,CAAC,EAC7C,QAAQ,CACT,GACC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,IAAI,GACtB;IAAE,MAAM,EAAE,uBAAuB,CAAC,CAAC,CAAC,CAAA;CAAE,GACtC;IAAE,MAAM,CAAC,EAAE,uBAAuB,CAAC,CAAC,CAAC,CAAA;CAAE,CAAC,CAAC;AAE/C,KAAK,YAAY,CAAC,CAAC,SAAS,mBAAmB,IAC7C,SAAS,CAAC,CAAC,CAAC,SAAS,IAAI,GACrB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK,IAAI,GACjC,CAAC,OAAO,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;AAEzC,MAAM,WAAW,2BAA2B,CAAC,CAAC,SAAS,mBAAmB;IACxE,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IACtB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,YAAY,EAAE,CAAC,MAAM,EAAE,uBAAuB,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IAC3D,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,iBAAiB,GAAG,IAAI,CAAC;CAClC;AAED,wBAAgB,qBAAqB,CAAC,CAAC,SAAS,mBAAmB,EACjE,EAAE,EAAE,CAAC,GACJ,2BAA2B,CAAC,CAAC,CAAC,CAyChC"}
+{"version":3,"file":"useBottomSheetControl.d.ts","sourceRoot":"","sources":["../../../src/useBottomSheetControl.ts"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,iBAAiB,EACtB,KAAK,QAAQ,EACd,MAAM,qBAAqB,CAAC;AAE7B,OAAO,KAAK,EACV,mBAAmB,EACnB,uBAAuB,EACvB,SAAS,EACV,MAAM,gBAAgB,CAAC;AAGxB,UAAU,eAAe,CAAC,OAAO;IAC/B,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,KAAK,WAAW,CAAC,CAAC,SAAS,mBAAmB,IAAI,IAAI,CACpD,eAAe,CAAC,uBAAuB,CAAC,CAAC,CAAC,CAAC,EAC3C,QAAQ,CACT,GACC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,IAAI,GACtB;IAAE,MAAM,EAAE,uBAAuB,CAAC,CAAC,CAAC,CAAA;CAAE,GACtC;IAAE,MAAM,CAAC,EAAE,uBAAuB,CAAC,CAAC,CAAC,CAAA;CAAE,CAAC,CAAC;AAE/C,KAAK,YAAY,CAAC,CAAC,SAAS,mBAAmB,IAC7C,SAAS,CAAC,CAAC,CAAC,SAAS,IAAI,GACrB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK,IAAI,GACjC,CAAC,OAAO,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;AAEzC,MAAM,WAAW,2BAA2B,CAAC,CAAC,SAAS,mBAAmB;IACxE,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IACtB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,YAAY,EAAE,CAAC,MAAM,EAAE,uBAAuB,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IAC3D,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,iBAAiB,GAAG,IAAI,CAAC;CAClC;AAED,wBAAgB,qBAAqB,CAAC,CAAC,SAAS,mBAAmB,EACjE,EAAE,EAAE,CAAC,GACJ,2BAA2B,CAAC,CAAC,CAAC,CAmDhC"}

package/lib/typescript/src/useBottomSheetManager.d.ts

@@ -9,21 +9,5 @@ export declare const useBottomSheetManager: () => {
         mode?: OpenMode;
         scaleBackground?: boolean;
     }) => string;
-    pushBottomSheet: (sheet: {
-        groupId: string;
-        id: string;
-        content: React.ReactNode;
-        scaleBackground?: boolean | undefined;
-        usePortal?: boolean | undefined;
-        params?: Record<string, unknown> | undefined;
-    }) => void;
-    replaceBottomSheet: (sheet: {
-        groupId: string;
-        id: string;
-        content: React.ReactNode;
-        scaleBackground?: boolean | undefined;
-        usePortal?: boolean | undefined;
-        params?: Record<string, unknown> | undefined;
-    }) => void;
 };
 //# sourceMappingURL=useBottomSheetManager.d.ts.map

package/lib/typescript/src/useBottomSheetManager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useBottomSheetManager.d.ts","sourceRoot":"","sources":["../../../src/useBottomSheetManager.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAuB,KAAK,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAMzE,eAAO,MAAM,qBAAqB;;gBA0Db,MAAM;+BArCd,KAAK,CAAC,YAAY,YAClB;QACP,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,IAAI,CAAC,EAAE,QAAQ,CAAC;QAChB,eAAe,CAAC,EAAE,OAAO,CAAC;KAC3B;;;;;;;;;;;;;;;;;CA8CJ,CAAC"}
+{"version":3,"file":"useBottomSheetManager.d.ts","sourceRoot":"","sources":["../../../src/useBottomSheetManager.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAuB,KAAK,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAMzE,eAAO,MAAM,qBAAqB;;gBA6Cb,MAAM;+BAhCd,KAAK,CAAC,YAAY,YAClB;QACP,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,IAAI,CAAC,EAAE,QAAQ,CAAC;QAChB,eAAe,CAAC,EAAE,OAAO,CAAC;KAC3B;CAuCJ,CAAC"}

package/lib/typescript/src/useScaleAnimation.d.ts

@@ -19,7 +19,10 @@ export declare function useScaleDepth(groupId: string, sheetId?: string): number
  * Returns animated style for scale effect based on depth.
  * Uses power scaling: scale^depth for cascading effect.
  */
-export declare function useScaleAnimatedStyle(depth: number, config?: ScaleConfig): {
+export declare function useScaleAnimatedStyle({ groupId, id }: {
+    groupId: string;
+    id?: string;
+}, config?: ScaleConfig): {
     transform: ({
         scale: number;
         translateY?: undefined;

package/lib/typescript/src/useScaleAnimation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useScaleAnimation.d.ts","sourceRoot":"","sources":["../../../src/useScaleAnimation.ts"],"names":[],"mappings":"AAWA,MAAM,WAAW,WAAW;IAC1B,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4DAA4D;IAC5D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qDAAqD;IACrD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AASD;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAuCvE;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,WAAW;;;;;;;;;;;;;;;;;;;;EAiCxE"}
+{"version":3,"file":"useScaleAnimation.d.ts","sourceRoot":"","sources":["../../../src/useScaleAnimation.ts"],"names":[],"mappings":"AAWA,MAAM,WAAW,WAAW;IAC1B,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4DAA4D;IAC5D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qDAAqD;IACrD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AASD;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAuCvE;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CACnC,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,CAAA;CAAE,EACjD,MAAM,CAAC,EAAE,WAAW;;;;;;;;;;;;;;;;;;;;EAoCrB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-bottom-sheet-stack",
-  "version": "1.4.2",
+  "version": "1.5.0",
   "description": "Bottom Sheet Stack Manager",
   "source": "./src/index.tsx",
   "main": "lib/commonjs/index.js",

package/src/BottomSheetHost.tsx

@@ -6,16 +6,12 @@ import { PortalHost } from 'react-native-teleport';
 
 import { shallow } from 'zustand/shallow';
 import { cleanupAnimatedIndex } from './animatedRegistry';
-import { BottomSheetBackdrop } from './BottomSheetBackdrop';
 import { BottomSheetContext } from './BottomSheet.context';
 import { useBottomSheetStore } from './bottomSheet.store';
-import { useBottomSheetManagerContext } from './BottomSheetManager.provider';
+import { BottomSheetBackdrop } from './BottomSheetBackdrop';
 import { initBottomSheetCoordinator } from './bottomSheetCoordinator';
-import {
-  useScaleAnimatedStyle,
-  useScaleDepth,
-  type ScaleConfig,
-} from './useScaleAnimation';
+import { useBottomSheetManagerContext } from './BottomSheetManager.provider';
+import { useScaleAnimatedStyle, type ScaleConfig } from './useScaleAnimation';
 
 function PortalHostWrapper({
   id,
@@ -27,7 +23,7 @@ function PortalHostWrapper({
   height: number;
 }) {
   return (
-    <View style={{ flex: 1, width, height }}>
+    <View style={{ flex: 1, width, height }} pointerEvents="box-none">
       <PortalHost name={`bottomsheet-${id}`} style={{ width, height }} />
     </View>
   );
@@ -79,12 +75,12 @@ function QueueItem({
   stackIndex: number;
 }) {
   const sheet = useBottomSheetStore((state) => state.sheetsById[id]);
+  const startClosing = useBottomSheetStore((state) => state.startClosing);
 
   const { width, height } = useSafeAreaFrame();
   const value = { id };
 
-  const scaleDepth = useScaleDepth(groupId, id);
-  const scaleStyle = useScaleAnimatedStyle(scaleDepth, scaleConfig);
+  const scaleStyle = useScaleAnimatedStyle({ groupId, id }, scaleConfig);
 
   useEffect(() => {
     return () => {
@@ -98,7 +94,7 @@ function QueueItem({
   return (
     <BottomSheetContext.Provider value={value}>
       <View style={[StyleSheet.absoluteFillObject, { zIndex: backdropZIndex }]}>
-        <BottomSheetBackdrop sheetId={id} />
+        <BottomSheetBackdrop sheetId={id} onPress={() => startClosing(id)} />
       </View>
 
       {/* Sheet content - rendered with scaling */}

package/src/BottomSheetScaleView.tsx

@@ -2,7 +2,7 @@ import { useContext, type PropsWithChildren } from 'react';
 import { StyleSheet } from 'react-native';
 import Animated from 'react-native-reanimated';
 import { BottomSheetManagerContext } from './BottomSheetManager.context';
-import { useScaleAnimatedStyle, useScaleDepth } from './useScaleAnimation';
+import { useScaleAnimatedStyle } from './useScaleAnimation';
 
 /**
  * Wraps your app content with iOS-style scale animation when a bottom sheet
@@ -24,8 +24,7 @@ export function BottomSheetScaleView({ children }: PropsWithChildren) {
   const groupId = context?.groupId ?? 'default';
   const scaleConfig = context?.scaleConfig;
 
-  const scaleDepth = useScaleDepth(groupId);
-  const animatedStyle = useScaleAnimatedStyle(scaleDepth, scaleConfig);
+  const animatedStyle = useScaleAnimatedStyle({ groupId }, scaleConfig);
 
   return (
     <Animated.View style={[styles.container, animatedStyle]}>

package/src/bottomSheet.store.ts

@@ -22,16 +22,8 @@ interface BottomSheetStoreState {
   stackOrder: string[];
 }
 
-export interface PortalOpenOptions<TParams = Record<string, unknown>> {
-  scaleBackground?: boolean;
-  params?: TParams;
-}
-
 interface BottomSheetStoreActions {
-  push(sheet: TriggerState): void;
-  switch(sheet: TriggerState): void;
-  replace(sheet: TriggerState): void;
-  openPortal(id: string, groupId: string, options?: PortalOpenOptions): void;
+  open(sheet: TriggerState, mode?: OpenMode): void;
   markOpen(id: string): void;
   startClosing(id: string): void;
   finishClosing(id: string): void;
@@ -46,21 +38,7 @@ export const useBottomSheetStore = create(
     sheetsById: {},
     stackOrder: [],
 
-    push: (sheet) =>
-      set((state) => {
-        if (state.sheetsById[sheet.id]) {
-          return state;
-        }
-        return {
-          sheetsById: {
-            ...state.sheetsById,
-            [sheet.id]: { ...sheet, status: 'opening' },
-          },
-          stackOrder: [...state.stackOrder, sheet.id],
-        };
-      }),
-
-    switch: (sheet) =>
+    open: (sheet, mode = 'push') =>
       set((state) => {
         if (state.sheetsById[sheet.id]) {
           return state;
@@ -69,31 +47,14 @@ export const useBottomSheetStore = create(
         const newSheetsById = { ...state.sheetsById };
         const topId = state.stackOrder[state.stackOrder.length - 1];
 
-        if (topId && newSheetsById[topId]) {
+        if (mode === 'switch' && topId && newSheetsById[topId]) {
           newSheetsById[topId] = {
             ...newSheetsById[topId],
             status: 'hidden',
           };
         }
 
-        newSheetsById[sheet.id] = { ...sheet, status: 'opening' };
-
-        return {
-          sheetsById: newSheetsById,
-          stackOrder: [...state.stackOrder, sheet.id],
-        };
-      }),
-
-    replace: (sheet) =>
-      set((state) => {
-        if (state.sheetsById[sheet.id]) {
-          return state;
-        }
-
-        const newSheetsById = { ...state.sheetsById };
-        const topId = state.stackOrder[state.stackOrder.length - 1];
-
-        if (topId && newSheetsById[topId]) {
+        if (mode === 'replace' && topId && newSheetsById[topId]) {
           newSheetsById[topId] = {
             ...newSheetsById[topId],
             status: 'closing',
@@ -108,28 +69,6 @@ export const useBottomSheetStore = create(
         };
       }),
 
-    openPortal: (id, groupId, options) =>
-      set((state) => {
-        if (state.sheetsById[id]) {
-          return state;
-        }
-        return {
-          sheetsById: {
-            ...state.sheetsById,
-            [id]: {
-              id,
-              groupId,
-              content: null,
-              status: 'opening',
-              usePortal: true,
-              scaleBackground: options?.scaleBackground,
-              params: options?.params,
-            },
-          },
-          stackOrder: [...state.stackOrder, id],
-        };
-      }),
-
     markOpen: (id) =>
       set((state) => {
         const sheet = state.sheetsById[id];

package/src/useBottomSheetControl.ts

@@ -4,7 +4,7 @@ import type { BottomSheetMethods } from '@gorhom/bottom-sheet/lib/typescript/typ
 import {
   useBottomSheetStore,
   type BottomSheetStatus,
-  type PortalOpenOptions,
+  type OpenMode,
 } from './bottomSheet.store';
 import { useMaybeBottomSheetManagerContext } from './BottomSheetManager.provider';
 import type {
@@ -14,8 +14,14 @@ import type {
 } from './portal.types';
 import { sheetRefs } from './refsMap';
 
+interface BaseOpenOptions<TParams> {
+  mode?: OpenMode;
+  scaleBackground?: boolean;
+  params?: TParams;
+}
+
 type OpenOptions<T extends BottomSheetPortalId> = Omit<
-  PortalOpenOptions<BottomSheetPortalParams<T>>,
+  BaseOpenOptions<BottomSheetPortalParams<T>>,
   'params'
 > &
   (HasParams<T> extends true
@@ -41,7 +47,7 @@ export function useBottomSheetControl<T extends BottomSheetPortalId>(
 ): UseBottomSheetControlReturn<T> {
   const bottomSheetManagerContext = useMaybeBottomSheetManagerContext();
 
-  const openPortal = useBottomSheetStore((state) => state.openPortal);
+  const storeOpen = useBottomSheetStore((state) => state.open);
   const startClosing = useBottomSheetStore((state) => state.startClosing);
   const storeUpdateParams = useBottomSheetStore((state) => state.updateParams);
   const sheetState = useBottomSheetStore((state) => state.sheetsById[id]);
@@ -53,7 +59,17 @@ export function useBottomSheetControl<T extends BottomSheetPortalId>(
     const ref = React.createRef<BottomSheetMethods>();
     sheetRefs[id] = ref;
 
-    openPortal(id, groupId, options);
+    storeOpen(
+      {
+        id,
+        groupId,
+        content: null,
+        usePortal: true,
+        scaleBackground: options?.scaleBackground,
+        params: options?.params as Record<string, unknown>,
+      },
+      options?.mode
+    );
   };
 
   const close = () => {

package/src/useBottomSheetManager.tsx

@@ -9,18 +9,10 @@ import { shallow } from 'zustand/shallow';
 export const useBottomSheetManager = () => {
   const bottomSheetManagerContext = useMaybeBottomSheetManagerContext();
 
-  const {
-    pushBottomSheet,
-    replaceBottomSheet,
-    switchBottomSheet,
-    startClosing,
-    storeClearAll,
-  } = useBottomSheetStore(
+  const { storeOpen, startClosing, storeClearAll } = useBottomSheetStore(
     (store) => ({
+      storeOpen: store.open,
       storeClearAll: store.clearAll,
-      replaceBottomSheet: store.replace,
-      pushBottomSheet: store.push,
-      switchBottomSheet: store.switch,
       startClosing: store.startClosing,
     }),
     shallow
@@ -46,20 +38,15 @@ export const useBottomSheetManager = () => {
     // @ts-ignore
     const contentWithRef = React.cloneElement(content, { ref });
 
-    const sheetData = {
-      id,
-      groupId,
-      content: contentWithRef,
-      scaleBackground: options.scaleBackground,
-    };
-
-    if (options.mode === 'replace') {
-      replaceBottomSheet(sheetData);
-    } else if (options.mode === 'switch') {
-      switchBottomSheet(sheetData);
-    } else {
-      pushBottomSheet(sheetData);
-    }
+    storeOpen(
+      {
+        id,
+        groupId,
+        content: contentWithRef,
+        scaleBackground: options.scaleBackground,
+      },
+      options.mode
+    );
 
     return id;
   };
@@ -76,7 +63,5 @@ export const useBottomSheetManager = () => {
     clearAll,
     close,
     openBottomSheet,
-    pushBottomSheet,
-    replaceBottomSheet,
   };
 };

package/src/useScaleAnimation.ts

@@ -78,7 +78,12 @@ export function useScaleDepth(groupId: string, sheetId?: string): number {
  * Returns animated style for scale effect based on depth.
  * Uses power scaling: scale^depth for cascading effect.
  */
-export function useScaleAnimatedStyle(depth: number, config?: ScaleConfig) {
+export function useScaleAnimatedStyle(
+  { groupId, id }: { groupId: string; id?: string },
+  config?: ScaleConfig
+) {
+  const scaleDepth = useScaleDepth(groupId, id);
+
   const {
     scale = DEFAULT_CONFIG.scale,
     translateY = DEFAULT_CONFIG.translateY,
@@ -87,7 +92,7 @@ export function useScaleAnimatedStyle(depth: number, config?: ScaleConfig) {
   } = config ?? {};
 
   const progress = useDerivedValue(() => {
-    return withTiming(depth, { duration });
+    return withTiming(scaleDepth, { duration });
   });
 
   return useAnimatedStyle(() => {