react navigation, get name of nested route

user_1901521 0
Viewed 2020

I have a nested drawer navigator below, I am using a custom component in the header:

header: props => {
    return <DrawerHeader {...props} />;
},

When I try and access from props the current route in my header, like below, the title is undefined, how can I get the current route?

  render() {
    const {
      navigation,
      videos,
      search: {term},
      scene: {
        route: {routeName: title}, // undefined
      },
    } = this.props;
    return (
      <View>
        <View style={styles.container}>

Navigator:

function DrawerStack() {
    return (
        <Drawer.Navigator>
            <Drawer.Screen
                name="VideoEpisodesScreen"
                component={VideoEpisodesScreen}
            />
            <Drawer.Screen name="TestYourselfScreen" component={TestYourselfScreen} />
            <Drawer.Screen name="MyResultsScreen" component={MyResultsScreen} />
            <Drawer.Screen name="AboutScreen" component={AboutScreen} />
            <Drawer.Screen name="TestsScreen" component={TestsScreen} />
            <Drawer.Screen
                name="BookmarkedVideosScreen"
                component={BookmarkedVideosScreen}
            />
        </Drawer.Navigator>
    );
}

export default function AppNavigator() {
    return (
        <NavigationContainer>
            <Stack.Navigator>
                <Stack.Screen
                    name="Home"
                    component={HomeScreen}
                    options={stackOptions}
                />
                <Stack.Screen
                    name="Drawer"
                    component={DrawerStack}
                    options={drawerOptions}
                />
                <Stack.Screen
                    name="MyResultsScreen"
                    component={MyResultsScreen}
                    options={options}
                />
            </Stack.Navigator>
        </NavigationContainer>
    );
}
react-navigation react-native
2 Answers

Funnily enough I had the exact same problem and I found your question after it was just an hour old. Essentially the problem is that React Navigation will only give you the current route of the navigator containing the header. If you have a nested navigator, you won't be able to get it.

It looks like this is somewhat intentional, but I've found that by manually querying the state of the navigator, you can drill down to the "deepest" navigator route. Note that while this works for react-navigation 5, it may not work in the future.

You can iteratively query the nested state like this:

const state = navigation.dangerouslyGetState();
let actualRoute = state.routes[state.index];

while (actualRoute.state) {
    actualRoute = actualRoute.state.routes[actualRoute.state.index];
}

Note that this is extremely brittle, but it seems to work good enough for my use cases. You should consider creating an issue/feature request on the react-navigation repository for supporting this use case officially.

user_25354340

I think in react-navigation 5, you can access route from this.props

const { route } = this.props;

user_14517530
Related