CODEWITHSUNDEEP
react-nativereact-navigationreact-native-navigationreact-navigation-drawerreact-navigation-v5
Vishal Tank
Vishal Tank

Reputation: 163

Highlight Current Active Drawer menu in React navigation v5

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

Upvotes: 7

Views: 10248

Answers (3)

Ravis Farooq
Ravis Farooq

Reputation: 248

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.

Upvotes: 0

K L Cheong
K L Cheong

Reputation: 136

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.

Upvotes: 11

Asad
Asad

Reputation: 573

@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/

Upvotes: 0

Related Questions