@sigmela/router 0.2.3 → 0.2.5

package/README.md

@@ -148,10 +148,60 @@ const stack = new NavigationStack({ header: { largeTitle: true } })
 
 Key methods:
 - `addScreen(pathPattern, componentOrNode, options?)`
-- `addModal(pathPattern, component, options?)` (shorthand for `stackPresentation: 'modal'`)
-- `addSheet(pathPattern, component, options?)` (shorthand for `stackPresentation: 'sheet'`)
+- `addModal(pathPattern, componentOrStack, options?)` (shorthand for `stackPresentation: 'modal'`)
+- `addSheet(pathPattern, componentOrStack, options?)` (shorthand for `stackPresentation: 'sheet'`)
 - `addStack(prefixOrStack, maybeStack?)` — compose nested stacks under a prefix
 
+### Modal Stacks (Stack in Stack)
+
+You can pass an entire `NavigationStack` to `addModal()` or `addSheet()` to create a multi-screen flow inside a modal:
+
+```tsx
+// Define a flow with multiple screens
+const emailVerifyStack = new NavigationStack()
+  .addScreen('/verify', EmailInputScreen)
+  .addScreen('/verify/sent', EmailSentScreen);
+
+// Mount the entire stack as a modal
+const rootStack = new NavigationStack()
+  .addScreen('/', HomeScreen)
+  .addModal('/verify', emailVerifyStack);
+```
+
+**How it works:**
+- Navigating to `/verify` opens the modal with `EmailInputScreen`
+- Inside the modal, `router.navigate('/verify/sent')` pushes `EmailSentScreen` within the same modal
+- `router.goBack()` navigates back inside the modal stack
+- `router.dismiss()` closes the entire modal from any depth
+
+**Example screen with navigation inside modal:**
+
+```tsx
+function EmailInputScreen() {
+  const router = useRouter();
+  
+  return (
+    <View>
+      <Button title="Next" onPress={() => router.navigate('/verify/sent')} />
+      <Button title="Close" onPress={() => router.dismiss()} />
+    </View>
+  );
+}
+
+function EmailSentScreen() {
+  const router = useRouter();
+  
+  return (
+    <View>
+      <Button title="Back" onPress={() => router.goBack()} />
+      <Button title="Done" onPress={() => router.dismiss()} />
+    </View>
+  );
+}
+```
+
+This pattern works recursively — you can nest stacks inside stacks to any depth.
+
 ### `Router`
 
 The `Router` holds navigation state and performs path matching.
@@ -169,6 +219,7 @@ Navigation:
 - `router.navigate(path)` — push
 - `router.replace(path, dedupe?)` — replace top of the active stack
 - `router.goBack()` — pop top of the active stack
+- `router.dismiss()` — close the nearest modal or sheet (including all screens in a modal stack)
 - `router.reset(path)` — **web-only**: rebuild Router state as if app loaded at `path`
 - `router.setRoot(rootKey, { transition? })` — swap root at runtime (`rootKey` from `config.roots`)
 
@@ -180,8 +231,6 @@ State/subscriptions:
 - `router.subscribeRoot(cb)` — notify when root is replaced via `setRoot`
 - `router.getStackHistory(stackId)` — slice of history for a stack
 
-> Note: `router.getGlobalStackId()` exists but currently returns `undefined`.
-
 ### `TabBar`
 
 `TabBar` is a container node that renders one tab at a time.
