@rn-tools/sheets 3.0.1 → 3.0.2

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 3.0.2
+
+### Patch Changes
+
+- 723c379: Incorporate sheets into navigation and cleanup APIs
+- Updated dependencies [723c379]
+  - @rn-tools/core@3.0.2
+
 ## 3.0.1
 
 ### Patch Changes

package/README.md

@@ -1,113 +1,142 @@
 # @rn-tools/sheets
 
-An expo module for rendering native bottom sheet components in iOS and Android. 
+Native bottom sheets for React Native + Expo with iOS `UISheetPresentationController` and Android `BottomSheetDialog`.
 
-Uses native iOS sheet presentation and Android's BottomSheetDialog to render React Native children in a modal bottom sheet.
+## Install
 
-Supports stacking multiple sheets on top of each other
-
-https://github.com/user-attachments/assets/426c77e6-74c6-4748-8010-477267fa9433
-
-
-## Motivation
-
-- Better performance and responsiveness than JS based solutions
-
-- Native OS handling for gestures, keyboard, and navigation
-
-## Installation
-
-`yarn add @rntools/sheets expo-build-properties`
+```bash
+yarn add @rn-tools/sheets expo-build-properties
+```
 
-Update your minimum iOS deployment target to 16 in `app.json`: 
+Set iOS deployment target to `16.0` in `app.json`:
 
 ```json
 {
-    "plugins": [
-      [
-        "expo-build-properties",
-        {
-         "ios": {
-            "deploymentTarget": "16.0"
-          }
+  "plugins": [
+    [
+      "expo-build-properties",
+      {
+        "ios": {
+          "deploymentTarget": "16.0"
         }
-      ]
+      }
+    ]
+  ]
 }
-
 ```
 
-As with most non-core expo modules this requires a new native build
+Then rebuild the native app.
+
+## APIs
 
+This package supports two usage styles:
 
-## Usage 
+1. Declarative `BottomSheet`
+2. Store-driven `createSheets` + `SheetsProvider`
+
+### Declarative `BottomSheet`
 
 ```tsx
-import { BottomSheet } from '@rn-tools/sheets'
+import * as React from "react";
+import { Button, View } from "react-native";
+import { BottomSheet } from "@rn-tools/sheets";
 
-export default function App() {
+export default function Example() {
   const [isOpen, setIsOpen] = React.useState(false);
 
   return (
-    <View className="flex-1">
-       <Button title="Show sheet" onPress={() => setIsOpen(true)} />
-
-       <BottomSheet
-          isOpen={isOpen}
-          setIsOpen={setIsOpen}
-          initialIndex={1}
-          onStateChange={(event) => console.log({ event })}
-          canDismiss={true}
-          onDismissPrevented={() => console.log("dismiss prevented")}
-          snapPoints={[400, 600, 750]}
-          appearanceAndroid={{
-            dimAmount: 0,
-            cornerRadius: 32.0,
-            backgroundColor: "#ffffff",
-          }}
-          appearanceIOS={{
-            cornerRadius: 16.0,
-            grabberVisible: true,
-            backgroundColor: "#ffffff",
-          }}
-        >
-          {isOpen && <MyContent />}
-        </BottomSheet>    
+    <View style={{ flex: 1 }}>
+      <Button title="Open" onPress={() => setIsOpen(true)} />
+
+      <BottomSheet
+        isOpen={isOpen}
+        setIsOpen={setIsOpen}
+        snapPoints={[300, 500]}
+        initialIndex={0}
+      >
+        <View style={{ padding: 24 }}>{/* content */}</View>
+      </BottomSheet>
     </View>
   );
 }
 ```
 
-## Props 
-
-- `isOpen / setIsOpen` - Controller props for toggling the sheet open and closed - this is required 
-
-- `initialIndex` - will open the bottom sheet to the defined snapPoint index 
-
-- `onStateChange` - callback to track the internal state of the sheet. The following events are emitted:
+### Store-driven sheets
 
-    - { type: "HIDDEN" } 
-    - { type: "OPEN", payload: { index: number }}
+Use this for imperative sheet presentation from anywhere in your app.
+You do not need a hook for this pattern; you can call the external sheets store directly.
 
