import { CommonActions, type NavigationAction, type NavigationState, type ParamListBase, type Router, } from '@react-navigation/routers'; import * as React from 'react'; import { NavigationContext } from './NavigationContext'; import { type NavigationHelpers, PrivateValueStore } from './types'; import { UnhandledActionContext } from './UnhandledActionContext'; import type { NavigationEventEmitter } from './useEventEmitter'; // This is to make TypeScript compiler happy // eslint-disable-next-line @typescript-eslint/no-unused-expressions PrivateValueStore; type Options = { id: string | undefined; onAction: (action: NavigationAction) => boolean; getState: () => State; emitter: NavigationEventEmitter; router: Router; stateRef: React.RefObject; }; /** * Navigation object with helper methods to be used by a navigator. * This object includes methods for common actions as well as methods the parent screen's navigation object. */ export function useNavigationHelpers< State extends NavigationState, ActionHelpers extends Record void>, Action extends NavigationAction, EventMap extends Record, >({ id: navigatorId, onAction, getState, emitter, router, stateRef, }: Options) { const onUnhandledAction = React.useContext(UnhandledActionContext); const parentNavigationHelpers = React.useContext(NavigationContext); return React.useMemo(() => { const dispatch = (op: Action | ((state: State) => Action)) => { const action = typeof op === 'function' ? op(getState()) : op; const handled = onAction(action); if (!handled) { onUnhandledAction?.(action); } }; const actions = { ...router.actionCreators, ...CommonActions, }; const helpers = Object.keys(actions).reduce((acc, name) => { // @ts-expect-error: name is a valid key, but TypeScript is dumb acc[name] = (...args: any) => dispatch(actions[name](...args)); return acc; }, {} as ActionHelpers); const navigationHelpers = { ...parentNavigationHelpers, ...helpers, dispatch, emit: emitter.emit, isFocused: parentNavigationHelpers ? parentNavigationHelpers.isFocused : () => true, canGoBack: () => { const state = getState(); return ( router.getStateForAction(state, CommonActions.goBack() as Action, { routeNames: state.routeNames, routeParamList: {}, routeGetIdList: {}, }) !== null || parentNavigationHelpers?.canGoBack() || false ); }, getId: () => navigatorId, getParent: (id?: string) => { if (id !== undefined) { let current = navigationHelpers; while (current && id !== current.getId()) { current = current.getParent(); } return current; } return parentNavigationHelpers; }, getState: (): State => { // FIXME: Workaround for when the state is read during render // By this time, we haven't committed the new state yet // Without this `useSyncExternalStore` will keep reading the old state // This may result in `useNavigationState` or `useIsFocused` returning wrong values // Apart from `useSyncExternalStore`, `getState` should never be called during render if (stateRef.current != null) { return stateRef.current; } return getState(); }, } as NavigationHelpers & ActionHelpers; return navigationHelpers; }, [ router, parentNavigationHelpers, emitter.emit, getState, onAction, onUnhandledAction, navigatorId, stateRef, ]); }