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

package/src/BottomSheetBackdrop.tsx

@@ -5,30 +5,17 @@ import Animated, {
   useAnimatedStyle,
 } from 'react-native-reanimated';
 import { getAnimatedIndex } from './animatedRegistry';
-import { useBottomSheetStore } from './bottomSheet.store';
 
 interface BottomSheetBackdropProps {
   sheetId: string;
   onPress?: () => void;
 }
 
-const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
-
-/**
- * Custom backdrop component rendered separately from the scaled sheet content.
- * This ensures the backdrop doesn't scale with the sheet.
- * Opacity is interpolated from the bottom sheet's animatedIndex for smooth animation.
- */
 export function BottomSheetBackdrop({
   sheetId,
   onPress,
 }: BottomSheetBackdropProps) {
-  const status = useBottomSheetStore(
-    (state) => state.sheetsById[sheetId]?.status
-  );
-
   const animatedIndex = getAnimatedIndex(sheetId);
-  const isVisible = status === 'opening' || status === 'open';
 
   const animatedStyle = useAnimatedStyle(() => {
     const opacity = interpolate(
@@ -42,17 +29,21 @@ export function BottomSheetBackdrop({
   });
 
   return (
-    <AnimatedPressable
-      style={[styles.backdrop, animatedStyle]}
-      onPress={onPress}
-      pointerEvents={isVisible ? 'auto' : 'none'}
-    />
+    <Pressable
+      style={StyleSheet.absoluteFillObject}
+      onPress={() => {
+        onPress?.();
+      }}
+    >
+      <Animated.View
+        style={[StyleSheet.absoluteFillObject, animatedStyle, styles.backdrop]}
+      />
+    </Pressable>
   );
 }
 
 const styles = StyleSheet.create({
   backdrop: {
-    ...StyleSheet.absoluteFillObject,
     backgroundColor: 'rgba(0, 0, 0, 0.5)',
   },
 });

package/src/BottomSheetHost.tsx

@@ -1,35 +1,14 @@
 import { useEffect } from 'react';
-import { StyleSheet, View } from 'react-native';
-import Animated from 'react-native-reanimated';
-import { useSafeAreaFrame } from 'react-native-safe-area-context';
-import { PortalHost } from 'react-native-teleport';
 
-import { shallow } from 'zustand/shallow';
-import { cleanupAnimatedIndex } from './animatedRegistry';
-import { BottomSheetContext } from './BottomSheet.context';
-import { useBottomSheetStore } from './bottomSheet.store';
-import { BottomSheetBackdrop } from './BottomSheetBackdrop';
+import { useClearGroup } from './bottomSheet.store';
 import { initBottomSheetCoordinator } from './bottomSheetCoordinator';
 import { useBottomSheetManagerContext } from './BottomSheetManager.provider';
-import { cleanupSheetRef } from './refsMap';
-import { useScaleAnimatedStyle } from './useScaleAnimation';
-
-function PortalHostWrapper({
-  id,
-  width,
-  height,
-}: {
-  id: string;
-  width: number;
-  height: number;
-}) {
-  return <PortalHost name={`bottomsheet-${id}`} style={{ width, height }} />;
-}
-
-function BottomSheetHostComp() {
-  const queueIds = useQueueIds();
-  const clearGroup = useBottomSheetStore((store) => store.clearGroup);
+import { QueueItem } from './QueueItem';
+import { useSheetRenderData } from './useSheetRenderData';
 
+export function BottomSheetHost() {
+  const sheetRenderData = useSheetRenderData();
+  const clearGroup = useClearGroup();
   const { groupId } = useBottomSheetManagerContext();
 
   useEffect(() => {
@@ -47,79 +26,14 @@ function BottomSheetHostComp() {
 
   return (
     <>
-      {queueIds.map((id, index) => (
-        <QueueItem key={id} id={id} stackIndex={index} />
+      {sheetRenderData.map(({ id, stackIndex, isActive }) => (
+        <QueueItem
+          key={id}
+          id={id}
+          stackIndex={stackIndex}
+          isActive={isActive}
+        />
       ))}
     </>
   );
 }
-
-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({ id });
-
-  useEffect(() => {
-    return () => {
-      cleanupSheetRef(id);
-      cleanupAnimatedIndex(id);
-    };
-  }, [id]);
-
-  const backdropZIndex = stackIndex * 2;
-  const contentZIndex = stackIndex * 2 + 1;
-
-  return (
-    <BottomSheetContext.Provider value={value}>
-      <View style={[StyleSheet.absoluteFillObject, { zIndex: backdropZIndex }]}>
-        <BottomSheetBackdrop sheetId={id} onPress={() => startClosing(id)} />
-      </View>
-
-      {/* Sheet content - rendered with scaling */}
-      <Animated.View
-        style={[
-          StyleSheet.absoluteFillObject,
-          styles.container,
-          { width, height, zIndex: contentZIndex },
-          scaleStyle,
-        ]}
-      >
-        {usePortal ? (
-          <PortalHostWrapper id={id} width={width} height={height} />
-        ) : (
-          content
-        )}
-      </Animated.View>
-    </BottomSheetContext.Provider>
-  );
-}
-
-const useQueueIds = () => {
-  const { groupId } = useBottomSheetManagerContext();
-
-  return useBottomSheetStore(
-    (state) =>
-      state.stackOrder.filter(
-        (sheetId) => state.sheetsById[sheetId]?.groupId === groupId
-      ),
-    shallow
-  );
-};
-
-export const BottomSheetHost = BottomSheetHostComp;
-
-const styles = StyleSheet.create({
-  container: {
-    pointerEvents: 'box-none',
-  },
-});

package/src/BottomSheetManaged.tsx

@@ -6,7 +6,9 @@ import { type BottomSheetMethods } from '@gorhom/bottom-sheet/lib/typescript/typ
 import React from 'react';
 
 import { getAnimatedIndex } from './animatedRegistry';
+import { useSheetStatus } from './bottomSheet.store';
 import { createSheetEventHandlers } from './bottomSheetCoordinator';
+import { useBottomSheetRefContext } from './BottomSheetRef.context';
 import { useBottomSheetContext } from './useBottomSheetContext';
 
 export interface BottomSheetRef extends BottomSheetMethods {}
@@ -23,18 +25,27 @@ export const BottomSheetManaged = React.forwardRef<
     {
       children,
       onAnimate,
+      onChange,
       onClose,
       enablePanDownToClose = true,
       backdropComponent = nullBackdrop,
       animatedIndex: externalAnimatedIndex,
+      index: externalIndex,
       ...props
     },
-    ref
+    forwardedRef
   ) => {
     const { id } = useBottomSheetContext();
+    const contextRef = useBottomSheetRefContext();
+    const ref = contextRef ?? forwardedRef;
+
+    const status = useSheetStatus(id);
+    const shouldBeClosed = status === 'hidden' || status === 'closing';
+    const index = externalIndex ?? (shouldBeClosed ? -1 : 0);
 
     const animatedIndex = externalAnimatedIndex ?? getAnimatedIndex(id);
-    const { handleAnimate, handleClose } = createSheetEventHandlers(id);
+    const { handleAnimate, handleChange, handleClose } =
+      createSheetEventHandlers(id);
 
     const wrappedOnAnimate: BottomSheetProps['onAnimate'] = (
       fromIndex: number,
@@ -46,6 +57,15 @@ export const BottomSheetManaged = React.forwardRef<
       onAnimate?.(fromIndex, toIndex, fromPosition, toPosition);
     };
 
+    const wrappedOnChange: BottomSheetProps['onChange'] = (
+      index: number,
+      position: number,
+      type
+    ) => {
+      handleChange(index);
+      onChange?.(index, position, type);
+    };
+
     const wrappedOnClose = () => {
       onClose?.();
       handleClose();
@@ -62,7 +82,9 @@ export const BottomSheetManaged = React.forwardRef<
         animationConfigs={config}
         ref={ref}
         {...props}
+        index={index}
         animatedIndex={animatedIndex}
+        onChange={wrappedOnChange}
         onClose={wrappedOnClose}
         onAnimate={wrappedOnAnimate}
         backdropComponent={backdropComponent}

package/src/BottomSheetPersistent.tsx

@@ -0,0 +1,57 @@
+import type { BottomSheetMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
+import React, { useEffect, useRef } from 'react';
+
+import { useMount, useSheetExists, useUnmount } from './bottomSheet.store';
+import { useMaybeBottomSheetManagerContext } from './BottomSheetManager.provider';
+import { BottomSheetPortal } from './BottomSheetPortal';
+import { BottomSheetRefContext } from './BottomSheetRef.context';
+import type { BottomSheetPortalId } from './portal.types';
+import { useEvent } from './useEvent';
+import { setSheetRef } from './refsMap';
+
+interface BottomSheetPersistentProps {
+  id: BottomSheetPortalId;
+  children: React.ReactElement;
+}
+
+export function BottomSheetPersistent({
+  id,
+  children,
+}: BottomSheetPersistentProps) {
+  const bottomSheetManagerContext = useMaybeBottomSheetManagerContext();
+  const mount = useMount();
+  const unmount = useUnmount();
+  const sheetExists = useSheetExists(id);
+
+  const sheetRef = useRef<BottomSheetMethods>(null);
+  const groupId = bottomSheetManagerContext?.groupId || 'default';
+
+  const mountSheet = useEvent(() => {
+    mount({ id, groupId, content: null, usePortal: true, keepMounted: true });
+  });
+
+  useEffect(() => {
+    if (!sheetExists) {
+      setSheetRef(id, sheetRef);
+      mountSheet();
+    }
+  }, [id, sheetExists, mountSheet]);
+
+  useEffect(() => {
+    return () => {
+      unmount(id);
+    };
+  }, [id, unmount]);
+
+  if (!sheetExists) {
+    return null;
+  }
+
+  return (
+    <BottomSheetPortal id={id}>
+      <BottomSheetRefContext.Provider value={sheetRef}>
+        {children}
+      </BottomSheetRefContext.Provider>
+    </BottomSheetPortal>
+  );
+}

package/src/BottomSheetPortal.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import { Portal } from 'react-native-teleport';
 
 import { BottomSheetContext } from './BottomSheet.context';
-import { useBottomSheetStore } from './bottomSheet.store';
+import { useSheetUsePortal, useSheetPortalSession } from './bottomSheet.store';
 import type { BottomSheetPortalId } from './portal.types';
 import { getSheetRef } from './refsMap';
 
@@ -14,22 +14,20 @@ interface BottomSheetPortalProps {
 }
 
 export function BottomSheetPortal({ id, children }: BottomSheetPortalProps) {
-  const usePortal = useBottomSheetStore(
-    (state) => state.sheetsById[id]?.usePortal
-  );
+  const usePortal = useSheetUsePortal(id);
+  const portalSession = useSheetPortalSession(id);
 
-  if (!usePortal) {
+  if (!usePortal || portalSession === undefined) {
     return null;
   }
 
   const ref = getSheetRef(id);
-
   const childWithRef = React.cloneElement(children, {
     ref,
   } as { ref: typeof ref });
 
   return (
-    <Portal hostName={`bottomsheet-${id}`}>
+    <Portal hostName={`bottomsheet-${id}-${portalSession}`}>
       <BottomSheetContext.Provider value={{ id }}>
         {childWithRef}
       </BottomSheetContext.Provider>

package/src/BottomSheetRef.context.ts

@@ -0,0 +1,14 @@
+import { createContext, useContext, type RefObject } from 'react';
+import type { BottomSheetMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
+
+type SheetRef = RefObject<BottomSheetMethods | null>;
+
+/**
+ * Context for passing sheet ref from BottomSheetPersistent/BottomSheetPortal
+ * to BottomSheetManaged. This allows automatic ref binding without user intervention.
+ */
+export const BottomSheetRefContext = createContext<SheetRef | null>(null);
+
+export function useBottomSheetRefContext(): SheetRef | null {
+  return useContext(BottomSheetRefContext);
+}

package/src/QueueItem.tsx

@@ -0,0 +1,83 @@
+import { useEffect } from 'react';
+import { StyleSheet, View } from 'react-native';
+import Animated from 'react-native-reanimated';
+import { useSafeAreaFrame } from 'react-native-safe-area-context';
+import { PortalHost } from 'react-native-teleport';
+
+import { cleanupAnimatedIndex } from './animatedRegistry';
+import { BottomSheetContext } from './BottomSheet.context';
+import {
+  useSheetContent,
+  useSheetUsePortal,
+  useSheetKeepMounted,
+  useSheetPortalSession,
+  useStartClosing,
+} from './bottomSheet.store';
+import { BottomSheetBackdrop } from './BottomSheetBackdrop';
+import { cleanupSheetRef } from './refsMap';
+import { useScaleAnimatedStyle } from './useScaleAnimation';
+
+interface QueueItemProps {
+  id: string;
+  stackIndex: number;
+  isActive: boolean;
+}
+
+export function QueueItem({ id, stackIndex, isActive }: QueueItemProps) {
+  const content = useSheetContent(id);
+  const usePortal = useSheetUsePortal(id);
+  const keepMounted = useSheetKeepMounted(id);
+  const portalSession = useSheetPortalSession(id);
+  const startClosing = useStartClosing();
+
+  const { width, height } = useSafeAreaFrame();
+  const scaleStyle = useScaleAnimatedStyle({ id });
+
+  useEffect(() => {
+    return () => {
+      cleanupSheetRef(id);
+      cleanupAnimatedIndex(id);
+    };
+  }, [id, keepMounted]);
+
+  const backdropZIndex = stackIndex * 2;
+  const contentZIndex = stackIndex * 2 + 1;
+
+  return (
+    <>
+      {isActive && (
+        <View
+          style={[StyleSheet.absoluteFillObject, { zIndex: backdropZIndex }]}
+          pointerEvents="box-none"
+        >
+          <BottomSheetBackdrop sheetId={id} onPress={() => startClosing(id)} />
+        </View>
+      )}
+
+      <Animated.View
+        pointerEvents="box-none"
+        style={[
+          StyleSheet.absoluteFillObject,
+          styles.container,
+          { width, height, zIndex: contentZIndex },
+          scaleStyle,
+        ]}
+      >
+        {usePortal ? (
+          <PortalHost
+            name={`bottomsheet-${id}-${portalSession}`}
+            style={{ width, height }}
+          />
+        ) : (
+          <BottomSheetContext.Provider value={{ id }}>
+            {content}
+          </BottomSheetContext.Provider>
+        )}
+      </Animated.View>
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {},
+});

package/src/animatedRegistry.ts

@@ -20,3 +20,11 @@ export function getAnimatedIndex(sheetId: string): SharedValue<number> {
 export function cleanupAnimatedIndex(sheetId: string): void {
   animatedIndexRegistry.delete(sheetId);
 }
+
+/**
+ * Reset all animated indexes. Useful for testing.
+ * @internal
+ */
+export function __resetAnimatedIndexes(): void {
+  animatedIndexRegistry.clear();
+}

package/src/bottomSheet.store.ts

@@ -1,173 +1 @@
-import { type ReactNode } from 'react';
-import { subscribeWithSelector } from 'zustand/middleware';
-import { createWithEqualityFn as create } from 'zustand/traditional';
-
-export type BottomSheetStatus = 'opening' | 'open' | 'closing' | 'hidden';
-export type OpenMode = 'push' | 'switch' | 'replace';
-
-export interface BottomSheetState {
-  groupId: string;
-  id: string;
-  content: ReactNode;
-  status: BottomSheetStatus;
-  scaleBackground?: boolean;
-  usePortal?: boolean;
-  params?: Record<string, unknown>;
-}
-
-type TriggerState = Omit<BottomSheetState, 'status'>;
-
-interface BottomSheetStoreState {
-  sheetsById: Record<string, BottomSheetState>;
-  stackOrder: string[];
-}
-
-interface BottomSheetStoreActions {
-  open(sheet: TriggerState, mode?: OpenMode): void;
-  markOpen(id: string): void;
-  startClosing(id: string): void;
-  finishClosing(id: string): void;
-  updateParams(id: string, params: Record<string, unknown> | undefined): void;
-  clearGroup(groupId: string): void;
-  clearAll(): void;
-}
-
-export type BottomSheetStore = BottomSheetStoreState & BottomSheetStoreActions;
-
-export const useBottomSheetStore = create(
-  subscribeWithSelector<BottomSheetStore>((set) => ({
-    sheetsById: {},
-    stackOrder: [],
-
-    open: (sheet, mode = 'push') =>
-      set((state) => {
-        if (state.sheetsById[sheet.id]) {
-          return state;
-        }
-
-        const newSheetsById = { ...state.sheetsById };
-        const topId = state.stackOrder[state.stackOrder.length - 1];
-
-        if (mode === 'switch' && topId && newSheetsById[topId]) {
-          newSheetsById[topId] = {
-            ...newSheetsById[topId],
-            status: 'hidden',
-          };
-        }
-
-        if (mode === 'replace' && topId && newSheetsById[topId]) {
-          newSheetsById[topId] = {
-            ...newSheetsById[topId],
-            status: 'closing',
-          };
-        }
-
-        newSheetsById[sheet.id] = { ...sheet, status: 'opening' };
-
-        return {
-          sheetsById: newSheetsById,
-          stackOrder: [...state.stackOrder, sheet.id],
-        };
-      }),
-
-    markOpen: (id) =>
-      set((state) => {
-        const sheet = state.sheetsById[id];
-        if (!sheet) {
-          return state;
-        }
-        return {
-          sheetsById: {
-            ...state.sheetsById,
-            [id]: { ...sheet, status: 'open' },
-          },
-        };
-      }),
-
-    startClosing: (id) =>
-      set((state) => {
-        const sheet = state.sheetsById[id];
-        if (!sheet || sheet.status === 'hidden') {
-          return state;
-        }
-
-        const newSheetsById = { ...state.sheetsById };
-        newSheetsById[id] = { ...sheet, status: 'closing' };
-
-        const index = state.stackOrder.indexOf(id);
-        const belowId = state.stackOrder[index - 1];
-        const belowSheet = belowId ? newSheetsById[belowId] : undefined;
-
-        if (belowId && belowSheet && belowSheet.status === 'hidden') {
-          newSheetsById[belowId] = { ...belowSheet, status: 'opening' };
-        }
-
-        return { sheetsById: newSheetsById };
-      }),
-
-    finishClosing: (id) =>
-      set((state) => {
-        if (!state.sheetsById[id]) {
-          return state;
-        }
-
-        const newSheetsById = { ...state.sheetsById };
-        delete newSheetsById[id];
-
-        const newStackOrder = state.stackOrder.filter(
-          (sheetId) => sheetId !== id
-        );
-
-        const topId = newStackOrder[newStackOrder.length - 1];
-        const topSheet = topId ? newSheetsById[topId] : undefined;
-
-        if (topId && topSheet && topSheet.status === 'hidden') {
-          newSheetsById[topId] = { ...topSheet, status: 'opening' };
-        }
-
-        return {
-          sheetsById: newSheetsById,
-          stackOrder: newStackOrder,
-        };
-      }),
-
-    updateParams: (id, params) =>
-      set((state) => {
-        const sheet = state.sheetsById[id];
-        if (!sheet) {
-          return state;
-        }
-        return {
-          sheetsById: {
-            ...state.sheetsById,
-            [id]: { ...sheet, params },
-          },
-        };
-      }),
-
-    clearGroup: (groupId) =>
-      set((state) => {
-        const idsToRemove = new Set(
-          state.stackOrder.filter(
-            (id) => state.sheetsById[id]?.groupId === groupId
-          )
-        );
-
-        if (idsToRemove.size === 0) {
-          return state;
-        }
-
-        const newSheetsById = { ...state.sheetsById };
-        idsToRemove.forEach((id) => {
-          delete newSheetsById[id];
-        });
-
-        return {
-          sheetsById: newSheetsById,
-          stackOrder: state.stackOrder.filter((id) => !idsToRemove.has(id)),
-        };
-      }),
-
-    clearAll: () => set(() => ({ sheetsById: {}, stackOrder: [] })),
-  }))
-);
+export * from './store';

package/src/bottomSheetCoordinator.ts

@@ -43,19 +43,20 @@ export function createSheetEventHandlers(sheetId: string) {
   const { startClosing, finishClosing, markOpen } =
     useBottomSheetStore.getState();
 
-  const handleAnimate = (fromIndex: number, toIndex: number) => {
+  const handleAnimate = (_fromIndex: number, toIndex: number) => {
     const state = useBottomSheetStore.getState();
     const currentStatus = state.sheetsById[sheetId]?.status;
 
-    // Sheet is closing (animating to -1)
-    if (toIndex === -1) {
-      if (currentStatus === 'open' || currentStatus === 'opening') {
-        startClosing(sheetId);
-      }
+    if (toIndex === -1 && currentStatus === 'open') {
+      startClosing(sheetId);
     }
+  };
+
+  const handleChange = (index: number) => {
+    const state = useBottomSheetStore.getState();
+    const currentStatus = state.sheetsById[sheetId]?.status;
 
-    // Sheet finished opening (animating from -1 to visible)
-    if (fromIndex === -1 && toIndex >= 0) {
+    if (index >= 0 && currentStatus === 'opening') {
       markOpen(sheetId);
     }
   };
@@ -71,6 +72,7 @@ export function createSheetEventHandlers(sheetId: string) {
 
   return {
     handleAnimate,
+    handleChange,
     handleClose,
   };
 }

package/src/index.tsx

@@ -4,6 +4,7 @@ export { BottomSheetHost } from './BottomSheetHost';
 export { BottomSheetScaleView } from './BottomSheetScaleView';
 export { BottomSheetManaged, type BottomSheetRef } from './BottomSheetManaged';
 export { BottomSheetPortal } from './BottomSheetPortal';
+export { BottomSheetPersistent } from './BottomSheetPersistent';
 
 // Hooks
 export { useBottomSheetManager } from './useBottomSheetManager';
@@ -33,3 +34,8 @@ export type {
   BottomSheetPortalId,
   BottomSheetPortalParams,
 } from './portal.types';
+
+// Testing utilities (internal use)
+export { __resetSheetRefs } from './refsMap';
+export { __resetAnimatedIndexes } from './animatedRegistry';
+export { __resetPortalSessions } from './portalSessionRegistry';