How to get current route name in react-navigation?

Question

I want the name of the current route or screen in react-navigation which I want to use inside if condition to make some changes.

React is such a mess with all the changes between versions. The docs don't mention any of these & the code seems hard to figure out, I wonder how people even came up with these (old) solutions. — Kevin, Apr 20 '20 at 03:56
any way for 'wix/react-native-navigation', to get the current screen? — Vandit Mehta, Dec 18 '20 at 10:48

score 173 · Answer 1 · edited May 29 '22 at 11:15

173

For react-navigation v5:

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

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

edited May 29 '22 at 11:15

Diomidis Spinellis

18,734
5
61
83

answered Apr 25 '20 at 21:08

ppuppim

1,862
2
11
7

5

You did not specify in which place should i use this useRoute() method. I am getting Hooks can only be called inside of the body of a function component. – Aleksandrs Jan 03 '21 at 12:02
How to identify this scenario? Navigation directly to Contact screen. And Navigation to Contact screen through Home Screen. – M.Kalidass Apr 13 '21 at 10:33
3

It's good but won't work for nested routes. – AmerllicA Jul 22 '22 at 08:48
It will also trigger rerenders on every route change. Just be aware – David Novák May 26 '23 at 17:45

score 66 · Accepted Answer · answered Jan 19 '19 at 13:36

66

You can catch it as the following code:

this.props.navigation.state.routeName

answered Jan 19 '19 at 13:36

Hussam Kurd

8,066
2
43
38

how do i check the current drawer routeName in a child stack – Areeb Vohra May 22 '21 at 11:32

gianlucaparadise · Answer 3 · 2020-08-05T09:21:32.453

33

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.

edited Aug 05 '20 at 09:21

answered Apr 16 '19 at 12:04

gianlucaparadise

1,678
20
32

How are you injecting the route to the custom drawer? – Sanchitos Apr 20 '20 at 17:47
Where does NavigationState come from? – Hugo Jul 30 '20 at 09:12
@Hugo NavigationState is an import from `react-navigation` – gianlucaparadise Aug 05 '20 at 09:22

score 19 · Answer 4 · edited May 12 '20 at 11:31

19

This works fine in react-navigation v5.x

this.props.route.name

edited May 12 '20 at 11:31

Jaimil Patel

1,301
6
13

answered May 12 '20 at 10:13

Subrat Mishra

317
2
8

score 17 · Answer 5 · edited Jul 15 '20 at 10:03

const routeNameRef = React.createRef();

<NavigationContainer
  ref={navigationRef}
  onReady={() => routeNameRef.current = navigationRef.current.getCurrentRoute().name}
  onStateChange={() => {
    const previousRouteName = routeNameRef.current
    const currentRouteName = navigationRef.current.getCurrentRoute().name

    if (previousRouteName !== currentRouteName) {
      // Do something here with it
    }

    // Save the current route name for later comparision
    routeNameRef.current = currentRouteName
  }}
  >
  {/* ... */}
</NavigationContainer>
  );

export function getCurrentRouteName(action) {
  return routeNameRef;
}

You can import the function getCurrentRouteName and use this to get the current route name and its working in any nested navigators in React Navigation 5.