@@ -193,12 +242,16 @@ const tabBar = new TabBar({ component: CustomTabBar, initialIndex: 0 })
 ```
 
 Key methods:
-- `addTab({ key, stack?, screen?, title?, icon?, selectedIcon?, ... })`
+- `addTab({ key, stack?, node?, screen?, prefix?, title?, icon?, selectedIcon?, ... })`
 - `onIndexChange(index)` — switch active tab
 - `setBadge(index, badge | null)`
 - `setTabBarConfig(partialConfig)`
 - `getState()` and `subscribe(cb)`
 
+Notes:
+- Exactly one of `stack`, `node`, `screen` must be provided.
+- Use `prefix` to mount a tab's routes under a base path (e.g. `/mail`).
+
 Web behavior note:
 - The built-in **web** tab bar renderer resets Router history on tab switch (to keep URL and Router state consistent) using `router.reset(firstRoutePath)`.
 
@@ -207,22 +260,25 @@ Web behavior note:
 `SplitView` renders **two stacks**: `primary` and `secondary`.
 
 - On **native**, `secondary` overlays `primary` when it has at least one screen in its history.
-- On **web**, the layout becomes side-by-side at a fixed breakpoint (currently `>= 640px` in CSS).
+- On **web**, the layout becomes side-by-side at a fixed breakpoint (`minWidth`, default `640px`).
 
 ```tsx
-import { NavigationStack, SplitView } from '@sigmela/router';
+import { NavigationStack, SplitView, TabBar } from '@sigmela/router';
 
 const master = new NavigationStack().addScreen('/', ThreadsScreen);
 const detail = new NavigationStack().addScreen('/:threadId', ThreadScreen);
 
 const splitView = new SplitView({
-  minWidth: 640, // currently not used by the web renderer; kept for API compatibility
+  minWidth: 640,
   primary: master,
   secondary: detail,
   primaryMaxWidth: 390,
 });
 
