@symbiote-native/navigation 2.0.3 → 2.2.0

package/build/core/index.d.ts

@@ -1,17 +1,18 @@
 export * from './constants';
 export { createInitialNavigatorState, navigatorReducer, computeActivityState, isTopRoute, } from './navigator-state';
-export type { IRoute, INavigatorState, INavigatorAction } from './navigator-state';
+export type { IRoute, INavigatorState, INavigatorAction, } from './navigator-state';
+export { reconcileStackRoutes } from './stack-router-state';
 export type { IStackAnimation, IStackPresentation, IHeaderBackButtonDisplayMode, IHeaderUserInterfaceStyle, IOptionalBooleanNativeProp, ISheetAllowedDetents, ISheetLargestUndimmedDetent, ISheetInitialDetent, IHeaderBarButtonIcon, IHeaderBarButtonItemBadge, IHeaderBarButtonItemAction, IHeaderBarButtonMenuAction, IHeaderBarButtonSubmenu, IHeaderBarButtonItemMenu, IHeaderBarButtonItemSpacing, IHeaderBarButtonItem, ISearchBarAutoCapitalize, ISearchBarPlacement, ISearchBarOptions, IScreenOrientation, IScreenOptions, INavigatorPlatform, IScreenViewProps, IHeaderConfigViewProps, IStackViewProps, ISearchBarViewProps, } from './navigator-props';
-export { resolveHeaderConfigView, resolveScreenView, resolveSearchBarView } from './screen-options';
+export { resolveHeaderConfigView, resolveScreenView, resolveSearchBarView, } from './screen-options';
 export { buildSearchBarHandle } from './search-bar-commands';
 export type { ISearchBarCommands } from './search-bar-commands';
 export { resolveScreenProps, resolveStackProps, renderHeaderConfig, resolveSearchBarProps, resolveScreenContentWrapperStyle, resolveScreenViewName, isHeaderInModal, resolveHeaderInModalStackStyle, resolveHeaderInModalScreenStyle, buildSearchBarPassthrough, resolveScreenRenderPlan, } from './render-stack';
 export type { IScreenRenderPlanInput, IScreenRenderPlan } from './render-stack';
-export { serializeNavigatorState, deserializeNavigatorState } from './state-persistence';
+export { serializeNavigatorState, deserializeNavigatorState, } from './state-persistence';
 export { createNavigationEmitter, diffFocusedRoute, NAVIGATION_EVENT_FOCUS, NAVIGATION_EVENT_BLUR, NAVIGATION_EVENT_STATE, NAVIGATION_EVENT_BEFORE_REMOVE, } from './navigation-events';
 export type { INavigationEmitter, INavigationEventListener, INavigationEventName, IFocusTransition, } from './navigation-events';
 export { isRecord } from './guards';
-export { createInitialTabState, tabRouterReducer, isFocusedRoute } from './tab-router-state';
+export { createInitialTabState, tabRouterReducer, reconcileTabRoutes, isFocusedRoute, } from './tab-router-state';
 export type { ITabRouterState, ITabRouterAction } from './tab-router-state';
 export type { ITabBarIcon, ITabOptions } from './tab-options';
 export { renderTabBarItem, renderTabBar } from './render-tabs';
@@ -19,7 +20,7 @@ export type { ITabBarItemView, ITabBarViewProps } from './render-tabs';
 export { resolveRouteFromUrl, resolveUrlFromRoute } from './linking-config';
 export type { ILinkingConfig, IScreenLinkingConfig } from './linking-config';
 export { createInitialDrawerRouterState, drawerRouterReducer, focusedDrawerRoute, } from './drawer-router-state';
-export type { IDrawerRouterState, IDrawerRouterAction } from './drawer-router-state';
+export type { IDrawerRouterState, IDrawerRouterAction, } from './drawer-router-state';
 export type { IDrawerType, IDrawerPosition, IDrawerOptions, IDrawerScreenOptions, IDrawerGeometry, ISwipeIntent, } from './drawer-options';
 export { DRAWER_DEFAULT_TYPE, DRAWER_DEFAULT_POSITION, DRAWER_DEFAULT_WIDTH, DRAWER_DEFAULT_OVERLAY_COLOR, DRAWER_DEFAULT_SWIPE_ENABLED, DRAWER_DEFAULT_SWIPE_EDGE_WIDTH, DRAWER_DEFAULT_SWIPE_MIN_DISTANCE, DRAWER_DEFAULT_SWIPE_MIN_VELOCITY, resolveDrawerType, resolveDrawerPosition, resolveDrawerWidth, isDrawerAnimated, isDrawerOverlayVisible, resolveDrawerGeometry, isSwipeStartInEdge, isHorizontalDrag, resolveSwipeIntent, clamp01, startPageXOf, resolveDragProgress, shouldClaimDrawerSwipe, resolveDrawerSlotInterpolation, } from './drawer-options';
 export type { IDrawerInterpolationRange, IDrawerContentSlotInterpolation, IDrawerOverlaySlotInterpolation, IDrawerPanelSlotInterpolation, } from './drawer-options';

