Arc renders with a black fill

[petrbela]

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch react-native-progress@5.0.0 for the project I'm working on.

On web, Circle and CircleSnail render with a black fill. See https://snack.expo.dev/@petrbela/react-native-progress-fill

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-progress/Circle.js b/node_modules/react-native-progress/Circle.js
index 79f0a9e..879e3b4 100644
--- a/node_modules/react-native-progress/Circle.js
+++ b/node_modules/react-native-progress/Circle.js
@@ -168,6 +168,7 @@ export class ProgressCircle extends Component {
           )}
           {border ? (
             <Arc
+              fill={fill}
               radius={size / 2}
               startAngle={0}
               endAngle={(indeterminate ? endAngle * 2 : 2) * Math.PI}
diff --git a/node_modules/react-native-progress/Shapes/Arc.js b/node_modules/react-native-progress/Shapes/Arc.js
index f913a56..acff1f0 100644
--- a/node_modules/react-native-progress/Shapes/Arc.js
+++ b/node_modules/react-native-progress/Shapes/Arc.js
@@ -86,6 +86,7 @@ export default class Arc extends Component {
     return (
       <Path
         d={path}
+        fill="none"
         strokeLinecap={strokeCap}
         strokeWidth={strokeWidth}
         {...restProps}

This issue body was partially generated by patch-package.

[a-luengen]

I had the same issue with v5.0.0 on my Android device. Sadly your solution did not remove the black fill in the arc.

Instead a simple workaround helped me: Set fill="#00000000" and it gets transparent again.

[harshilmobmaxime]

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch react-native-progress@5.0.0 for the project I'm working on.

On web, Circle and CircleSnail render with a black fill. See https://snack.expo.dev/@petrbela/react-native-progress-fill

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-progress/Circle.js b/node_modules/react-native-progress/Circle.js
index 79f0a9e..879e3b4 100644
--- a/node_modules/react-native-progress/Circle.js
+++ b/node_modules/react-native-progress/Circle.js
@@ -168,6 +168,7 @@ export class ProgressCircle extends Component {
           )}
           {border ? (
             <Arc
+              fill={fill}
               radius={size / 2}
               startAngle={0}
               endAngle={(indeterminate ? endAngle * 2 : 2) * Math.PI}
diff --git a/node_modules/react-native-progress/Shapes/Arc.js b/node_modules/react-native-progress/Shapes/Arc.js
index f913a56..acff1f0 100644
--- a/node_modules/react-native-progress/Shapes/Arc.js
+++ b/node_modules/react-native-progress/Shapes/Arc.js
@@ -86,6 +86,7 @@ export default class Arc extends Component {
     return (
       <Path
         d={path}
+        fill="none"
         strokeLinecap={strokeCap}
         strokeWidth={strokeWidth}
         {...restProps}

This issue body was partially generated by patch-package.

this also work for me to solved the issue of progress circle black background

[gabrielafeijo]

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch react-native-progress@5.0.0 for the project I'm working on.

On web, Circle and CircleSnail render with a black fill. See https://snack.expo.dev/@petrbela/react-native-progress-fill

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-progress/Circle.js b/node_modules/react-native-progress/Circle.js
index 79f0a9e..879e3b4 100644
--- a/node_modules/react-native-progress/Circle.js
+++ b/node_modules/react-native-progress/Circle.js
@@ -168,6 +168,7 @@ export class ProgressCircle extends Component {
           )}
           {border ? (
             <Arc
+              fill={fill}
               radius={size / 2}
               startAngle={0}
               endAngle={(indeterminate ? endAngle * 2 : 2) * Math.PI}
diff --git a/node_modules/react-native-progress/Shapes/Arc.js b/node_modules/react-native-progress/Shapes/Arc.js
index f913a56..acff1f0 100644
--- a/node_modules/react-native-progress/Shapes/Arc.js
+++ b/node_modules/react-native-progress/Shapes/Arc.js
@@ -86,6 +86,7 @@ export default class Arc extends Component {
     return (
       <Path
         d={path}
+        fill="none"
         strokeLinecap={strokeCap}
         strokeWidth={strokeWidth}
         {...restProps}

This issue body was partially generated by patch-package.

This worked for CircleSnail but not Circle. Changing to fill="#00000000" resolved the issue.

[fzchriha]

Hello I tried using CircleSnail and Circle and both the solutions above have not worked :(

[Isissss]

Hello I tried using CircleSnail and Circle and both the solutions above have not worked :(

Be sure you have the react-native-svg package installed :)

[cngvc]

In my case: Circle is still black:

• Expo: 49.0.8 Solution:
• Down version of react-native-svg from "13.9.0" to "13.4.0"
• But can't run project on android.

[LaiviF]

Thanks cngvc downgrading react-native-svg using expo 49 worked for me

[oblador]

Should be fixed in 5.0.1