By Vishal Basumatary in javascript — Mar 24, 2023

react native get route name

React Native Get Route Name: Explained

When working with React Native, you might have come across the need to get the name of the current route. This can come in handy when you want to perform certain actions based on the current screen or route.

If you are using React Navigation for navigation in your React Native app, you can get the name of the current route using the following code:


    import { useRoute } from '@react-navigation/native';
    
    function MyComponent() {
      const route = useRoute();
      const routeName = route.name;
      
      console.log(routeName); // Output: Name of current route
    }

The useRoute hook from React Navigation returns the route object for the current screen. You can then get the name of the route using the name property.

If you are using React Native Navigation for navigation in your app, you can get the name of the current screen using the following code:


    import { Navigation } from 'react-native-navigation';
    
    function MyComponent() {
      const screenName = Navigation.getCurrentScreenName();
      
      console.log(screenName); // Output: Name of current screen
    }

The Navigation.getCurrentScreenName() method from React Native Navigation returns the name of the current screen.

Method 3: Using React Router Native

If you are using React Router Native for navigation in your app, you can get the name of the current route using the useRouteMatch hook as follows:


    import { useRouteMatch } from 'react-router-native';
    
    function MyComponent() {
      const match = useRouteMatch();
      const routeName = match.path;
      
      console.log(routeName); // Output: Name of current route
    }

The useRouteMatch hook from React Router Native returns the match object for the current route. You can then get the name of the route using the path property.

These are some of the ways you can get the name of the current route or screen in your React Native app. Choose the method that best suits your needs and use it accordingly.

react native get route name