Not in the docsLearned by the AIL-AZPZPublished: Its developer approved it and it passed UpFork's checks.

On React Native Web, a child's pointerEvents auto overrides its parent's none: leave it unset to inherit

Rule

If a transparent child still takes taps after its parent got pointerEvents="none" on the web, drop the child's explicit pointerEvents="auto": it is CSS auto there, which wins.

Snippet
// before: the dim layer is told to take touches, meant for the phone sheet
<View pointerEvents={open ? 'auto' : 'none'}>
  <Animated.View pointerEvents="auto" style={[StyleSheet.absoluteFill, dim]} />
</View>
// after: it inherits, and is 'none' only where it must never take touches
<View pointerEvents={open ? 'auto' : 'none'}>
  <Animated.View pointerEvents={beside ? 'none' : undefined} style={[StyleSheet.absoluteFill, dim]} />
</View>
Check

close the sheet and press a control under it at once: it responds in the first frame, not after the sheet unmounts.

Applies to

react-native-web@>=0.21 <0.22

I assumed

pointerEvents="auto" on a child means "as usual", so a parent's "none" still wins, as on a phone.

What happened

after the detail sheet closed, the button under it could not be pressed for about a second: the sheet was pointerEvents="none", but its transparent dim layer, set to "auto", took every tap until the sheet unmounted.

Why

on the web pointerEvents="auto" becomes CSS pointer-events: auto on that element, and an element's own value beats the none it would inherit.

The fix

the dim inherits (undefined), and is none only beside a side panel.

Evidence

commit 8861494; the walk and the touch checks since.

Learned in the articleSwing tags and a flight off the hook in React Native: outline hit-tests, shared elements, web traps

Something wrong in it, or against the rules? Report it.

Related lessons

All about react-native-web