-const root = new NavigationStack().addScreen('/mail', splitView);
+// Mount SplitView directly as a tab (no wrapper stack needed).
+const tabBar = new TabBar()
+  .addTab({ key: 'mail', node: splitView, prefix: '/mail', title: 'Mail' })
+  .addTab({ key: 'settings', stack: settingsStack, title: 'Settings' });
 ```
 
 ## Controllers

package/lib/module/Navigation.js

@@ -5,13 +5,22 @@ import { RouterContext } from "./RouterContext.js";
 import { ScreenStack } from "./ScreenStack/index.js";
 import { StyleSheet } from 'react-native';
 import { useSyncExternalStore, memo, useCallback, useEffect, useState } from 'react';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 const EMPTY_HISTORY = [];
 function useStackHistory(router, stackId) {
   const subscribe = useCallback(cb => stackId ? router.subscribeStack(stackId, cb) : () => {}, [router, stackId]);
   const get = useCallback(() => stackId ? router.getStackHistory(stackId) : EMPTY_HISTORY, [router, stackId]);
   return useSyncExternalStore(subscribe, get, get);
 }
+
+/**
+ * Navigation component renders the root and global stacks.
+ *
+ * Modal stacks (NavigationStack added via addModal) are rendered as regular ScreenStackItems
+ * with their component being the StackRenderer that subscribes to its own stack history.
+ * This creates a clean recursive structure: stacks render their items, nested stacks
+ * (via childNode) render their own items through StackRenderer.
+ */
 export const Navigation = /*#__PURE__*/memo(({
   router,
   appearance
@@ -30,23 +39,17 @@ export const Navigation = /*#__PURE__*/memo(({
     rootId
   } = root;
   const rootTransition = router.getRootTransition();
-  const globalId = router.getGlobalStackId();
   const rootItems = useStackHistory(router, rootId);
-  const globalItems = useStackHistory(router, globalId);
   return /*#__PURE__*/_jsx(RouterContext.Provider, {
     value: router,
-    children: /*#__PURE__*/_jsxs(ScreenStack, {
+    children: /*#__PURE__*/_jsx(ScreenStack, {
       style: styles.flex,
-      children: [rootItems.map(item => /*#__PURE__*/_jsx(ScreenStackItem, {
+      children: rootItems.map(item => /*#__PURE__*/_jsx(ScreenStackItem, {
         stackId: rootId,
         item: item,
         stackAnimation: rootTransition,
         appearance: appearance
-      }, `root-${item.key}`)), globalItems.map(item => /*#__PURE__*/_jsx(ScreenStackItem, {
-        appearance: appearance,
-        stackId: globalId,
-        item: item
-      }, `global-${item.key}`))]
+      }, `root-${item.key}`))
     }, rootId ?? 'root')
   });
 });

package/lib/module/NavigationStack.js

@@ -3,6 +3,8 @@
 import { nanoid } from 'nanoid/non-secure';
 import { match as pathMatchFactory } from 'path-to-regexp';
 import qs from 'query-string';
+import React from 'react';
+import { StackRenderer } from "./StackRenderer.js";
 export class NavigationStack {
   routes = [];
   children = [];
@@ -130,7 +132,15 @@ export class NavigationStack {
     return this.children.slice();
   }
   getRenderer() {
-    return () => null;
+    // eslint-disable-next-line consistent-this
+    const stackInstance = this;
+    const stackId = stackInstance.getId();
+    return function NavigationStackRenderer(props) {
+      return /*#__PURE__*/React.createElement(StackRenderer, {
+        stackId: stackId,
+        appearance: props.appearance
+      });
+    };
   }
   seed() {
     const first = this.getFirstRoute();

package/lib/module/Router.js

@@ -3,6 +3,7 @@
 import { nanoid } from 'nanoid/non-secure';
 import { Platform } from 'react-native';
 import qs from 'query-string';
+import { isModalLikePresentation } from "./types.js";
 function canSwitchToRoute(node) {
   return node !== undefined && typeof node.switchToRoute === 'function';
 }
@@ -56,6 +57,9 @@ export class Router {
     }
     this.recomputeActiveRoute();
   }
+  isDebugEnabled() {
+    return this.debugEnabled;
+  }
   log(message, data) {
     if (this.debugEnabled) {
       if (data !== undefined) {
@@ -136,6 +140,72 @@ export class Router {
     }
     this.popFromActiveStack();
   };
+
+  /**
+   * Closes the nearest modal or sheet, regardless of navigation depth inside it.
+   * Useful when a NavigationStack is rendered inside a modal and you want to
+   * close the entire modal from any screen within it.
+   */
+  dismiss = () => {
+    // Find the nearest modal/sheet item in history (searching from end)
+    let modalItem = null;
+    for (let i = this.state.history.length - 1; i >= 0; i--) {
+      const item = this.state.history[i];
+      if (item && isModalLikePresentation(item.options?.stackPresentation)) {
+        modalItem = item;
+        break;
+      }
+    }
+    if (!modalItem) {
+      this.log('dismiss: no modal found in history');
+      return;
+    }
+    this.log('dismiss: closing modal', {
+      key: modalItem.key,
+      routeId: modalItem.routeId,
+      stackId: modalItem.stackId,
+      presentation: modalItem.options?.stackPresentation
+    });
+
+    // Handle sheet dismisser if registered
+    if (modalItem.options?.stackPresentation === 'sheet') {
+      const dismisser = this.sheetDismissers.get(modalItem.key);
+      if (dismisser) {
+        this.unregisterSheetDismisser(modalItem.key);
+        dismisser();
+        return;
+      }
+    }
+
+    // Check if modal has a childNode (NavigationStack added via addModal)
+    const compiled = this.registry.find(r => r.routeId === modalItem.routeId);
+    const childNode = compiled?.childNode;
+    if (childNode) {
+      // Modal stack: remove all items from child stack AND the modal wrapper item
+      const childStackId = childNode.getId();
+      this.log('dismiss: closing modal stack', {
+        childStackId,
+        modalKey: modalItem.key
+      });
+      const newHistory = this.state.history.filter(item => item.stackId !== childStackId && item.key !== modalItem.key);
+      this.setState({
+        history: newHistory
+      });
+
+      // Clear child stack's history cache
+      this.stackHistories.delete(childStackId);
+    } else {
+      // Simple modal: just pop the modal item
+      this.applyHistoryChange('pop', modalItem);
+    }
+    this.recomputeActiveRoute();
+    this.emit(this.listeners);
+
+    // Sync URL on web
+    if (this.isWebEnv()) {
+      this.syncUrlAfterInternalPop(modalItem);
+    }
+  };
   getState = () => {
     return this.state;
   };
@@ -154,6 +224,14 @@ export class Router {
     }
     return this.stackHistories.get(stackId) ?? EMPTY_ARRAY;
   };
+
+  /**
+   * Returns all history items in navigation order.
+   * Useful for rendering all screens including modal stacks.
+   */
+  getFullHistory = () => {
+    return this.state.history;
+  };
   subscribeStack = (stackId, cb) => {
     if (!stackId) return () => {};
     let set = this.stackListeners.get(stackId);
@@ -172,9 +250,6 @@ export class Router {
   getRootStackId() {
     return this.root?.getId();
   }
-  getGlobalStackId() {
-    return undefined;
-  }
   subscribeRoot(listener) {
     this.rootListeners.add(listener);
     return () => this.rootListeners.delete(listener);
@@ -508,12 +583,23 @@ export class Router {
         }
         const newItem = this.createHistoryItem(base, params, query, pathname, passProps);
         this.applyHistoryChange(action, newItem);
+
+        // Seed child node if present
+        if (base.childNode) {
+          this.addChildNodeSeedsToHistory(base.routeId);
+        }
       };
       base.controller(controllerInput, present);
       return;
     }
     const newItem = this.createHistoryItem(base, params, query, pathname);
     this.applyHistoryChange(action, newItem);
+
+    // If the matched route has a childNode (e.g., NavigationStack added via addModal),
+    // seed the child stack's history so StackRenderer has items to render.
+    if (base.childNode) {
+      this.addChildNodeSeedsToHistory(base.routeId);
+    }
   }
   createHistoryItem(matched, params, query, pathname, passProps) {
     const normalizedParams = params && Object.keys(params).length > 0 ? params : undefined;
@@ -862,7 +948,7 @@ export class Router {
   }
   buildRegistry() {
     this.registry.length = 0;
-    const addFromNode = (node, basePath) => {
+    const addFromNode = (node, basePath, inheritedOptions) => {
       const normalizedBasePath = this.normalizeBasePath(basePath);
       const baseSpecificity = this.computeBasePathSpecificity(normalizedBasePath);
       const routes = node.getNodeRoutes();
@@ -870,7 +956,16 @@ export class Router {
       if (stackId) {
         this.stackById.set(stackId, node);
       }
+      let isFirstRoute = true;
       for (const r of routes) {
+        // Merge options: first route inherits parent options (e.g., for nested stacks)
+        const mergedOptions = isFirstRoute && inheritedOptions ? {
+          ...inheritedOptions,
+          ...r.options
+        } : r.options;
+
+        // Always register the route.
+        // If it has a childNode, r.component is already childNode.getRenderer() (set by extractComponent).
         const compiled = {
           routeId: r.routeId,
           path: this.combinePathWithBase(r.path, normalizedBasePath),
@@ -891,7 +986,7 @@ export class Router {
           },
           component: r.component,
           controller: r.controller,
-          options: r.options,
+          options: mergedOptions,
           stackId,
           childNode: r.childNode
         };
@@ -908,10 +1003,15 @@ export class Router {
           pathnamePattern: compiled.pathnamePattern,
           isWildcardPath: compiled.isWildcardPath,
           baseSpecificity: compiled.baseSpecificity,
-          stackId
+          stackId,
+          hasChildNode: !!compiled.childNode
         });
+        isFirstRoute = false;
+
+        // Also register routes from childNode (for navigation inside the nested stack)
         if (r.childNode) {
           const nextBaseForChild = r.isWildcardPath ? normalizedBasePath : this.joinPaths(normalizedBasePath, r.pathnamePattern);
+          // Child routes don't inherit parent options - they use their own
           addFromNode(r.childNode, nextBaseForChild);
         }
       }
@@ -1172,12 +1272,21 @@ export class Router {
       if (hasQueryPattern) {
         spec += 1000;
       }
+
+      // Routes with childNode AND modal/sheet presentation are "wrapper" routes
+      // that should take priority over the child stack's own routes when both match.
+      // This ensures addModal('/path', NavigationStack) renders the wrapper modal
+      // and not the child stack's first screen directly.
+      if (r.childNode && isModalLikePresentation(r.options?.stackPresentation)) {
+        spec += 1;
+      }
       this.log('matchBaseRoute candidate', {
         routeId: r.routeId,
         path: r.path,
         baseSpecificity: r.baseSpecificity,
         adjustedSpecificity: spec,
         hasQueryPattern,
+        hasChildNode: !!r.childNode,
         stackId: r.stackId
       });
       if (!best || spec > best.specificity) {

package/lib/module/ScreenStack/ScreenStack.web.js

@@ -1,11 +1,11 @@
 "use strict";
 
-import { memo, useRef, useLayoutEffect, useMemo, useEffect, Children, isValidElement, Fragment } from 'react';
+import { memo, useRef, useLayoutEffect, useMemo, useEffect, Children, isValidElement, Fragment, useCallback, useContext } from 'react';
 import { useTransitionMap } from 'react-transition-state';
 import { ScreenStackItemsContext, ScreenStackAnimatingContext, useScreenStackConfig } from "./ScreenStackContext.js";
 import { getPresentationTypeClass, computeAnimationType } from "./animationHelpers.js";
+import { RouterContext } from "../RouterContext.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const devLog = (_, __) => {};
 const isScreenStackItemElement = child => {
   if (! /*#__PURE__*/isValidElement(child)) return false;
   const anyProps = child.props;
@@ -54,6 +54,12 @@ export const ScreenStack = /*#__PURE__*/memo(props => {
     transitionTime = 250,
     animated = true
   } = props;
+  const router = useContext(RouterContext);
+  const debugEnabled = router?.isDebugEnabled() ?? false;
+  const devLog = useCallback((msg, data) => {
+    if (!debugEnabled) return;
+    console.log(msg, data !== undefined ? JSON.stringify(data) : '');
+  }, [debugEnabled]);
   devLog('[ScreenStack] Render', {
     transitionTime,
     animated,
@@ -63,6 +69,7 @@ export const ScreenStack = /*#__PURE__*/memo(props => {
   const isInitialMountRef = useRef(true);
   const suppressEnterAfterEmptyRef = useRef(false);
   const suppressedEnterKeyRef = useRef(null);
+  const isBulkRemovalRef = useRef(false);
   const prevKeysRef = useRef([]);
   const lastDirectionRef = useRef('forward');
   const childMapRef = useRef(new Map());
@@ -81,7 +88,7 @@ export const ScreenStack = /*#__PURE__*/memo(props => {
       stackChildrenLength: stackItems.length
     });
     return stackItems;
-  }, [children]);
+  }, [children, devLog]);
   const routeKeys = useMemo(() => {
     const keys = stackChildren.map(child => {
       const item = child.props.item;
@@ -89,7 +96,7 @@ export const ScreenStack = /*#__PURE__*/memo(props => {
     });
     devLog('[ScreenStack] routeKeys', keys);
     return keys;
-  }, [stackChildren]);
+  }, [devLog, stackChildren]);
   const childMap = useMemo(() => {
     const map = new Map(childMapRef.current);
     for (const child of stackChildren) {
@@ -103,7 +110,7 @@ export const ScreenStack = /*#__PURE__*/memo(props => {
       keys: Array.from(map.keys())
     });
     return map;
-  }, [stackChildren]);
+  }, [devLog, stackChildren]);
   const {
     stateMap,
     toggle,
@@ -137,12 +144,12 @@ export const ScreenStack = /*#__PURE__*/memo(props => {
     isResolved: state.isResolved
   })));
   const stateMapEntries = Array.from(stateMap.entries());
+  const prevKeysForDirection = prevKeysRef.current;
   const direction = useMemo(() => {
-    const prevKeys = prevKeysRef.current;
-    const computed = computeDirection(prevKeys, routeKeys);
+    const computed = computeDirection(prevKeysForDirection, routeKeys);
     prevKeysRef.current = routeKeys;
     return computed;
-  }, [routeKeys]);
+  }, [routeKeys, prevKeysForDirection]);
   devLog('[ScreenStack] Computed direction', {
     prevKeys: prevKeysRef.current,
     routeKeys,
@@ -166,10 +173,23 @@ export const ScreenStack = /*#__PURE__*/memo(props => {
       exitingKeys
     });
     return result;
-  }, [routeKeys, stateMapEntries]);
+  }, [devLog, routeKeys, stateMapEntries]);
   const containerClassName = useMemo(() => {
     return 'screen-stack';
   }, []);
+
+  // CRITICAL: Calculate bulk removal BEFORE useMemo for itemsContextValue
+  // so the flag is available when computing animation types
+  const removedKeysForBulkDetection = useMemo(() => {
+    const routeKeySet = new Set(routeKeys);
+    const existingKeySet = new Set();
+    for (const [key] of stateMapEntries) {
+      existingKeySet.add(key);
+    }
+    return [...existingKeySet].filter(key => !routeKeySet.has(key));
+  }, [routeKeys, stateMapEntries]);
+  const isBulkRemoval = removedKeysForBulkDetection.length > 1 || routeKeys.length === 0 && prevKeysForDirection.length > 1;
+  isBulkRemovalRef.current = isBulkRemoval;
   useLayoutEffect(() => {
     devLog('[ScreenStack] === LIFECYCLE EFFECT START ===', {
       prevKeys: prevKeysRef.current,
@@ -197,6 +217,14 @@ export const ScreenStack = /*#__PURE__*/memo(props => {
       removedKeys
     });
 
+    // Bulk removal was already computed before useMemo (see above)
+    devLog('[ScreenStack] Bulk removal detected', {
+      isBulkRemoval: isBulkRemovalRef.current,
+      removedCount: removedKeys.length,
+      prevLength: prevKeysForDirection.length,
+      currentLength: routeKeys.length
+    });
+
     // If this is the first pushed key after the stack was empty, remember its key so we can
     // suppress only its enter animation (without affecting exit animations).
     if (!animateFirstScreenAfterEmpty && suppressEnterAfterEmptyRef.current && routeKeys.length > 0 && newKeys.length > 0) {
@@ -227,7 +255,7 @@ export const ScreenStack = /*#__PURE__*/memo(props => {
     }
     lastDirectionRef.current = direction;
     devLog('[ScreenStack] === LIFECYCLE EFFECT END ===');
-  }, [routeKeys, direction, setItem, toggle, stateMapEntries, stateMap, animateFirstScreenAfterEmpty]);
+  }, [routeKeys, direction, setItem, toggle, stateMapEntries, stateMap, animateFirstScreenAfterEmpty, devLog]);
   useLayoutEffect(() => {
     devLog('[ScreenStack] === CLEANUP EFFECT START ===');
     const routeKeySet = new Set(routeKeys);
@@ -253,7 +281,7 @@ export const ScreenStack = /*#__PURE__*/memo(props => {
       }
     }
     devLog('[ScreenStack] === CLEANUP EFFECT END ===');
-  }, [routeKeys, stateMapEntries, deleteItem]);
+  }, [routeKeys, stateMapEntries, deleteItem, devLog]);
   useEffect(() => {
     if (!isInitialMountRef.current) return;
     const hasMountedItem = stateMapEntries.some(([, st]) => st.isMounted);
@@ -271,7 +299,7 @@ export const ScreenStack = /*#__PURE__*/memo(props => {
       isInitialMountRef.current = false;
       devLog('[ScreenStack] Initial mount completed');
     }
-  }, [stateMapEntries, routeKeys.length, animateFirstScreenAfterEmpty]);
+  }, [stateMapEntries, routeKeys.length, animateFirstScreenAfterEmpty, devLog]);
 
   // Clear suppression key once it is no longer the top screen (so it can animate normally as
   // a background when new screens are pushed).
@@ -326,7 +354,7 @@ export const ScreenStack = /*#__PURE__*/memo(props => {
       const routeIndex = routeKeys.indexOf(key);
       const zIndex = routeIndex >= 0 ? routeIndex + 1 : keysToRender.length + index + 1;
       const presentationType = getPresentationTypeClass(presentation);
-      let animationType = computeAnimationType(key, isInStack, isTop, direction, presentation, isInitialPhase, animated);
+      let animationType = computeAnimationType(key, isInStack, isTop, direction, presentation, isInitialPhase, animated, isBulkRemovalRef.current);
 
       // SplitView-secondary-only: suppress enter animation for the first screen after empty.
       if (!animateFirstScreenAfterEmpty && isTop && direction === 'forward' && suppressedEnterKeyRef.current === key) {
@@ -358,7 +386,7 @@ export const ScreenStack = /*#__PURE__*/memo(props => {
         phase = 'inactive';
       }
       const presentationType = getPresentationTypeClass(presentation);
-      let animationType = isInitialPhase ? 'none' : computeAnimationType(key, isInStack, isTop, direction, presentation, isInitialPhase, animated);
+      let animationType = isInitialPhase ? 'none' : computeAnimationType(key, isInStack, isTop, direction, presentation, isInitialPhase, animated, isBulkRemovalRef.current);
       if (!animateFirstScreenAfterEmpty && isTop && direction === 'forward' && suppressedEnterKeyRef.current === key) {
         animationType = 'none';
       }

package/lib/module/ScreenStack/animationHelpers.js

@@ -1,11 +1,14 @@
 "use strict";
 
+import { isModalLikePresentation } from "../types.js";
 export function getPresentationTypeClass(presentation) {
   switch (presentation) {
     case 'push':
       return 'push';
     case 'modal':
       return 'modal';
+    case 'modalRight':
+      return 'modal-right';
     case 'transparentModal':
       return 'transparent-modal';
     case 'containedModal':
@@ -32,15 +35,20 @@ export function getAnimationTypeForPresentation(presentation, isEntering, direct
   }
   return `${presentationClass}-${suffix}`;
 }
-export function computeAnimationType(_key, isInStack, isTop, direction, presentation, isInitialPhase, animated = true) {
+export function computeAnimationType(_key, isInStack, isTop, direction, presentation, isInitialPhase, animated = true, isBulkRemoval = false) {
   if (!animated) {
     return 'no-animate';
   }
   if (isInitialPhase) {
     return 'none';
   }
+
+  // When multiple screens are removed at once (bulk removal), don't animate them
+  if (isBulkRemoval && !isInStack) {
+    return 'no-animate';
+  }
   const isEntering = isInStack && isTop;
-  const isModalLike = ['modal', 'transparentModal', 'containedModal', 'containedTransparentModal', 'fullScreenModal', 'formSheet', 'pageSheet', 'sheet'].includes(presentation);
+  const isModalLike = isModalLikePresentation(presentation);
   if (isModalLike) {
     if (!isInStack) {
       return getAnimationTypeForPresentation(presentation, false, direction);
@@ -48,7 +56,14 @@ export function computeAnimationType(_key, isInStack, isTop, direction, presenta
     if (isEntering) {
       return getAnimationTypeForPresentation(presentation, true, direction);
     }
-    return 'none';
+
+    // Modal-like screen that's NOT top (background) - animate like push
+    // This happens when navigating inside a modal stack
+    if (direction === 'forward') {
+      return 'push-background';
+    } else {
+      return 'pop-background';
+    }
   }
   if (!isInStack) {
     if (direction === 'forward') {

package/lib/module/ScreenStackItem/ScreenStackItem.js

@@ -17,6 +17,9 @@ export const ScreenStackItem = /*#__PURE__*/memo(({
     stackPresentation,
     ...screenProps
   } = item.options || {};
+
+  // On native, modalRight behaves as regular modal
+  const nativePresentation = stackPresentation === 'modalRight' ? 'modal' : stackPresentation;
   const route = {
     presentation: stackPresentation ?? 'push',
     params: item.params,
@@ -54,7 +57,7 @@ export const ScreenStackItem = /*#__PURE__*/memo(({
     style: StyleSheet.absoluteFill,
     contentStyle: appearance?.screen,
     headerConfig: headerConfig,
-    stackPresentation: stackPresentation,
+    stackPresentation: nativePresentation,
     stackAnimation: stackAnimation ?? item.options?.stackAnimation,
     children: /*#__PURE__*/_jsx(RouteLocalContext.Provider, {
       value: route,