android PanResponder not work with view which not have backgroundColor #21749
Description
Same issue as #1889
React Native Environment Info:
System:
OS: Windows 10
CPU: x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
Memory: 4.52 GB / 15.86 GB
Binaries:
Yarn: 1.5.1 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 6.2.0 - C:\Program Files\nodejs\npm.CMD
IDEs:
Android Studio: Version 3.2.0.0 AI-181.5540.7.32.5014246
"react": "16.5.0",
"react-native": "0.57.1",
here is my code :
import React, { Component } from 'react';
import { StyleSheet, Text, View, PanResponder, ScrollView } from 'react-native';
export default class Test extends Component {
constructor(props) {
super(props)
this.state = {
infoLocation: "infoLocation",
infoPage: "infoPage",
infoTarget: "infoTarget",
infoLocationMove: "infoLocationMove",
infoPageMove: "infoPageMove",
infoTargetMove: "infoTargetMove",
};
this._panResponder = PanResponder.create({
// Ask to be the responder:
onStartShouldSetPanResponder: (evt, gestureState) => true,
onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
onMoveShouldSetPanResponder: (evt, gestureState) => true,
onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
onPanResponderGrant: (evt, gestureState) => {
// The gesture has started. Show visual feedback so the user knows
// what is happening!
const infoLocation =`infoLocation X:${evt.nativeEvent.locationX}, Y:${evt.nativeEvent.locationY}`
const infoPage = `infoPage X:${evt.nativeEvent.pageX}, Y:${evt.nativeEvent.pageY}`
const infoTarget = `infoTarget ${evt.nativeEvent.target}`
this.setState({ infoLocation, infoPage, infoTarget });
// gestureState.d{x,y} will be set to zero now
},
onPanResponderMove: (evt, gestureState) => {
// The most recent move distance is gestureState.move{X,Y}
const infoLocationMove = `infoLocationMove X:${evt.nativeEvent.locationX}, Y:${evt.nativeEvent.locationY}`
const infoPageMove = `infoPageMove X:${evt.nativeEvent.pageX}, Y:${evt.nativeEvent.pageY}`
const infoTargetMove = `infoTargetMove ${evt.nativeEvent.target}`
this.setState({ infoLocationMove, infoPageMove, infoTargetMove });
// The accumulated gesture distance since becoming responder is
// gestureState.d{x,y}
},
onPanResponderTerminationRequest: (evt, gestureState) => true,
onPanResponderRelease: (evt, gestureState) => {
// The user has released all touches while this view is the
// responder. This typically means a gesture has succeeded
},
onPanResponderTerminate: (evt, gestureState) => {
// Another component has become the responder, so this gesture
// should be cancelled
},
// onShouldBlockNativeResponder: (evt, gestureState) => {
// // Returns whether this component should block native components from becoming the JS
// // responder. Returns true by default. Is currently only supported on android.
// return true;
// },
});
}
render() {
return (
<View style={styles.container} {...this._panResponder.panHandlers}>
test
{this.state.infoLocation}
{this.state.infoPage}
{this.state.infoTarget}
{this.state.infoLocationMove}
{this.state.infoPageMove}
{this.state.infoTargetMove}
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
dayContainer: {
display: 'flex',
flexDirection: "row",
alignItems: "stretch",
alignContent: 'stretch',
justifyContent: 'center',
height: 50,
// backgroundColor: 'transparent', ------>>>> if you remove the comment it will work when your click near the text 'test' and not only on the text component.
},
halfText: {
color: 'black',
alignSelf: 'center',
},
containerInfo: {
flex: 1,
},
infoText: {
color: 'black',
alignSelf: 'center',
},
});
Hope it helps :)