Multiple instances on same screen don't work properly about react-native-circle-slider

[joostslijkoort]

So i came up with a solution which works for me: i calculate the center of the circle, instead of manually supplying values or resort to the default (center of the device screen).

In CircleSlider.js i edited:

componentWillMount() {
    let xCenter, yCenter;

    this._panResponder = PanResponder.create({
      onStartShouldSetPanResponder: (e,gs) => true,
      onStartShouldSetPanResponderCapture: (e,gs) => true,
      onMoveShouldSetPanResponder: (e,gs) => true,
      onMoveShouldSetPanResponderCapture: (e,gs) => true,
      onPanResponderGrant: (e,gs) => {
        this.refs.circleslider.measure( (fx, fy, width, height, px, py) => {
          xCenter = px + (width/2);
          yCenter = py + (height/2);
        });
      },
      onPanResponderMove: (e,gs) => {
        let xOrigin = xCenter - (this.props.dialRadius + this.props.btnRadius);
        let yOrigin = yCenter - (this.props.dialRadius + this.props.btnRadius);
        let a = this.cartesianToPolar(gs.moveX-xOrigin, gs.moveY-yOrigin);
        this.setState({angle: a});
      }
    });
  }

This works great for me. Even with multiple instances in a ScrollView.

I can make a pull request if you'd like.

[raymondchooi]

Hey, thanks for coming up with this option! The x/y center can be changed through props with a default of the screen center. This can be changed depending on your use or the user experience you are going for.

I'll keep this out of the slider for now to keep it for more general use but can confirm that this method does work for multiple instances.