onPanResponderTerminationRequest isvalid

[cscty]

Description

Two elements of the same level, A and B, touch A first and then move to B. The responder is still A. A's onPanResponderTerminationRequest event has not been executed, and B's onPanResponderMove event has not been executed either

version
react-native: 0.76.9

code:
`import React, { useRef, useState } from "react";
import { View, StyleSheet, PanResponder, Text, TouchableOpacity } from "react-native";

const App = () => {
const [isInView1, setIsInView1] = useState(true);
const panResponder1 = React.useRef(
PanResponder.create({
onStartShouldSetPanResponder: (evt, gestureState) => {
console.log('onStartShouldSetPanResponder p1')
return true
},
onMoveShouldSetPanResponder: (evt, gestureState) => {
console.log('onMoveShouldSetPanResponder p1')
return true
},
onPanResponderGrant: (evt, gestureState) => {
console.log('onPanResponderGrant p1')
},
onPanResponderMove: (evt, gestureState) => {
console.log('move p1')
},
onPanResponderRelease: (evt, gestureState) => {
console.log('onPanResponderRelease p1')
},
onPanResponderTerminationRequest: (evt, gestureState) => {
console.log('onPanResponderTerminationRequest p1')
return true
},

  onPanResponderTerminate: (evt, gestureState) => {
    console.log('onPanResponderTerminate p1')
  },
}),

).current;

const panResponder2 = React.useRef(
PanResponder.create({
onStartShouldSetPanResponder: (evt, gestureState) => {
console.log('onStartShouldSetPanResponder p2')
return true
},
onMoveShouldSetPanResponder: (evt, gestureState) => {
console.log('onMoveShouldSetPanResponder p2')
return true
},
onPanResponderGrant: (evt, gestureState) => {
console.log('onPanResponderGrant p2')
},
onPanResponderMove: (evt, gestureState) => {
console.log('move p2')
},
onPanResponderRelease: (evt, gestureState) => {
console.log('onPanResponderRelease p2')
},
onPanResponderTerminationRequest: (evt, gestureState) => {
console.log('onPanResponderTerminationRequest p2')
return true
},

  onPanResponderTerminate: (evt, gestureState) => {
    console.log('onPanResponderTerminate p2')
  },
}),

).current;

const view1Ref = useRef(null);
const view2Ref = useRef(null);

return (


<View
style={[styles.box, isInView1 ? styles.activeBox : null]}
{...panResponder1.panHandlers}
/>


<View
style={[styles.box, !isInView1 ? styles.activeBox : null]}
{...panResponder2.panHandlers}
/>


);
};

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'row',
gap: 20,
},
box: {
width: 100,
height: 100,
backgroundColor: 'lightblue',
justifyContent: 'center',
alignItems: 'center',
borderRadius: 10,
},
activeBox: {
backgroundColor: 'lightgreen',
},
});

export default App;`

Steps to reproduce

Two elements of the same level, A and B, touch A first and then move to B. The responder is still A. A's onPanResponderTerminationRequest event has not been executed, and B's onPanResponderMove event has not been executed either

version
react-native: 0.76.9

code:
`import React, { useRef, useState } from "react";
import { View, StyleSheet, PanResponder, Text, TouchableOpacity } from "react-native";

const App = () => {
const [isInView1, setIsInView1] = useState(true);
const panResponder1 = React.useRef(
PanResponder.create({
onStartShouldSetPanResponder: (evt, gestureState) => {
console.log('onStartShouldSetPanResponder p1')
return true
},
onMoveShouldSetPanResponder: (evt, gestureState) => {
console.log('onMoveShouldSetPanResponder p1')
return true
},
onPanResponderGrant: (evt, gestureState) => {
console.log('onPanResponderGrant p1')
},
onPanResponderMove: (evt, gestureState) => {
console.log('move p1')
},
onPanResponderRelease: (evt, gestureState) => {
console.log('onPanResponderRelease p1')
},
onPanResponderTerminationRequest: (evt, gestureState) => {
console.log('onPanResponderTerminationRequest p1')
return true
},

  onPanResponderTerminate: (evt, gestureState) => {
    console.log('onPanResponderTerminate p1')
  },
}),

).current;

const panResponder2 = React.useRef(
PanResponder.create({
onStartShouldSetPanResponder: (evt, gestureState) => {
console.log('onStartShouldSetPanResponder p2')
return true
},
onMoveShouldSetPanResponder: (evt, gestureState) => {
console.log('onMoveShouldSetPanResponder p2')
return true
},
onPanResponderGrant: (evt, gestureState) => {
console.log('onPanResponderGrant p2')
},
onPanResponderMove: (evt, gestureState) => {
console.log('move p2')
},
onPanResponderRelease: (evt, gestureState) => {
console.log('onPanResponderRelease p2')
},
onPanResponderTerminationRequest: (evt, gestureState) => {
console.log('onPanResponderTerminationRequest p2')
return true
},

  onPanResponderTerminate: (evt, gestureState) => {
    console.log('onPanResponderTerminate p2')
  },
}),

).current;

const view1Ref = useRef(null);
const view2Ref = useRef(null);

return (


<View
style={[styles.box, isInView1 ? styles.activeBox : null]}
{...panResponder1.panHandlers}
/>


<View
style={[styles.box, !isInView1 ? styles.activeBox : null]}
{...panResponder2.panHandlers}
/>


);
};

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'row',
gap: 20,
},
box: {
width: 100,
height: 100,
backgroundColor: 'lightblue',
justifyContent: 'center',
alignItems: 'center',
borderRadius: 10,
},
activeBox: {
backgroundColor: 'lightgreen',
},
});

export default App;`

React Native Version

0.76.9

Affected Platforms

Runtime - iOS, Other (please specify)

Output of npx @react-native-community/cli info

ios simulator

Stacktrace or Logs

1

MANDATORY Reproducer

1

Screenshots and Videos

No response

[react-native-bot]

Warning

Unsupported version: It looks like your issue or the example you provided uses an unsupported version of React Native.

Due to the number of issues we receive, we're currently only accepting new issues against one of the supported versions. Please upgrade to latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If you cannot upgrade, please open your issue on StackOverflow to get further community support.

[react-native-bot]

Warning

Unsupported version: It looks like your issue or the example you provided uses an unsupported version of React Native.

Due to the number of issues we receive, we're currently only accepting new issues against one of the supported versions. Please upgrade to latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If you cannot upgrade, please open your issue on StackOverflow to get further community support.

[react-native-bot]

Warning

Missing reproducer: We could not detect a reproducible example in your issue report. Reproducers are mandatory and we can accept only one of those as a valid reproducer:

• For majority of bugs: send us a Pull Request with the RNTesterPlayground.js edited to reproduce your bug.
• If your bug is UI related: a Snack
• If your bug is build/upgrade related: a project using our Reproducer Template

You can read more about about it on our website: How to report a bug.