how to get current routeName in react-navigation-drawer Drawer compoenent?

Question

I have created my App Navigator component with these libraries

1. react-navigation
2. react-navigation-stack
3. react-navigation-drawer and drawer is nested inside main stack.

Drawer stack

const DrawerMenu = createDrawerNavigator(
  {
    Home: {
      screen: Home
    },
    MyAccount: {
      screen: MyAccount
    }
  },
  {
    overlayColor: "rgba(0, 0, 0, 0.7)",
    gestureEnabled: false,
    initialRouteName: "Home",
    contentComponent: Drawer,
    drawerWidth: styles.drawerWidth
  }
);

const DrawerAppContainer = createAppContainer(DrawerMenu);

Main App container or Root

const routes = {
  //independent screens
  Language: {
    screen: Language,
  },
  Welcome: {
    screen: Welcome,
  },
 DetailScreen: {
    screen: DetailScreen,
  },
  Dashboard: {
    screen: DrawerAppContainer,
  },
  Login: {
    screen: Login,
  },
const routeConfig = {
  initialRouteName: "Home",
  headerMode: "none",
  navigationOption: {
    gestureEnabled: false,
  },
};

const AppNavigator = createStackNavigator(routes, routeConfig);

export default createAppContainer(AppNavigator);

In my project, I want the current rendering screen name in the drawer component so I can style route name accordingly(like color, bold fonts).

I tried getting route name with props (this.props.navigation.state.routeName), but its always showing Dashboard.

How do I get nested routeName like Home or MyAccount?

Answer 1

This is the way I made it work using version 5 of the react navigation drawer component.

In this example I am creating some screens but I want to hide some of them.

First create the navigation container.

 <NavigationContainer>
      {
        <Drawer.Navigator
          initialRouteName='Home'
          drawerContent={(props) => <DrawerContent {...props} />}
        >
          <Drawer.Screen name='Home' component={HomeScreen} />
          <Drawer.Screen
            name='RawMaterial'
            component={RawMaterial}
            options={{ drawerLabel: 'Materia Prima' }}
          />
          <Drawer.Screen
            name='RawMaterialAdd'
            component={RawMaterialAdd}
            options={{ drawerLabel: '' }}
          />
          <Drawer.Screen
            name='RawMaterialEdit'
            component={RawMaterialEdit}
            options={{ drawerLabel: '' }}
          />
        </Drawer.Navigator>
      }
    </NavigationContainer>

Then you will need to created a custom drawer, for the sake of the example is DrawerContent.

import React from 'react';
import { View, StyleSheet } from 'react-native';
import { DrawerContentScrollView, DrawerItem } from '@react-navigation/drawer';

import { Icon } from 'native-base';
export function DrawerContent(props) {
  return (
    <View style={{ flex: 1 }}>
      <DrawerContentScrollView {...props}>
        <View>
          <DrawerItem
            icon={({ color, size }) => <Icon type='AntDesign' name='home' />}
            label='Home'
            focused={getActiveRouteState(
              props.state.routes,
              props.state.index,
              'Home'
            )}
            onPress={() => {
              props.navigation.navigate('Home');
            }}
          />
          <DrawerItem
            icon={({ color, size }) => (
              <Icon type='AntDesign' name='shoppingcart' />
            )}
            focused={getActiveRouteState(
              props.state.routes,
              props.state.index,
              'RawMaterial'
            )}
            label='Materia Prima'
            onPress={() => {
              props.navigation.navigate('RawMaterial');
            }}
          />
        </View>
      </DrawerContentScrollView>
    </View>
  );
}

const getActiveRouteState = function (routes, index, name) {
  return routes[index].name.toLowerCase().indexOf(name.toLowerCase()) >= 0;
};