Inconsistent rendering of circle on Android and IOS

[lit26]

Question

Hi, the rendering of nested svg is inconsistent between Android and ios.

To Reproduce

import Svg, {Circle} from 'react-native-svg';

import React from 'react';
import {View} from 'react-native';

export default class SvgExample extends React.Component {
  render() {
    const size = 224.1;
    const strokeWidth = 22.41;
    const progressPercent = 40;
    const radius = (size - strokeWidth) / 2;
    const circum = radius * 2 * Math.PI;
    const svgProgress = 100 - progressPercent;
    const margin = 10;
    return (
      <View style={{position: 'absolute', height: 300, width: 300, top: 90}}>
        <Svg height="100%" width="100%" viewBox="0 0 100 100">
          <View style={{margin}}>
            <Svg width={size} height={size}>
              <Circle
                stroke={'blue'}
                fill="none"
                cx={size / 2}
                cy={size / 2}
                r={radius}
                strokeDasharray={`${circum} ${circum}`}
                strokeDashoffset={radius * Math.PI * 2 * (svgProgress / 100)}
                strokeLinecap="round"
                transform={`rotate(135, ${size / 2}, ${size / 2})`}
                strokeWidth={strokeWidth}
              />
            </Svg>
          </View>
        </Svg>
      </View>
    );
  }
}

Android pixel 2 screenshot

IOS 12 screenshot

Thank you

[bohdanprog]

Hello @lit26, I tried to reproduce that issue but couldn't.

IOS	ANDROID

If you still have that issue, feel free to reopen that issue.
thank you.