Drawer item background changing to grey when clicking/long click - React Native Navigation - Drawer Navigator Options

Question

I am working on an app in react-native using react-navigation for navigation purposes. I was learning to use navigation drawer from react-navigation, when I stumbled across an issue here. Whenever I was clicking/long clicking on a drawer item,the background of the item first changed to grey color before changing to activeColor (which I already defined in the options). the grey color looks bad. How to remove or change that ?

This is when I am trying to switch from Home to Notifications by clicking on Notifications item.

I am sharing the code below :

<Drawer.Navigator
  screenOptions={{
    headerPressColor: Colors['blue'],
    headerShadowVisible: true,
    drawerActiveBackgroundColor: Colors['primary'],
    drawerActiveTintColor: '#fff',
    drawerInactiveTintColor: '#333',
    drawerLabelStyle: {
      marginLeft: -20,
      fontFamily: 'Poppins-Regular',
      fontSize: 15,
    },
    itemStyle: { flex: 1, marginVertical: 5 },
  }}
  // Here we are setting our custom sidebar menu
  drawerContent={(props) => <CustomSidebarMenu {...props} />}
>

Answer 1

For some reason the DrawerItem pressColor prop isn't exposed as top-level Drawer configuration. You can make a custom DrawerItemList component with a patch that adds an androidPressColor prop:

import {
  DrawerContentOptions,
  DrawerItem,
} from '@react-navigation/drawer'
import {
  CommonActions,
  DrawerActions,
  DrawerNavigationState,
  ParamListBase,
  useLinkBuilder,
} from '@react-navigation/native'
import * as React from 'react'

type Props = Omit<DrawerContentOptions, 'contentContainerStyle' | 'style'> & {
  state: DrawerNavigationState<ParamListBase>
  navigation: any
  descriptors: any
  androidPressColor?: string
}

/**
 * Patch of the original DrawerItemList to allow overriding
 * pressColor on Android
 */
export default function DrawerItemList({
  state,
  navigation,
  descriptors,
  activeTintColor,
  inactiveTintColor,
  activeBackgroundColor,
  inactiveBackgroundColor,
  itemStyle,
  labelStyle,
  androidPressColor
}: Props) {
  const buildLink = useLinkBuilder()

  return (state.routes.map((route, i) => {
    const focused = i === state.index
    const { title, drawerLabel, drawerIcon } = descriptors[route.key].options

    return (
      <DrawerItem
        key={route.key}
        label={
          drawerLabel !== undefined
            ? drawerLabel
            : title !== undefined
              ? title
              : route.name
        }
        icon={drawerIcon}
        focused={focused}
        activeTintColor={activeTintColor}
        inactiveTintColor={inactiveTintColor}
        activeBackgroundColor={activeBackgroundColor}
        inactiveBackgroundColor={inactiveBackgroundColor}
        pressColor={androidPressColor}
        labelStyle={labelStyle}
        style={itemStyle}
        to={buildLink(route.name, route.params)}
        onPress={() => {
          navigation.dispatch({
            ...(focused
              ? DrawerActions.closeDrawer()
              : CommonActions.navigate(route.name)),
            target: state.key,
          })
        }}
      />
    )
  }) as React.ReactNode) as React.ReactElement
}

Finally, you'll need to render your own drawer content:

import {
  createDrawerNavigator,
  DrawerContentScrollView
} from '@react-navigation/drawer'

const Drawer = createDrawerNavigator()

<Drawer.Navigator
  drawerContent={props => (
    <DrawerContentScrollView>
      <DrawerItemList
        androidPressColor="rgba(255, 255, 255, 0.5)" // Set to your color of choice
        {...props}
      />
    </DrawerContentScrollView>
  )}
>