React-Native-svg es compatible con el patrón SVG, sin embargo, no estoy seguro de cómo aplicarlo... Cuando pruebo el ejemplo mínimo de la documentación , aparece una pantalla en blanco, una pantalla en blanco.
<View style={{paddingTop: 20, height: '100%', flex: 1, backgroundColor: 'white'}}> <Svg width="100%" height="100%" viewBox="0 0 800 400"> <Defs> <Pattern id="TrianglePattern" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="100" viewBox="0 0 10 10"> <Path d="M 0 0 L 7 0 L 3.5 7 z" fill="red" stroke="blue" /> </Pattern> </Defs> </Svg> </View>¿Porqué es eso?
Como señaló @Robert Longson en un comentario debajo de la Q. Necesita una forma (como un rect o una ellipse ) con la id dada en el pattern .
<Svg width="100%" height="100%" viewBox="0 0 800 400"> <Defs> <Pattern id="TrianglePattern" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="100" viewBox="0 0 10 10" > <Path d="M 0 0 L 7 0 L 3.5 7 z" fill="red" stroke="blue" /> </Pattern> </Defs> <Rect fill="none" stroke="blue" x="1" y="1" width="798" height="398" /> <Ellipse fill="url(#TrianglePattern)" // make sure this is the id given in the pattern stroke="black" strokeWidth="5" cx="400" cy="200" rx="350" ry="150" /> </Svg>