react-native-bottom-sheet-stack 1.5.3 → 1.6.1

package/src/useBottomSheetContext.ts

@@ -1,15 +1,13 @@
+import { shallow } from 'zustand/shallow';
 import { useMaybeBottomSheetContext } from './BottomSheet.context';
-import {
-  useBottomSheetStore,
-  type BottomSheetState,
-} from './bottomSheet.store';
+import { useBottomSheetStore } from './bottomSheet.store';
 import type {
   BottomSheetPortalId,
   BottomSheetPortalParams,
 } from './portal.types';
 
 export interface UseBottomSheetContextReturn<TParams> {
-  bottomSheetState: BottomSheetState;
+  id: string;
   params: TParams;
   close: () => void;
   /** @deprecated Use `close` instead */
@@ -27,23 +25,27 @@ export function useBottomSheetContext<
 >(): UseBottomSheetContextReturn<BottomSheetPortalParams<T> | unknown> {
   const context = useMaybeBottomSheetContext();
 
-  const bottomSheetState = useBottomSheetStore(
-    (state) => state.sheetsById[context?.id!]
+  const { id, params } = useBottomSheetStore(
+    (state) => ({
+      id: state.sheetsById[context?.id!]?.id,
+      params: state.sheetsById[context?.id!]?.params,
+    }),
+    shallow
   );
 
   const startClosing = useBottomSheetStore((state) => state.startClosing);
 
-  if (!bottomSheetState) {
+  if (!id) {
     throw new Error(
       'useBottomSheetContext must be used within a BottomSheet component'
     );
   }
 
-  const close = () => startClosing(bottomSheetState.id);
+  const close = () => startClosing(id);
 
   return {
-    bottomSheetState,
-    params: bottomSheetState.params as BottomSheetPortalParams<T>,
+    id,
+    params: params as BottomSheetPortalParams<T>,
     close,
     closeBottomSheet: close,
   };

package/src/useBottomSheetControl.ts

@@ -48,7 +48,6 @@ export function useBottomSheetControl<T extends BottomSheetPortalId>(
   const open = (options?: OpenOptions<T>) => {
     const groupId = bottomSheetManagerContext?.groupId || 'default';
 
-    // Create ref when opening (same pattern as useBottomSheetManager)
     const ref = React.createRef<BottomSheetMethods>();
     setSheetRef(id, ref);
 

package/src/useScaleAnimation.ts

@@ -3,11 +3,19 @@ import {
   useAnimatedStyle,
   useDerivedValue,
   withTiming,
+  withSpring,
+  type WithTimingConfig,
+  type WithSpringConfig,
 } from 'react-native-reanimated';
 import {
   useBottomSheetStore,
   type BottomSheetStore,
 } from './bottomSheet.store';
+import { useBottomSheetManagerContext } from './BottomSheetManager.provider';
+
+export type ScaleAnimationConfig =
+  | { type: 'timing'; config?: WithTimingConfig }
+  | { type: 'spring'; config?: WithSpringConfig };
 
 export interface ScaleConfig {
   /** Scale factor when sheet is open (default: 0.92) */
@@ -16,16 +24,21 @@ export interface ScaleConfig {
   translateY?: number;
   /** Border radius when sheet is open (default: 12) */
   borderRadius?: number;
-  /** Animation duration in ms (default: 300) */
-  duration?: number;
+  /** Animation config - timing or spring (default: timing with 300ms duration) */
+  animation?: ScaleAnimationConfig;
 }
 
-const DEFAULT_CONFIG: Required<ScaleConfig> = {
+const DEFAULT_ANIMATION: ScaleAnimationConfig = {
+  type: 'timing',
+  config: { duration: 300 },
+};
+
+const DEFAULT_CONFIG = {
   scale: 0.92,
   translateY: 10,
   borderRadius: 12,
-  duration: 300,
-};
+  animation: DEFAULT_ANIMATION,
+} satisfies Required<ScaleConfig>;
 
 /**
  * Returns the number of sheets with scaleBackground above a given element.
@@ -39,12 +52,9 @@ export function useScaleDepth(groupId: string, sheetId?: string): number {
   const scaleDepthSelector = (state: BottomSheetStore) => {
     const { stackOrder, sheetsById } = state;
 
-    // For background: check if ANY scaleBackground sheet is active (binary 0/1)
-    // For a sheet: count scaleBackground sheets above it in the stack
     const startIndex = sheetId ? stackOrder.indexOf(sheetId) + 1 : 0;
 
     if (sheetId && startIndex === 0) {
-      // Sheet not found in stack, return previous value to avoid flicker
       return prevDepthRef.current;
     }
 
@@ -59,8 +69,6 @@ export function useScaleDepth(groupId: string, sheetId?: string): number {
         sheet.status !== 'closing'
       ) {
         depth++;
-        // For background wrapper (no sheetId), we only need to know if there's at least one
-        // Don't accumulate - background scales once, sheets below scale cumulatively
         if (!sheetId) {
           break;
         }
@@ -78,21 +86,22 @@ 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(
-  { groupId, id }: { groupId: string; id?: string },
-  config?: ScaleConfig
-) {
+export function useScaleAnimatedStyle({ id }: { id?: string } = {}) {
+  const { groupId, scaleConfig } = useBottomSheetManagerContext();
   const scaleDepth = useScaleDepth(groupId, id);
 
   const {
     scale = DEFAULT_CONFIG.scale,
     translateY = DEFAULT_CONFIG.translateY,
     borderRadius = DEFAULT_CONFIG.borderRadius,
-    duration = DEFAULT_CONFIG.duration,
-  } = config ?? {};
+    animation = DEFAULT_CONFIG.animation,
+  } = scaleConfig ?? {};
 
   const progress = useDerivedValue(() => {
-    return withTiming(scaleDepth, { duration });
+    if (animation.type === 'spring') {
+      return withSpring(scaleDepth, animation.config);
+    }
+    return withTiming(scaleDepth, animation.config);
   });
 
   return useAnimatedStyle(() => {