Merge pull request #11 from Volinspire/refactor-centerfix

Calculate circle center when dragging starts & Update deps

package.json

@@ -37,6 +37,10 @@
   "dependencies": {
     "d3-interpolate": "^1.1.2",
     "lodash.range": "^3.2.0",
-    "react-native-svg": ">=4.3.3"
+    "react-native-svg": "^5.1.5"
+  },
+  "peerDependencies": {
+    "react-native": ">=0.40.0",
+    "react": ">=15.4.0"
   }
 }

src/CircularSlider.js

@@ -82,7 +82,7 @@ export default class CircularSlider extends PureComponent {
     this._sleepPanResponder = PanResponder.create({
       onMoveShouldSetPanResponder: (evt, gestureState) => true,
       onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
-
+      onPanResponderGrant: (evt, gestureState) => this.setCircleCenter(),
       onPanResponderMove: (evt, { moveX, moveY }) => {
         const { circleCenterX, circleCenterY } = this.state;
         const { angleLength, startAngle, onUpdate } = this.props;
@@ -107,7 +107,7 @@ export default class CircularSlider extends PureComponent {
     this._wakePanResponder = PanResponder.create({
       onMoveShouldSetPanResponder: (evt, gestureState) => true,
       onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
-
+      onPanResponderGrant: (evt, gestureState) => this.setCircleCenter(),
       onPanResponderMove: (evt, { moveX, moveY }) => {
         const { circleCenterX, circleCenterY } = this.state;
         const { angleLength, startAngle, onUpdate } = this.props;
@@ -129,7 +129,7 @@ export default class CircularSlider extends PureComponent {
   }
 
   setCircleCenter = () => {
-    this._circle.measure((x, y, w, h, px , py) => {
+    this._circle.measure((x, y, w, h, px, py) => {
       const halfOfContainer = this.getContainerWidth() / 2;
       this.setState({ circleCenterX: px + halfOfContainer, circleCenterY: py + halfOfContainer });
     });