archive-gh-me/react-native-circular-progress
1
0
Fork 0
mirror of https://github.com/bartgryszko/react-native-circular-progress.git synced 2026-01-18 16:13:10 +00:00
Code Issues Projects Releases Wiki Activity

Merge branch 'master' into master

Browse Source
This commit is contained in:
Markus Lindqvist 2017-11-20 13:09:24 +02:00 committed by GitHub
commit 2065f4c0bb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 15 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/AnimatedCircularProgress.js
View File

@ -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
}

23
src/CircularProgress.js
View File

@ -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 (
<View style={style}>
@ -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,