Repository navigation
PanResponder not work for Android when the target View is outside the ScrollView #26082
Description
onMoveShouldSetPanResponder/onMoveShouldSetPanResponderCapture/onPanResponderTerminationRequest/onShouldBlockNativeResponder not work in scrollview's outer view.
When the finger is dragged quickly on the ScrollView, The move responder of the view is quickly snatched away by the ScrollView(onPanResponderGrant -> onShouldBlockNativeResponder return true -> onPanResponderMove -> onPanResponderTerminate)
React Native version:
React Native Environment Info:
System:
OS: Windows 7
CPU: (4) x64 Intel(R) Core(TM) i5-7500 CPU @ 3.40GHz
Memory: 6.94 GB / 15.88 GB
Binaries:
Node: 10.16.0 - F:\develop\js\node\node-v10.16.0-win-x64\node.EXE
Yarn: 1.16.0 - F:\develop\js\node\node-v10.16.0-win-x64\yarn.CMD
npm: 6.9.0 - F:\develop\js\node\node-v10.16.0-win-x64\npm.CMD
"react": "16.8.3",
"react-native": "0.59.8",
Steps To Reproduce
1.Navigate to the TestPage;
2.Quickly drag fingers on the ScrollView.
Describe what you expected to happen:
The ScrollView remains unchanged. The outer view handle move event in full, the background color of the outer View changes from light blue to blue, from blue to black and finally back to light blue.
Snack, code example, screenshot, or link to a repository:
import React, { Component } from 'react';
import { View, ScrollView, PanResponder } from 'react-native'
import { Log } from '../../common/Log';
export default class TestPage extends Component {
state = {
subBg: "lightgreen",
bg: "lightblue",
}
render() {
const _panResponder = PanResponder.create({
onStartShouldSetPanResponder: (evt, gestureState) => true,
onMoveShouldSetPanResponder: (evt, gestureState) => true,
onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
onPanResponderGrant: (evt, gestureState) => {
Log.info("---------------------------------onPanResponderGrant");
this.setState({ bg: "blue" })
},
onPanResponderMove: (evt, gestureState) => {
Log.info("---------------------------------onPanResponderMove");
this.setState({ bg: "black" })
},
onPanResponderRelease: (evt, gestureState) => {
Log.info("---------------------------------onPanResponderRelease");
this.setState({ bg: "lightblue" })
},
onPanResponderTerminationRequest: (evt, gestureState) => {
const value = false;
Log.info("---------------------------------onPanResponderTerminationRequest return " + value);
return value
},
onShouldBlockNativeResponder: (evt, gestureState) => {
const value = true;
Log.info("---------------------------------onShouldBlockNativeResponder return " + value);
return value;
},
onPanResponderTerminate: (evt, gestureState) => {
Log.info("---------------------------------onPanResponderTerminate ");
},
});
return (
<View style={{ flex: 1 }}>
<View {..._panResponder.panHandlers} style={{ flex: 1, backgroundColor: this.state.bg, paddingBottom: 100, paddingRight: 20 }}>
<ScrollView style={{ backgroundColor: this.state.subBg, height: 650, width: "100%" }}>
<View style={{ backgroundColor: "red", height: 300, width: "100%" }} />
<View style={{ backgroundColor: "pink", height: 300, width: "100%" }} />
<View style={{ backgroundColor: "red", height: 300, width: "100%" }} />
<View style={{ backgroundColor: "pink", height: 300, width: "100%" }} />
<View style={{ backgroundColor: "red", height: 300, width: "100%" }} />
<View style={{ backgroundColor: "pink", height: 300, width: "100%" }} />
</ScrollView>
</View>
</View>
);
}
}
Activity
stale commentedon Nov 14, 2019
Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.
stale commentedon Nov 21, 2019
Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.