package/build/core/index.js

@@ -7,10 +7,14 @@
 // the descriptor bridge.
 export * from './constants.js';
 export { createInitialNavigatorState, navigatorReducer, computeActivityState, isTopRoute, } from './navigator-state/index.js';
-export { resolveHeaderConfigView, resolveScreenView, resolveSearchBarView } from './screen-options.js';
+// Drops history entries whose `<Stack.Screen>` marker has unregistered - see
+// stack-router-state.ts's header for why the Stack's history needs this and the Tab's projection
+// does not.
+export { reconcileStackRoutes } from './stack-router-state/index.js';
+export { resolveHeaderConfigView, resolveScreenView, resolveSearchBarView, } from './screen-options.js';
 export { buildSearchBarHandle } from './search-bar-commands.js';
 export { resolveScreenProps, resolveStackProps, renderHeaderConfig, resolveSearchBarProps, resolveScreenContentWrapperStyle, resolveScreenViewName, isHeaderInModal, resolveHeaderInModalStackStyle, resolveHeaderInModalScreenStyle, buildSearchBarPassthrough, resolveScreenRenderPlan, } from './render-stack.js';
-export { serializeNavigatorState, deserializeNavigatorState } from './state-persistence/index.js';
+export { serializeNavigatorState, deserializeNavigatorState, } from './state-persistence/index.js';
 export { createNavigationEmitter, diffFocusedRoute, NAVIGATION_EVENT_FOCUS, NAVIGATION_EVENT_BLUR, NAVIGATION_EVENT_STATE, NAVIGATION_EVENT_BEFORE_REMOVE, } from './navigation-events/index.js';
 // Runtime guards shared across core (and re-exported for adapters narrowing their own untyped
 // inputs - vnode props, gesture/event data, persisted JSON) - see guards.ts's header for which
