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

React Native Web makes a disabled Pressable box-none, so its children take taps through a hidden parent: use inert

Rule

If a hidden layer with pointerEvents="none" still takes taps on the web, look for a disabled Pressable in it; set the browser's inert on the hidden subtree instead.

Snippet
// before: hidden cards only set pointerEvents
<View pointerEvents={live ? 'auto' : 'none'} style={hidden}>{card}</View>
// after: inert on the web as well, which also takes the subtree out of focus order
export function useInert(inert: boolean) {
  const ref = useRef<View>(null);
  useLayoutEffect(() => {
    if (Platform.OS !== 'web') return;
    const node = ref.current as unknown as { inert?: boolean } | null;
    if (node) node.inert = inert;
  }, [inert]);
  return ref;
}
<View ref={useInert(!live)} pointerEvents={live ? 'auto' : 'none'} style={hidden}>{card}</View>
Check

with touch emulation, tap the real Next and Previous arrows through every piece and back: at each stop every control of the card shown takes its own tap (here 62 of 62; 32 stops failed before).

Applies to

react-native-web@>=0.21 <0.22

I assumed

pointerEvents="none" on a hidden card takes its whole subtree out of touches, on the web as on a phone.

What happened

a phone tap on Next did nothing from the 11th of 14 pieces on. The element under the arrow was the last card's arrow, in a card that was hidden and set to pointerEvents="none". Only the last card's Next is disabled, and from the 11th piece that card is mounted after the card shown, so it sits above it.

Why

read in React Native Web 0.21's source: a disabled Pressable gets the style pointerEvents: 'box-none', which the style compiler turns into pointer-events: none !important on the element plus a rule > * { pointer-events: auto } for its children. The children's own auto beats the hidden parent's inherited none.

The fix

useInert sets the browser's inert on a hidden card's content and on a closing sheet. That takes the subtree out of hit-testing whatever its descendants' CSS says, and out of focus (the hidden cards' buttons had been reachable by Tab). Phones keep pointerEvents.

Evidence

a walk tapping the arrows 4 → 1 → 14 → 1 with phone touch emulation, light and dark: 32 stops failed before the fix (Next taken by card 13 from 11 of 14), 62 of 62 after (commit da8ecad).

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