Circle strokeWidth does not behave like SVG

[chris-ck]

Question

I am trying to animate a Circle inward, since it doesn't work with box-shadow as in CSS, the idea is to render a circle and animate r from progress.value * radius down to 1 and stroke-width from 0 up to radius. The desired animation is:

inward.mp4

and is done in CSS as simple as:

@keyframes inward {
  0% {
    r: 50;
    stroke-width: 0;
  }
  
  100% {
    r: 1;
    stroke-width: 98;
  }
}

This could potentially work in react-native-svg too, however, react-native-svg fails to render the stroke properly as soon as the radius - strokeWIdth / 2 becomes lower than zero.

HTML/CSS:

    <circle
        cx="50%"
        cy="50%"
        fill="transparent"
        stroke="#ff0000"
        r="1"
        stroke-width="50"
      />

renders

The following in react-native-svg:

           <Circle
              cx="50%"
              cy="50%"
              fill="transparent"
              stroke="#ff0000"
              r="1"
              strokeWidth="50"
            />

Long story short: can I achieve the desired effect in react-native-svg?

Any help much appreciated.

Cheers

[chris-ck]

Just to be clear: I do have a workaround for my current issue at hand:

interpolate(progress.value, [0, 1], [radius, radius * 0.5])

leads to my desired effect, however, this might become an issue in other places where a workaround like this is not possible. Is this as expected or should I open a bug ticket for this?

Cheers

[bohdanprog]

Hello @chris-ck,

Unfortunately, react-native-svg does not currently support CSS keyframes. We have noted this as a potential feature to add to our roadmap. If you have any further questions, please feel free to open a new issue.

Thank you.