How to both stroke and fill?

[dominictobias]

Hey, thanks for this great lib, it's something RN sorely needed!

Looking at Path and Points it seems that unlike SVG Path or Polygon for example, you cannot both stroke and fill?

For example here is a heart with a red fill and blue stroke:

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path d="M 10,30
           A 20,20 0,0,1 50,30
           A 20,20 0,0,1 90,30
           Q 90,60 50,90
           Q 10,60 10,30 z" fill="red" stroke="blue" stroke-width="4" />
</svg>

Am I just missing something or would this have to be accomplished with something like two paths in this lib? It seems there aren't fill properties on the mentioned elements.

[wcandillon]

We would write it as

<Path d="M 10,30
           A 20,20 0,0,1 50,30
           A 20,20 0,0,1 90,30
           Q 90,60 50,90
           Q 10,60 10,30 z" fill="red">
  <Paint  color="blue" stroke-width={4} style="stroke" />
</Path>

As documented at https://shopify.github.io/react-native-skia/docs/paint/overview. Does it makes sense? Maybe we can improve the documentation there.

[wcandillon]

I've made a PR at https://github.com/Shopify/react-native-skia/pull/415/files to try to make this topic better explained.

[dominictobias]

Ah that's cool, thanks! I missed this part should have read the docs fully ;)