React Native svg clip path on image not working

Question

Trying to clip an Image component with an svg ClipPath is proving problematic. I can clip a Rect no problem, but when I replace the Rect with an Image, nothing shows up.

octogon.points = "80,0.3 23.6,23.6 0.3,80 23.6,136.4 80,159.7 136.4,136.4 159.7,80 136.4,2 3.6";

props.photoUri = "file:///data/user/0/host.exp.exponent/cache/ExperienceData/%2540anonymous%252Fhalt-c46ef35c-1897-441e-840e-28147c0de5a9/ImagePicker/d68a7ddd-807e-4d26-95c2-bd47ddca803e.jpg"

<View style={styles.container}>
    <Svg width={160} height={160} viewBox={`0 0 160 160`}>
        <Defs>
            <ClipPath id="clip">
                <Polygon points={octogon.points} />
            </ClipPath>
        </Defs>
        {/* <Rect x="0" y="0" width="160" height="160" fill="red" clipPath="#clip" /> */}
        <Image x="0" y="0" width="160" height="160" source={{ uri: props.photoUri }} clipPath="#clip" />
    </Svg>
</View>

The commented out Rect worked as intended and creates a red octogon. The Image returns blank.

I feel like I'm overlooking something simple. Any help is appreciated.

Elan

Is it the same to reduce the width and height? – Dialectician

Answer 1

Answering my own question because I'm an idiot and hopefully it will help someone in the future. Be mindful of which components you are importing. I was using Image from 'react-native' instead of Image from 'react-native-svg'.

Once I swapped it over and changed source={{ uri: props.photoUri }} to href={{ uri: props.photoUri }}, it started working.

Elan