Pan gesture with manual activation disables responding of any touchable in the app

[antonkarytski]

Description

When using Pan gestures (this issue likely occurs with other gestures as well, but has only been tested with Pan) with manualActivation set to true, if a touch cancellation is triggered by the device (as can happen with palm rejection on an iPad), all touchable elements in the app become disabled until the next interaction with a gesture handler.

Link to video

Steps to reproduce

const App = () => {
  const pan = Gesture.Pan().manualActivation(true)

  return (
    <GestureHandlerRootView style={exampleStyles.root}>
      <TouchableHighlight
        onPress={() => console.log(2)}
        underlayColor={'red'}
        style={[exampleStyles.button, { backgroundColor: '#21da1a' }]}
      >
        <Text>OUTSIDE DETECTOR</Text>
      </TouchableHighlight>
      <GestureDetector gesture={pan}>
        <View style={exampleStyles.area} />
      </GestureDetector>
    </GestureHandlerRootView>
  );
}

const exampleStyles = StyleSheet.create({
  root: {
    flex: 1,
  },
  area: { flex: 1, backgroundColor: '#5e5e5e', marginTop: 100 },
  button: {
    width: 100,
    height: 100,
    backgroundColor: '#21da1a',
    zIndex: 100,
    position: 'absolute',
  },
});

2. Call palm rejection on device
3. Try to press button

Snack or a link to a repository

https://snack.expo.dev/eAEHgFwLcHz1WI4yBQlRt

Gesture Handler version

2.15.0

React Native version

0.73.6

Platforms

iOS

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

None

Build type

Debug mode

Device

Real device

Device model

iPad Pro (os 17.4.1)

Acknowledgements

Yes

[latekvo]

Hi, thank you for reporting this issue.

I updated the repro you provided to match the video you provided more closely.

Please let me know if you have any comments to add to it:

import React from 'react-native';
import { TouchableHighlight, View, Text, StyleSheet } from 'react-native';
import {
  Gesture,
  GestureHandlerRootView,
  GestureDetector,
} from 'react-native-gesture-handler';

export default function EmptyExample() {
  const pan = Gesture.Pan().manualActivation(true);

  return (
    <GestureHandlerRootView style={exampleStyles.root}>
      <TouchableHighlight
        onPress={() => console.log(2)}
        underlayColor={'red'}
        style={[exampleStyles.button, { backgroundColor: '#21da1a' }]}>
        <Text>OUTSIDE DETECTOR</Text>
      </TouchableHighlight>
      <GestureDetector gesture={pan}>
        <View style={exampleStyles.area}>
          <TouchableHighlight
            onPress={() => console.log(2)}
            underlayColor={'red'}
            style={[exampleStyles.button, { backgroundColor: '#dad41a' }]}>
            <Text>INSIDE DETECTOR</Text>
          </TouchableHighlight>
        </View>
      </GestureDetector>
    </GestureHandlerRootView>
  );
}

const exampleStyles = StyleSheet.create({
  root: {
    flex: 1,
  },
  area: { flex: 1, backgroundColor: '#5e5e5e', marginTop: 100 },
  button: {
    width: 100,
    height: 100,
    zIndex: 100,
    position: 'absolute',
  },
});