[Android] [0.57.6] [BUG] PanResponder is not working on Android after upgrade from 0.54.2 to 0.57.6 #22493
Description
Issue report from previously closed/unresolved/incomplete issue: #22434
I have created a Circular Slider, using PanResponder, based on existing GitHub project and it was working beautifully in both Android and iOS (react-native version ^0.54.2).
PanResponder was responding to touch events for both Android and iOS when in RN 0.54.2, after upgrading to 0.57.6 it doesn't trigger any events to Android anymore but it still works fine in iOS.
I've worked around the issues with scrollviews using a toggle to switch scroll on/off while in version 0.54.2, it was affecting only iOS and this workaround resolved it.
There is a debug (console.log) in the code (slider.page.js -> enableScroll()) which writes "true" or "false" as my scroll toggles, it can be seen in console when running in iOS but not in Android.
this._panResponder = PanResponder.create({
onStartShouldSetPanResponder: (e, gs) => {return true;},
onStartShouldSetPanResponderCapture: (e, gs) => {return true;},
onMoveShouldSetPanResponder: (e, gs) => {return true;},
onMoveShouldSetPanResponderCapture: (e, gs) => {return true;},
onPanResponderStart: e => {
this.props.enableScroll(false);
return true;
},
onPanResponderMove: (e, gs) => {
this.layoutData();
let xOrigin = this.state.initialX;
let yOrigin = this.state.initialY;
let a = this.cartesianToPolar(gs.moveX - xOrigin, gs.moveY - yOrigin);
this.setState({ angle: a });
this.props.changeDuration(a);
return true;
},
onPanResponderRelease: (e, gestureState) => {
this.props.enableScroll(true);
return true;
}
});
}
render() {
let width = (this.props.dialRadius + this.props.btnRadius) * 2;
let bR = this.props.btnRadius;
let dR = this.props.dialRadius;
let startCoord = this.polarToCartesian(0);
let endCoord = this.polarToCartesian(this.state.angle);
return (
<View style={styles.container} onLayout={this.layoutData}>
<Svg
ref={ref => (this.svg = ref)}
width={width}
height={width}
fill="#f2f8fb"
>
<Circle
r={dR}
cx={width / 2}
cy={width / 2}
stroke="#cccccc"
strokeWidth={1.5}
fill="#f2f8fb"
/>
<Path
stroke={this.props.meterColor}
strokeWidth={this.props.dialWidth}
fill="#f2f8fb"
d={`M${startCoord.x} ${startCoord.y} A ${dR} ${dR} 0 ${
this.state.angle > 180 ? 1 : 0
} 1 ${endCoord.x} ${endCoord.y}`}
/>
<Text
fontSize={20}
>
{this.state.duration}
</Text>
<G x={endCoord.x - bR} y={endCoord.y - bR} >
<Circle
r={bR}
cx={bR}
cy={bR}
fill="#005b7f"
{...this._panResponder.panHandlers}
/>
</G>
</Svg>
</View>
);
}
}
I've tried:
going back to expo version (0.57.1)
tried the suggestion on issue #21749 (set collapseable=false)
Reproducible Demo
https://snack.expo.io/@wazzupex/circularslider
React Native Environment Info:
System:
OS: macOS 10.14.1
CPU: (4) x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
Memory: 2.63 GB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 10.11.0 - /usr/local/bin/node
Yarn: 1.12.3 - /usr/local/bin/yarn
npm: 6.4.1 - /usr/local/bin/npm
SDKs:
iOS SDK:
Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
IDEs:
Xcode: 10.1/10B61 - /usr/bin/xcodebuild
npmPackages:
react: ^16.6.3 => 16.6.3
react-native: https://github.com/expo/react-native/archive/sdk-31.0.0.tar.gz => 0.57.1
npmGlobalPackages:
create-react-native-app: 2.0.2
eslint-plugin-react-native: 3.4.0
react-native-cli: 2.0.1
react-native-git-upgrade: 0.2.7