RenderCap circle clips at the top of the circle, even with padding

First of all, incredible library! SO easy to use!

My issues is whenever I render a cap and then add some padding directly to the component, the cap circle is clipped off. The progress bar is a semi circle and when the cap is rendered either at the beginning, end, or middle, it would clip when the padding prop wasn’t being used. After adding padding, it stopped clipping at the beginning and end but not the middle.

Am I perhaps missing something?

Here’s some code!

 <AnimatedCircularProgress
        size={350}
        width={13}
        fill={fillAmount()}
        tintColor={Colors.PRIMARY_WHITE}
        onAnimationComplete={() => console.log('onAnimationComplete')}
        backgroundColor="#96CBDF"
        arcSweepAngle={180}
        renderCap={({ center }) => (
          <Circle
            cx={center.x}
            cy={center.y}
            r="13"
            fill={Colors.PRIMARY_WHITE}
          />
        )}
        padding={10}
        rotation={-90}>
        {renderFillAmount}
      </AnimatedCircularProgress>

Here’s some screenshots! Padding fixed this clipping issue ~

But not this one 😦 ~

[mishacajic]

I’m having the same problem.

[git195]

Hi, I am also facing same issue.

Any help will be appreciated.