Beware of this [gotcha](https://reactnavigation.org/docs/navigating-without-navigation-prop/#handling-initialization) — Anand Rockzz, Mar 03 '21 at 19:37

Rishabh · Answer 6 · 2019-03-25T11:29:23.630

13

While using "react-navigation": "^3.0.8" and DrawerNavigator it can be accessed from the this.props object using this.props.activeItemKey

edited Mar 25 '19 at 11:29

answered Dec 17 '18 at 10:45

Rishabh

3,752
4
47
74

with DrawerNavigator it does, are you using the same? – Rishabh Mar 25 '19 at 11:29
1

If you are using nested navigators, for example a StackNavigator inside a DrawerNavigator and need the `activeItemKey` say inside the Drawers `contentComponent`, how would you get it? – cseelus Apr 20 '19 at 17:44
for a single route this works for me, this.props.navigation.state.routeName – JHOAN B. HENRICHE Nov 26 '19 at 21:06

score 11 · Answer 7 · answered Apr 12 '22 at 12:48

11

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

  //...
  const route = useRoute();
  const routeName = getFocusedRouteNameFromRoute(route); // Get Nested Route Name

answered Apr 12 '22 at 12:48

ooolala

1,485
2
17
21

route.name also works – Erkan GÖRGÜLÜ May 09 '22 at 13:22
route.name doesent work for me, have to do the way oolala suggested – BennKingy Feb 01 '23 at 14:18

Kun Luo · Answer 8 · 2020-11-18T03:46:45.667

Preparation

register NavigationService.js,see the doc detail in Navigating without the navigation prop

<App
  ref={navigatorRef => {
        NavigationService.setTopLevelNavigator(navigatorRef);
  }}
/>

recursion function

function getCurrentRoute(nav){
    if(Array.isArray(nav.routes)&&nav.routes.length>0){
        return getCurrentRoute(nav.routes[nav.index])
    }else {
        return nav.routeName
    }
}

get current routeName

getCurrentRoute(NavigationService.getNavigator().state.nav)

score 10 · Answer 9 · answered Jun 18 '20 at 03:43

10

In React Navigation v5, I was able to pull the current route name with the below approach:

import { useNavigationState } from '@react-navigation/native'    

const routes = useNavigationState(state => state.routes)
const currentRoute = routes[routes.length -1].name
console.log('currentRoute: ',currentRoute)

answered Jun 18 '20 at 03:43

Chris Lacaille

137
1
5

Before using this, read the docs about it: https://reactnavigation.org/docs/use-navigation-state/#how-is-usenavigationstate-different-from-navigationgetstate -> it's probably better to use navigation.getState() – Wu Wei Jan 30 '23 at 19:33

score 9 · Answer 10 · answered Dec 28 '20 at 09:51

It is possible to get this from the navigationRef attached to the navigation container. Where navigationRef is a ref.

export const navigationRef = React.createRef()

<NavigationContainer
   ref={navigationRef} 
   >
  <Navigator />
</NavigationContainer>

Then use: const currentRouteName = navigationRef.current.getCurrentRoute().name

Alternatively in a functional component you can useRef const navigationRef = React.useRef()

score 8 · Answer 11 · answered Apr 24 '20 at 20:34

For react-navigation v5, you could use the useNavigationState hook -

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

const state = useNavigationState(state => state);
const routeName = (state.routeNames[state.index]);
console.log(routeName);

score 6 · Answer 12 · answered Nov 19 '20 at 14:32

With version 5.x the best way currently is getFocusedRouteNameFromRoute

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

export default function Stack(route) {
  // If the focused route is not found, we need to assume it's the initial screen
  // This can happen during if there hasn't been any navigation inside the screen
  // In our case, it's "Feed" as that's the first screen inside the navigator
  const routeName = getFocusedRouteNameFromRoute(route) ?? 'Feed';
  return <> ..... </>
}

score 5 · Answer 13 · answered Nov 30 '20 at 15:41

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

const App = () => {
  const navigation = useNavigation();
  const { dangerouslyGetState } = useNavigation();
  const { index, routes } = dangerouslyGetState()
  console.log(routes[index].name);

  return(
    <>
    </>
  )
};

score 3 · Answer 14 · answered Jun 07 '21 at 15:53

3

You can use this in hooks as well.

console.log(navigation.dangerouslyGetState());

answered Jun 07 '21 at 15:53

Mohit Goel

722
1
8
18

djsdev · Answer 15 · 2022-05-11T16:05:58.397

This is step by step procedure of what Justin.Mathew has described in his answer.

Create a new file called RootNavigation.js and put the below content inside.

// RootNavigation.js

import * as React from 'react';

export const navigationRef = React.createRef(); // we will access all navigation props by importing this in any of the component

Now import the navigationRef from the RootNavigation.js file, and assign NavigationContainer ref to this. After this step navigationRef can function as navigation prop globally.

// App.js

import { NavigationContainer } from '@react-navigation/native';
import { navigationRef } from './RootNavigation';

export default function App() {
  
  handleNavigationRef = (ref) => {
    // DON'T DO navigationRef = ref, cause this will give you "navigationRef is 
    // read only" error.
    navigationRef.current = ref; 
  }
  return (
     <NavigationContainer ref={handleNavigationRef}>
        {/* ... */} 
     </NavigationContainer>
  );
}

USAGE

Now you can import navigationRef in any of the file, even nested ones. And can use this to get the currentRoute and screen details.

//SomeNestedComonent.js

import { navigationRef } from "path/to/RootNavigation.js";

const route = navigationRef.current?.getCurrentRoute(); //current route object
const currentScreen = route.name; // current screen name

score 3 · Answer 16 · answered Jan 26 '22 at 21:32

3

In one line with useNavigationState Hook:

const screenName = useNavigationState((state) => state.routes[state.index].name)

answered Jan 26 '22 at 21:32

gildniy

3,528
1
33
23

score 3 · Answer 17 · answered Feb 11 '22 at 19:34

If you are using React Navigation v6 you can use this:

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

console.log('Current Route: ', route.name);

And if you want to get the name of the screen that you are, and you are inside a nested navigator, you can do this:

import { useNavigationState } from '@react-navigation/native';
...
const routes = useNavigationState(state => state.routes);

const currentRouteIndex =
  routes?.length && routes[routes.length - 1].state?.index;
const currentRoute =
  routes[routes.length - 1].state?.routeNames[currentRouteIndex];

console.log('Current Route: ', currentRoute);

score 2 · Answer 18 · answered Aug 09 '20 at 09:52

this.props.navigation.state.routeName works only in react-navigation 4 but react-navigation 5 doesn't support it.

The current route name can be achieved by using redux:

-Navigator component passes route object as a prop to the child component

-The Child component receives props and could find the route name in route.name

-To get updated route name on the screen change you can use focus event listener on navigation

<====== Parent Component where navigation is implemented ======>

import React from "react";
import { createMaterialTopTabNavigator } from "@react-navigation/material-top- 
tabs";

import ChildScreen from "../screens/Home/childScreen";

const Tab = createMaterialTopTabNavigator();

const ParentNavigations = () => {

return (

<Tab.Navigator
>
  <Tab.Screen name="ChildScreen" component={ChildScreen} />
</Tab.Navigator>
);
};

export default ParentNavigations;

<===== Child component =====>

import React, { useEffect } from "react";
import { View, StyleSheet } from "react-native";
import { useDispatch } from "react-redux";
import ActionTypes from "../../store/actions/ActionsTypes";

const ChildScreen = ({ navigation, route }) => {
  const dispatch = useDispatch();
  useEffect(() => {
    const unsubscribe = navigation.addListener("focus", () => {
      dispatch({ type: ActionTypes.SETROUTE, payload: route.name }); // every time when screen gets focued it will update the route through redux
    });
    return unsubscribe;
  }, [navigation, route]);
  return (
    <View style={styles.container}>
      <Text>Hello</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#0C0B0B",
  },
});

