Circular ProgressBar breaks

[railsjack]

This is the problem.

<AnimatedCircularProgress
duration={0}
size={100}
fill={
27.36
}
padding={0}
width={6}
rotation={0}
tintColor={"red"}
lineCap="round"
children={value => {
return (
820
);
}}
/>

[Lucasark]

Same problem

[joelfsreis]

Do we have any update on this issue? I am facing the exact same issue, only on the Android platform.

[railsjack]

Not yet

[joelfsreis]

@railsjack there is something we can do to help?

[railsjack]

It would be helpful if you can give me any project to do. :)

[joelfsreis]

I was able to fix it by using the renderCap prop, using this in instead of lineCap round works fine in iOS and Android

[lucasbarcellos]

@joelfsreis, did you manage to use renderCap to get the same visual result as lineCap={"round"}?

[l-ichaochao]

发现lineCap={"round"}时，fill的值大于30时，末端正常，小于30末端移出

[aboveyunhai]

@joelfsreis @l-ichaochao I was never able to recreate the problems Probably only exists on certain android devices. I do highly suspect the problem comes from some floating point rounding issue during computation.
So if you cannot provide any links with minimal issue sample code. Try the following change in your npm_module to see if it resolves the problem or help me nail down the issue.
In the CircularProgress.js line 16,
change
var start = this.polarToCartesian(x, y, radius, endAngle * 0.9999);
to var start = this.polarToCartesian(x, y, radius, (endAngle - 0.05)); or (endAngle - 0.15)

[railsjack]

@aboveyunhai Did you ever try this code on your android device?
I tested it on Samsung Galaxy S7 and Xiami Note 7, but it was same buggy.

<AnimatedCircularProgress
    duration={0}
    size={100}
    fill={27.36}
    padding={0}
    width={6}
    rotation={0}
    tintColor={"red"}
    lineCap="round"
    children={value => {
        return 820;
    }}
/>

[aboveyunhai]

@railsjack so it could relate to specific device or android version, do you also use expo? Can you make a new project then upgrade react-native-svg to latest version to see if the problems persists. As I said, I was not able to regenerate the problem.

[railsjack]

I don't use expo. And I tried with new upgraded version.

…

On Tue, Aug 4, 2020 at 1:38 AM aboveyunhai ***@***.***> wrote: @railsjack <https://github.com/railsjack> it could relate to specific device or android version, do you also use expo? Can you make a new project then upgrade "react-native-svg" to latest version to see if the problems persists. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#230 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAOT54OUQHD6WVZRFSX3NZDR63YZRANCNFSM4KKSC32Q> .

[aboveyunhai]

I don't use expo. And I tried with new upgraded version.
…
On Tue, Aug 4, 2020 at 1:38 AM aboveyunhai @.***> wrote: @railsjack https://github.com/railsjack it could relate to specific device or android version, do you also use expo? Can you make a new project then upgrade "react-native-svg" to latest version to see if the problems persists. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#230 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAOT54OUQHD6WVZRFSX3NZDR63YZRANCNFSM4KKSC32Q .

Can you try the above coding change I mention, it's not a bug fix, just some tests. It relates to a trivial bug I found in a very specific case. I can't guarantee these two are related.

[railsjack]

Ok

[brisma]

Same problem here, i fixed changing line 19 of CircularProgress.js from this:
var d = ['M', start.x, start.y, 'A', radius, radius, 0, largeArcFlag, 0, end.x, end.y];
to this:
var d = ['M', start.x, start.y, 'A', parseInt(radius), radius, 0, largeArcFlag, 0, end.x, end.y];

[an0o0nym]

@brisma this seem to work, but not in all cases! For example the following parameters breaks it:

 <CircularProgress
      size={120}
      width={10}
      fill={17}
      arcSweepAngle={240}
      rotation={240}
      lineCap="round"
      padding={16}
      tintColor="#00e0ff"
      onAnimationComplete={() => console.log('onAnimationComplete')}
      backgroundColor="#3d5875">