react-native-bottom-sheet-stack 0.1.0

package/src/bottomSheetCoordinator.ts

@@ -0,0 +1,34 @@
+import { useBottomSheetStore } from './bottomSheet.store';
+import { sheetRefs } from './refsMap';
+
+export function initBottomSheetCoordinator() {
+  useBottomSheetStore.subscribe(
+    s => s.stack.map(({ id, status }) => ({ id, status })),
+    (next, prev) => {
+      next.forEach(({ id, status }) => {
+        const prevStatus = prev.find(p => p.id === id)?.status;
+
+        if (prevStatus === status) {
+          return;
+        }
+
+        const ref = sheetRefs[id]?.current;
+        if (!ref) {
+          return;
+        }
+
+        switch (status) {
+          case 'opening':
+            ref.expand();
+            break;
+          case 'hidden':
+            ref.close();
+            break;
+          case 'closing':
+            ref.close();
+            break;
+        }
+      });
+    },
+  );
+}

package/src/index.tsx

@@ -0,0 +1,5 @@
+export { BottomSheetHost } from './BottomSheetHost';
+export { BottomSheetManagerProvider } from './BottomSheetManager.provider';
+export { useBottomSheetManager } from './useBottomSheetManager';
+export { useBottomSheetState } from './useBottomSheetState';
+export { BottomSheetManaged } from './BottomSheetManaged';

package/src/refsMap.ts

@@ -0,0 +1,6 @@
+import type { BottomSheetMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
+
+export const sheetRefs: Record<
+  string,
+  React.RefObject<BottomSheetMethods | null>
+> = {};

package/src/useBottomSheetManager.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+
+import { useBottomSheetStore, type OpenMode } from './bottomSheet.store';
+import { useMaybeBottomSheetManagerContext } from './BottomSheetManager.provider';
+import { sheetRefs } from './refsMap';
+import type { BottomSheetMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
+
+export const useBottomSheetManager = () => {
+  const bottomSheetManagerContext = useMaybeBottomSheetManagerContext();
+
+  const {
+    pushBottomSheet,
+    replaceBottomSheet,
+    switchBottomSheet,
+    stack,
+    startClosing,
+    storeClearAll,
+  } = useBottomSheetStore((store) => ({
+    storeClearAll: store.clearAll,
+    replaceBottomSheet: store.replace,
+    pushBottomSheet: store.push,
+    switchBottomSheet: store.switch,
+    stack: store.stack,
+    startClosing: store.startClosing,
+  }));
+
+  const openBottomSheet = (
+    content: React.ReactElement,
+    options: {
+      id?: string;
+      groupId?: string;
+      mode?: OpenMode;
+    } = {}
+  ) => {
+    const groupId =
+      options.groupId || bottomSheetManagerContext?.groupId || 'default';
+
+    const id = Math.random().toString(36);
+    const ref = React.createRef<BottomSheetMethods>();
+
+    sheetRefs[id] = ref;
+
+    // @ts-ignore
+    const contentWithRef = React.cloneElement(content, { ref });
+
+    if (options.mode === 'replace') {
+      replaceBottomSheet({
+        id,
+        groupId,
+        content: contentWithRef,
+      });
+    } else if (options.mode === 'switch') {
+      switchBottomSheet({
+        id,
+        groupId,
+        content: contentWithRef,
+      });
+    } else {
+      pushBottomSheet({
+        id,
+        groupId,
+        content: contentWithRef,
+      });
+    }
+
+    return id;
+  };
+
+  const closeTop = () => {
+    const top = stack.at(-1);
+    if (top) {
+      startClosing(top.id);
+    }
+  };
+
+  const clearAll = () => {
+    storeClearAll();
+  };
+
+  return {
+    clearAll,
+    closeTop,
+    openBottomSheet,
+    pushBottomSheet,
+    replaceBottomSheet,
+  };
+};

package/src/useBottomSheetState.ts

@@ -0,0 +1,31 @@
+import { useMaybeBottomSheetContext } from './BottomSheet.context';
+import {
+  useBottomSheetStore,
+  type BottomSheetState,
+} from './bottomSheet.store';
+
+export function useBottomSheetState(): {
+  bottomSheetState: BottomSheetState;
+  close: () => void;
+} {
+  const context = useMaybeBottomSheetContext();
+  const { bottomSheetsStack, startClosing } = useBottomSheetStore((store) => ({
+    bottomSheetsStack: store.stack,
+    startClosing: store.startClosing,
+  }));
+
+  const bottomSheetState = bottomSheetsStack.find(
+    (bottomSheet) => bottomSheet.id === context?.id
+  );
+
+  if (!bottomSheetState) {
+    throw new Error(
+      'useBottomSheetState must be used within a BottomSheetProvider'
+    );
+  }
+
+  return {
+    bottomSheetState,
+    close: () => startClosing(bottomSheetState.id),
+  };
+}