How to Get Current Route Name in React-navigation?

Here We specifying the list of solutions to get the route name using react-navigation in react-native

Solution 1:

To get the current route name in react-navigation, you can use the useRoute hook from @react-navigation/native:

Solution 2:

If you want to get the current route from the navigation state, you can use useNavigationState:

Solution 3:

If you need to track the current route globally, use onStateChange in NavigationContainer:

Solution 4:

If you want to get the current route name using props in React Navigation, you can access it via props.route.name. This method is useful for class components or when props are explicitly passed to the screen component.

Solution 5:

If you’re using an older version of React Navigation (before v5), you might need to wrap your class component with withNavigation to access navigation props:

Conclusion:

We mostly used the useRoute() hooks to get current route name here are the reasons for it:

• Works seamlessly in functional components (which are widely used in modern React apps).
• Easier to use without needing to pass props explicitly.
• Cleaner code with direct access to the route object.