React Native Skia umbrella

.tsx

const RADIUS = 100;
const NUM_SLICES = 8;   

const renderPath = () => {
    const sliceAngle = (2 * Math.PI) / NUM_SLICES;
    const paths = [];
    const colors = [
      "#FF5733",
      "#FFC300",
      "#36A2EB",
      "#4CAF50",
      "#FF6384",
      "#9966FF",
      "#FF9800",
      "#8E44AD",
    ];

    for (let i = 0; i < NUM_SLICES; i++) {
      const startAngle = i * sliceAngle;
      const endAngle = (i + 1) * sliceAngle;

      const path = Skia.Path.Make();
      path.moveTo(RADIUS, RADIUS);
      path.lineTo(
        RADIUS + RADIUS * Math.cos(startAngle),
        RADIUS + RADIUS * Math.sin(startAngle)
      );
      path.lineTo(
        RADIUS + RADIUS * Math.cos(endAngle),
        RADIUS + RADIUS * Math.sin(endAngle)
      );
      path.close();

      paths.push({ path, color: colors[i] });
    }

    return paths.map((pathData, index) => (
      <Path key={index} path={pathData.path} color={pathData.color} />
    ));
  };