circle clipped on bottom and right when padding not set (or set to 0)

[schumannd]

Setting the padding to 1 fixes the issue (on some devices)

Is anyone else experienceing this? It only happens for very specific circle sizes, eg 13% of device width.

[aboveyunhai]

Please refer to solution for issue #218 and merge #220 before the package is updated.

Besides that, I had noticed that the current <Svg> after the merge still did not include the renderCap size. so you use renderCap in the future, it will be also clipped if it's too big. A quick fix for this one is to give padding that is larger or equal to the renderCap's radius r like: padding={10} renderCap={({ center }) => <Circle cx={center.x} cy={center.y} r="10" fill="#00e0ff" />}

[schumannd]

It seems like this issue is still not solved in the latest release 1.3.6 It is also hard to see, which commits are included in which releases, as no "release" tags are used in this repo. It would be helpful if releases were also marked here.

[jagwingchoy]

I have installed the latest version v1.3.6 (I saw the merge #220 is there already) but still having a similar issue.

When I use the AnimatedCircularProgress component like this:

<AnimatedCircularProgress
  fill={75}
  size={USER_PICTURE_WIDTH}
  style={{backgroundColor: '#fff', borderRadius: responsive(100), borderWidth: responsive(2), borderColor: '#fff'}}
  width={7}
  rotation={0}
  duration={2000}
  lineCap="round"
  easing={Easing.bezier(0.785, 0.135, 0.15, 0.86)}
  tintColor={'#ff0a84'}
  backgroundColor="#bbb"
  childrenContainerStyle={{padding: 4}}
>
  {(fill) => (
    <Image style={{width: '100%', height: '100%', borderRadius: responsive(60)}} source={{uri: 'https://pbs.twimg.com/profile_images/1183657210519310341/-O_y8huq.jpg'}} />
  )}
</AnimatedCircularProgress>

In some devices (like iPhone 6, Redmi 6 etc., other devices not tested), the progress bar will clip on bottom and right like this:

This issue is not happened in iPhone XR so far (other devices are not tested).

Temporary Solution for Me

I have try to fix it by editing the code in this:

https://github.com/bartgryszko/react-native-circular-progress/blob/a1f8e6c19feee829b2a4f50076f56768880e6510/src/CircularProgress.js#L97

to:

<Svg width={size + padding + 0.7} height={size + padding + 0.7}>

The final look will be like this:

@aboveyunhai If possible, could you please help us to solve this issue in a non-hard-coded way? I am not familiar with this project's code so it will be difficult for me to distinguish the bug. Thank you.

[aboveyunhai]

@jagwingchoy unfortunately, probably this the only hardcore way you can do currently. there are fewer bugs along with this one and the linecap issues in the past. My fix at that moment only addressed some of them eventually. These two highly associate with some number rounding issues on some of old android versions like android 7.0 and probably old ios version also, and possibly relates react-native-svg itself. But all of them are just my personal guess, I still can't find the root of the issue. For linecap you can easily create your own cap to avoid using the round. I still not sure about what cause the padding issue in those old device.