Highlight Current Active Drawer menu in React navigation v5

Question

I have created a custom drawer navigator using react navigation version: 5.X, But the current active tab is not getting highlighted in custom drawer menu.

1. I have added 'activeTintColor' in DrawerItem element, but it's not getting applied to active item.
2. I have also added activeTintColor in drawerContentOptions. But is not getting applied either. Is their any way to use this common options in custom drawer component ?
3. I have used 'icon' in DrawerItem element, where I have added the default props (color, focused, size) as per the react navigation document. And due to this, color of icons are 'gray' (may be default behavior). How can I change this default props values ?
4. default prop 'focused' in 'icon' is also not working. icons are not getting changed for selected tab.

Please find the below code images. And let me know in case I have made any mistake.

Navigator Code :

Custom Drawer Component :

Current Active Tab : Home

Answer 1

You can use DrawerItemList to display the Drawer.Screen defined in Drawer.Navigator, as below:-

1) Define your Drawer Navigator:-

<Drawer.Navigator drawerContentOptions={{ activeBackgroundColor: '#5cbbff', activeTintColor: '#ffffff' }} drawerContent={props => <CustomDrawerContent {...props} />}>
<Drawer.Screen name="Home" component={HomeScreen} options={{
        drawerIcon: config => <Icon
            size={23}
            name={Platform.OS === 'android' ? 'md-list' : 'ios-list'}></Icon>
    }} />

/>

2) In CustomDrawerContent function:-

<DrawerContentScrollView {...props} >
----- your custom header ----
<DrawerItemList {...props} />
----- add other custom components, if any ----
</DrawerContentScrollView>

That solves the issue for me.