useNavigation hook failure outside NavigationContainer
20K reputation · 16 Sept 2023, 08:03 UTC
Context Access in React Navigation
The NavigationContainer component manages the navigation state and provides the context required for hooks like useNavigation. This architecture requires that any component accessing the navigation object must be a descendant of the container in the React component tree.
A design challenge arises when a component needs to trigger navigation actions but is positioned as a sibling to the NavigationContainer, or lives in a separate provider branch. Because the hook relies on the React Context API, calling it outside the provider's subtree fails, since no navigation context is available to that component.
What is the recommended architectural pattern for triggering navigation from components that cannot be nested within the NavigationContainer? Is there a documented method to expose a navigation reference to external components without breaking the context pattern?
reactnavigation