Allow nested Pressables to bubble their hover state to parent pressables

[roryabraham]

Is your feature request related to a problem? Please describe. When you have a nested Pressable contained within another Pressable, the hover state of the inner Pressable cannot easily be shared with the parent Pressable. I encountered this problem when trying to make a menu that displays when an element is hovered over.

This code sandbox illustrates the problem I'm having.

Describe a solution you'd like I understand that this isn't always the desired behavior, so perhaps just adding a boolean prop to the Pressable component such as shouldBubbleHoverState, would do the trick.

Describe alternatives you've considered A temporary workaround is to use a <TouchableOpacity /> instead of a <Pressable /> for the nested element. This has some limitations, however, and would not allow the nested element to take advantage of hoverability too.

Happy to chat some more if you have ideas, need clarification, or can think of other workarounds in the meantime. Thanks!

[roryabraham]

I found a workaround that seems to work for me. Use a custom Hoverable for the wrapper and then Pressable for the children. Still think this could be a useful feature.

[nandorojo]

I'm facing the exact same issue. I'd like to use RNW's Pressable, but I suppose I'll rely on a userland solution for now.

[nandorojo]

My issue is basically this:

<Pressable testID="menu" onHoverOut={hideMenu}>
  <Pressable testID="trigger" onHoverIn={showMenu} />
  <Dropdown />
</Pressable>

Except that I want to use onHoverIn/onHoverOut from both the child and parent Pressables.

[luixo]

A friendly ping to draw attention to a problem.