Accessing navigation outside a screen component

WHAT THIS TESTS Whether you know that React Navigation injects the navigation prop only into components registered via the component or children of Screen. Nested helpers, buttons, and shared widgets do not receive it automatically, yet they often need to navigate.

A GOOD ANSWER COVERS For any component rendered inside the NavigationContainer tree, call the useNavigation hook. It reads navigation from context and returns the same object the screen would receive, so a reusable header button or a deeply nested card can navigate without props. For code that runs outside the React tree, such as a notification tap handler, an Axios interceptor redirecting on 401, or a background service, you cannot use a hook; instead create a navigationRef with createNavigationContainerRef, pass it as the ref to NavigationContainer, and call navigationRef.navigate after checking navigationRef.isReady.

COMMON WRONG ANSWERS Manually threading the navigation prop through several layers of components, which is brittle prop drilling. Trying to call useNavigation outside the container or in a non-component function, which throws. Storing navigation in a global variable captured from a render, which goes stale. Forgetting the isReady guard on the ref, causing early calls to no-op or crash.

LIKELY FOLLOW-UPS Why can you not use useNavigation in a redux thunk or service? How do you type useNavigation in TypeScript? How does the navigationRef interact with deep linking and the initial route?

ONE CONCRETE EXAMPLE A reusable BackButton component calls const navigation = useNavigation() and renders a pressable that calls navigation.goBack. Separately, your API client has a response interceptor; when it sees a 401 it imports navigationRef and, if navigationRef.isReady, calls navigationRef.reset to send the user to the Login screen, all without any screen passing a prop down.