PanResponder is not working on Android after upgrade from 0.54.2 to 0.57.6

[wazzupex]

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).

Recently I was facing some unrelated issues which required me to upgrade to React-Native 0.57.6 and after that the PanResponder is no longer working on Android but continues fine in iOS.

Follows my code, any help is more than welcome.

PS.: I was having issues with it being in a ScrollView on iOS. I have fixed it add a toggle flag to disable the scroll once the user starts the panResponder. It was working in previous version and is not related to the existing issue.

 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}
            // style={{top: -65}}
          >
            {this.state.duration}
          </Text>

          
          <G x={endCoord.x - bR} y={endCoord.y - bR} >
          {/* <View {...this._panResponder.panHandlers}>  */}
            <Circle
              r={bR}
              cx={bR}
              cy={bR}
              fill="#005b7f"
              {...this._panResponder.panHandlers}
            />
            {/* </View> */}
          </G>
          
        </Svg>
      </View>
    );
  }
}

React Native Environment Info:
System:
OS: Linux 4.4 Ubuntu 18.04.1 LTS (Bionic Beaver)
CPU: (4) x64 Intel(R) Core(TM) i5-6300U CPU @ 2.40GHz
Memory: 1.29 GB / 7.89 GB
Shell: 4.4.19 - /bin/bash
Binaries:
Node: 8.10.0 -xxx
Yarn: 1.12.3 - xxx
npm: 3.5.2 - xxx
npmPackages:
react: ^16.6.3 => 16.5.0
react-native: ^0.57.6 => 0.57.1
npmGlobalPackages:
react-native-cli: 2.0.1

[bartolkaruza]

Could you be more specific about what exactly doesn't work? Are the events not firing, is something crashing? If you are able to specify that, maybe you can also provide a smaller example showing the exact issue, making it easier for us to understand what is going on.

[wazzupex]

Sure @bartolkaruza, the events are not firing, but no errors or warnings. For debugging purposes I have added a console.log on onPanResponderStart but it never comes out on Android (again, it works fine in iOS and it was working in Android before upgrade).

[bartolkaruza]

Could this be related to your particular view being collapsed by Android? Try the solution to this related issue:
#21749 (comment)

[wazzupex]

Could this be related to your particular view being collapsed by Android? Try the solution to this related issue:
#21749 (comment)

Thanks @bartolkaruza, I'm going to try setting collapsable=false but the issue mentioned is still open and doesn´t seem like a "elegant solution" but a workaround and always remembering, it was working in react-native 0.54.2.

I´m updating this thread later today with the results.

[wazzupex]

I did set the collapseable prop to false in my component view but didn't help, I've tried this in the parent view as well but no luck either.

[react-native-bot]

If you are still encountering the issue described here, please open a new issue and make sure to fill out the Issue Template when doing so.