How to color the path based on the value of vec(x, y) of that point

[pandey21197]

I want to color the path based on the point values in path to achieve something like this:

[wcandillon]

This a linear gradient from the bottom of the path (green) to the top of the path (red). The path object has a method to get its bounding box:

const bounds = path.computeTightBounds();
// top is bounds.y
// bottom is bounds.y + bounds.height

[pandey21197]

@wcandillon how would u use these bound in linear gradient to plot like the above image ? Can you please elaborate, that would be so helpful.

Thanks in advance

[pandey21197]

@wcandillon i have path described something like this:

       <Path
                   path={path}
                   strokeWidth={lineThickness}
                   style="stroke"
                   strokeJoin="round"
                   strokeCap="round">
                   <LinearGradient
                     start={vec(0, 0)}
                     end={vec(width, 0)}
                     colors={[color]}
                     // positions={positions}
                   />
                 </Path>

[wcandillon]

These are the two property you need to adjust to the bounding box of your path:

start={vec(0, 0)}
end={vec(width, 0)}

[pandey21197]

@wcandillon How to set the x value for both start the end ? since it not consistent. start and end of linear gradient tell from which point to which point it should show this gradient color. Iam confused rn.

[pandey21197]

@wcandillon can provide the code snippet how you would solve this

[pandey21197]

@wcandillon the idea to show show red color for y value greater than 140, so we need somehow to put this condition in all the points and color them accordingly. Cuz there is no one x (start), but there are multiple start (x) where y > 140.

[wcandillon]

I've made a small example quickly that seems to match the screenshot: https://snack.expo.dev/@wcandillon/hello-snack
If you need to adjust the values to the y values of the path for instance (y greater than 140), you can use the position attribute: https://github.com/Shopify/react-native-skia/blob/main/example/src/Examples/API/Gradients.tsx#L87

[pandey21197]

@wcandillon i would have achieved this if we can have multiple gradient inside one path:

<Path>
< LinearGradient/>
< LinearGradient/>
< LinearGradient/>
</Path>

but it always take the last < LinearGradient/>