diff --git a/src/AnimatedCircularProgress.js b/src/AnimatedCircularProgress.js index 6fcc193..0707664 100644 --- a/src/AnimatedCircularProgress.js +++ b/src/AnimatedCircularProgress.js @@ -1,5 +1,6 @@ -import React, { PropTypes } from 'react'; -import { View, Animated } from 'react-native'; +import React from 'react'; +import PropTypes from 'prop-types'; +import { View, ViewPropTypes, Animated } from 'react-native'; import CircularProgress from './CircularProgress'; const AnimatedProgress = Animated.createAnimatedComponent(CircularProgress); @@ -55,13 +56,13 @@ export default class AnimatedCircularProgress extends React.Component { } AnimatedCircularProgress.propTypes = { - style: View.propTypes.style, + style: ViewPropTypes.style, size: PropTypes.number.isRequired, fill: PropTypes.number, prefill: PropTypes.number, width: PropTypes.number.isRequired, - tintColor: PropTypes.oneOf([PropTypes.string, PropTypes.object]), - backgroundColor: PropTypes.oneOf([PropTypes.string, PropTypes.object]), + tintColor: PropTypes.oneOfType([PropTypes.string, PropTypes.object]), + backgroundColor: PropTypes.oneOfType([PropTypes.string, PropTypes.object]), tension: PropTypes.number, friction: PropTypes.number } diff --git a/src/CircularProgress.js b/src/CircularProgress.js index 1c80bed..412db83 100644 --- a/src/CircularProgress.js +++ b/src/CircularProgress.js @@ -1,5 +1,8 @@ + +import React from 'react'; +import PropTypes from 'prop-types'; import React, { PropTypes } from 'react'; -import { View, Platform, ART } from 'react-native'; +import { View, ViewPropTypes, Platform, ART } from 'react-native'; const { Surface, Shape, Path, Group } = ART; import MetricsPath from 'art/metrics/path'; @@ -8,16 +11,8 @@ export default class CircularProgress extends React.Component { circlePath(cx, cy, r, startDegree, endDegree) { let p = Path(); - if (Platform.OS === 'ios') { - p.path.push(0, cx + r, cy); - p.path.push(4, cx, cy, r, startDegree * Math.PI / 180, endDegree * Math.PI / 180, 1); - } else { - // For Android we have to resort to drawing low-level Path primitives, as ART does not support - // arbitrary circle segments. It also does not support strokeDash. - // Furthermore, the ART implementation seems to be buggy/different than the iOS one. - // MoveTo is not needed on Android - p.path.push(4, cx, cy, r, startDegree * Math.PI / 180, (startDegree - endDegree) * Math.PI / 180, 0); - } + p.path.push(0, cx + r, cy); + p.path.push(4, cx, cy, r, startDegree * Math.PI / 180, endDegree * Math.PI / 180, 1); return p; } @@ -33,10 +28,10 @@ export default class CircularProgress extends React.Component { render() { const { size, width, tintColor, backgroundColor, style, rotation, linecap, children } = this.props; - const backgroundPath = this.circlePath(size / 2, size / 2, size / 2 - width / 2, 0, 360); + const backgroundPath = this.circlePath(size / 2, size / 2, size / 2 - width / 2, 0, 360 * .9999); const fill = this.extractFill(this.props.fill); - const circlePath = this.circlePath(size / 2, size / 2, size / 2 - width / 2, 0, 360 * fill / 100); + const circlePath = this.circlePath(size / 2, size / 2, size / 2 - width / 2, 0, (360 * .9999) * fill / 100); return ( @@ -62,7 +57,7 @@ export default class CircularProgress extends React.Component { } CircularProgress.propTypes = { - style: View.propTypes.style, + style: ViewPropTypes.style, size: PropTypes.number.isRequired, fill: PropTypes.number.isRequired, width: PropTypes.number.isRequired,