Retrieving the Current Screen Name in React Native Navigation Using Javascript

Here are three different solutions to retrieve the current active screen’s state in React Navigation v5.
Firstly, for react-navigation v5, keep a reference of your navigation container and call on the reference.
Secondly, you can catch it using the following code.
Lastly, if you are using nested navigators, you can use this code to get the current active screen’s state. This can be used when you need to retrieve the current active screen’s state from NavigationDrawer. The source for this information is from https://reactnavigation.org/docs/screen-tracking/ (the function-based component syntax has been converted into the equivalent class component syntax).


Solution 1:

For react-navigation v5:

import { useRoute } from '@react-navigation/native';
const route = useRoute();
console.log(route.name);


Solution 2:


The following code can be captured in the following manner.

this.props.navigation.state.routeName


Solution 3:


To obtain the state of
current active screen’s
when working with nested navigators, use the following code.

import { NavigationState } from 'react-navigation';
const getActiveRouteState = function (route: NavigationState): NavigationState {
    if (!route.routes || route.routes.length === 0 || route.index >= route.routes.length) {
        return route;
    }
    const childActiveRoute = route.routes[route.index] as NavigationState;
    return getActiveRouteState(childActiveRoute);
}

Usage:

const activeRoute = getActiveRouteState(this.props.navigation.state);

When I require the present state of the active screen from NavigationDrawer, I make use of this.

Frequently Asked Questions