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

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;
};

Answer 2

You Need to Used contentComponent in DrawerNavigator.

View style={[styles.screenStyle, (this.props.activeItemKey=='ScreenC') ? styles.activeBackgroundColor : null]}>
                    <Text style={[styles.screenTextStyle, (this.props.activeItemKey=='ScreenC') ? styles.selectedTextStyle : null]} onPress={this.navigateToScreen('ScreenC')}>Screen C</Text>
                </View>