Pressable wrapped in pointerEvents="box-none" does not work

[stianjensen]

Description

When a plain View with pointerEvents="box-none" contains a Pressable from react-native-gesture-handler, the Pressable does not receive tap events. Replacing it with React Native core's Pressable works as expected under the same parent.

The previously-merged fixes (#3925, #3927) addressed pointerEvents on nested gesture-handler Pressables, but this case — a non-gesture-handler parent using box-none — still reproduces on 2.31.1.

Expected: tapping the gesture-handler Pressable fires onPress, since box-none is supposed to let touches pass through the parent to its children.

Actual: onPress never fires on the gesture-handler Pressable (and you're able to click through to what's behind the button). The core RN Pressable in the same parent works.

Steps to reproduce

1. Wrap a gesture-handler Pressable in a <View pointerEvents="box-none">.
2. Tap the Pressable.
3. Observe that onPress does not fire.
4. Swap it for RN core Pressable under the same parent and observe it works.

A link to a Gist, an Expo Snack or a link to a repository based on this template that reproduces the bug.

https://snack.expo.dev/@stiaje-hyre/pressable-pointer-events

Gesture Handler version

2.31.1

React Native version

0.83.3

Platforms

Android

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

New Architecture (Fabric)

Build type

Release mode

Device

Real device

Device model

Samsung Galaxy (Android 15)

Acknowledgements

Yes

[m-bert]

Hi @stianjensen! Could you share more details? If you have reproduction that would be great. I've tested it on the code below and it works as expected (both alerts are visible)

import React from 'react';
import {
  Alert,
  Pressable as RNPressable,
  StyleSheet,
  Text,
  View,
} from 'react-native';
import { Pressable as GHPressable } from 'react-native-gesture-handler';

export default function EmptyExample() {
  return (
    <View style={styles.container}>
      <Text style={styles.label}>GH Pressable (broken)</Text>
      <View pointerEvents="box-none" style={styles.wrapper}>
        <GHPressable
          style={styles.button}
          onPress={() => Alert.alert('GH Pressable', 'onPress fired!')}>
          <Text style={styles.buttonText}>Tap me (GH)</Text>
        </GHPressable>
      </View>

      <Text style={[styles.label, styles.labelSpacing]}>
        RN Pressable (works)
      </Text>
      <View pointerEvents="box-none" style={styles.wrapper}>
        <RNPressable
          style={styles.button}
          onPress={() => Alert.alert('RN Pressable', 'onPress fired!')}>
          <Text style={styles.buttonText}>Tap me (RN)</Text>
        </RNPressable>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  label: {
    fontSize: 16,
    marginBottom: 8,
    fontWeight: '600',
  },
  labelSpacing: {
    marginTop: 32,
  },
  wrapper: {
    borderWidth: 2,
    borderColor: 'red',
    borderStyle: 'dashed',
    padding: 16,
  },
  button: {
    backgroundColor: '#b58df1',
    paddingHorizontal: 24,
    paddingVertical: 12,
    borderRadius: 8,
  },
  buttonText: {
    color: 'white',
    fontSize: 16,
    fontWeight: '600',
  },
});

[stianjensen]

I'm sorry, I don't know what I did wrong last time to not save and share the Expo Snack properly. Here's an updated URL with a working reproduce:
https://snack.expo.dev/@stiaje-hyre/pointer-events-reproduce-gesture-handler?platform=android

Note that the problem is only on Android.

The only difference I can see is that in my reproduce I did include a wrapping GestureHandlerRootView