@rn-tools/navigation 3.0.2 → 3.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rn-tools/navigation",
-  "version": "3.0.2",
+  "version": "3.0.4",
   "main": "./src/index.ts",
   "license": "MIT",
   "files": [
@@ -8,25 +8,25 @@
   ],
   "scripts": {
     "build": "tsc",
-    "test": "NODE_OPTIONS='--no-experimental-detect-module' vitest",
+    "test": "jest",
     "lint": "eslint -c ./.eslintrc.js ."
   },
   "devDependencies": {
     "@rn-tools/eslint-config": "*",
-    "@testing-library/react": "^14.2.1",
+    "@testing-library/react-native": "^13.3.3",
+    "@types/jest": "^29.5.14",
     "@types/react": "~18.2.79",
     "@types/react-native": "^0.72.8",
-    "@types/react-test-renderer": "^18",
     "@typescript-eslint/eslint-plugin": "^6.8.0",
     "@typescript-eslint/parser": "^6.8.0",
     "babel-preset-expo": "~11.0.0",
     "eslint": "^8.56.0",
     "expo": "~52.0.0",
+    "jest": "^29.7.0",
+    "jest-expo": "~52.0.4",
     "lint-staged": "^15.2.0",
     "prettier": "^3.2.1",
-    "react-test-renderer": "18.2.0",
-    "typescript": "~5.3.3",
-    "vitest": "^1.6.0"
+    "typescript": "~5.3.3"
   },
   "peerDependencies": {
     "react": "*",
@@ -34,6 +34,7 @@
     "react-native-screens": "*"
   },
   "dependencies": {
+    "@rn-tools/notifications": "*",
     "@rn-tools/sheets": "*",
     "path-to-regexp": "^6.2.2",
     "zustand": "^4.5.2"

package/readme.md

@@ -1,6 +1,6 @@
 # @rn-tools/navigation
 
-Navigation primitives for React Native. Built on `react-native-screens`.
+Navigation primitives for React Native. Built on `react-native-screens` with integrated sheets and notifications support.
 
 ## Installation
 
@@ -51,21 +51,42 @@ export default function App() {
 }
 ```
 
-Push and pop screens imperatively:
+Navigate screens, present sheets, and trigger notifications imperatively:
 
 ```tsx
-navigation.push(<DetailScreen />, { id: "detail" });
-navigation.pop();
-navigation.tab(1);
-navigation.present(<EditSheet />, { id: "edit", snapPoints: [320, 520] });
-navigation.dismiss();
-navigation.dismissAll();
+navigation.stack.push(<DetailScreen />, { id: "detail" });
+navigation.stack.pop();
+navigation.tabs.tab(1);
+navigation.sheets.present(<EditSheet />, { id: "edit", snapPoints: [320, 520] });
+navigation.sheets.dismiss();
+navigation.sheets.dismissAll();
+navigation.notifications.present(<SavedNotification />, { id: "saved", position: "top", durationMs: 3000 });
+navigation.notifications.dismiss();
+navigation.notifications.dismiss("bottom");
+navigation.notifications.dismiss("saved");
 ```
 
-When no explicit target is provided, these methods automatically resolve the deepest active stack or tabs instance.
+`durationMs` defaults to `3000`; pass `null` for persistent notifications.
+
+Presented sheet and notification elements receive an injected optional `dismiss?: () => void` prop.
+
+When no explicit target is provided:
+- `push/pop/tab` resolve the deepest active stack/tabs node.
+- `dismiss()` resolves the active sheet.
+- `notifications.dismiss()` resolves the latest non-closing top-lane notification.
+
+Hooks are also re-exported for convenience:
+- `useSheetEntry` (from `@rn-tools/sheets`)
+- `useNotificationEntry` (from `@rn-tools/notifications`)
+
+Injected-prop typings are re-exported as well:
+- `SheetInjectedProps`
+- `NotificationInjectedProps`
 
 ## Docs
 
-- [Navigation](docs/navigation.md) — setup, `createNavigation`, `NavigationClient` API, hooks
+- [Navigation](docs/navigation.md) — setup, `createNavigation`, `NavigationClient` API (screens + sheets + notifications), hooks
 - [Stack](docs/stack.md) — stack navigation, pushing/popping, refs, preloading, nesting
 - [Tabs](docs/tabs.md) — tab navigation, tab bar, refs, preloading, nesting with stacks
+- [Sheets](../sheets/README.md) — sheet setup, API, and props
+- [Notifications](../notifications/README.md) — notification setup, API, and props

package/src/index.ts

@@ -2,3 +2,8 @@ export * from "./stack";
 export * from "./navigation-client";
 export { Navigation, type NavigationProps } from "./navigation";
 export * from "./tabs";
+export { useSheetEntry, type SheetInjectedProps } from "@rn-tools/sheets";
+export {
+  useNotificationEntry,
+  type NotificationInjectedProps,
+} from "@rn-tools/notifications";

package/src/navigation-client.test.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { describe, expect, it } from "vitest";
+import { Text } from "react-native";
 import {
   createNavigation,
   createNavigationState,
@@ -18,7 +18,7 @@ describe("createNavigationState", () => {
   it("normalizes Record inputs into Maps", () => {
     const state = createNavigationState({
       stacks: {
-        "stack-a": [{ element: <span>a</span> }],
+        "stack-a": [{ element: <Text>a</Text> }],
       },
       tabs: {
         "my-tabs": { activeIndex: 2 },
@@ -33,7 +33,7 @@ describe("createNavigationState", () => {
 
   it("accepts Map inputs directly", () => {
     const stacks = new Map([
-      ["stack-a", [{ element: <span>a</span> }]],
+      ["stack-a", [{ element: <Text>a</Text> }]],
     ]);
     const tabs = new Map([["my-tabs", { activeIndex: 1 }]]);
     const state = createNavigationState({ stacks, tabs });
@@ -49,12 +49,14 @@ describe("createNavigation", () => {
     expect(nav.store).toBeDefined();
     expect(nav.renderTreeStore).toBeDefined();
     expect(nav.sheetsStore).toBeDefined();
-    expect(typeof nav.push).toBe("function");
-    expect(typeof nav.pop).toBe("function");
-    expect(typeof nav.tab).toBe("function");
-    expect(typeof nav.present).toBe("function");
-    expect(typeof nav.dismiss).toBe("function");
-    expect(typeof nav.dismissAll).toBe("function");
+    expect(typeof nav.stack.push).toBe("function");
+    expect(typeof nav.stack.pop).toBe("function");
+    expect(typeof nav.tabs.tab).toBe("function");
+    expect(typeof nav.sheets.present).toBe("function");
+    expect(typeof nav.sheets.dismiss).toBe("function");
+    expect(typeof nav.sheets.dismissAll).toBe("function");
+    expect(typeof nav.notifications.present).toBe("function");
+    expect(typeof nav.notifications.dismiss).toBe("function");
   });
 
   it("initializes with empty state by default", () => {
@@ -66,7 +68,7 @@ describe("createNavigation", () => {
 
   it("initializes with the provided state", () => {
     const nav = createNavigation({
-      stacks: { "stack-a": [{ element: <span>a</span> }] },
+      stacks: { "stack-a": [{ element: <Text>a</Text> }] },
       tabs: { "my-tabs": { activeIndex: 1 } },
     });
     const state = nav.store.getState();
@@ -78,38 +80,70 @@ describe("createNavigation", () => {
 describe("sheet methods", () => {
   it("present returns a key", () => {
     const nav = createNavigation();
-    const key = nav.present(<span>sheet</span>);
+    const key = nav.sheets.present(<Text>sheet</Text>);
 
     expect(typeof key).toBe("string");
   });
 
   it("present reuses key when id is reused", () => {
     const nav = createNavigation();
-    const key1 = nav.present(<span>sheet-a</span>, { id: "edit" });
-    const key2 = nav.present(<span>sheet-b</span>, { id: "edit" });
+    const key1 = nav.sheets.present(<Text>sheet-a</Text>, { id: "edit" });
+    const key2 = nav.sheets.present(<Text>sheet-b</Text>, { id: "edit" });
 
     expect(key2).toBe(key1);
   });
 
   it("dismiss and dismissAll are callable via public API", () => {
     const nav = createNavigation();
-    nav.present(<span>a</span>);
-    nav.present(<span>b</span>);
+    nav.sheets.present(<Text>a</Text>);
+    nav.sheets.present(<Text>b</Text>);
 
-    expect(() => nav.dismiss()).not.toThrow();
-    nav.dismissAll();
-    expect(() => nav.dismissAll()).not.toThrow();
+    expect(() => nav.sheets.dismiss()).not.toThrow();
+    nav.sheets.dismissAll();
+    expect(() => nav.sheets.dismissAll()).not.toThrow();
+  });
+});
+
+describe("notification methods", () => {
+  it("notify returns a key", () => {
+    const nav = createNavigation();
+    const key = nav.notifications.present(<Text>notification</Text>, { durationMs: null });
+
+    expect(typeof key).toBe("string");
+  });
+
+  it("notify reuses key when id is reused", () => {
+    const nav = createNavigation();
+    const key1 = nav.notifications.present(<Text>notification-a</Text>, {
+      id: "welcome",
+      durationMs: null,
+    });
+    const key2 = nav.notifications.present(<Text>notification-b</Text>, {
+      id: "welcome",
+      durationMs: null,
+    });
+
+    expect(key2).toBe(key1);
+  });
+
+  it("dismissNotification is callable via public API", () => {
+    const nav = createNavigation();
+    nav.notifications.present(<Text>a</Text>, { durationMs: null });
+    nav.notifications.present(<Text>b</Text>, { position: "bottom", durationMs: null });
+
+    expect(() => nav.notifications.dismiss()).not.toThrow();
+    expect(() => nav.notifications.dismiss("bottom")).not.toThrow();
   });
 });
 
 describe("loadNavigationState", () => {
   it("replaces the store state with normalized input", () => {
     const nav = createNavigation({
-      stacks: { "stack-a": [{ element: <span>old</span> }] },
+      stacks: { "stack-a": [{ element: <Text>old</Text> }] },
     });
 
     loadNavigationState(nav.store, {
-      stacks: { "stack-b": [{ element: <span>new</span> }] },
+      stacks: { "stack-b": [{ element: <Text>new</Text> }] },
     });
 
     const state = nav.store.getState();
@@ -124,7 +158,7 @@ describe("push", () => {
       stacks: { "stack-a": [] },
     });
 
-    nav.push(<span>pushed</span>, { stack: "stack-a" });
+    nav.stack.push(<Text>pushed</Text>, { stack: "stack-a" });
 
     const screens = nav.store.getState().stacks.get("stack-a");
     expect(screens).toHaveLength(1);
@@ -133,7 +167,7 @@ describe("push", () => {
   it("creates the stack entry if it did not exist", () => {
     const nav = createNavigation();
 
-    nav.push(<span>pushed</span>, { stack: "stack-new" });
+    nav.stack.push(<Text>pushed</Text>, { stack: "stack-new" });
 
     const screens = nav.store.getState().stacks.get("stack-new");
     expect(screens).toHaveLength(1);
@@ -142,11 +176,11 @@ describe("push", () => {
   it("does not push a duplicate screen with the same id", () => {
     const nav = createNavigation({
       stacks: {
-        "stack-a": [{ element: <span>a</span>, options: { id: "screen-1" } }],
+        "stack-a": [{ element: <Text>a</Text>, options: { id: "screen-1" } }],
       },
     });
 
-    nav.push(<span>dup</span>, { id: "screen-1", stack: "stack-a" });
+    nav.stack.push(<Text>dup</Text>, { id: "screen-1", stack: "stack-a" });
 
     expect(nav.store.getState().stacks.get("stack-a")).toHaveLength(1);
   });
@@ -154,20 +188,20 @@ describe("push", () => {
   it("allows pushing after a screen with the same id was popped", () => {
     const nav = createNavigation({
       stacks: {
-        "stack-a": [{ element: <span>a</span>, options: { id: "screen-1" } }],
+        "stack-a": [{ element: <Text>a</Text>, options: { id: "screen-1" } }],
       },
     });
 
-    nav.pop({ stack: "stack-a" });
+    nav.stack.pop({ stack: "stack-a" });
     expect(nav.store.getState().stacks.get("stack-a")).toHaveLength(0);
 
-    nav.push(<span>new</span>, { id: "screen-1", stack: "stack-a" });
+    nav.stack.push(<Text>new</Text>, { id: "screen-1", stack: "stack-a" });
     expect(nav.store.getState().stacks.get("stack-a")).toHaveLength(1);
   });
 
   it("throws when no stack is provided and no stack is mounted", () => {
     const nav = createNavigation();
-    expect(() => nav.push(<span>x</span>)).toThrow(
+    expect(() => nav.stack.push(<Text>x</Text>)).toThrow(
       "could not resolve stack",
     );
   });
@@ -178,13 +212,13 @@ describe("pop", () => {
     const nav = createNavigation({
       stacks: {
         "stack-a": [
-          { element: <span>a</span> },
-          { element: <span>b</span> },
+          { element: <Text>a</Text> },
+          { element: <Text>b</Text> },
         ],
       },
     });
 
-    nav.pop({ stack: "stack-a" });
+    nav.stack.pop({ stack: "stack-a" });
 
     expect(nav.store.getState().stacks.get("stack-a")).toHaveLength(1);
   });
@@ -195,7 +229,7 @@ describe("pop", () => {
     });
 
     const before = nav.store.getState();
-    nav.pop({ stack: "stack-a" });
+    nav.stack.pop({ stack: "stack-a" });
     const after = nav.store.getState();
 
     expect(before).toBe(after);
@@ -203,7 +237,7 @@ describe("pop", () => {
 
   it("throws when no stack is provided and no stack is mounted", () => {
     const nav = createNavigation();
-    expect(() => nav.pop()).toThrow("could not resolve stack");
+    expect(() => nav.stack.pop()).toThrow("could not resolve stack");
   });
 });
 
@@ -213,7 +247,7 @@ describe("tab", () => {
       tabs: { "my-tabs": { activeIndex: 0 } },
     });
 
-    nav.tab(2, { tabs: "my-tabs" });
+    nav.tabs.tab(2, { tabs: "my-tabs" });
 
     expect(nav.store.getState().tabs.get("my-tabs")).toEqual({
       activeIndex: 2,
@@ -223,7 +257,7 @@ describe("tab", () => {
   it("creates the tabs entry if it did not exist", () => {
     const nav = createNavigation();
 
-    nav.tab(1, { tabs: "new-tabs" });
+    nav.tabs.tab(1, { tabs: "new-tabs" });
 
     expect(nav.store.getState().tabs.get("new-tabs")).toEqual({
       activeIndex: 1,
@@ -232,6 +266,6 @@ describe("tab", () => {
 
   it("throws when no tabs is provided and no tabs are mounted", () => {
     const nav = createNavigation();
-    expect(() => nav.tab(0)).toThrow("could not resolve tabs");
+    expect(() => nav.tabs.tab(0)).toThrow("could not resolve tabs");
   });
 });

package/src/navigation-client.tsx

@@ -6,18 +6,27 @@ import {
   getRenderNodeActive,
   getRenderNodeDepth,
 } from "@rn-tools/core";
-import type { Store, RenderTreeStore } from "@rn-tools/core";
+import type { Store, RenderTreeStore, BaseOverlayOptions } from "@rn-tools/core";
 import { createSheets } from "@rn-tools/sheets";
 import type { SheetOptions, SheetsClient } from "@rn-tools/sheets";
-
-export type PushOptions = {
-  id?: string;
+import { createNotifications } from "@rn-tools/notifications";
+import type {
+  NotificationDismissTarget,
+  NotificationOptions,
+  NotificationsClient,
+} from "@rn-tools/notifications";
+
+export const STACK_TYPE = "stack";
+export const SCREEN_TYPE = "screen";
+export const TABS_TYPE = "tabs";
+export const TAB_SCREEN_TYPE = "tab-screen";
+
+export type PushOptions = BaseOverlayOptions & {
   stack?: string;
 };
 
 export type NavigationScreenEntry = {
   element: React.ReactElement;
-  id?: string;
   options?: PushOptions;
 };
 
@@ -32,19 +41,18 @@ export type NavigationState = {
 
 export type NavigationStore = Store<NavigationState>;
 
-export const NavigationContext = React.createContext<NavigationClient | null>(null);
-
-export const NavigationStoreContext = React.createContext<NavigationStore | null>(
+export const NavigationContext = React.createContext<NavigationClient | null>(
   null,
 );
 
+export const NavigationStoreContext =
+  React.createContext<NavigationStore | null>(null);
+
 export type NavigationStateInput = {
   stacks?:
     | Map<string, NavigationScreenEntry[]>
     | Record<string, NavigationScreenEntry[]>;
-  tabs?:
-    | Map<string, TabState>
-    | Record<string, TabState>;
+  tabs?: Map<string, TabState> | Record<string, TabState>;
 };
 
 export function createNavigationState(
@@ -64,12 +72,26 @@ export type NavigationClient = {
   store: NavigationStore;
   renderTreeStore: RenderTreeStore;
   sheetsStore: SheetsClient;
-  push: (element: React.ReactElement, options?: PushOptions) => void;
-  pop: (options?: { stack?: string }) => void;
-  tab: (index: number, options?: { tabs?: string }) => void;
-  present: (element: React.ReactElement, options?: SheetOptions) => string;
-  dismiss: (id?: string) => void;
-  dismissAll: () => void;
+  notificationsStore: NotificationsClient;
+  stack: {
+    push: (element: React.ReactElement, options?: PushOptions) => void;
+    pop: (options?: { stack?: string }) => void;
+  };
+  tabs: {
+    tab: (index: number, options?: { tabs?: string }) => void;
+  };
+  sheets: {
+    present: (element: React.ReactElement, options?: SheetOptions) => string;
+    dismiss: (id?: string) => void;
+    dismissAll: () => void;
+  };
+  notifications: {
+    present: (
+      element: React.ReactElement,
+      options?: NotificationOptions,
+    ) => string;
+    dismiss: (target?: NotificationDismissTarget) => void;
+  };
 };
 
 export function createNavigation(
@@ -79,7 +101,8 @@ export function createNavigation(
     normalizeNavigationState(initialState ?? { stacks: new Map() }),
   );
   const renderTreeStore = createRenderTreeStore();
-  const sheetsStore = createSheets();
+  const sheetsStore = createSheets(renderTreeStore);
+  const notificationsStore = createNotifications(renderTreeStore);
 
   function getDeepestActiveNodeId(type: string): string | null {
     const tree = renderTreeStore.getState();
@@ -100,11 +123,8 @@ export function createNavigation(
     return deepestId;
   }
 
-  function push(
-    element: React.ReactElement,
-    options?: PushOptions,
-  ) {
-    const stackId = options?.stack ?? getDeepestActiveNodeId("stack");
+  function push(element: React.ReactElement, options?: PushOptions) {
+    const stackId = options?.stack ?? getDeepestActiveNodeId(STACK_TYPE);
     if (!stackId) {
       throw new Error(
         "push: could not resolve stack. Pass { stack } explicitly or ensure a Stack is mounted and active.",
@@ -115,22 +135,17 @@ export function createNavigation(
       const stacks = new Map(prev.stacks);
       const existing = stacks.get(stackId) ?? [];
 
-      if (
-        options?.id &&
-        existing.some(
-          (s) => s.id === options.id || s.options?.id === options.id,
-        )
-      ) {
+      if (options?.id && existing.some((s) => s.options?.id === options.id)) {
         return prev;
       }
 
-      stacks.set(stackId, [...existing, { element, id: options?.id, options }]);
+      stacks.set(stackId, [...existing, { element, options }]);
       return { ...prev, stacks };
     });
   }
 
   function pop(options?: { stack?: string }) {
-    const stackId = options?.stack ?? getDeepestActiveNodeId("stack");
+    const stackId = options?.stack ?? getDeepestActiveNodeId(STACK_TYPE);
     if (!stackId) {
       throw new Error(
         "pop: could not resolve stack. Pass { stack } explicitly or ensure a Stack is mounted and active.",
@@ -147,7 +162,7 @@ export function createNavigation(
   }
 
   function tab(index: number, options?: { tabs?: string }) {
-    const tabsId = options?.tabs ?? getDeepestActiveNodeId("tabs");
+    const tabsId = options?.tabs ?? getDeepestActiveNodeId(TABS_TYPE);
     if (!tabsId) {
       throw new Error(
         "tab: could not resolve tabs. Pass { tabs } explicitly or ensure a Tabs is mounted and active.",
@@ -161,7 +176,10 @@ export function createNavigation(
     });
   }
 
-  function present(element: React.ReactElement, options?: SheetOptions): string {
+  function present(
+    element: React.ReactElement,
+    options?: SheetOptions,
+  ): string {
     return sheetsStore.present(element, options);
   }
 
@@ -173,16 +191,38 @@ export function createNavigation(
     sheetsStore.dismissAll();
   }
 
+  function notify(
+    element: React.ReactElement,
+    options?: NotificationOptions,
+  ): string {
+    return notificationsStore.show(element, options);
+  }
+
+  function dismissNotification(target?: NotificationDismissTarget) {
+    notificationsStore.dismiss(target);
+  }
+
   return {
     store: navStore,
     renderTreeStore,
     sheetsStore,
-    push,
-    pop,
-    tab,
-    present,
-    dismiss,
-    dismissAll,
+    notificationsStore,
+    stack: {
+      push,
+      pop,
+    },
+    tabs: {
+      tab,
+    },
+    sheets: {
+      present,
+      dismiss,
+      dismissAll,
+    },
+    notifications: {
+      present: notify,
+      dismiss: dismissNotification,
+    },
   };
 }
 

package/src/navigation.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { RenderTree } from "@rn-tools/core";
+import { NotificationsProvider } from "@rn-tools/notifications";
 import { SheetsProvider } from "@rn-tools/sheets";
 import {
   NavigationContext,
@@ -31,13 +32,15 @@ export const Navigation = React.memo(function Navigation(
 ) {
   return (
     <RenderTree store={props.navigation.renderTreeStore}>
-      <SheetsProvider sheets={props.navigation.sheetsStore}>
-        <NavigationContext.Provider value={props.navigation}>
-          <NavigationStoreContext.Provider value={props.navigation.store}>
-            <RootStack>{props.children}</RootStack>
-          </NavigationStoreContext.Provider>
-        </NavigationContext.Provider>
-      </SheetsProvider>
+      <NotificationsProvider notifications={props.navigation.notificationsStore}>
+        <SheetsProvider sheets={props.navigation.sheetsStore}>
+          <NavigationContext.Provider value={props.navigation}>
+            <NavigationStoreContext.Provider value={props.navigation.store}>
+              <RootStack>{props.children}</RootStack>
+            </NavigationStoreContext.Provider>
+          </NavigationContext.Provider>
+        </SheetsProvider>
+      </NotificationsProvider>
     </RenderTree>
   );
 });

package/src/stack.test.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
-import { describe, expect, it } from "vitest";
-import { act, render, waitFor } from "@testing-library/react";
+import { act, render, waitFor } from "@testing-library/react-native";
+import { Text } from "react-native";
 import { RenderNodeProbe } from "@rn-tools/core/mocks/render-node-probe";
 
 import {
@@ -25,7 +25,7 @@ async function renderWithProviders(
 describe("Stack", () => {
   it("renders the rootScreen inside a screen node", async () => {
     const { renderer } = await renderWithProviders(
-      <Stack rootScreen={<RenderNodeProbe render={(data) => data.type} />} />,
+      <Stack rootScreen={<RenderNodeProbe render={(data) => <Text>{data.type}</Text>} />} />,
     );
 
     expect(renderer.getByText("screen")).toBeTruthy();
@@ -35,7 +35,7 @@ describe("Stack", () => {
     const { renderer } = await renderWithProviders(
       <Stack
         active={false}
-        rootScreen={<RenderNodeProbe render={(data) => String(data.active)} />}
+        rootScreen={<RenderNodeProbe render={(data) => <Text>{String(data.active)}</Text>} />}
       />,
     );
 
@@ -54,7 +54,7 @@ describe("Stack", () => {
             {
               element: (
                 <RenderNodeProbe
-                  render={(data) => <span>{`a:${data.node.parentId}`}</span>}
+                  render={(data) => <Text>{`a:${data.node.parentId}`}</Text>}
                 />
               ),
               options: { id: "screen-a" },
@@ -64,7 +64,7 @@ describe("Stack", () => {
             {
               element: (
                 <RenderNodeProbe
-                  render={(data) => <span>{`b:${data.node.parentId}`}</span>}
+                  render={(data) => <Text>{`b:${data.node.parentId}`}</Text>}
                 />
               ),
               options: { id: "screen-b" },
@@ -86,7 +86,7 @@ describe("Stack", () => {
             element: (
               <RenderNodeProbe
                 render={(data) => (
-                  <span>{`screen-a:${String(data.active)}`}</span>
+                  <Text>{`screen-a:${String(data.active)}`}</Text>
                 )}
               />
             ),
@@ -96,7 +96,7 @@ describe("Stack", () => {
             element: (
               <RenderNodeProbe
                 render={(data) => (
-                  <span>{`screen-b:${String(data.active)}`}</span>
+                  <Text>{`screen-b:${String(data.active)}`}</Text>
                 )}
               />
             ),
@@ -120,7 +120,7 @@ describe("Stack", () => {
               element: (
                 <RenderNodeProbe
                   render={(data) => (
-                    <span>{`screen-a:${String(data.active)}`}</span>
+                    <Text>{`screen-a:${String(data.active)}`}</Text>
                   )}
                 />
               ),
@@ -132,9 +132,9 @@ describe("Stack", () => {
     );
 
     act(() => {
-      navigation.push(
+      navigation.stack.push(
         <RenderNodeProbe
-          render={(data) => <span>{`screen-b:${String(data.active)}`}</span>}
+          render={(data) => <Text>{`screen-b:${String(data.active)}`}</Text>}
         />,
         {
           id: "screen-b",
@@ -162,7 +162,7 @@ describe("Stack", () => {
               element: (
                 <RenderNodeProbe
                   render={(data) => (
-                    <span>{`a1:${data.type}:${String(data.active)}`}</span>
+                    <Text>{`a1:${data.type}:${String(data.active)}`}</Text>
                   )}
                 />
               ),
@@ -172,7 +172,7 @@ describe("Stack", () => {
               element: (
                 <RenderNodeProbe
                   render={(data) => (
-                    <span>{`a2:${data.type}:${String(data.active)}`}</span>
+                    <Text>{`a2:${data.type}:${String(data.active)}`}</Text>
                   )}
                 />
               ),
@@ -184,7 +184,7 @@ describe("Stack", () => {
               element: (
                 <RenderNodeProbe
                   render={(data) => (
-                    <span>{`b1:${data.type}:${String(data.active)}`}</span>
+                    <Text>{`b1:${data.type}:${String(data.active)}`}</Text>
                   )}
                 />
               ),
@@ -209,7 +209,7 @@ describe("Stack", () => {
           {
             element: (
               <RenderNodeProbe
-                render={(data) => <span>{`a1:${String(data.active)}`}</span>}
+                render={(data) => <Text>{`a1:${String(data.active)}`}</Text>}
               />
             ),
             options: { id: "screen-a1" },
@@ -234,7 +234,7 @@ describe("Stack", () => {
         stacks: {
           "stack-a": [
             {
-              element: <span>screen-a</span>,
+              element: <Text>screen-a</Text>,
               options: { id: "screen-a" },
             },
           ],
@@ -243,7 +243,7 @@ describe("Stack", () => {
     );
 
     act(() => {
-      navigation.push(<span>screen-a-dup</span>, {
+      navigation.stack.push(<Text>screen-a-dup</Text>, {
         id: "screen-a",
         stack: "stack-a",
       });
@@ -253,14 +253,14 @@ describe("Stack", () => {
     expect(renderer.getByText("screen-a")).toBeTruthy();
 
     act(() => {
-      navigation.pop({ stack: "stack-a" });
+      navigation.stack.pop({ stack: "stack-a" });
     });
 
     expect(navigation.store.getState().stacks.get("stack-a")).toHaveLength(0);
     expect(renderer.queryByText("screen-a")).toBeNull();
 
     act(() => {
-      navigation.push(<span>screen-a-again</span>, {
+      navigation.stack.push(<Text>screen-a-again</Text>, {
         id: "screen-a",
         stack: "stack-a",
       });
@@ -273,13 +273,13 @@ describe("Stack", () => {
   it("ref.push adds a screen and ref.pop removes it", async () => {
     const ref = React.createRef<StackHandle>();
     const { renderer, store } = await renderWithProviders(
-      <Stack ref={ref} id="stack-a" rootScreen={<span>root</span>} />,
+      <Stack ref={ref} id="stack-a" rootScreen={<Text>root</Text>} />,
     );
 
     expect(renderer.getByText("root")).toBeTruthy();
 
     act(() => {
-      ref.current!.push(<span>pushed</span>, { id: "pushed-screen" });
+      ref.current!.push(<Text>pushed</Text>, { id: "pushed-screen" });
     });
 
     await waitFor(() => {
@@ -303,13 +303,13 @@ describe("Stack", () => {
   it("ref.push targets the correct stack when id is not provided", async () => {
     const ref = React.createRef<StackHandle>();
     const { renderer, store } = await renderWithProviders(
-      <Stack ref={ref} rootScreen={<span>root</span>} />,
+      <Stack ref={ref} rootScreen={<Text>root</Text>} />,
     );
 
     expect(renderer.getByText("root")).toBeTruthy();
 
     act(() => {
-      ref.current!.push(<span>pushed</span>, { id: "pushed-screen" });
+      ref.current!.push(<Text>pushed</Text>, { id: "pushed-screen" });
     });
 
     await waitFor(() => {
@@ -339,7 +339,7 @@ describe("Stack", () => {
     const innerRef = React.createRef<StackHandle>();
 
     function InnerStack() {
-      return <Stack ref={innerRef} rootScreen={<span>inner-root</span>} />;
+      return <Stack ref={innerRef} rootScreen={<Text>inner-root</Text>} />;
     }
 
     const { renderer, store } = await renderWithProviders(
@@ -351,7 +351,7 @@ describe("Stack", () => {
     });
 
     act(() => {
-      innerRef.current!.push(<span>inner-pushed</span>, {
+      innerRef.current!.push(<Text>inner-pushed</Text>, {
         id: "inner-screen",
       });
     });
@@ -365,16 +365,40 @@ describe("Stack", () => {
     expect(state.stacks.has("outer")).toBe(false);
   });
 
+  it("renders unwrapped screen content when wrapped is false", async () => {
+    const { renderer } = await renderWithProviders(
+      <Stack id="stack-a" />,
+      {
+        stacks: {
+          "stack-a": [
+            {
+              element: (
+                <RenderNodeProbe
+                  render={(data) => (
+                    <Text>{`unwrapped:${data.type}:${String(data.active)}`}</Text>
+                  )}
+                />
+              ),
+              options: { id: "screen-unwrapped", wrapped: false },
+            },
+          ],
+        },
+      },
+    );
+
+    expect(renderer.getByText("unwrapped:screen:true")).toBeTruthy();
+  });
+
   it("resolves the deepest active stack and falls back when a subtree becomes inactive", async () => {
     const navigation = createNavigation();
 
     function NestedRight() {
-      return <Stack id="right-nested" rootScreen={<span>nested-root</span>} />;
+      return <Stack id="right-nested" rootScreen={<Text>nested-root</Text>} />;
     }
 
     const result = render(
       <Navigation navigation={navigation}>
-        <Stack id="left" rootScreen={<span>left-root</span>} />
+        <Stack id="left" rootScreen={<Text>left-root</Text>} />
         <Stack id="right" active={true} rootScreen={<NestedRight />} />
       </Navigation>,
     );
@@ -385,7 +409,7 @@ describe("Stack", () => {
 
     // push with no stack should target the deepest active stack: right-nested
     act(() => {
-      navigation.push(<span>first-push</span>);
+      navigation.stack.push(<Text>first-push</Text>);
     });
 
     const stateAfterFirst = navigation.store.getState();
@@ -395,13 +419,13 @@ describe("Stack", () => {
     // Deactivate the right subtree — left should become the active stack
     result.rerender(
       <Navigation navigation={navigation}>
-        <Stack id="left" rootScreen={<span>left-root</span>} />
+        <Stack id="left" rootScreen={<Text>left-root</Text>} />
         <Stack id="right" active={false} rootScreen={<NestedRight />} />
       </Navigation>,
     );
 
     act(() => {
-      navigation.push(<span>second-push</span>);
+      navigation.stack.push(<Text>second-push</Text>);
     });
 
     const stateAfterSecond = navigation.store.getState();

package/src/stack.tsx

@@ -7,6 +7,8 @@ import {
 import {
   useStackScreens,
   useNavigation,
+  STACK_TYPE,
+  SCREEN_TYPE,
   type PushOptions,
 } from "./navigation-client";
 
@@ -15,10 +17,7 @@ import * as RNScreens from "react-native-screens";
 import { StyleSheet } from "react-native";
 
 export type StackHandle = {
-  push: (
-    element: React.ReactElement,
-    options?: PushOptions,
-  ) => void;
+  push: (element: React.ReactElement, options?: PushOptions) => void;
   pop: () => void;
 };
 
@@ -32,7 +31,7 @@ export type StackProps = {
 const StackRoot = React.memo(
   React.forwardRef<StackHandle, StackProps>(function StackRoot(props, ref) {
     const stackId = React.useRef(
-      props.id ?? nextRenderTreeIdForType("stack"),
+      props.id ?? nextRenderTreeIdForType(STACK_TYPE),
     ).current;
     const navigation = useNavigation();
 
@@ -40,17 +39,17 @@ const StackRoot = React.memo(
       ref,
       () => ({
         push(element: React.ReactElement, options?: PushOptions) {
-          navigation.push(element, { ...options, stack: stackId });
+          navigation.stack.push(element, { ...options, stack: stackId });
         },
         pop() {
-          navigation.pop({ stack: stackId });
+          navigation.stack.pop({ stack: stackId });
         },
       }),
       [stackId, navigation],
     );
 
     return (
-      <RenderTreeNode type="stack" id={stackId} active={props.active}>
+      <RenderTreeNode type={STACK_TYPE} id={stackId} active={props.active}>
         <RNScreens.ScreenStack style={StyleSheet.absoluteFill}>
           {props.rootScreen && <StackScreen>{props.rootScreen}</StackScreen>}
           {props.children}
@@ -66,10 +65,17 @@ export type StackScreenProps = {
   children: React.ReactNode;
 };
 
+const defaultStyle = StyleSheet.create({
+  screen: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: "white",
+  },
+});
+
 const StackScreen = React.memo(function StackScreen(props: StackScreenProps) {
   return (
-    <RNScreens.Screen style={StyleSheet.absoluteFill}>
-      <RenderTreeNode type="screen" id={props.id} active={props.active}>
+    <RNScreens.Screen style={defaultStyle.screen}>
+      <RenderTreeNode type={SCREEN_TYPE} id={props.id} active={props.active}>
         {props.children}
       </RenderTreeNode>
     </RNScreens.Screen>
@@ -83,15 +89,30 @@ const StackSlot = React.memo(function StackSlot() {
 
   return (
     <React.Fragment>
-      {screens.map((screen, index, arr) => (
-        <StackScreen
-          id={screen.options?.id}
-          key={screen.options?.id ?? index}
-          active={index === arr.length - 1}
-        >
-          {screen.element}
-        </StackScreen>
-      ))}
+      {screens.map((screen, index, arr) => {
+        if (screen.options?.wrapped === false) {
+          return (
+            <RenderTreeNode
+              key={screen.options?.id ?? index}
+              type={SCREEN_TYPE}
+              id={screen.options?.id}
+              active={index === arr.length - 1}
+            >
+              {screen.element}
+            </RenderTreeNode>
+          );
+        }
+
+        return (
+          <StackScreen
+            id={screen.options?.id}
+            key={screen.options?.id ?? index}
+            active={index === arr.length - 1}
+          >
+            {screen.element}
+          </StackScreen>
+        );
+      })}
     </React.Fragment>
   );
 });

package/src/tabs.test.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
-import { describe, expect, it } from "vitest";
-import { act, render, waitFor, fireEvent } from "@testing-library/react";
+import { act, render, waitFor, fireEvent } from "@testing-library/react-native";
+import { Pressable, Text } from "react-native";
 import { RenderNodeProbe } from "@rn-tools/core/mocks/render-node-probe";
 
 import {
@@ -11,20 +11,47 @@ import { Navigation } from "./navigation";
 import { Tabs, type TabScreenOptions, type TabsHandle } from "./tabs";
 import { Stack } from "./stack";
 
+function collectTextNodes(node: unknown, output: string[]) {
+  if (typeof node === "string") {
+    output.push(node);
+    return;
+  }
+
+  if (!node || typeof node !== "object") {
+    return;
+  }
+
+  if (Array.isArray(node)) {
+    node.forEach((item) => collectTextNodes(item, output));
+    return;
+  }
+
+  const children = (node as { children?: unknown[] }).children;
+  if (children) {
+    children.forEach((child) => collectTextNodes(child, output));
+  }
+}
+
+function textOrder(renderer: ReturnType<typeof render>) {
+  const text: string[] = [];
+  collectTextNodes(renderer.toJSON(), text);
+  return text;
+}
+
 function makeScreens(count: number): TabScreenOptions[] {
   return Array.from({ length: count }, (_, i) => ({
     id: `tab-${i}`,
     screen: (
       <RenderNodeProbe
         render={(data) => (
-          <span>{`tab-${i}:${data.type}:${String(data.active)}`}</span>
+          <Text>{`tab-${i}:${data.type}:${String(data.active)}`}</Text>
         )}
       />
     ),
     tab: ({ isActive, onPress }) => (
-      <span data-testid={`tab-btn-${i}`} onClick={onPress}>
-        {`tab-btn-${i}:${String(isActive)}`}
-      </span>
+      <Pressable testID={`tab-btn-${i}`} onPress={onPress}>
+        <Text>{`tab-btn-${i}:${String(isActive)}`}</Text>
+      </Pressable>
     ),
   }));
 }
@@ -69,7 +96,7 @@ describe("Tabs", () => {
     );
 
     act(() => {
-      navigation.tab(2);
+      navigation.tabs.tab(2);
     });
 
     await waitFor(() => {
@@ -129,7 +156,6 @@ describe("Tabs", () => {
       expect(renderer.getByText("tab-2:tab-screen:true")).toBeTruthy();
     });
 
-    // The tab state should be set on the auto-generated tabs id
     const state = store.getState();
     expect(state.tabs.size).toBe(1);
     const [, tabState] = [...state.tabs.entries()][0];
@@ -143,13 +169,13 @@ describe("Tabs", () => {
     const tabScreens: TabScreenOptions[] = [
       {
         id: "tab-a",
-        screen: <span>tab-a-content</span>,
-        tab: () => <span>tab-a</span>,
+        screen: <Text>tab-a-content</Text>,
+        tab: () => <Text>tab-a</Text>,
       },
       {
         id: "tab-b",
-        screen: <span>tab-b-content</span>,
-        tab: () => <span>tab-b</span>,
+        screen: <Text>tab-b-content</Text>,
+        tab: () => <Text>tab-b</Text>,
       },
     ];
 
@@ -170,7 +196,6 @@ describe("Tabs", () => {
       ref.current!.setActive(1);
     });
 
-    // The tab switch should target the auto-generated tabs id, not "outer-stack"
     const state = navigation.store.getState();
     expect(state.tabs.has("outer-stack")).toBe(false);
     expect(state.tabs.size).toBe(1);
@@ -210,7 +235,7 @@ describe("TabBar", () => {
       <Tabs id="my-tabs" screens={screens} />,
     );
 
-    fireEvent.click(renderer.getByTestId("tab-btn-2"));
+    fireEvent.press(renderer.getByTestId("tab-btn-2"));
 
     await waitFor(() => {
       expect(renderer.getByText("tab-btn-0:false")).toBeTruthy();
@@ -226,12 +251,10 @@ describe("TabBar", () => {
       <Tabs id="my-tabs" screens={screens} />,
     );
 
-    // Screen content should appear before the tab bar in the DOM
-    const screenNode = renderer.getByText("tab-0:tab-screen:true");
-    const tabNode = renderer.getByText("tab-btn-0:true");
-    const order = screenNode.compareDocumentPosition(tabNode);
-    // DOCUMENT_POSITION_FOLLOWING = 4
-    expect(order & 4).toBe(4);
+    const order = textOrder(renderer);
+    expect(order.indexOf("tab-0:tab-screen:true")).toBeLessThan(
+      order.indexOf("tab-btn-0:true"),
+    );
   });
 
   it("renders tabbar at top when tabbarPosition is top", () => {
@@ -240,12 +263,10 @@ describe("TabBar", () => {
       <Tabs id="my-tabs" screens={screens} tabbarPosition="top" />,
     );
 
-    // Tab bar should appear before screen content in the DOM
-    const tabNode = renderer.getByText("tab-btn-0:true");
-    const screenNode = renderer.getByText("tab-0:tab-screen:true");
-    const order = tabNode.compareDocumentPosition(screenNode);
-    // DOCUMENT_POSITION_FOLLOWING = 4
-    expect(order & 4).toBe(4);
+    const order = textOrder(renderer);
+    expect(order.indexOf("tab-btn-0:true")).toBeLessThan(
+      order.indexOf("tab-0:tab-screen:true"),
+    );
   });
 });
 
@@ -256,13 +277,13 @@ describe("Nested Stack + Tabs", () => {
     const screens: TabScreenOptions[] = [
       {
         id: "tab-a",
-        screen: <Stack id="stack-a" rootScreen={<span>stack-a-root</span>} />,
-        tab: () => <span>tab-a</span>,
+        screen: <Stack id="stack-a" rootScreen={<Text>stack-a-root</Text>} />,
+        tab: () => <Text>tab-a</Text>,
       },
       {
         id: "tab-b",
-        screen: <Stack id="stack-b" rootScreen={<span>stack-b-root</span>} />,
-        tab: () => <span>tab-b</span>,
+        screen: <Stack id="stack-b" rootScreen={<Text>stack-b-root</Text>} />,
+        tab: () => <Text>tab-b</Text>,
       },
     ];
 
@@ -276,9 +297,8 @@ describe("Nested Stack + Tabs", () => {
       expect(result.getByText("stack-a-root")).toBeTruthy();
     });
 
-    // Tab 0 (stack-a) is active — push should target stack-a
     act(() => {
-      navigation.push(<span>pushed-to-a</span>);
+      navigation.stack.push(<Text>pushed-to-a</Text>);
     });
 
     const stateAfterFirst = navigation.store.getState();
@@ -292,13 +312,13 @@ describe("Nested Stack + Tabs", () => {
     const screens: TabScreenOptions[] = [
       {
         id: "tab-a",
-        screen: <Stack id="stack-a" rootScreen={<span>stack-a-root</span>} />,
-        tab: () => <span>tab-a</span>,
+        screen: <Stack id="stack-a" rootScreen={<Text>stack-a-root</Text>} />,
+        tab: () => <Text>tab-a</Text>,
       },
       {
         id: "tab-b",
-        screen: <Stack id="stack-b" rootScreen={<span>stack-b-root</span>} />,
-        tab: () => <span>tab-b</span>,
+        screen: <Stack id="stack-b" rootScreen={<Text>stack-b-root</Text>} />,
+        tab: () => <Text>tab-b</Text>,
       },
     ];
 
@@ -308,13 +328,12 @@ describe("Nested Stack + Tabs", () => {
       </Navigation>,
     );
 
-    // Switch to tab 1 (stack-b)
     act(() => {
-      navigation.tab(1);
+      navigation.tabs.tab(1);
     });
 
     act(() => {
-      navigation.push(<span>pushed-to-b</span>);
+      navigation.stack.push(<Text>pushed-to-b</Text>);
     });
 
     const state = navigation.store.getState();
@@ -328,19 +347,22 @@ describe("Nested Stack + Tabs", () => {
     const tabScreens: TabScreenOptions[] = [
       {
         id: "tab-a",
-        screen: <span>tab-a-content</span>,
-        tab: () => <span>tab-a</span>,
+        screen: <Text>tab-a-content</Text>,
+        tab: () => <Text>tab-a</Text>,
       },
       {
         id: "tab-b",
-        screen: <span>tab-b-content</span>,
-        tab: () => <span>tab-b</span>,
+        screen: <Text>tab-b-content</Text>,
+        tab: () => <Text>tab-b</Text>,
       },
     ];
 
     const result = render(
       <Navigation navigation={navigation}>
-        <Stack id="outer-stack" rootScreen={<Tabs id="inner-tabs" screens={tabScreens} />} />
+        <Stack
+          id="outer-stack"
+          rootScreen={<Tabs id="inner-tabs" screens={tabScreens} />}
+        />
       </Navigation>,
     );
 
@@ -348,9 +370,8 @@ describe("Nested Stack + Tabs", () => {
       expect(result.getByText("tab-a-content")).toBeTruthy();
     });
 
-    // tab with no explicit tabs should resolve inner-tabs
     act(() => {
-      navigation.tab(1);
+      navigation.tabs.tab(1);
     });
 
     const state = navigation.store.getState();

package/src/tabs.tsx

@@ -9,6 +9,8 @@ import {
   useTabActiveIndex,
   useNavigationStore,
   useNavigation,
+  TABS_TYPE,
+  TAB_SCREEN_TYPE,
 } from "./navigation-client";
 
 import * as RNScreens from "react-native-screens";
@@ -40,7 +42,7 @@ export type TabsProps = {
 const TabsRoot = React.memo(
   React.forwardRef<TabsHandle, TabsProps>(function TabsRoot(props, ref) {
     const tabsId = React.useRef(
-      props.id ?? nextRenderTreeIdForType("tabs"),
+      props.id ?? nextRenderTreeIdForType(TABS_TYPE),
     ).current;
     const navigation = useNavigation();
 
@@ -48,14 +50,14 @@ const TabsRoot = React.memo(
       ref,
       () => ({
         setActive(index: number) {
-          navigation.tab(index, { tabs: tabsId });
+          navigation.tabs.tab(index, { tabs: tabsId });
         },
       }),
       [tabsId, navigation],
     );
 
     return (
-      <RenderTreeNode type="tabs" id={tabsId} active={props.active}>
+      <RenderTreeNode type={TABS_TYPE} id={tabsId} active={props.active}>
         {props.children}
       </RenderTreeNode>
     );
@@ -127,7 +129,7 @@ const TabsSlot = React.memo(function TabsSlot(props: {
           style={StyleSheet.absoluteFill}
         >
           <RenderTreeNode
-            type="tab-screen"
+            type={TAB_SCREEN_TYPE}
             id={`${tabsId}/${entry.id}`}
             active={index === activeIndex}
           >