CODEWITHSUNDEEP
javascriptreactjsreact-nativereact-native-web
Dimitri Kopriwa
Dimitri Kopriwa

Reputation: 14445

How can I know my current route in react-navigation 5?

I am using this https://reactnavigation.org/docs/en/navigating-without-navigation-prop.html to access my navigation from any source, my file look as follow:

import { createRef } from 'react';

export const navigationRef = createRef();

export function navigate(name, params) {
  return navigationRef.current?.navigate(name, params);
}

export function goBack() {
  return navigationRef.current?.goBack();
}

export function getRootState() {
  return navigationRef.current?.getRootState();
}

This is perfect for my @navigation/drawer, which is outside my stack navigation.

Only one problem the last method is not synchronized and I want to have an active state on my item menu that is the current route.

How is that possible with react navigation 5?

Upvotes: 5

Views: 20053

Answers (6)

chenop
chenop

Reputation: 5153

There is a util function called getFocusedRouteNameFromRoute(route) which the docs recommends. BUT - it seems its working only for child screen, so I defined the following function to get the active route name:

const getCurrentRouteName = (navigation, route) => {
    if (route.state)
        return getFocusedRouteNameFromRoute(route);
    return route.name;
};

Upvotes: 0

Justin.Mathew
Justin.Mathew

Reputation: 481

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

export const navigationRef = React.createRef()

and

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

Then use: const currentRouteName = navigationRef.current.getCurrentRoute().name to get the current route name.

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

Upvotes: 2

Chandreu
Chandreu

Reputation: 1

This works for me. In navigationRef.js

let navigator;

export const setNavigator = (nav) => {
  navigator = nav;
};

export const getCurrentRoute = () => {
  const route = navigator.getCurrentRoute();
  return route.name;
};

This can be referred from any source like this

import { getCurrentRoute } from '../navigationRef';

const currentScene = getCurrentRoute();

Upvotes: -1

Sunil Kumar
Sunil Kumar

Reputation: 188

I am using the following approach to get the current route name in react-navigation v5. https://reactnavigation.org/docs/navigation-prop/#dangerouslygetstate

const {index, routes} = this.props.navigation.dangerouslyGetState();
const currentRoute = routes[index].name;
console.log('current screen', currentRoute);

Upvotes: 6

shoopi
shoopi

Reputation: 121

If you want to know the current screen from a component you can also use this:

export const HomeScreen = ({ navigation, route }) => {

    console.log(route.name);

    return (
        {...}
    );
};

Upvotes: 2

Mike Vargas
Mike Vargas

Reputation: 196

The NavigationContainer has onStateChange prop, useful for this case, check react-navigation docs Screen Tracking for analytics and if you need access without navigation prop see Navigating without the navigation prop

I share the code to get only active routeName

function App(){
    const routeNameRef = React.useRef();
    // Gets the current screen from navigation state
    const getActiveRouteName = (state)=> {
        const route = state.routes[state?.index || 0];

        if (route.state) {
          // Dive into nested navigators
          return getActiveRouteName(route.state);
        }

        return route.name;
    };

    return (<NavigationContainer
    onStateChange={(state) => {
      if (!state) return;
      //@ts-ignore
      routeNameRef.current = getActiveRouteName(state);
    }}
    >
    ...
    </NavigationContainer>)
}

Upvotes: 3

Related Questions