7

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 :

enter image description here

Custom Drawer Component :

enter image description here

Current Active Tab : Home

enter image description here

Vishal Tank
  • 153
  • 2
  • 7
  • 1
    Please checkout the answer here: https://stackoverflow.com/questions/59005239/how-to-get-current-routename-in-react-navigation-drawer-drawer-compoenent/61329656#61329656 – Sanchitos Apr 21 '20 at 20:01

3 Answers3

11

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.

K L Cheong
  • 136
  • 6
0

@Vishal Tank add your styling in js file where your class function is define like that

class Home extends Component 
{
....
static navigationOptions = 
  {
    labelStyle: {
      fontFamily: 'SomeFont',
      color: 'white',
      fontSize:24,
      paddingLeft:8
    },
    drawerLabel: 'Home',
    drawerIcon: ({tintColor}) =>
    (
      <Icon name="home" paddingLeft={8} color={tintColor} width={30}  size={24} style={{color:tintColor}}/>

    )
  };

........

render()
{
return(
...........
);
};
};

here is the link, example give on it https://reactnavigation.org/docs/drawer-based-navigation/

Asad
  • 563
  • 3
  • 16
  • Thanks for response.Yes, I can do this ... But this way I have to add the same code in every new screen I create. I want to make it centralized, So that I just have to make one change for any new changes in future. There should be same way to use or pass contentOptions in custom drawer. – Vishal Tank Mar 12 '20 at 16:17
0

I used the custom focus i.e const focused = props.state.index; and used the map and style prop accordingly as activeTintColor,focused prop of that element was only working with the DrawerItemList only.

Ravis Farooq
  • 168
  • 10