Passing clipPath as a style instead of SVG prop

[halfmatthalfcat]

Question

I'm wanting to use clipPath as a css property, not a native svg one (https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path) however it looks like react-native-svg is intercepting this prop. Interestingly, I don't run into any errors on web but in the simulator, I get:

Invalid `clipPath` prop, expected a clipPath like "#id", but got: "inset(0, 0, 0, 0)"

I'm passing the clipPath property as so:

<Line
  style={{ clipPath: 'inset(0, 0, 0, 0)' }}
/>

Is there anyway to use this without running into the warning?

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You may also mark this issue as a "discussion" and I will leave this open.

[Jackman3005]

@halfmatthalfcat did you ever get a resolution to this? We were unable to get the clip path to work via ID on the web, but inlining it does not appear to work on mobile...

[jakex7]

Hi, react-native-svg does not support applying CSS properties directly. If you want to apply a clip on an element (e.g., a Path), you should use the ClipPath component and pass its id as the clipPath prop to the target element. Here's an example:

import Svg, {Circle, ClipPath, Path} from 'react-native-svg';

export default function Example() {
  return (
    <Svg viewBox="0 0 100 100">
      <ClipPath id="myClip">
        <Circle cx="50" cy="35" r="30" />
      </ClipPath>
      <Path
        id="heart"
        d="M10,30 A20,20,0,0,1,50,30 A20,20,0,0,1,90,30 Q90,60,50,90 Q10,60,10,30 Z"
        clipPath="url(#myClip)"
        fill="red"
      />
    </Svg>
  );
}

This will render a heart shape that is clipped to a circle.