Weird piechart with React Native SVG

_screenshot.png

App.tsx

/* eslint-disable react-native/no-inline-styles */
import React from 'react';
import {SafeAreaView, StyleSheet, StatusBar} from 'react-native';
import Svg, {Circle} from 'react-native-svg';

const App = () => {
  const viewBoxWidth = 42;
  const viewBoxHeight = viewBoxWidth;
  const viewBox = `0 0 ${viewBoxWidth} ${viewBoxHeight}`;
  const centerX = viewBoxWidth / 2;
  const centerY = viewBoxHeight / 2;
  const colorPrimary = '#dd0000';
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView style={styles.safeAreaView}>
        <Svg viewBox={viewBox} style={{transform: [{rotateZ: '-90deg'}]}}>
          <Circle
            cx={centerX}
            cy={centerY}
            r={10}
            stroke={colorPrimary}
            strokeWidth={viewBoxWidth}
            strokeDasharray={3}
            strokeDashoffset={10}
          />
        </Svg>
      </SafeAreaView>
    </>
  );
};

const styles = StyleSheet.create({
  safeAreaView: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    padding: 24,
  },
});

export default App;