Im getting a circle being cut off at the extremes parts of the circular progress (top, bottom, left and right)

[itstheandre]

I have a component that is supposed to display the circular display with the circle, just like its in the README, however at the top, left, bottom and right sections the circle gets cur off and i dont really know how to make the smaller circle appear correctly.

  <AnimatedCircularProgress
        style={{ overflow: "visible", padding: 5 }}
        size={250}
        fill={100}
        width={2}
        rotation={0}
        tintColor="red"
        backgroundColor="red"
        dashedBackground={{ width: 15, gap: 6 }}
        padding={0}
        renderCap={({ center }) => (
            <Circle
              cx={center.x}
              cy={center.y}
              r="6"
              fill={"yellow"}
            />
          ) 
        }}
      />

There's no extra configuration, but when I run this code on my code the inner circle gets cut off if the fill is 100, 75, 50 or 25 +- 2. And i dont know really know how to fix this. Ive been looking at this for 3 hours and im super stuck

Running on Expo. Version 1.3.7

[Marcoo09]

I'm facing the same issue.

[Marcoo09]

@itstheandre Taking a look on the doc, if you use the property padding into the AnimationCircularProgress object the error is fixed but it's not the best fix because the circular line decrease.

[AsurNikul]

I'm also facing the same issue it is cutting from all sides