export default ChildScreen;

score 2 · Answer 19 · answered Oct 01 '20 at 10:02

If you just want to see if the current screen is focused, you can use navigation.isFocused(). https://reactnavigation.org/docs/navigation-prop/#isfocused

Example:

_backAction() {
    const { navigation } = this.props;
    if (navigation.isFocused()) {
        this.setState({
            isLeavingApp: true,
        });
    }
}

score 2 · Answer 20 · answered May 20 '21 at 06:12

2

const Home = ({ navigation, route }) => {
  // you will see screen key, name and params
  console.log("ROUTE", route); 
  // rest of your code
};

answered May 20 '21 at 06:12

Ryan Dhungel

3,637
4
19
26

3

While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value. – mufazmi May 21 '21 at 18:20

score 2 · Answer 21 · answered Jun 09 '21 at 05:51

2

For react native navigation 5.x use :

props.state.routeNames[props.state.index]

answered Jun 09 '21 at 05:51

Mouad Tahir

450
6
9

score 2 · Answer 22 · answered Apr 27 '22 at 11:35

This simple code worked for me. Just add this function to your Util.ts/js file and from your component pass the navigation as the object.

export const getCurrentScreenName = (navigation: any) => {
      return navigation.getState().routes[navigation.getState().index].name;
    };

score 1 · Answer 23 · answered Sep 24 '19 at 07:49

I have multiple TabNavigators nested in a BottomTabNavigator. I get the current route of the TabNavigator with:

    const pathAndParams = props.navigation.router.getPathAndParamsForState(props.navigation.state) || {}
    const activePath = pathAndParams.path

score 1 · Answer 24 · answered Oct 14 '20 at 06:31

This worked for me (I did it inside my navigation drawer)!

const getCurrentRoute = nav => {
  if (Array.isArray(nav.routes) && nav.routes.length > 0) {
    return getCurrentRoute(nav.routes[nav.index]);
  } else {
    return nav.routeName;
  }
};

const currentNavigation = getCurrentRoute(this.props.navigation.state);

Sanchit Kumar · Answer 25 · 2022-02-10T09:55:45.027

Try this,

const appNavigation = useNavigation();
const currentRoute = appNavigation.getCurrentRoute();

This worked for me. Navigation, and its state received as props were unreliable(at least for drawer navigator at root). So I went with this one, which seems to be giving the global navigation state.

Had to use the navigation prop being received in drawer for drawer specific functions like closeDrawer or openDrawer.

export function AppDrawer(props) {

   // for closeDrawer, openDrawer etc.
   const { navigation: drawerNavigation } = props;

   // for referencing current route
   const appNavigation = useNavigation();
   const currentRoute = appNavigation.getCurrentRoute();

   // ... rest of the code
}

Reference for both the variable in console -

score 1 · Answer 26 · answered Feb 13 '22 at 10:59

1

If you are using reach navigation version 6 you can retrieve screen name by

props.route.name

answered Feb 13 '22 at 10:59

Berk Kanburlar

260
2
11

score 1 · Answer 27 · answered May 15 '22 at 06:04

We have a lot of answer here but it is hard to apply the fix because navigation is NULL.

