Fix hover support to web for Drawer.Item component

[ThomasCedrini]

Current behaviour

The Drawer.Item component does not render the hover state in web applications.

Expected behaviour

Render a hover state as it was added in this PR https://github.com/callstack/react-native-paper/pull/3909 for the Drawer.Item component

How to reproduce?

Code example https://snack.expo.dev/@maasto/drawer-item-hover-repro

Preview

In the screenshot below, the pointer is on the second item and the background does not darken as expected.

What have you tried so far?

The component uses the TouchableRipple component, which behaves as expected for the hover state. However, it overrides the `backgroundColor' style property:

  const backgroundColor = active
    ? isV3
      ? theme.colors.secondaryContainer
      : color(theme.colors.primary).alpha(0.12).rgb().string()
    : 'transparent';

When I remove this backgroundColor from the style props in local, it works as expected.

Your Environment

software	version
react-native	0.73.2
react-native-paper	5.12.3
expo sdk	50.0.3

[seb-zabielski]

Hey @ThomasCedrini, I've created pull request #4440 with the fix.

[ThomasCedrini]

Hey @seb-zabielski ,

Thanks for the PR ! Nice though of passing backgroundColor from transparent to undefined