Unable to fill Polygons

[enzomanuelmangano]

First of all, thank you very much for the incredible work you are doing with this package.

The problem I am experiencing is that I'm not able to fill the polygon with the color passed in the props even after setting style="fill". The problem can also be reproduced from the "PointsDemo" example in the docs (setting style="fill" doesn't change anything).

import { Canvas, Points, vec } from "@shopify/react-native-skia";
 
const PointsDemo = () => {
  const points = [
    vec(128, 0),
    vec(168, 80),
    vec(256, 93),
    vec(192, 155),
    vec(207, 244),
    vec(128, 202),
    vec(49, 244),
    vec(64, 155),
    vec(0, 93),
    vec(88, 80),
    vec(128, 0),
  ];
  return (
    <Canvas style={{ flex: 1 }}>
      <Points
        points={points}
        mode="polygon"
        color="lightblue"
        style="fill"
        strokeWidth={4}
      />
    </Canvas>
  );
};

I don't know if I'm doing something wrong, but I couldn't find references on the docs on how to fill in the polygon.

Versions

• React Native: 0.69.1
• React: 18.0.0
• React Native Skia: 0.1.136

[wcandillon]

Hello Enzo 🙋🏼‍♂️

You will need to use a path to create a polygon. Do you think that there is something we could do to the documentation to make it maybe clearer that the Points component is only to display points and optionally the connection between then?

This is a how you can create a path from a list of points:

    const path = points.reduce((current, point) => {
      current.lineTo(point.x, point.y);
      return current;
    }, Skia.Path.Make());

I am closing this issue as I believe there are no bugs here, but if you have any suggestions on how we could improve things here, we will do it and also feel free to reopen this issue if needed. (I optionally created #696 )

[enzomanuelmangano]

Hi William, thank you very much for such a quick response.

Honestly, the solution is crystal clear and works perfectly for my use case. But then under what circumstance style="fill" has an effect on the "Points" component?

[xcoderreal]

I just came across this, and also am wondering if style="fill" would have done anything differently compared to ="stroke"?