@@ -18,7 +22,7 @@ export { createNavigationEmitter, diffFocusedRoute, NAVIGATION_EVENT_FOCUS, NAVI
 export { isRecord } from './guards.js';
 // Bottom-tabs navigator: a FOCUSED-INDEX router (not a stack - see tab-router-state.ts) driving
 // a pure-JS tab bar render, framework-agnostic and shared verbatim by every adapter.
-export { createInitialTabState, tabRouterReducer, isFocusedRoute } from './tab-router-state/index.js';
+export { createInitialTabState, tabRouterReducer, reconcileTabRoutes, isFocusedRoute, } from './tab-router-state/index.js';
 export { renderTabBarItem, renderTabBar } from './render-tabs.js';
 // Linking config: resolves a URL to a route (and back), the piece @react-navigation's
 // NavigationContainer `linking` prop provides on top of the framework-agnostic Linking module.

package/build/core/navigator-state/index.js

@@ -3,7 +3,7 @@
 // in its router, minus the React-specific action-creator/linking machinery. Route identity
 // (`key`) is generated by the CALLER (the adapter, via React's useId or an equivalent) - the
 // reducer never invents identity itself, so it stays a pure (state, action) => state function.
-import { SCREEN_ACTIVITY_STATE_FOCUSED, SCREEN_ACTIVITY_STATE_INACTIVE } from '../constants.js';
+import { SCREEN_ACTIVITY_STATE_FOCUSED, SCREEN_ACTIVITY_STATE_INACTIVE, } from '../constants.js';
 import { mergeParams } from '../guards.js';
 export function createInitialNavigatorState(initialRoute) {
     return { routes: [initialRoute] };
@@ -22,7 +22,9 @@ export function navigatorReducer(state, action) {
             return { routes: state.routes.slice(0, nextLength) };
         }
         case 'popToTop':
-            return state.routes.length <= 1 ? state : { routes: state.routes.slice(0, 1) };
+            return state.routes.length <= 1
+                ? state
+                : { routes: state.routes.slice(0, 1) };
         case 'popTo': {
             const index = state.routes.findIndex(route => route.key === action.key);
             if (index === -1)
@@ -51,7 +53,11 @@ export function navigatorReducer(state, action) {
                 params: mergeParams(target.params, action.params),
             };
             return {
-                routes: [...state.routes.slice(0, index), nextRoute, ...state.routes.slice(index + 1)],
+                routes: [
+                    ...state.routes.slice(0, index),
+                    nextRoute,
+                    ...state.routes.slice(index + 1),
+                ],
             };
         }
         // Mirrors @react-navigation's CommonActions.reset / BaseRouter's RESET handler: the payload
@@ -74,7 +80,9 @@ export function navigatorReducer(state, action) {
 // exceeds routesLength - 1, this formula never produces a decrease across a push or pop.
 export function computeActivityState(index, routesLength) {
     const focusedIndex = routesLength - 1;
-    return index > focusedIndex ? SCREEN_ACTIVITY_STATE_INACTIVE : SCREEN_ACTIVITY_STATE_FOCUSED;
+    return index > focusedIndex
+        ? SCREEN_ACTIVITY_STATE_INACTIVE
+        : SCREEN_ACTIVITY_STATE_FOCUSED;
 }
 export function isTopRoute(index, routesLength) {
     return index === routesLength - 1;

package/build/core/render-drawer.js

@@ -69,7 +69,10 @@ function panelBaseStyle(options) {
 export function renderDrawer(view, options) {
     const type = resolveDrawerType(options);
     const content = el('symbiote-view', { ...view.contentPassthrough, style: CONTENT_STYLE }, []);
-    const panel = el('symbiote-view', { ...view.panelPassthrough, style: [panelBaseStyle(options), view.drawerStyle] }, []);
+    const panel = el('symbiote-view', {
+        ...view.panelPassthrough,
+        style: [panelBaseStyle(options), view.drawerStyle],
+    }, []);
     const slots = { content, panel };
     if (isDrawerOverlayVisible(options)) {
         slots.overlay = el('symbiote-view', {

package/build/core/render-stack.js

@@ -11,7 +11,7 @@
 import { el } from '@symbiote-native/components';
 import { HEADER_ON_PRESS_BAR_BUTTON_ITEM, HEADER_ON_PRESS_BAR_BUTTON_MENU_ITEM, RNS_MODAL_SCREEN_VIEW_NAME, RNS_SCREEN_STACK_HEADER_CONFIG_VIEW_NAME, RNS_SCREEN_STACK_HEADER_SUBVIEW_VIEW_NAME, RNS_SCREEN_VIEW_NAME, RNS_SEARCH_BAR_VIEW_NAME, SEARCH_BAR_ON_BLUR, SEARCH_BAR_ON_CANCEL_BUTTON_PRESS, SEARCH_BAR_ON_CHANGE_TEXT, SEARCH_BAR_ON_CLOSE, SEARCH_BAR_ON_FOCUS, SEARCH_BAR_ON_OPEN, SEARCH_BAR_ON_SEARCH_BUTTON_PRESS, STACK_DEFAULT_ANIMATION, STACK_DEFAULT_PRESENTATION, } from './constants.js';
 import { computeActivityState } from './navigator-state/index.js';
-import { resolveHeaderConfigView, resolveScreenView, resolveSearchBarView } from './screen-options.js';
+import { resolveHeaderConfigView, resolveScreenView, resolveSearchBarView, } from './screen-options.js';
 // Mirrors react-native-screens' ScreenStackItem.tsx (getPositioningStyle): a formSheet's content
 // wrapper does not get `flex: 1`. RNSScreen.mm's updateBounds pushes the sheet's live native size
 // into Fabric's shadow state on every frame of a detent drag, and a `bottom: 0`-pinned wrapper
@@ -65,7 +65,9 @@ export function resolveScreenViewName(stackPresentation, isAndroid) {
         stackPresentation === 'push' ||
         stackPresentation === 'containedModal' ||
         stackPresentation === 'containedTransparentModal';
-    return isPlainPresentation ? RNS_SCREEN_VIEW_NAME : RNS_MODAL_SCREEN_VIEW_NAME;
+    return isPlainPresentation
+        ? RNS_SCREEN_VIEW_NAME
+        : RNS_MODAL_SCREEN_VIEW_NAME;
 }
 export function resolveScreenContentWrapperStyle(stackPresentation, headerHidden, headerTranslucent, isAndroid) {
     let baseStyles;
@@ -96,13 +98,20 @@ export function resolveScreenContentWrapperStyle(stackPresentation, headerHidden
 export function isHeaderInModal(stackPresentation, headerHidden, isAndroid) {
     if (isAndroid)
         return false;
-    return (stackPresentation ?? STACK_DEFAULT_PRESENTATION) !== 'push' && !headerHidden;
+    return ((stackPresentation ?? STACK_DEFAULT_PRESENTATION) !== 'push' &&
+        !headerHidden);
 }
 // Inner-modal wrapper styles for isHeaderInModal: the inner RNSScreenStack fills its outer
 // RNSScreen, and the inner RNSScreen fills the stack absolutely on all four edges. This mirrors
 // react-native-screens' own `styles.container` / `StyleSheet.absoluteFill` for this exact pair.
 const HEADER_IN_MODAL_STACK_STYLE = { flex: 1 };
-const HEADER_IN_MODAL_SCREEN_STYLE = { position: 'absolute', top: 0, start: 0, end: 0, bottom: 0 };
+const HEADER_IN_MODAL_SCREEN_STYLE = {
+    position: 'absolute',
+    top: 0,
+    start: 0,
+    end: 0,
+    bottom: 0,
+};
 export function resolveHeaderInModalStackStyle() {
     return HEADER_IN_MODAL_STACK_STYLE;
 }

package/build/core/screen-options.js

@@ -7,7 +7,7 @@
 // The header bar-button payload+dispatch cluster (id-tagging, onPress lookup) lives in
 // header-bar-buttons.ts - self-contained, consumed here only as a black box by
 // resolveHeaderConfigView.
-import { buildHeaderBarButtonDispatch, prepareHeaderBarButtonItems } from './header-bar-buttons.js';
+import { buildHeaderBarButtonDispatch, prepareHeaderBarButtonItems, } from './header-bar-buttons.js';
 // These sentinels must be kept in sync with react-native-screens' native side - they are RNS's
 // own compat values for the 'fitToContents'/'large'/'medium'/'all' legacy presets, replicated
 // here because we drive RNSScreen directly (no react-native-screens JS component in the path).

package/build/core/search-bar-commands.js

@@ -5,7 +5,7 @@
 // buildScrollViewHandle exactly (same lazy-getter shape); the adapter supplies the node getter
 // and its own framework-specific ref field (see react/screen.ts's IReactSearchBarOptions - the
 // ref itself is per-adapter, same split as IPressableProps).
-import { dispatchViewCommand, dlog } from '@symbiote-native/engine';
+import { dispatchViewCommand, dlog, } from '@symbiote-native/engine';
 // dispatchViewCommand itself dlogs a "node not committed" skip; this null case (the ref never
 // attached to a live RNSSearchBar at all - e.g. the header's search bar isn't mounted, or a
 // stale handle outlived its screen) was the one unlogged gap, silently indistinguishable from

package/build/core/stack-router-state/index.d.ts

@@ -0,0 +1,2 @@
+import type { INavigatorState } from '../navigator-state';
+export declare function reconcileStackRoutes(state: INavigatorState, registeredNames: readonly string[]): INavigatorState;

package/build/core/stack-router-state/index.js

@@ -0,0 +1,44 @@
+// StackRouter: the registry-reconciliation half (framework-agnostic, zero render). A Stack's route
+// list is navigation HISTORY, not a projection of the registered `<Stack.Screen>` markers the way a
+// Tab's is (tab-router-state) - it seeds exactly one route and grows only through push/replace. So
+// a marker that unregisters while its route still sits in the history (a marker behind an `{#if}`,
+// a data-driven screen list) leaves behind an entry nothing can render: the route stays, the
+// adapter's componentFor() finds no screen, and the user is parked on a blank RNSScreen with no
+// way to tell what happened. Mirrors @react-navigation/routers' StackRouter.getStateForRouteNames-
+// Change, which filters those routes out of the history and pulls the focused index back into
+// range.
+//
+// Deliberately NOT a navigatorReducer action: this is not something a caller dispatches, it is a
+// reaction to the registry changing underneath an unchanged history, and each adapter observes
+// that change through its own lifecycle. Keeping it a separate pure function lets every adapter
+// wire it its own way without teaching the reducer about a registry it has never seen.
+// The contract, and the two places it deliberately parts from upstream:
+//
+// - SURVIVORS KEEP THEIR IDENTITY. A stack route's key is COUNTER-derived (every adapter's
+//   createRoute increments a per-navigator sequence), not name-derived like a tab route's, so
+//   re-deriving the list from the registry would hand every survivor a brand-new key and remount
+//   live screens. Only the phantom entries go; every other route object passes through by
+//   reference, params included.
+//
+// - THE FOCUSED ROUTE IS THE TOP ONE. This state carries no `index` field: the focused route is
+//   always the last one (see computeActivityState's comment for why no route can outrank it), so
+//   upstream's `index: Math.min(state.index, routes.length - 1)` degenerates here to "the last
+//   survivor". Dropping the FOCUSED route therefore lands the user on the nearest still-registered
+//   route beneath it - where a pop() would have left them - rather than on nothing.
+//
+// - THE ROUTE LIST IS NEVER EMPTIED. `routes.length - 1` IS the focused index, so an empty list
+//   means no focused route at all - the blank screen this function exists to prevent. When nothing
+//   in the history survives (every marker gone, or the whole screen set swapped for new names) the
+//   state is returned UNCHANGED. Upstream instead pushes a freshly nanoid()-keyed route for
+//   initialRouteName; we cannot, because minting a route key belongs to the caller here
+//   (navigator-state.ts's header) and a derivation that mints one would allocate a new key on every
+//   re-run. Unchanged is also the right answer for the usual cause of a momentarily empty registry
+//   - markers unregistering and re-registering across a re-render - since the next run reconciles
+//   for real.
+export function reconcileStackRoutes(state, registeredNames) {
+    const routes = state.routes.filter(route => registeredNames.includes(route.name));
+    // filter preserves order, so an unchanged length means nothing was dropped.
+    if (routes.length === state.routes.length || routes.length === 0)
+        return state;
+    return { routes };
+}

package/build/core/state-persistence/index.js

@@ -7,10 +7,14 @@ import { isRecord } from '../guards.js';
 // params: undefined}`, and JSON.stringify drops undefined-valued keys - a JSON round trip of a
 // perfectly valid route legitimately arrives here without a `params` key at all.
 function isRoute(value) {
-    return isRecord(value) && typeof value.key === 'string' && typeof value.name === 'string';
+    return (isRecord(value) &&
+        typeof value.key === 'string' &&
+        typeof value.name === 'string');
 }
 function isNavigatorState(value) {
-    return isRecord(value) && Array.isArray(value.routes) && value.routes.every(isRoute);
+    return (isRecord(value) &&
+        Array.isArray(value.routes) &&
+        value.routes.every(isRoute));
 }
 export function serializeNavigatorState(state) {
     return state;

package/build/core/tab-router-state/index.d.ts

@@ -15,5 +15,6 @@ export type ITabRouterAction = {
     params: unknown;
 };
 export declare function createInitialTabState(routes: readonly IRouteEntry[], initialRouteName?: string): ITabRouterState;
+export declare function reconcileTabRoutes(state: ITabRouterState, nextRoutes: readonly IRouteEntry[]): ITabRouterState;
 export declare function tabRouterReducer(state: ITabRouterState, action: ITabRouterAction): ITabRouterState;
 export declare function isFocusedRoute(index: number, focusedIndex: number): boolean;

package/build/core/tab-router-state/index.js

@@ -14,6 +14,25 @@ export function createInitialTabState(routes, initialRouteName) {
     const index = routes.findIndex(route => route.name === initialRouteName);
     return { routes, index: index === -1 ? INITIAL_FOCUSED_INDEX : index };
 }
+// A screen marker can appear or disappear after mount (a marker behind an `{#if}`, a data-driven
+// screen list), so a navigator's route list has to follow its registry instead of staying frozen
+// at whatever createInitialTabState saw first. Mirrors TabRouter.getStateForRouteNamesChange:
+// membership and order come from `nextRoutes`, but a route that survives keeps its IDENTITY (its
+// key) and everything jumpTo/setParams accumulated onto its params - only genuinely new names
+// take their entry from `nextRoutes`. Focus follows the previously focused route's NAME, so an
+// unrelated screen disappearing never moves the user; when the focused route is the one that
+// disappeared, focus falls back to the first route, the same landing spot every unresolvable
+// focus gets here (createInitialTabState's own fallback).
+export function reconcileTabRoutes(state, nextRoutes) {
+    const routes = nextRoutes.map(next => state.routes.find(route => route.name === next.name) ?? next);
+    const isUnchanged = routes.length === state.routes.length &&
+        routes.every((route, at) => route === state.routes[at]);
+    if (isUnchanged)
+        return state;
+    const focusedName = state.routes[state.index]?.name;
+    const index = routes.findIndex(route => route.name === focusedName);
+    return { routes, index: index === -1 ? INITIAL_FOCUSED_INDEX : index };
+}
 // jumpTo moves the focused index to an existing route by name and optionally merges params
 // (navigation.jumpTo(name, params) - the tab-actions doc's own signature); it never adds,
 // removes, or reorders routes (mirrors TabRouter: JUMP_TO is a no-op when the target name isn't
@@ -30,7 +49,10 @@ export function tabRouterReducer(state, action) {
             }
             const target = state.routes[index];
             const routes = state.routes.slice();
-            routes[index] = { ...target, params: mergeParams(target.params, action.params) };
+            routes[index] = {
+                ...target,
+                params: mergeParams(target.params, action.params),
+            };
             return { ...state, index, routes };
         }
         case 'setParams': {
@@ -39,7 +61,10 @@ export function tabRouterReducer(state, action) {
                 return state;
             const target = state.routes[index];
             const routes = state.routes.slice();
-            routes[index] = { ...target, params: mergeParams(target.params, action.params) };
+            routes[index] = {
+                ...target,
+                params: mergeParams(target.params, action.params),
+            };
             return { ...state, routes };
         }
         default:

package/build/react/drawer/index.js

@@ -15,8 +15,8 @@
 // @symbiote-native/engine), which is sufficient for a solid drawer but NOT byte-for-byte parity -
 // see the explicit gap list at the bottom of this file.
 import { createElement, forwardRef, isValidElement, useCallback, useContext, useEffect, useId, useImperativeHandle, useMemo, useReducer, useRef, } from 'react';
-import { Animated, PanResponder, useWindowDimensions } from '@symbiote-native/react';
-import { dlog } from '@symbiote-native/engine';
+import { Animated, PanResponder, useWindowDimensions, } from '@symbiote-native/react';
+import { dlog, } from '@symbiote-native/engine';
 import { DRAWER_DEFAULT_OVERLAY_COLOR, NAVIGATION_EVENT_BLUR, NAVIGATION_EVENT_FOCUS, createInitialDrawerRouterState, createNavigationEmitter, drawerChildOrder, drawerRouterReducer, isDrawerAnimated, renderDrawer, resolveDragProgress, resolveDrawerGeometry, resolveDrawerSlotInterpolation, resolveSwipeIntent, shouldClaimDrawerSwipe, } from '../../core/index.js';
 import { collectRegistry } from '../collect-registry.js';
 import { NavigationContext } from '../navigation-context.js';
@@ -25,7 +25,9 @@ function isDrawerScreenElement(child) {
     return isValidElement(child) && child.type === DrawerScreen;
 }
 function resolveDrawerScreenOptions(entry, optionsArgs, screenOptions) {
-    const own = typeof entry.options === 'function' ? entry.options(optionsArgs) : entry.options;
+    const own = typeof entry.options === 'function'
+        ? entry.options(optionsArgs)
+        : entry.options;
     return { ...screenOptions, ...own };
 }
 const DRAWER_SNAP_DURATION = 250;
@@ -71,8 +73,10 @@ const DrawerImpl = forwardRef((props, forwardedRef) => {
     optionsRef.current = options;
     const screenWidthRef = useRef(screenWidth);
     screenWidthRef.current = screenWidth;
-    const isOpenRef = useRef(state.isOpen);
-    isOpenRef.current = state.isOpen;
+    // The whole router state, not just its isOpen bit: jumpTo below has to re-run the reducer to
+    // learn what the dispatch actually produced, and that needs the routes too.
+    const stateRef = useRef(state);
+    stateRef.current = state;
     const animateProgressTo = useCallback((open) => {
         // Investigation instrumentation (Drawer openDrawer-no-op / toggleDrawer-no-animation bug):
         // every imperative caller (openDrawer/closeDrawer/toggleDrawer/jumpTo) funnels through here,
@@ -92,40 +96,48 @@ const DrawerImpl = forwardRef((props, forwardedRef) => {
     }, [progress]);
     const handle = useMemo(() => ({
         openDrawer: () => {
-            dlog(`Drawer: openDrawer() called, isOpen=${isOpenRef.current} at t=${Date.now()}`);
+            dlog(`Drawer: openDrawer() called, isOpen=${stateRef.current.isOpen} at t=${Date.now()}`);
             animateProgressTo(true);
             dispatch({ type: 'openDrawer' });
         },
         closeDrawer: () => {
-            dlog(`Drawer: closeDrawer() called, isOpen=${isOpenRef.current} at t=${Date.now()}`);
+            dlog(`Drawer: closeDrawer() called, isOpen=${stateRef.current.isOpen} at t=${Date.now()}`);
             animateProgressTo(false);
             dispatch({ type: 'closeDrawer' });
         },
         toggleDrawer: () => {
-            dlog(`Drawer: toggleDrawer() called, isOpen=${isOpenRef.current} at t=${Date.now()}`);
-            animateProgressTo(!isOpenRef.current);
+            dlog(`Drawer: toggleDrawer() called, isOpen=${stateRef.current.isOpen} at t=${Date.now()}`);
+            animateProgressTo(!stateRef.current.isOpen);
             dispatch({ type: 'toggleDrawer' });
         },
         jumpTo: (name) => {
-            dispatch({ type: 'jumpTo', name });
-            if (isOpenRef.current)
+            // An unregistered name is a documented reducer no-op that hands the SAME state back, so
+            // animating off `isOpen` alone would slide the panel shut while the router still says
+            // open. useReducer's dispatch is async - stateRef only catches up on the next render - so
+            // the reducer (a pure function) is re-run here to learn what the dispatch produces, and
+            // the animation runs only on a genuine open -> closed transition.
+            const action = { type: 'jumpTo', name };
+            const current = stateRef.current;
+            const next = drawerRouterReducer(current, action);
+            dispatch(action);
+            if (current.isOpen && !next.isOpen)
                 animateProgressTo(false);
         },
     }), [animateProgressTo]);
     useImperativeHandle(forwardedRef, () => handle, [handle]);
     const panResponder = useRef(PanResponder.create({
-        onStartShouldSetPanResponder: (event, gestureState) => shouldClaimDrawerSwipe(event, gestureState, screenWidthRef.current, isOpenRef.current, optionsRef.current, 'start'),
-        onMoveShouldSetPanResponder: (event, gestureState) => shouldClaimDrawerSwipe(event, gestureState, screenWidthRef.current, isOpenRef.current, optionsRef.current, 'move'),
+        onStartShouldSetPanResponder: (event, gestureState) => shouldClaimDrawerSwipe(event, gestureState, screenWidthRef.current, stateRef.current.isOpen, optionsRef.current, 'start'),
+        onMoveShouldSetPanResponder: (event, gestureState) => shouldClaimDrawerSwipe(event, gestureState, screenWidthRef.current, stateRef.current.isOpen, optionsRef.current, 'move'),
         onPanResponderGrant: () => {
             dlog('Drawer: gesture grant');
-            dragStartProgress.current = isOpenRef.current ? 1 : 0;
+            dragStartProgress.current = stateRef.current.isOpen ? 1 : 0;
         },
         onPanResponderMove: (_event, gestureState) => {
             const nextProgress = resolveDragProgress(gestureState, dragStartProgress.current, optionsRef.current);
             progress.setValue(nextProgress);
         },
         onPanResponderRelease: (_event, gestureState) => {
-            const intent = resolveSwipeIntent(gestureState, isOpenRef.current, optionsRef.current);
+            const intent = resolveSwipeIntent(gestureState, stateRef.current.isOpen, optionsRef.current);
             const open = intent === 'open';
             dlog(`Drawer: gesture release -> ${open ? 'open' : 'close'}`);
             animateProgressTo(open);
@@ -133,17 +145,29 @@ const DrawerImpl = forwardRef((props, forwardedRef) => {
         },
         onPanResponderTerminate: () => {
             dlog('Drawer: gesture terminated, snapping back');
-            animateProgressTo(isOpenRef.current);
+            animateProgressTo(stateRef.current.isOpen);
         },
     })).current;
     const animated = isDrawerAnimated(options);
     const geometry = useMemo(() => resolveDrawerGeometry(options), [options.drawerType, options.drawerPosition, options.drawerWidth]);
-    const panelSlot = animated ? resolveDrawerSlotInterpolation(geometry, 'panel') : undefined;
-    const contentSlot = animated ? resolveDrawerSlotInterpolation(geometry, 'content') : undefined;
-    const overlaySlot = animated ? resolveDrawerSlotInterpolation(geometry, 'overlay') : undefined;
-    const panelTranslateX = panelSlot ? progress.interpolate(panelSlot.translateX) : undefined;
-    const contentTranslateX = contentSlot ? progress.interpolate(contentSlot.translateX) : undefined;
-    const overlayOpacity = overlaySlot ? progress.interpolate(overlaySlot.opacity) : undefined;
+    const panelSlot = animated
+        ? resolveDrawerSlotInterpolation(geometry, 'panel')
+        : undefined;
+    const contentSlot = animated
+        ? resolveDrawerSlotInterpolation(geometry, 'content')
+        : undefined;
+    const overlaySlot = animated
+        ? resolveDrawerSlotInterpolation(geometry, 'overlay')
+        : undefined;
+    const panelTranslateX = panelSlot
+        ? progress.interpolate(panelSlot.translateX)
+        : undefined;
+    const contentTranslateX = contentSlot
+        ? progress.interpolate(contentSlot.translateX)
+        : undefined;
+    const overlayOpacity = overlaySlot
+        ? progress.interpolate(overlaySlot.opacity)
+        : undefined;
     // The overlay is a full-screen absolutely-positioned sibling BELOW content in paint order
     // (see render-drawer.ts's drawerChildOrder) - for 'front' that's fine since content never moves,
     // but for 'slide' content itself translates away by contentTranslateX, and without following it
@@ -151,9 +175,13 @@ const DrawerImpl = forwardRef((props, forwardedRef) => {
     // underneath instead of just the content sliver it's meant to dim. Tying overlay to the SAME
     // translateX as content keeps it registered exactly under content, wherever content actually is
     // (resolveDrawerSlotInterpolation's 'overlay' overload returns that same content delta).
-    const overlayTranslateX = overlaySlot ? progress.interpolate(overlaySlot.translateX) : undefined;
+    const overlayTranslateX = overlaySlot
+        ? progress.interpolate(overlaySlot.translateX)
+        : undefined;
     const focusedRoute = state.routes[state.index];
-    const focusedEntry = focusedRoute ? registry.get(focusedRoute.name) : undefined;
+    const focusedEntry = focusedRoute
+        ? registry.get(focusedRoute.name)
+        : undefined;
     if (focusedRoute && !focusedEntry) {
         dlog(`Drawer: no screen registered for route name "${focusedRoute.name}"`);
     }
@@ -240,8 +268,13 @@ const DrawerImpl = forwardRef((props, forwardedRef) => {
             : { transform: [{ translateX: contentTranslateX }] },
         overlay: overlayOpacity === undefined
             ? undefined
-            : { opacity: overlayOpacity, transform: [{ translateX: overlayTranslateX }] },
-        panel: panelTranslateX === undefined ? undefined : { transform: [{ translateX: panelTranslateX }] },
+            : {
+                opacity: overlayOpacity,
+                transform: [{ translateX: overlayTranslateX }],
+            },
+        panel: panelTranslateX === undefined
+            ? undefined
+            : { transform: [{ translateX: panelTranslateX }] },
     };
     function renderSlot(slot) {
         const descriptor = slots.get(slot);

package/build/react/index.d.ts

@@ -2,14 +2,14 @@ import '../register';
 export { Stack } from './stack';
 export type { INavigatorHandle, IStackProps } from './stack';
 export { Screen } from './screen';
-export type { IScreenOptionsArgs, IScreenOptionsResolver, IScreenProps } from './screen';
-export type { IScreenOptions, IStackAnimation, IStackPresentation } from '../core';
-export { useNavigation, useRoute, useIsFocused, useFocusEffect, useNavigationState } from './hooks';
+export type { IScreenOptionsArgs, IScreenOptionsResolver, IScreenProps, } from './screen';
+export type { IScreenOptions, IStackAnimation, IStackPresentation, } from '../core';
+export { useNavigation, useRoute, useIsFocused, useFocusEffect, useNavigationState, } from './hooks';
 export type { INavigationHandle } from './hooks';
-export { useStackNavigation, useTabNavigation, useDrawerNavigation } from './hooks';
+export { useStackNavigation, useTabNavigation, useDrawerNavigation, } from './hooks';
 export type { IStackNavigationHandle, ITabNavigationHandle, IDrawerNavigationHandle, } from './hooks';
 export { NavigationContext } from './navigation-context';
-export type { INavigationContextValue, IAnyNavigatorHandle } from './navigation-context';
+export type { INavigationContextValue, IAnyNavigatorHandle, } from './navigation-context';
 export { useLinkingIntegration } from './linking';
 export type { ILinkingConfig, IScreenLinkingConfig } from '../core';
 export { Tab } from './tabs';
@@ -18,7 +18,7 @@ export { TabScreen } from './tab-screen';
 export type { ITabScreenOptionsArgs, ITabScreenOptionsResolver, ITabScreenProps, } from './tab-screen';
 export type { ITabOptions, ITabBarIcon } from '../core';
 export { Drawer } from './drawer';
-export type { IDrawerNavigatorHandle, IDrawerProps, IDrawerDescriptorMap } from './drawer';
+export type { IDrawerNavigatorHandle, IDrawerProps, IDrawerDescriptorMap, } from './drawer';
 export { DrawerScreen } from './drawer-screen';
 export type { IDrawerScreenOptionsArgs, IDrawerScreenOptionsResolver, IDrawerScreenProps, } from './drawer-screen';
-export type { IDrawerOptions, IDrawerScreenOptions, IDrawerType, IDrawerPosition } from '../core';
+export type { IDrawerOptions, IDrawerScreenOptions, IDrawerType, IDrawerPosition, } from '../core';

package/build/react/index.js

@@ -5,8 +5,8 @@
 import '../register';
 export { Stack } from './stack/index.js';
 export { Screen } from './screen.js';
-export { useNavigation, useRoute, useIsFocused, useFocusEffect, useNavigationState } from './hooks/index.js';
-export { useStackNavigation, useTabNavigation, useDrawerNavigation } from './hooks/index.js';
+export { useNavigation, useRoute, useIsFocused, useFocusEffect, useNavigationState, } from './hooks/index.js';
+export { useStackNavigation, useTabNavigation, useDrawerNavigation, } from './hooks/index.js';
 export { NavigationContext } from './navigation-context.js';
 export { useLinkingIntegration } from './linking.js';
 // Tab: the bottom-tabs navigator, a PURE-JS UI (no react-native-screens views involved, so no