From a8dda83609514f21042f548dd0c22d957405a8f4 Mon Sep 17 00:00:00 2001 From: jcbkdev Date: Mon, 7 Sep 2026 01:53:12 +0200 Subject: [PATCH 1/2] fix: apply `endAngle` as documented, not just to spinner arc --- Circle.js | 8 ++++---- README.md | 2 +- index.d.ts | 2 +- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/Circle.js b/Circle.js index 71b9b44..f12c758 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, }; @@ -114,8 +114,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,7 +144,7 @@ export class ProgressCircle extends Component { radius={radius} offset={offset} startAngle={angle} - endAngle={CIRCLE} + endAngle={CIRCLE * endAngle} direction={direction} stroke={unfilledColor} strokeWidth={thickness} diff --git a/README.md b/README.md index 7e2281b..2b80d14 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_ | diff --git a/index.d.ts b/index.d.ts index 76a62c0..921f9bc 100644 --- a/index.d.ts +++ b/index.d.ts @@ -239,7 +239,7 @@ declare module 'react-native-progress' { * * @type {number} * @memberof CirclePropTypes - * @default 0.9 + * @default 1 */ endAngle?: number; } From f8beebca7e6ed0ad9ea79fec658a84bf2db787c4 Mon Sep 17 00:00:00 2001 From: jcbkdev Date: Mon, 7 Sep 2026 14:47:31 +0200 Subject: [PATCH 2/2] feat: add `unfilledStrokeCap` prop to `Circle` to control unfilled arc's stroke cap --- Circle.js | 2 ++ README.md | 1 + index.d.ts | 11 ++++++++++- 3 files changed, 13 insertions(+), 1 deletion(-) diff --git a/Circle.js b/Circle.js index f12c758..e71a5a5 100644 --- a/Circle.js +++ b/Circle.js @@ -95,6 +95,7 @@ export class ProgressCircle extends Component { textStyle, thickness, unfilledColor, + unfilledStrokeCap, endAngle, allowFontScaling, ...restProps @@ -147,6 +148,7 @@ export class ProgressCircle extends Component { endAngle={CIRCLE * endAngle} direction={direction} stroke={unfilledColor} + strokeCap={unfilledStrokeCap} strokeWidth={thickness} /> ) : ( diff --git a/README.md b/README.md index 2b80d14..0a89f3a 100644 --- a/README.md +++ b/README.md @@ -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 921f9bc..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. *