-- `canDismiss` - controls whether the user can dismiss the sheet via swipe/back/gesture (default: true)
-
-- `onDismissPrevented` - called when a dismiss gesture is blocked by `canDismiss={false}`
-
-- `snapPoints` - a list of sizes that the sheet will "snap" to 
+```tsx
+import * as React from "react";
+import { Button, View } from "react-native";
+import { createSheets, SheetsProvider } from "@rn-tools/sheets";
 
-    - if you do not specify snapPoints, the sheet will size to its content. This means any flex based layout needs to have an explicit container size
+const sheets = createSheets();
 
-    - **Android will only use the first two snapPoints!**
-    
+export default function App() {
+  return (
+    <SheetsProvider sheets={sheets}>
+      <Screen />
+    </SheetsProvider>
+  );
+}
 
+function Screen() {
+  return (
+    <View>
+      <Button
+        title="Present"
+        onPress={() => {
+          sheets.present(<SheetContent />, {
+            id: "edit",
+            snapPoints: [320, 520],
+          });
+        }}
+      />
+      <Button title="Dismiss" onPress={() => sheets.dismiss()} />
+      <Button title="Dismiss all" onPress={() => sheets.dismissAll()} />
+    </View>
+  );
+}
 
-## Caveats
+function SheetContent() {
+  return <View style={{ padding: 24 }} />;
+}
+```
 
-- iOS uses an overlay window to present the sheet.
+`useSheets()` is still available when you prefer resolving the client from context.
 
-- Default appearance values if not provided:
-  - iOS: grabber visible, white background, system default corner radius unless set
-  - Android: white background, 32dp top corner radius, dim amount 0.56
+## `createSheets` client
 
-- (Android) can have a maximum of 2 snap points
+```ts
+type SheetsClient = {
+  store: SheetsStore;
+  present: (element: React.ReactElement, options?: SheetOptions) => string;
+  dismiss: (id?: string) => void;
+  dismissAll: () => void;
+};
+```
 
-- (Android) use the `nestedScrollEnabled` prop for nested scrollviews
+- `present` returns a sheet key.
+- `options.id` lets you target a logical sheet instance.
+- `dismiss(id?)` closes by key/id, or top-most if omitted.
+- `dismissAll()` closes all active sheets.
+
+## `BottomSheet` props
+
+- `isOpen`: whether the sheet should be open.
+- `setIsOpen(next)`: called when native requests a visibility change.
+- `snapPoints?: number[]`: snap heights (dp). Android uses first 2 only.
+- `initialIndex?: number`: initial snap point index.
+- `canDismiss?: boolean`: allow swipe/back dismissal (default `true`).
+- `onDismissPrevented?: () => void`: called when dismissal is blocked.
+- `onStateChange?: (event) => void`: emits `{ type: "OPEN" }` and `{ type: "HIDDEN" }`.
+- `containerStyle?: ViewStyle`
+- `appearanceIOS?: { grabberVisible?: boolean; backgroundColor?: string; cornerRadius?: number }`
+- `appearanceAndroid?: { dimAmount?: number; backgroundColor?: string; cornerRadius?: number }`
+
+## Notes
+
+- If `snapPoints` is omitted, the sheet auto-sizes to measured content height.
+- On Android, nested scroll content should use `nestedScrollEnabled` where needed.
+- iOS uses an overlay window to host the presented sheet.

package/ios/RNToolsSheetsView.swift

