How to current route name in react-navigation inside navigation.js file?

Admin 1
Viewed 2137

I want to know the current route name but inside the navigation js file, I use the useRoute hook in any component and work well, but I get this error when I use useRoute inside navigation.js

Error: Couldn't find a route object. Is your component inside a screen in a navigator?

navigation.js code example,

export default function Navigation() {
  const route = useRoute(); // show error >> Error: Couldn't find a route object. Is your component inside a screen in a navigator?
  
  return (
      <Stack.Navigator
        screenOptions={{
          headerShown: false,
        }}>
            <Stack.Screen name="HomeScreen" component={HomeScreen} />
      </Stack.Navigator>
  );
}

when I remove useRoute, the Error is gone, But I need to use useRoute or any other way to get current route name inside navigation.js file.

react-navigation react-native react-hooks navigation
1 Answers

You can pass the navigationContainerRef from the NavigationContainer to the Navigation comomponent to make the navigation object accessible.

Consider the following code snippet.

import { createNavigationContainerRef } from "@react-navigation/native"

export const navigationRef = createNavigationContainerRef()

const App = () => {
    return <NavigationContainer
              ref={navigationRef}>
                 <Navigation navigation={navigationRef} />
            </NavigationContainer>  
}
export default App

Then, inside Navigation.

export default function Navigation({ navigation }) {

  const route = navigation.current?.getCurrentRoute()
  
  return (
      <Stack.Navigator
        screenOptions={{
          headerShown: false,
        }}>
            <Stack.Screen name="HomeScreen" component={HomeScreen} />
      </Stack.Navigator>
  );
}

The current route name get then be accessed using route?.name.

Edit: As jhon antoy correctly pointed out in the comments, this does not update the current route state if we navigate to a different screen. We need to update this ourselves as follows.

export const navigationRef = createNavigationContainerRef();

const App = () => {
  const [routeName, setRouteName] = useState();

  return (
    <NavigationContainer
      ref={navigationRef}
      onReady={() => {
        setRouteName(navigationRef.getCurrentRoute().name)
      }}
      onStateChange={async () => {
        const previousRouteName = routeName;
        const currentRouteName = navigationRef.getCurrentRoute().name;
        console.log("route", currentRouteName)
        setRouteName(currentRouteName);
      }}
    >
       <Navigation routeName={routeName} />
    </NavigationContainer>
  );
}

export default App;

Inside Navigation.

export function Navigation(props) {

  const route = props.routeName

  console.log(props)

  return (
      <Stack.Navigator
        screenOptions={{
          headerShown: false,
        }}>
            <Stack.Screen name="HomeScreen" component={HomeScreen} />
      </Stack.Navigator>
  );
}

I have made a snack with some simple navigation buttons.

user_149692810
Related