diff --git a/Circle.js b/Circle.js index 71b9b44..e71a5a5 100644 --- a/Circle.js +++ b/Circle.js @@ -54,7 +54,7 @@ export class ProgressCircle extends Component { showsText: false, size: 40, thickness: 3, - endAngle: 0.9, + endAngle: 1, allowFontScaling: true, }; @@ -95,6 +95,7 @@ export class ProgressCircle extends Component { textStyle, thickness, unfilledColor, + unfilledStrokeCap, endAngle, allowFontScaling, ...restProps @@ -114,8 +115,8 @@ export class ProgressCircle extends Component { const Shape = animated ? AnimatedArc : Arc; const progressValue = animated ? this.progressValue : progress; const angle = animated - ? Animated.multiply(progress, CIRCLE) - : progress * CIRCLE; + ? Animated.multiply(progress, CIRCLE * endAngle) + : progress * CIRCLE * endAngle; return ( @@ -144,9 +145,10 @@ export class ProgressCircle extends Component { radius={radius} offset={offset} startAngle={angle} - endAngle={CIRCLE} + endAngle={CIRCLE * endAngle} direction={direction} stroke={unfilledColor} + strokeCap={unfilledStrokeCap} strokeWidth={thickness} /> ) : ( diff --git a/README.md b/README.md index 7e2281b..0a89f3a 100644 --- a/README.md +++ b/README.md @@ -58,7 +58,7 @@ All of the props under _Properties_ in addition to the following: | Prop | Description | Default | | -------------------------- | ---------------------------------------------------------------------------------------------------------------------------- | ------------------ | | **`size`** | Diameter of the circle. | `40` | -| **`endAngle`** | Determines the endAngle of the circle. A number between `0` and `1`. The final endAngle would be the number multiplied by 2π | `0.9` | +| **`endAngle`** | Determines the endAngle of the circle. A number between `0` and `1`. The final endAngle would be the number multiplied by 2π | `1` | | **`thickness`** | Thickness of the inner circle. | `3` | | **`showsText`** | Whether or not to show a text representation of current progress. | `false` | | **`formatText(progress)`** | A function returning a string to be displayed for the textual representation. | _See source_ | @@ -66,6 +66,7 @@ All of the props under _Properties_ in addition to the following: | **`allowFontScaling`** | Whether or not to respect device font scale setting. | _true_ | | **`direction`** | Direction of the circle `clockwise` or `counter-clockwise`. | `clockwise` | | **`strokeCap`** | Stroke Cap style for the circle `butt`, `square` or `round`. | `butt` | +| **`unfilledStrokeCap`** | Stroke Cap style for the remaining progress `butt`, `square` or `round`. | `butt` | | **`fill`** | Fill color of the inner circle. | None (transparent) | ### `Progress.Pie` diff --git a/index.d.ts b/index.d.ts index 76a62c0..0e5f694 100644 --- a/index.d.ts +++ b/index.d.ts @@ -53,7 +53,7 @@ declare module 'react-native-progress' { * @memberof DefaultPropTypes * @default rgba(0, 122, 255, 1) */ - color?: string; + color?: string; /** * Color of the remaining progress. @@ -225,6 +225,15 @@ declare module 'react-native-progress' { */ strokeCap?: 'butt' | 'square' | 'round'; + /** + * Stroke Cap style for the remaining progress `butt`, `square` or `round`. + * + * @type {('butt' | 'square' | 'round')} + * @memberof CirclePropTypes + * @default butt + */ + unfilledStrokeCap?: 'butt' | 'square' | 'round'; + /** * Fill color of the inner circle. * @@ -239,7 +248,7 @@ declare module 'react-native-progress' { * * @type {number} * @memberof CirclePropTypes - * @default 0.9 + * @default 1 */ endAngle?: number; }