React Native - SVG clip path not work for android


#1

Hi,

I am struggling with SVG clip path not work for android. Can anyone have some idea about how does it work using svg in react native or any alternate way?

Find my following code:

import React from ‘react’;
import {StyleSheet,View } from ‘react-native’;
import Svg, {
Circle,
Ellipse,
G,
LinearGradient,
RadialGradient,
Line,
Path,
Polygon,
Polyline,
Rect,
Symbol,
Text,
Use,
Defs,
Stop,
Platform,
// EStyleSheet,
ScrollView,

Image,
TouchableHighlight,
Switch,
Dimensions,
Animated,
Easing,
LayoutAnimation,
UIManager,
ClipPath

} from ‘react-native-svg’;

import Mask from “react-native-mask”;
// import EStyleSheet from ‘react-native-extended-stylesheet’;
export default class svg extends React.Component {
render() {
return (


            <Defs>
                <ClipPath id="clip" >
                  <Polygon id="si-default-color" points="80,19.4 65,9 46.5,0.6 27.1,2.7 9.1,7.8 3.7,25.9 0,46.6 12.4,63.6 25.3,79.4 65.9,60.4" y="10"/>
                </ClipPath>
            </Defs>
       
           <Image href={require('./assets/1900737.jpg')} width="100%" height="100%" clipPath="url(#clip)" x="-5" />          
                 
        </Svg>
    </View>

  </View>


    );
}

}

const styles = StyleSheet.create({
svgcol: {
//backgroundColor: ‘#5599ff’,
//borderWidth: 1,
//borderColor: ‘rgba(0,0,0,1)’,
flex: 1,
borderColor: ‘yellow’,
borderWidth: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
//marginHorizontal: 15,

},
svgcolwrp:{
flexDirection: ‘row’,
justifyContent: ‘center’,
alignItems: ‘center’,
flex: 1,
backgroundColor:‘gray’,
padding: 20,
}

});