React-Native-Skia parity with React-Native-SVG Circle

I’ve been experimenting with React-Native-Skia trying to do some of the things we can do with React-Native SVG. Currently I am trying to create a circular progress indicator. Problem is, there doesn’t seem to be a way with Circle to offset the stroke. This is about as far as I could get with Skia.

export const DonutChart: FC<CircularProgressProps> = ({
  strokeWidth,
  radius,
  backgroundColor,
  percentageComplete,
}) => {
  const innerRadius = radius - strokeWidth / 2;
  const circumfrence = 2 * Math.PI * innerRadius;

  return (
    <View style={styles.container}>
      <Canvas style={StyleSheet.absoluteFill}>
        <Circle
          cx={radius}
          cy={radius}
          r={innerRadius}
          color={'purple'}
          style={'stroke'}
          strokeWidth={20}
          strokeCap="round"
        />
      </Canvas>
    </View>
  );
};

In react-native-svg on the other hand we could just do something like this:

export const CircularProgress: FC<CircularProgressProps> = ({
  radius,
  strokeWidth,
  backgroundColor,
  percentageComplete,
}) => {
  const innerRadius = radius - strokeWidth / 2;
  const circumfrence = 2 * Math.PI * innerRadius;

  return (
    <View style={styles.container}>
      <Svg style={StyleSheet.absoluteFill}>
        <Circle
          cx={radius}
          cy={radius}
          r={innerRadius}
          fill={'transparent'}
          stroke={backgroundColor}
          strokeDasharray={`${circumfrence} ${circumfrence}`}
          strokeWidth={strokeWidth}
          strokeDashoffset={2 * Math.PI * (innerRadius * 0.5)}
          strokeLinecap="round"
        />
      </Svg>
    </View>
  );
};

then get the following result

Is it not possible to offset the Circle Stroke on React-Native-Skia or is there an entirely different way to accomplish an effect like this that I am missing?

[wcandillon]

you can use the following:

const path = Skia.Path.Make();
path.addCircle(100, 100, 100);
//...
<Path path={path} />

[wcandillon]

@Noitham you can use the path.transform method for that