Custom Path Effects

[wobsoriano]

Hello! Is there any sample or can you point me in the right direction if I want to write custom path effects?

Basically what I want to do is

import {Canvas, DiscretePathEffect, Path} from "@shopify/react-native-skia";
 
const logo = "M256 128.015C256 111.057 234.762...";
 
const Discrete = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Path path={logo} color="#61DAFB">
        {/* Have access to the parent component Path inside this path effect */}
        <CustomPathEffect  />
      </Path>
    </Canvas>
  );
};

Thanks!

[AdamGerthel]

Did you manage to find anything? I'm also looking for ways to make custom path effects

[wcandillon]

This is a very good question and yes indeed path effect can be written manually. You have all the APIs to do it, especially the https://github.com/Shopify/react-native-skia/blob/main/packages/skia/src/skia/types/ContourMeasure.tsx API.
Here is a relevant tutorial:
https://www.youtube.com/watch?v=7SCzL-XnfUU

And these examples might help:
https://github.com/wcandillon/canvaskit-js/tree/main/package/src/Path/PathEffects