how to get same image inside two circles which are overlapping in middle

[akshaypilankar]

hello,
i am trying to create a component in which one small circle overlaps another big circle in middle and Image tag is used to show same background in both the circles with clip path but here issue is
image is not shown in overlapping parts of circles. please help i have image attached about the same.
demo image
this is my code

 <ImageBackground source={require('../assets/images/20.png')} style={styles.background}>
                    <Svg height={height} width="100%">
                        <Defs>
                            <ClipPath id="clip">
                                <Circle cx="80" cy="150" r="180" />
                                <Circle cx="320" cy="230" r="250" />
                            </ClipPath>
                        </Defs>
                        <Image
                            href={require('../assets/images/18.jpg')}
                            width={500}
                            height={500}
                            preserveAspectRatio="xMinYMin slice"
                            clipPath="url(#clip)"
                        />
                    </Svg>
        </ImageBackground>

[msand]

Can you try with the latest commit from the develop branch, and setting clipRule="nonzero" on the ClipPath element?

You can add something like clipPath=" " to the ClipPath element to workaround the prop extraction logic i just found like this: https://snack.expo.io/@msand/workaround-clippath-clip-rule-parsing

import * as React from 'react';
import { Text, View, StyleSheet, ImageBackground } from 'react-native';
import { Svg, Defs, ClipPath, Circle, Image, G } from 'react-native-svg';
import Constants from 'expo-constants';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Svg height="100%" width="100%">
          <Defs>
            <ClipPath id="clip" clipRule="nonzero" clipPath=" ">
              <Circle cx="80" cy="150" r="180" />
              <Circle cx="320" cy="230" r="250" />
            </ClipPath>
          </Defs>
          <Image
            href={require('./assets/snack-icon.png')}
            width={500}
            height={500}
            preserveAspectRatio="xMinYMin slice"
            clipPath="url(#clip)"
          />
        </Svg>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});

[msand]

🎉 This issue has been resolved in version 9.14.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[msand]

Released in v10

[AnthonyLabaere]

This issue is still present in v12.3.0 (currently recommended by expo).

[wodin]

This can be worked around using a Mask. See #1520 (comment)