Rendering Path with start and end properties not rendering correctly in 0/90/180/270 degree angles,

[ivanloy]

Description
When rendering a Path in a canvas with start and end properties, if one of them causes the path to end in a 0/90/180/270 angle in the screen (Like 25%/50%/75% of a full circle, for example), it causes the end to render erratically and not straight. It only happens at certain dimensions, could not find the relation on which break there. Making the path bigger or smaller solves the issue, but at some points it breaks like this.

Version
1.7.6 is latest checked, has been broken since before 1.0. React Native CLI. React native 0.75.2
Happening on Android, on a Pixel Pro 7. Has been seen and fixed itself in the past on iPhone X and iPhone 12.

Steps to reproduce
Run the following code on android. Any path with enough thickness for it to be visible, with start and end properties, one of them making it cut in a straight angle, should work.

Snack, code example, screenshot, or link to a repository

const getPath = () => {
  const radius = 107;
  //Have suspicions that this not being an integer is an issue, seems to work with 195.4, but other hardcoded decimal values here kill it. Only in 
  //straight angles though, if I try this on any other path it works as intended. Shouldn't break with a float I imagine though? Since an svg path can 
  //have decimals without issues
  const centerX = 195.5;
  const centerY = 174;
  const matrix = Skia.Matrix();
  matrix.translate(centerX, centerY);
  matrix.rotate(ONE_QUARTER_CIRCLE_RADIANS);
  matrix.translate(-centerX, -centerY);

  const skPath = Skia.Path.Make().addCircle(centerX, centerY, radius);
  skPath.transform(matrix);
}

export const GaugeDoughnut = () => {
  const path = getPath();
  const trimmingValues = [{"end": 0.7333333333333334, "start": 0.5}];

  return (
    <Group>
      {trimmingValues.map((trimming, index) => 
         <GaugeDoughnutArc key={`gauge-arc-${index}`} path={path} trimming={trimming} color={"red"} />;
      )}
    </Group>
  );
};

export const GaugeDoughnutArc = ({path, trimming, color}: GaugeDoughnutArcProps) => {
  const strokeWidth = 42;
  return (
    <Path
      path={path}
      color={color}
      style="stroke"
      strokeWidth={strokeWidth}
      start={trimming.start}
      end={trimming.end}
    />
  );
};

[wcandillon]

I couldn't reproduce the issue unfortunately, could it be that it is because the example doesn't work standalone? I had to fill the gaps the myself. Let me know if you have a standalone example that clearly shows a bug, please share it with me and we will reopen.

[ivanloy]

It was somehow fixed in 1.8.1, so I guess no need for followup. I'll reopen with a standalone example if it pops up in newer versions.