How to fill LinearGradient within a Path

[justinkx]

I need to fill linear gradient inside a path. Currently am filling a single colour using Paint.
<Path path={somePath} color={'red'} style='stroke' strokeWidth={1} > <Paint color={'red'} /> </Path>
How to use LinearGradient inside Path ?

[wcandillon]

https://shopify.github.io/react-native-skia/docs/shaders/gradients

<Path path={path}>
  <LinearGradient
    start={vec(0, 0)}
    end={vec(100, 100)}
    colors={["#61DAFB", "#fb61da"]}
   />
</Path>

[justinkx]

I need to fill area under the Path (it's actually an Area graph). This code fill gradient along the Path.

[justinkx]

And with Paint, I can fill only a colour, can't use gradient. I am trying to make gradient effect from the path towards the x axis 😇

[wcandillon]

It looks like the coordinates of your linear gradient are not correct, it might be why you are not seeing it.

[justinkx]

This is actually Paint.
Code used is <Path path={somePath} color={'green'} style='stroke' strokeWidth={1} > <Paint color={'green'} /> </Path>

For linear gradient coordinate values based on parent path was unable to set. Was expecting Gradient to fill the area same like Paint but with direction (start(x,y)-end(x,y)) something similar to react-native-svg ** LinearGradient**

[Albx68]

you can use the path styled "fill" as a mask and a gradient to fill the mask