Slider doesn't accurately react to touch. about react-native-circular-slider HOT 5 OPEN

2 years too late, but thanks for the inspiration @nuttylord! The onLayout method on View is triggered when the key changes, so I updated changed the following element in CircularSlider.js to:

<View key={scrollY} style={...} onLayout={this.onLayout}>

I also added a PropType of number for scrollY, which I'm passing directly into the <CircularSlider scrollY={...} component where I'm calling it.

Finally, I'm using onScroll on the ScrollView to update the state with the current y-value, thus making sure that the centre of the circle is always updated correctly!

Using onScroll is a bit problematic if you want the exact scroll location as discussed on StackOverflow, but I'm happy with the results with onScroll

from react-native-circular-slider.

i noticed that in the setCircleCenter() function the py value was what wasnt being updated properly but that px was set correctly so i made py to be a function of px as shown in my below snippet.

For my use case this works, maybe you can find something similar.

A suggestion would be to find some way to call this.setCircleCenter(); after all rendering is complete, maybe onResponderGrant, but this would be a state change and cause rendering.

  onLayout = () => {
    this.setCircleCenter();
  }

  setCircleCenter() {
    this._circle.measure((x, y, w, h, px , py) => {
      const halfOfContainer = this.getContainerWidth() / 2;

      this.setState({ circleCenterX: px + halfOfContainer, circleCenterY: px - (px/2.4) + halfOfContainer }); 
    });
  }

from react-native-circular-slider.

I found solution for my case too. I put circular slider in horizontal ScrollView, so px was wrong value, just px subtracts total previous items width, and it works fine 😁

from react-native-circular-slider.

I have figured out that the issue is caused by the sliders initial containerWidth being called asynchronously at the same time as the rendering of the SVG elements. the setState() on line 134 of circularSlider.js (inside the setCircleCenter() function) needs to complete before the component is mounted.

from react-native-circular-slider.

do you have any solutions?

from react-native-circular-slider.