@@ -42,6 +42,15 @@ public class RNToolsSheetsView: ExpoView, RNToolsSheetsViewDelegate {
 
     func updateSnapPoints(_ snapPoints: [CGFloat]) {
         props.snapPoints = snapPoints
+        if props.isOpen {
+            sheetVC.updateSheetConfiguration(
+                openTo: props.initialIndex,
+                snapPoints: props.snapPoints,
+                grabberVisible: props.grabberVisible,
+                backgroundColor: props.backgroundColor,
+                cornerRadius: props.cornerRadius
+            )
+        }
     }
 
     func updateIsOpen(_ isOpen: Bool) {
@@ -61,6 +70,15 @@ public class RNToolsSheetsView: ExpoView, RNToolsSheetsViewDelegate {
 
     func updateInitialIndex(_ initialIndex: Int) {
         props.initialIndex = initialIndex
+        if props.isOpen {
+            sheetVC.updateSheetConfiguration(
+                openTo: props.initialIndex,
+                snapPoints: props.snapPoints,
+                grabberVisible: props.grabberVisible,
+                backgroundColor: props.backgroundColor,
+                cornerRadius: props.cornerRadius
+            )
+        }
     }
 
     func updateCanDismiss(_ canDismiss: Bool) {
@@ -75,6 +93,15 @@ public class RNToolsSheetsView: ExpoView, RNToolsSheetsViewDelegate {
         props.grabberVisible = grabberVisible
         props.backgroundColor = backgroundColor
         props.cornerRadius = cornerRadius
+        if props.isOpen {
+            sheetVC.updateSheetConfiguration(
+                openTo: props.initialIndex,
+                snapPoints: props.snapPoints,
+                grabberVisible: props.grabberVisible,
+                backgroundColor: props.backgroundColor,
+                cornerRadius: props.cornerRadius
+            )
+        }
     }
 
     func handleSheetDismissed() {
@@ -165,10 +192,52 @@ final class SheetViewController: UIViewController,
         backgroundColor: String?,
         cornerRadius: Float?
     ) {
-        guard overlayWindow == nil else { return }
+        guard overlayWindow == nil else {
+            updateSheetConfiguration(
+                openTo: index,
+                snapPoints: snapPoints,
+                grabberVisible: grabberVisible,
+                backgroundColor: backgroundColor,
+                cornerRadius: cornerRadius
+            )
+            return
+        }
 
         modalPresentationStyle = .pageSheet
 
+        updateSheetConfiguration(
+            openTo: index,
+            snapPoints: snapPoints,
+            grabberVisible: grabberVisible,
+            backgroundColor: backgroundColor,
+            cornerRadius: cornerRadius
+        )
+
+        let w = UIWindow(frame: UIScreen.main.bounds)
+        w.windowLevel = .statusBar + 2
+        w.rootViewController = UIViewController()
+        w.makeKeyAndVisible()
+
+        overlayWindow = w
+
+        let host = UIViewController()
+        host.modalPresentationStyle = .overFullScreen
+        host.view.backgroundColor = .clear
+
+        w.rootViewController?.present(host, animated: false) {
+            host.present(self, animated: true) { [weak self] in
+                self?.emitInitialOpenState(requestedIndex: index)
+            }
+        }
+    }
+
+    func updateSheetConfiguration(
+        openTo index: Int = 0,
+        snapPoints: [CGFloat],
+        grabberVisible: Bool,
+        backgroundColor: String?,
+        cornerRadius: Float?
+    ) {
         if let sheet = sheetPresentationController {
             sheet.delegate = self
             sheet.prefersGrabberVisible = grabberVisible
@@ -187,21 +256,6 @@ final class SheetViewController: UIViewController,
         }
 
         view.backgroundColor = UIColor(hex: backgroundColor) ?? .white
-
-        let w = UIWindow(frame: UIScreen.main.bounds)
-        w.windowLevel = .statusBar + 2
-        w.rootViewController = UIViewController()
-        w.makeKeyAndVisible()
-
-        overlayWindow = w
-
-        let host = UIViewController()
-        host.modalPresentationStyle = .overFullScreen
-        host.view.backgroundColor = .clear
-
-        w.rootViewController?.present(host, animated: false) {
-            host.present(self, animated: true)
-        }
     }
 
     func dismissSheet() {
@@ -256,6 +310,26 @@ final class SheetViewController: UIViewController,
         cleanup()
     }
 
+    private func emitInitialOpenState(requestedIndex: Int) {
+        guard let sheet = sheetPresentationController else { return }
+
+        if
+            let selectedID = sheet.selectedDetentIdentifier,
+            let index = sheet.detents.firstIndex(where: { $0.identifier == selectedID })
+        {
+            delegate?.handleSheetStateChange(index: index)
+            return
+        }
+
+        let fallbackIndex: Int
+        if sheet.detents.indices.contains(requestedIndex) {
+            fallbackIndex = requestedIndex
+        } else {
+            fallbackIndex = 0
+        }
+        delegate?.handleSheetStateChange(index: fallbackIndex)
+    }
+
     private func makeDetents(from points: [CGFloat])
         -> [UISheetPresentationController.Detent]
     {

package/mocks/expo-modules-core.mock.ts

@@ -0,0 +1,9 @@
+export function requireNativeViewManager() {
+  return "div";
+}
+
+export function requireNativeModule() {
+  return {
+    addListener: () => ({ remove: () => {} }),
+  };
+}

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@rn-tools/sheets",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "description": "A React Native library for creating and managing native sheets in Expo applications.",
   "main": "src/index.ts",
   "scripts": {
     "open:ios": "xed example/ios",
-    "open:android": "open -a \"Android Studio\" example/android"
+    "open:android": "open -a \"Android Studio\" example/android",
+    "test": "NODE_OPTIONS='--no-experimental-detect-module' vitest"
   },
   "keywords": [
     "react-native",
@@ -21,10 +22,12 @@
   "license": "MIT",
   "homepage": "https://github.com/ajsmth/rn-tools#readme",
   "devDependencies": {
-    "@types/react": "18.3.12"
+    "@testing-library/react": "^14.2.1",
+    "@types/react": "18.3.12",
+    "vitest": "^1.6.0"
   },
   "dependencies": {
-    "@rn-tools/core": "3.0.1"
+    "@rn-tools/core": "3.0.2"
   },
   "peerDependencies": {
     "expo": "*",

package/src/index.ts

@@ -1 +1,4 @@
-export * from './native-sheets-view'
+export * from "./native-sheets-view";
+export * from "./sheets-client";
+export * from "./sheet-slot";
+export * from "./sheets-provider";

package/src/native-sheets-view.tsx

@@ -22,17 +22,17 @@ type ChangeEvent<T extends SheetState, P = unknown> = {
 type OpenChangeEvent = ChangeEvent<"OPEN", { index: number }>;
 type HiddenChangeEvent = ChangeEvent<"HIDDEN">;
 
-type SheetChangeEvent = OpenChangeEvent | HiddenChangeEvent;
+export type SheetChangeEvent = OpenChangeEvent | HiddenChangeEvent;
 
 type NativeOnChangeEvent = NativeSyntheticEvent<SheetChangeEvent>;
 
-type AppearanceIOS = {
+export type AppearanceIOS = {
   grabberVisible?: boolean;
   backgroundColor?: string;
   cornerRadius?: number;
 };
 
-type AppearanceAndroid = {
+export type AppearanceAndroid = {
   dimAmount?: number;
   cornerRadius?: number;
   backgroundColor?: string;
@@ -61,6 +61,7 @@ export type BottomSheetProps = {
   isOpen: boolean;
   initialIndex?: number;
   setIsOpen: (isOpen: boolean) => void;
+  onDismissed?: () => void;
   canDismiss?: boolean;
   onDismissPrevented?: () => void;
   onStateChange?: (event: SheetChangeEvent) => void;
@@ -77,6 +78,7 @@ export function BottomSheet(props: BottomSheetProps) {
     isOpen,
     initialIndex = 0,
     setIsOpen,
+    onDismissed,
     appearanceAndroid,
     appearanceIOS,
     canDismiss = true,
@@ -97,13 +99,15 @@ export function BottomSheet(props: BottomSheetProps) {
     y: 0,
   });
 
+  const hasOpened = React.useRef(false);
+
   const computedSnapPoints = React.useMemo(() => {
     if (snapPoints.length === 0) {
       if (layout.height === 0) {
         return [];
       }
 
-      return [Math.min(layout.height, maxSheetHeight)];
+      return [Math.round(Math.min(layout.height, maxSheetHeight))];
     }
 
     let effectiveSnapPoints =
@@ -122,7 +126,7 @@ export function BottomSheet(props: BottomSheetProps) {
       ];
     }
 
-    return effectiveSnapPoints;
+    return effectiveSnapPoints.map((snapPoint) => Math.round(snapPoint));
   }, [layout.height, maxSheetHeight, snapPoints]);
 
   const maxHeight = React.useMemo(
@@ -143,20 +147,47 @@ export function BottomSheet(props: BottomSheetProps) {
     };
   }, [maxHeight, containerStyle]);
 
+  const computedIsOpen = React.useMemo(
+    () => isOpen && computedSnapPoints.length > 0,
+    [isOpen, computedSnapPoints],
+  );
+
+  const notifyDismissed = React.useCallback(
+    () => {
+      if (hasOpened.current) {
+        setIsOpen(false);
+      }
+      onDismissed?.();
+      hasOpened.current = false;
+    },
+    [setIsOpen, onDismissed],
+  );
+
   const handleOnDismiss = React.useCallback(() => {
-    setIsOpen(false);
-  }, []);
+    notifyDismissed();
+  }, [notifyDismissed]);
 
   const handleStateChange = React.useCallback(
     (event: NativeOnChangeEvent) => {
+      if (event.nativeEvent.type === "OPEN") {
+        hasOpened.current = true;
+      }
+
+      if (event.nativeEvent.type === "HIDDEN") {
+        notifyDismissed();
+      }
+
       onStateChange?.(event.nativeEvent);
     },
-    [onStateChange],
+    [onStateChange, notifyDismissed],
   );
 
-  const handleLayout = React.useCallback((event: LayoutChangeEvent) => {
-    setLayout(event.nativeEvent.layout);
-  }, []);
+  const handleLayout = React.useCallback(
+    (event: LayoutChangeEvent) => {
+      setLayout(event.nativeEvent.layout);
+    },
+    [],
+  );
 
   const handleDismissWithChanges = React.useCallback(() => {
     onDismissPrevented?.();
@@ -168,14 +199,9 @@ export function BottomSheet(props: BottomSheetProps) {
   );
 
   const pointerEvents = React.useMemo(() => {
-    return isOpen ? "box-none" : "none";
+    return isOpen ? "auto" : "none";
   }, [isOpen]);
 
-  const computedIsOpen = React.useMemo(
-    () => isOpen && computedSnapPoints.length > 0,
-    [isOpen, computedSnapPoints],
-  );
-
   const innerStyle = React.useMemo(
     () => (isAutosized ? undefined : StyleSheet.absoluteFill),
     [isAutosized],

package/src/sheet-slot.tsx

@@ -0,0 +1,70 @@
+import * as React from "react";
+import { useStore } from "@rn-tools/core";
+import { BottomSheet } from "./native-sheets-view";
+import type { SheetChangeEvent } from "./native-sheets-view";
+import { SheetsContext, SheetsStoreContext } from "./sheets-client";
+import type { SheetEntry } from "./sheets-client";
+
+function SheetSlotEntry({ entry }: { entry: SheetEntry }) {
+  const sheets = React.useContext(SheetsContext);
+  const isOpen = entry.status !== "closing";
+
+  const handleStateChange = React.useCallback(
+    (event: SheetChangeEvent) => {
+      if (event.type === "OPEN") {
+        sheets?.markDidOpen(entry.key);
+      }
+
+      if (event.type === "HIDDEN") {
+        sheets?.markDidDismiss(entry.key);
+      }
+
+      entry.options.onStateChange?.(event);
+    },
+    [sheets, entry.key, entry.options.onStateChange],
+  );
+
+  const handleSetIsOpen = React.useCallback(
+    (nextIsOpen: boolean) => {
+      if (!nextIsOpen) {
+        sheets?.dismiss(entry.key);
+      }
+    },
+    [sheets, entry.key],
+  );
+
+  const handleDismissed = React.useCallback(() => {
+    sheets?.markDidDismiss(entry.key);
+  }, [sheets, entry.key]);
+
+  return (
+    <BottomSheet
+      isOpen={isOpen}
+      setIsOpen={handleSetIsOpen}
+      onDismissed={handleDismissed}
+      snapPoints={entry.options.snapPoints}
+      initialIndex={entry.options.initialIndex}
+      canDismiss={entry.options.canDismiss}
+      onDismissPrevented={entry.options.onDismissPrevented}
+      onStateChange={handleStateChange}
+      containerStyle={entry.options.containerStyle}
+      appearanceAndroid={entry.options.appearanceAndroid}
+      appearanceIOS={entry.options.appearanceIOS}
+    >
+      {entry.element}
+    </BottomSheet>
+  );
+}
+
+export function SheetSlot() {
+  const store = React.useContext(SheetsStoreContext);
+  const sheets = useStore(store, (state) => state.sheets);
+
+  return (
+    <>
+      {sheets.map((entry) => (
+        <SheetSlotEntry key={entry.key} entry={entry} />
+      ))}
+    </>
+  );
+}

package/src/sheets-client.test.tsx

@@ -0,0 +1,239 @@
+import * as React from "react";
+import { describe, expect, it } from "vitest";
+import { createSheets } from "./sheets-client";
+
+describe("createSheets", () => {
+  it("returns the expected client API", () => {
+    const sheets = createSheets();
+
+    expect(sheets.store).toBeDefined();
+    expect(typeof sheets.present).toBe("function");
+    expect(typeof sheets.dismiss).toBe("function");
+    expect(typeof sheets.dismissAll).toBe("function");
+    expect(typeof sheets.remove).toBe("function");
+    expect(typeof sheets.markDidOpen).toBe("function");
+    expect(typeof sheets.markDidDismiss).toBe("function");
+  });
+
+  it("starts with empty state", () => {
+    const sheets = createSheets();
+    expect(sheets.store.getState().sheets).toEqual([]);
+  });
+});
+
+describe("present", () => {
+  it("adds a new sheet in opening state", () => {
+    const sheets = createSheets();
+    const key = sheets.present(<span>hello</span>);
+
+    const state = sheets.store.getState().sheets;
+    expect(typeof key).toBe("string");
+    expect(state).toHaveLength(1);
+    expect(state[0].key).toBe(key);
+    expect(state[0].status).toBe("opening");
+  });
+
+  it("stores element and options", () => {
+    const sheets = createSheets();
+    const element = <span>content</span>;
+    const options = { id: "edit", snapPoints: [300, 500] };
+
+    sheets.present(element, options);
+
+    const entry = sheets.store.getState().sheets[0];
+    expect(entry.element).toBe(element);
+    expect(entry.options).toBe(options);
+  });
+
+  it("reuses key and replaces entry when id already exists", () => {
+    const sheets = createSheets();
+
+    const key1 = sheets.present(<span>a</span>, { id: "edit", snapPoints: [240] });
+    sheets.markDidOpen(key1);
+
+    const key2 = sheets.present(<span>b</span>, { id: "edit", snapPoints: [320] });
+
+    const state = sheets.store.getState().sheets;
+    expect(key2).toBe(key1);
+    expect(state).toHaveLength(1);
+    expect(state[0].key).toBe(key1);
+    expect(state[0].status).toBe("opening");
+    expect(state[0].options.snapPoints).toEqual([320]);
+  });
+});
+
+describe("markDidOpen", () => {
+  it("transitions opening to open", () => {
+    const sheets = createSheets();
+    const key = sheets.present(<span>a</span>);
+
+    sheets.markDidOpen(key);
+
+    expect(sheets.store.getState().sheets[0].status).toBe("open");
+  });
+
+  it("is a no-op for closing sheets", () => {
+    const sheets = createSheets();
+    const key = sheets.present(<span>a</span>);
+    sheets.dismiss(key);
+
+    const before = sheets.store.getState();
+    sheets.markDidOpen(key);
+
+    expect(sheets.store.getState()).toBe(before);
+  });
+
+  it("is a no-op for unknown key", () => {
+    const sheets = createSheets();
+    const before = sheets.store.getState();
+
+    sheets.markDidOpen("missing");
+
+    expect(sheets.store.getState()).toBe(before);
+  });
+});
+
+describe("dismiss", () => {
+  it("marks the top non-closing sheet as closing", () => {
+    const sheets = createSheets();
+    const keyA = sheets.present(<span>a</span>);
+    const keyB = sheets.present(<span>b</span>);
+    sheets.markDidOpen(keyA);
+    sheets.markDidOpen(keyB);
+
+    sheets.dismiss();
+
+    const state = sheets.store.getState().sheets;
+    expect(state[0].status).toBe("open");
+    expect(state[1].status).toBe("closing");
+  });
+
+  it("can dismiss by id", () => {
+    const sheets = createSheets();
+    const key = sheets.present(<span>a</span>, { id: "edit" });
+    sheets.markDidOpen(key);
+
+    sheets.dismiss("edit");
+
+    expect(sheets.store.getState().sheets[0].status).toBe("closing");
+  });
+
+  it("can dismiss by key", () => {
+    const sheets = createSheets();
+    const key = sheets.present(<span>a</span>);
+    sheets.markDidOpen(key);
+
+    sheets.dismiss(key);
+
+    expect(sheets.store.getState().sheets[0].status).toBe("closing");
+  });
+
+  it("is a no-op when empty", () => {
+    const sheets = createSheets();
+    const before = sheets.store.getState();
+
+    sheets.dismiss();
+
+    expect(sheets.store.getState()).toBe(before);
+  });
+
+  it("is a no-op for unknown id", () => {
+    const sheets = createSheets();
+    sheets.present(<span>a</span>);
+    const before = sheets.store.getState();
+
+    sheets.dismiss("missing");
+
+    expect(sheets.store.getState()).toBe(before);
+  });
+});
+
+describe("markDidDismiss", () => {
+  it("removes a closing sheet", () => {
+    const sheets = createSheets();
+    const key = sheets.present(<span>a</span>);
+    sheets.markDidOpen(key);
+    sheets.dismiss(key);
+
+    sheets.markDidDismiss(key);
+
+    expect(sheets.store.getState().sheets).toHaveLength(0);
+  });
+
+  it("does not remove opening sheet", () => {
+    const sheets = createSheets();
+    const key = sheets.present(<span>a</span>);
+    const before = sheets.store.getState();
+
+    sheets.markDidDismiss(key);
+
+    expect(sheets.store.getState()).toBe(before);
+  });
+
+  it("is a no-op for unknown key", () => {
+    const sheets = createSheets();
+    const before = sheets.store.getState();
+
+    sheets.markDidDismiss("missing");
+
+    expect(sheets.store.getState()).toBe(before);
+  });
+});
+
+describe("dismissAll", () => {
+  it("marks every non-closing sheet as closing", () => {
+    const sheets = createSheets();
+    const keyA = sheets.present(<span>a</span>);
+    const keyB = sheets.present(<span>b</span>);
+    const keyC = sheets.present(<span>c</span>);
+    sheets.markDidOpen(keyA);
+    sheets.markDidOpen(keyB);
+    sheets.markDidOpen(keyC);
+    sheets.dismiss(keyB);
+
+    sheets.dismissAll();
+
+    const state = sheets.store.getState().sheets;
+    expect(state).toHaveLength(3);
+    expect(state.every((entry) => entry.status === "closing")).toBe(true);
+  });
+
+  it("is a no-op when empty", () => {
+    const sheets = createSheets();
+    const before = sheets.store.getState();
+
+    sheets.dismissAll();
+
+    expect(sheets.store.getState()).toBe(before);
+  });
+});
+
+describe("remove", () => {
+  it("removes by key", () => {
+    const sheets = createSheets();
+    const key = sheets.present(<span>a</span>);
+
+    sheets.remove(key);
+
+    expect(sheets.store.getState().sheets).toHaveLength(0);
+  });
+
+  it("removes by id", () => {
+    const sheets = createSheets();
+    sheets.present(<span>a</span>, { id: "edit" });
+
+    sheets.remove("edit");
+
+    expect(sheets.store.getState().sheets).toHaveLength(0);
+  });
+
+  it("is a no-op when no match", () => {
+    const sheets = createSheets();
+    sheets.present(<span>a</span>);
+    const before = sheets.store.getState();
+
+    sheets.remove("missing");
+
+    expect(sheets.store.getState()).toBe(before);
+  });
+});

package/src/sheets-client.tsx

@@ -0,0 +1,233 @@
+import * as React from "react";
+import { createStore } from "@rn-tools/core";
+import type { Store } from "@rn-tools/core";
+import type {
+  AppearanceAndroid,
+  AppearanceIOS,
+  SheetChangeEvent,
+} from "./native-sheets-view";
+import type { ViewStyle } from "react-native";
+
+export type SheetOptions = {
+  id?: string;
+  snapPoints?: number[];
+  initialIndex?: number;
+  canDismiss?: boolean;
+  onDismissPrevented?: () => void;
+  onStateChange?: (event: SheetChangeEvent) => void;
+  containerStyle?: ViewStyle;
+  appearanceAndroid?: AppearanceAndroid;
+  appearanceIOS?: AppearanceIOS;
+};
+
+export type SheetStatus = "opening" | "open" | "closing";
+
+export type SheetEntry = {
+  key: string;
+  element: React.ReactElement;
+  options: SheetOptions;
+  status: SheetStatus;
+};
+
+export type SheetsState = {
+  sheets: SheetEntry[];
+};
+
+export type SheetsStore = Store<SheetsState>;
+
+export type SheetsClient = {
+  store: SheetsStore;
+  present: (element: React.ReactElement, options?: SheetOptions) => string;
+  dismiss: (id?: string) => void;
+  dismissAll: () => void;
+  remove: (id: string) => void;
+  markDidOpen: (key: string) => void;
+  markDidDismiss: (key: string) => void;
+};
+
+export const SheetsContext = React.createContext<SheetsClient | null>(null);
+export const SheetsStoreContext = React.createContext<SheetsStore | null>(null);
+
+let counter = 0;
+
+export function createSheets(): SheetsClient {
+  const store = createStore<SheetsState>({ sheets: [] });
+
+  function present(
+    element: React.ReactElement,
+    options: SheetOptions = {},
+  ): string {
+    const generatedKey = `sheet-${++counter}`;
+    let presentedKey = generatedKey;
+
+    store.setState((prev) => {
+      if (options.id == null) {
+        return {
+          ...prev,
+          sheets: [
+            ...prev.sheets,
+            { key: generatedKey, element, options, status: "opening" },
+          ],
+        };
+      }
+
+      const duplicateIndex = prev.sheets.findIndex(
+        (entry) => entry.options.id === options.id,
+      );
+
+      if (duplicateIndex === -1) {
+        return {
+          ...prev,
+          sheets: [
+            ...prev.sheets,
+            { key: generatedKey, element, options, status: "opening" },
+          ],
+        };
+      }
+
+      const duplicate = prev.sheets[duplicateIndex];
+      presentedKey = duplicate.key;
+      const nextEntry: SheetEntry = {
+        key: duplicate.key,
+        element,
+        options,
+        status: "opening",
+      };
+
+      const withoutDuplicate = prev.sheets.filter((_, i) => i !== duplicateIndex);
+      return {
+        ...prev,
+        sheets: [...withoutDuplicate, nextEntry],
+      };
+    });
+
+    return presentedKey;
+  }
+
+  function dismiss(id?: string) {
+    store.setState((prev) => {
+      if (prev.sheets.length === 0) return prev;
+
+      let targetIndex = -1;
+
+      if (id == null) {
+        for (let i = prev.sheets.length - 1; i >= 0; i--) {
+          if (prev.sheets[i].status !== "closing") {
+            targetIndex = i;
+            break;
+          }
+        }
+      } else {
+        targetIndex = prev.sheets.findIndex(
+          (entry) => entry.options.id === id || entry.key === id,
+        );
+      }
+
+      if (targetIndex === -1) return prev;
+
+      const entry = prev.sheets[targetIndex];
+      if (entry.status === "closing") return prev;
+
+      const sheets = [...prev.sheets];
+      sheets[targetIndex] = { ...entry, status: "closing" };
+      return { ...prev, sheets };
+    });
+
+  }
+
+  function dismissAll() {
+    store.setState((prev) => {
+      if (prev.sheets.length === 0) return prev;
+
+      let changed = false;
+      const sheets = prev.sheets.map((entry) => {
+        if (entry.status === "closing") return entry;
+        changed = true;
+        return { ...entry, status: "closing" as const };
+      });
+
+      if (!changed) return prev;
+
+      return {
+        ...prev,
+        sheets,
+      };
+    });
+
+  }
+
+  function remove(id: string) {
+    store.setState((prev) => {
+      const targetIndex = prev.sheets.findIndex(
+        (entry) => entry.options.id === id || entry.key === id,
+      );
+      if (targetIndex === -1) return prev;
+
+      return {
+        ...prev,
+        sheets: prev.sheets.filter((_, i) => i !== targetIndex),
+      };
+    });
+
+  }
+
+  function markDidOpen(key: string) {
+    store.setState((prev) => {
+      const index = prev.sheets.findIndex((entry) => entry.key === key);
+      if (index === -1) return prev;
+
+      const entry = prev.sheets[index];
+      if (entry.status !== "opening") return prev;
+
+      const sheets = [...prev.sheets];
+      sheets[index] = { ...entry, status: "open" };
+      return { ...prev, sheets };
+    });
+
+  }
+
+  function markDidDismiss(key: string) {
+    store.setState((prev) => {
+      const index = prev.sheets.findIndex((entry) => entry.key === key);
+      if (index === -1) return prev;
+
+      const entry = prev.sheets[index];
+      if (entry.status !== "closing") {
+        // Ignore dismiss notifications unless close was requested.
+        return prev;
+      }
+
+      return {
+        ...prev,
+        sheets: prev.sheets.filter((_, i) => i !== index),
+      };
+    });
+
+  }
+
+  return {
+    store,
+    present,
+    dismiss,
+    dismissAll,
+    remove,
+    markDidOpen,
+    markDidDismiss,
+  };
+}
+
+export function useSheets(): SheetsClient {
+  const sheets = React.useContext(SheetsContext);
+  if (!sheets) {
+    throw new Error("SheetsProvider is missing from the component tree.");
+  }
+  return sheets;
+}
+
+export function useSheetsStore(): SheetsStore {
+  const store = React.useContext(SheetsStoreContext);
+  if (!store) {
+    throw new Error("SheetsProvider is missing from the component tree.");
+  }
+  return store;
+}

package/src/sheets-provider.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { SheetsContext, SheetsStoreContext } from "./sheets-client";
+import type { SheetsClient } from "./sheets-client";
+import { SheetSlot } from "./sheet-slot";
+
+export type SheetsProviderProps = {
+  sheets: SheetsClient;
+  children: React.ReactNode;
+};
+
+export function SheetsProvider({ sheets, children }: SheetsProviderProps) {
+  return (
+    <SheetsContext.Provider value={sheets}>
+      <SheetsStoreContext.Provider value={sheets.store}>
+        {children}
+        <SheetSlot />
+      </SheetsStoreContext.Provider>
+    </SheetsContext.Provider>
+  );
+}

package/vitest.config.mts

@@ -0,0 +1,25 @@
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { defineConfig } from "vitest/config";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      "expo-modules-core": path.resolve(
+        __dirname,
+        "mocks/expo-modules-core.mock.ts",
+      ),
+      "react-native": path.resolve(
+        __dirname,
+        "../core/mocks/react-native.mock.ts",
+      ),
+    },
+  },
+  test: {
+    environment: "jsdom",
+    globals: true,
+    setupFiles: [path.resolve(__dirname, "../core/mocks/setup.ts")],
+  },
+});