react-native-bottom-sheet-stack 1.5.2 → 1.6.0

package/package.json

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

package/src/BottomSheetBackdrop.tsx

@@ -28,12 +28,9 @@ export function BottomSheetBackdrop({
   );
 
   const animatedIndex = getAnimatedIndex(sheetId);
-
   const isVisible = status === 'opening' || status === 'open';
 
   const animatedStyle = useAnimatedStyle(() => {
-    // Interpolate opacity based on animatedIndex
-    // -1 = closed, 0+ = open at snap point
     const opacity = interpolate(
       animatedIndex.value,
       [-1, 0],

package/src/BottomSheetHost.tsx

@@ -6,13 +6,13 @@ import { PortalHost } from 'react-native-teleport';
 
 import { shallow } from 'zustand/shallow';
 import { cleanupAnimatedIndex } from './animatedRegistry';
-import { cleanupSheetRef } from './refsMap';
 import { BottomSheetContext } from './BottomSheet.context';
 import { useBottomSheetStore } from './bottomSheet.store';
 import { BottomSheetBackdrop } from './BottomSheetBackdrop';
 import { initBottomSheetCoordinator } from './bottomSheetCoordinator';
 import { useBottomSheetManagerContext } from './BottomSheetManager.provider';
-import { useScaleAnimatedStyle, type ScaleConfig } from './useScaleAnimation';
+import { cleanupSheetRef } from './refsMap';
+import { useScaleAnimatedStyle } from './useScaleAnimation';
 
 function PortalHostWrapper({
   id,
@@ -23,18 +23,14 @@ function PortalHostWrapper({
   width: number;
   height: number;
 }) {
-  return (
-    <View style={{ flex: 1, width, height }} pointerEvents="box-none">
-      <PortalHost name={`bottomsheet-${id}`} style={{ width, height }} />
-    </View>
-  );
+  return <PortalHost name={`bottomsheet-${id}`} style={{ width, height }} />;
 }
 
 function BottomSheetHostComp() {
   const queueIds = useQueueIds();
   const clearGroup = useBottomSheetStore((store) => store.clearGroup);
 
-  const { groupId, scaleConfig } = useBottomSheetManagerContext();
+  const { groupId } = useBottomSheetManagerContext();
 
   useEffect(() => {
     const unsubscribe = initBottomSheetCoordinator(groupId);
@@ -52,36 +48,26 @@ function BottomSheetHostComp() {
   return (
     <>
       {queueIds.map((id, index) => (
-        <QueueItem
-          key={id}
-          id={id}
-          groupId={groupId}
-          scaleConfig={scaleConfig}
-          stackIndex={index}
-        />
+        <QueueItem key={id} id={id} stackIndex={index} />
       ))}
     </>
   );
 }
 
-function QueueItem({
-  id,
-  groupId,
-  scaleConfig,
-  stackIndex,
-}: {
-  id: string;
-  groupId: string;
-  scaleConfig?: ScaleConfig;
-  stackIndex: number;
-}) {
-  const sheet = useBottomSheetStore((state) => state.sheetsById[id]);
-  const startClosing = useBottomSheetStore((state) => state.startClosing);
+function QueueItem({ id, stackIndex }: { id: string; stackIndex: number }) {
+  const { content, usePortal, startClosing } = useBottomSheetStore(
+    (state) => ({
+      content: state.sheetsById[id]?.content,
+      usePortal: state.sheetsById[id]?.usePortal,
+      startClosing: state.startClosing,
+    }),
+    shallow
+  );
 
   const { width, height } = useSafeAreaFrame();
   const value = { id };
 
-  const scaleStyle = useScaleAnimatedStyle({ groupId, id }, scaleConfig);
+  const scaleStyle = useScaleAnimatedStyle({ id });
 
   useEffect(() => {
     return () => {
@@ -108,10 +94,10 @@ function QueueItem({
           scaleStyle,
         ]}
       >
-        {sheet?.usePortal ? (
+        {usePortal ? (
           <PortalHostWrapper id={id} width={width} height={height} />
         ) : (
-          sheet?.content
+          content
         )}
       </Animated.View>
     </BottomSheetContext.Provider>

package/src/BottomSheetManaged.tsx

@@ -13,7 +13,6 @@ export interface BottomSheetRef extends BottomSheetMethods {}
 
 interface BottomSheetManagedProps extends BottomSheetProps {}
 
-// Null backdrop - we render our own backdrop separately in BottomSheetHost
 const nullBackdrop = () => null;
 
 export const BottomSheetManaged = React.forwardRef<
@@ -32,15 +31,10 @@ export const BottomSheetManaged = React.forwardRef<
     },
     ref
   ) => {
-    const { bottomSheetState } = useBottomSheetContext();
+    const { id } = useBottomSheetContext();
 
-    // Get or create shared animated index for this sheet
-    const animatedIndex =
-      externalAnimatedIndex ?? getAnimatedIndex(bottomSheetState.id);
-
-    const { handleAnimate, handleClose } = createSheetEventHandlers(
-      bottomSheetState.id
-    );
+    const animatedIndex = externalAnimatedIndex ?? getAnimatedIndex(id);
+    const { handleAnimate, handleClose } = createSheetEventHandlers(id);
 
     const wrappedOnAnimate: BottomSheetProps['onAnimate'] = (
       fromIndex: number,

package/src/BottomSheetPortal.tsx

@@ -14,22 +14,20 @@ interface BottomSheetPortalProps {
 }
 
 export function BottomSheetPortal({ id, children }: BottomSheetPortalProps) {
-  const sheetState = useBottomSheetStore((state) => state.sheetsById[id]);
+  const usePortal = useBottomSheetStore(
+    (state) => state.sheetsById[id]?.usePortal
+  );
 
-  // Only render when the sheet is active and using portal
-  if (!sheetState?.usePortal) {
+  if (!usePortal) {
     return null;
   }
 
-  // Get the ref that was created in useBottomSheetControl.open()
   const ref = getSheetRef(id);
 
-  // Clone the child element to add the ref
   const childWithRef = React.cloneElement(children, {
     ref,
   } as { ref: typeof ref });
 
-  // Wrap with BottomSheetContext so useBottomSheetContext() works inside portal content
   return (
     <Portal hostName={`bottomsheet-${id}`}>
       <BottomSheetContext.Provider value={{ id }}>

package/src/BottomSheetScaleView.tsx

@@ -1,7 +1,6 @@
-import { useContext, type PropsWithChildren } from 'react';
+import { type PropsWithChildren } from 'react';
 import { StyleSheet } from 'react-native';
 import Animated from 'react-native-reanimated';
-import { BottomSheetManagerContext } from './BottomSheetManager.context';
 import { useScaleAnimatedStyle } from './useScaleAnimation';
 
 /**
@@ -20,11 +19,7 @@ import { useScaleAnimatedStyle } from './useScaleAnimation';
  * ```
  */
 export function BottomSheetScaleView({ children }: PropsWithChildren) {
-  const context = useContext(BottomSheetManagerContext);
-  const groupId = context?.groupId ?? 'default';
-  const scaleConfig = context?.scaleConfig;
-
-  const animatedStyle = useScaleAnimatedStyle({ groupId }, scaleConfig);
+  const animatedStyle = useScaleAnimatedStyle();
 
   return (
     <Animated.View style={[styles.container, animatedStyle]}>

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

@@ -8,6 +8,7 @@ import {
   useBottomSheetStore,
   type BottomSheetStore,
 } from './bottomSheet.store';
+import { useBottomSheetManagerContext } from './BottomSheetManager.provider';
 
 export interface ScaleConfig {
   /** Scale factor when sheet is open (default: 0.92) */
@@ -39,12 +40,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 +57,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,10 +74,8 @@ 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 {
@@ -89,7 +83,7 @@ export function useScaleAnimatedStyle(
     translateY = DEFAULT_CONFIG.translateY,
     borderRadius = DEFAULT_CONFIG.borderRadius,
     duration = DEFAULT_CONFIG.duration,
-  } = config ?? {};
+  } = scaleConfig ?? {};
 
   const progress = useDerivedValue(() => {
     return withTiming(scaleDepth, { duration });