react-native-bottom-sheet-stack 1.0.3 → 1.3.0

package/src/BottomSheetManager.provider.tsx

@@ -1,4 +1,5 @@
 import React, { type PropsWithChildren } from 'react';
+import { PortalProvider } from 'react-native-teleport';
 
 import {
   BottomSheetManagerContext,
@@ -19,9 +20,11 @@ export function BottomSheetManagerProvider({
   const value = { groupId: id, scaleConfig };
 
   return (
-    <BottomSheetManagerContext.Provider key={id} value={value}>
-      {children}
-    </BottomSheetManagerContext.Provider>
+    <PortalProvider>
+      <BottomSheetManagerContext.Provider key={id} value={value}>
+        {children}
+      </BottomSheetManagerContext.Provider>
+    </PortalProvider>
   );
 }
 

package/src/BottomSheetPortal.tsx

@@ -0,0 +1,39 @@
+'use no memo';
+
+import React from 'react';
+import { Portal } from 'react-native-teleport';
+
+import { BottomSheetContext } from './BottomSheet.context';
+import { useBottomSheetStore } from './bottomSheet.store';
+import type { BottomSheetPortalId } from './portal.types';
+import { sheetRefs } from './refsMap';
+
+interface BottomSheetPortalProps {
+  id: BottomSheetPortalId;
+  children: React.ReactElement;
+}
+
+export function BottomSheetPortal({ id, children }: BottomSheetPortalProps) {
+  const sheetState = useBottomSheetStore((state) => state.sheetsById[id]);
+
+  // Only render when the sheet is active and using portal
+  if (!sheetState?.usePortal) {
+    return null;
+  }
+
+  // Get the ref that was created in useBottomSheetControl.open()
+  const ref = sheetRefs[id];
+
+  // Clone the child element to add the ref
+  // @ts-ignore - same pattern as useBottomSheetManager
+  const childWithRef = React.cloneElement(children, { ref });
+
+  // Wrap with BottomSheetContext so useBottomSheetState() works inside portal content
+  return (
+    <Portal hostName={`bottomsheet-${id}`}>
+      <BottomSheetContext.Provider value={{ id }}>
+        {childWithRef}
+      </BottomSheetContext.Provider>
+    </Portal>
+  );
+}

package/src/bottomSheet.store.ts

@@ -11,6 +11,7 @@ export interface BottomSheetState {
   content: ReactNode;
   status: BottomSheetStatus;
   scaleBackground?: boolean;
+  usePortal?: boolean;
 }
 
 type TriggerState = Omit<BottomSheetState, 'status'>;
@@ -20,10 +21,15 @@ interface BottomSheetStoreState {
   stackOrder: string[];
 }
 
+export interface PortalOpenOptions {
+  scaleBackground?: boolean;
+}
+
 interface BottomSheetStoreActions {
   push(sheet: TriggerState): void;
   switch(sheet: TriggerState): void;
   replace(sheet: TriggerState): void;
+  openPortal(id: string, groupId: string, options?: PortalOpenOptions): void;
   markOpen(id: string): void;
   startClosing(id: string): void;
   finishClosing(id: string): void;
@@ -99,6 +105,27 @@ 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,
+            },
+          },
+          stackOrder: [...state.stackOrder, id],
+        };
+      }),
+
     markOpen: (id) =>
       set((state) => {
         const sheet = state.sheetsById[id];

package/src/index.tsx

@@ -5,3 +5,9 @@ export { useBottomSheetState } from './useBottomSheetState';
 export { BottomSheetManaged } from './BottomSheetManaged';
 export { BottomSheetScaleView } from './BottomSheetScaleView';
 export { type ScaleConfig } from './useScaleAnimation';
+export { BottomSheetPortal } from './BottomSheetPortal';
+export { useBottomSheetControl } from './useBottomSheetControl';
+export type {
+  BottomSheetPortalRegistry,
+  BottomSheetPortalId,
+} from './portal.types';

package/src/portal.types.ts

@@ -0,0 +1,25 @@
+/**
+ * Registry for portal-based bottom sheets.
+ * Augment this interface in your app to get type-safe sheet IDs:
+ *
+ * @example
+ * ```tsx
+ * declare module 'react-native-bottom-sheet-stack' {
+ *   interface BottomSheetPortalRegistry {
+ *     'my-sheet': true;
+ *     'settings-sheet': true;
+ *     'profile-sheet': true;
+ *   }
+ * }
+ * ```
+ */
+export interface BottomSheetPortalRegistry {}
+
+/**
+ * Type-safe portal sheet ID.
+ * If BottomSheetPortalRegistry is augmented, this will be a union of the registered keys.
+ * Otherwise, it falls back to `string` for flexibility.
+ */
+export type BottomSheetPortalId = keyof BottomSheetPortalRegistry extends never
+  ? string
+  : Extract<keyof BottomSheetPortalRegistry, string>;

package/src/useBottomSheetControl.ts

@@ -0,0 +1,52 @@
+import React from 'react';
+import type { BottomSheetMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
+
+import {
+  useBottomSheetStore,
+  type BottomSheetStatus,
+  type PortalOpenOptions,
+} from './bottomSheet.store';
+import { useMaybeBottomSheetManagerContext } from './BottomSheetManager.provider';
+import type { BottomSheetPortalId } from './portal.types';
+import { sheetRefs } from './refsMap';
+
+export interface UseBottomSheetControlReturn {
+  open: (options?: PortalOpenOptions) => void;
+  close: () => void;
+  isOpen: boolean;
+  status: BottomSheetStatus | null;
+}
+
+export function useBottomSheetControl(
+  id: BottomSheetPortalId
+): UseBottomSheetControlReturn {
+  const bottomSheetManagerContext = useMaybeBottomSheetManagerContext();
+
+  const openPortal = useBottomSheetStore((state) => state.openPortal);
+  const startClosing = useBottomSheetStore((state) => state.startClosing);
+  const sheetState = useBottomSheetStore((state) => state.sheetsById[id]);
+
+  const open = (options?: PortalOpenOptions) => {
+    const groupId = bottomSheetManagerContext?.groupId || 'default';
+
+    // Create ref when opening (same pattern as useBottomSheetManager)
+    const ref = React.createRef<BottomSheetMethods>();
+    sheetRefs[id] = ref;
+
+    openPortal(id, groupId, options);
+  };
+
+  const close = () => {
+    startClosing(id);
+  };
+
+  const status = sheetState?.status ?? null;
+  const isOpen = status === 'open' || status === 'opening';
+
+  return {
+    open,
+    close,
+    isOpen,
+    status,
+  };
+}