Расположите SVG в полукруге, используя React Native SVG

Question

Я пытаюсь создать собственный интерфейс React Native с изображением в центре и множеством кнопок вокруг него, расположенных круговыми движениями.

Я использую следующую формулу для вычисления расположения круглых кнопок

cx: cx = {Math.cos (2 * Math.PI / numberOfPoints * i) * circleRadius}

cy: cy = {Math.sin (2 * Math.PI / numberOfPoints * i) * circleRadius}

Мой SVG-рендеринг const circleRadius = Dimensions.get ('window'). width / 2;const numberOfPoints = 8;

<Svg style={{flex: 1}}>
  <G>
    <Circle key={0} r="6" cx={Math.cos(2 * Math.PI / numberOfPoints * 0) * circleRadius} cy={Math.sin(2 * Math.PI / numberOfPoints * 0) * circleRadius} fill="green"/>
    <Circle key={1} r="6" cx={Math.cos(2 * Math.PI / numberOfPoints * 1) * circleRadius} cy={Math.sin(2 * Math.PI / numberOfPoints * 1) * circleRadius} fill="purple"/>
    <Circle key={2} r="6" cx={Math.cos(2 * Math.PI / numberOfPoints * 2) * circleRadius} cy={Math.sin(2 * Math.PI / numberOfPoints * 2) * circleRadius} fill="black"/>
    <Circle key={3} r="6" cx={Math.cos(2 * Math.PI / numberOfPoints * 3) * circleRadius} cy={Math.sin(2 * Math.PI / numberOfPoints * 3) * circleRadius} fill="green"/>
    <Circle key={4} r="6" cx={Math.cos(2 * Math.PI / numberOfPoints * 4) * circleRadius} cy={Math.sin(2 * Math.PI / numberOfPoints * 4) * circleRadius} fill="purple"/>
    <Circle key={5} r="6" cx={Math.cos(2 * Math.PI / numberOfPoints * 5) * circleRadius} cy={Math.sin(2 * Math.PI / numberOfPoints * 5) * circleRadius} fill="black"/>
    <Circle key={6} r="6" cx={Math.cos(2 * Math.PI / numberOfPoints * 6) * circleRadius} cy={Math.sin(2 * Math.PI / numberOfPoints * 6) * circleRadius} fill="green"/>
    <Circle key={7} r="6" cx={Math.cos(2 * Math.PI / numberOfPoints * 7) * circleRadius} cy={Math.sin(2 * Math.PI / numberOfPoints * 7) * circleRadius} fill="purple"/>

Результатом будет 3 круга в том, что будет нижней правой частью круга, а не верхней левой частью, как в макете

Как бы я нарисовал круги по кругу, как показано на рисунке?Есть ли более простой / лучший способ сделать это без использования react-native-svg?