search

callstack / react-native-paper

Material Design for React Native (Android & iOS)
https://reactnativepaper.com
MIT License
12.49k stars 2.05k forks source link

Fix hover support to web for Drawer.Item component #4435

Open ThomasCedrini opened 2 weeks ago

ThomasCedrini commented 2 weeks ago

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. image

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 commented 1 week ago

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

ThomasCedrini commented 1 week ago

Hey @seb-zabielski ,

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