How to get current route name in react-navigation?

You can catch it as the following code:

this.props.navigation.state.routeName

If you are using nested navigators, you can use this code to get current active screen's state

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);

I'm using this when I need to get current active screen's state from NavigationDrawer.


For react-navigation v5:

import { useRoute } from '@react-navigation/native';

const route = useRoute();
console.log(route.name);