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.

 
      {
         }
        >
          
          
          
          
        
      }
    

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 (
    
      
        
           }
            label='Home'
            focused={getActiveRouteState(
              props.state.routes,
              props.state.index,
              'Home'
            )}
            onPress={() => {
              props.navigation.navigate('Home');
            }}
          />
           (
              
            )}
            focused={getActiveRouteState(
              props.state.routes,
              props.state.index,
              'RawMaterial'
            )}
            label='Materia Prima'
            onPress={() => {
              props.navigation.navigate('RawMaterial');
            }}
          />
        
      
    
  );
}

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