WHY?

Scenario 1: We are using hooks function like: useRoute, useNavigationState,... but the navigation don't be mounted yet. So it is null and get the Error.

Scenario 2: We are using navigation object in the current screen like HomeScreen

const Home = ({ navigation, route }) => {
   console.log("ROUTE", route); 
// rest of your code
};

but navigation is NULL in Root app with presence of NavigationContainer

SOLUTION Make sure to checking navigation is not NULL by using onReady() method of React navigation.

const navigationRef = useRef();
const [routeName, setRouteName] = useState('');
return (
<NavigationContainer
  ref={navigationRef}
  onReady={() => {
    const currentRoute = navigationRef.current.getCurrentRoute();
    setRouteName(currentRoute.name);
    // Do whatever you want with navigation here!.
  }}>
  ...
</NavigationContainer>);

That's it.

score 1 · Answer 28 · answered Nov 22 '22 at 11:22

1

if you want get it in the DrawerContent

props.navigation.getState().routes[0].name

answered Nov 22 '22 at 11:22

Ahmed Elsayed

338
2
11

score 0 · Answer 29 · answered Dec 17 '20 at 12:28

0

this worked for me try this..

const getCurrentRouteName = () => {
    let _index = props.state.index;
    let _routeName = props.state.routeNames;
    return  _routeName[_index]
}

answered Dec 17 '20 at 12:28

saroj kumar

82
3
8

score 0 · Answer 30 · answered Dec 18 '20 at 11:16

For 'wix/react-native-navigation' below is my working solution,

import { Navigation } from 'react-native-navigation';

// Create a variable and set the value from navigation events
let navComponent = null
Navigation.events().registerComponentDidAppearListener(event => navComponent = event)

// navComponent will have the following structure
{"componentId": "Component9", "componentName": "HomeScreen", "componentType": "Component", "passProps": {}}

score 0 · Answer 31 · answered Aug 25 '21 at 10:07

In my case, I needed to get the bottom nav index as well, this was my method

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

then

const routes = useNavigationState(state => state.routes);

let place = routes[routes.length - 1];

if (place.name === 'YOUR_BOTTOM_NAV_NAME') {
   if (place.state.index === 0) {
      //you are in the main screen(BOTTOM_NAV : index 0)
   } else {
      //else navigate to index 0 screen
      navigation.navigate('FirstScreen');
   }
} else if (place.name === 'Another_Screen') {
   navigation.navigate('navigate_to_the_place_you_want');
} else {
   //otherwise come to the first screen
   navigation.navigate('FirstScreen');
}

score 0 · Answer 32 · answered Apr 03 '22 at 08:01

0

Using version: "@react-navigation/native": "^6.0.8" and this.props.navigation, I did it like this:

    let navegState = this.props.navigation.getState();
    if (!!navegState)
        console.log('CURRENT SCREEN', navegState.routes[navegState.index].name);

Just use navegState.routes[navegState.index] if you want the whole object

answered Apr 03 '22 at 08:01

JxDarkAngel

911
11
4

You can destructure navegState like this ```const { routes, index } = this.props.navigation.getState(); const routeName = routes[index].name;``` – bytehala Jul 20 '23 at 21:53

score 0 · Answer 33 · answered Jul 14 '22 at 11:02

0

'@react-navigation/stack'@6.0.11

Worked for me but it's not the best approach.

const routes = navigation.getState().routes;
const currentRoute = routes[routes.length] // will be our current route .name for the name

If you want to look for a specific one

navigation.getState().routes.find((route) => route.name === 'foo')

answered Jul 14 '22 at 11:02

Cursed

988
1
8
24

It should be `const currentRoute = routes[routes.length - 1];` – Kristoffer Jan 27 '23 at 08:21

score 0 · Answer 34 · answered Sep 01 '22 at 19:42

For React Navigation v4

In my use case, I needed to access the current routeName in App.js outside of the createAppContainer component so I did this...

onMount, set this.navigator to nav from ref like so

 <App
   ref={(nav) => {
   this.navigator = nav;
   }}/>

Then when I need the current route, I access it via

 this.navigator.state.nav.routes.routeName

score 0 · Answer 35 · answered May 23 '23 at 10:08

Pass this prop to your Stack.Navigator:

screenListeners={{
    state: e=>{
         function findCurrentRoute(data){
             const state = data.state;
             const routes = state.routes;
             const currentRoute = routes[state.index];

              if(currentRoute.state) return findCurrentRoute(currentRoute)
              else return currentRoute;
         }
         console.log("CURRENT ROUTE NAME: ", findCurrentRoute(e.data).name);
     }
}}

Here, I have used recursion to find the deeply nested route.

How to get current route name in react-navigation?

35 Answers35

Preparation

get current routeName

Linked