How to add programmatically add an SVG element to a component using react-native-svg module?

Question

I'm searching without success information everywhere on the web on how to create an SVG Rect element in React-Native using the react-native-svg feature. What I reached so far is to define some SVG elements in a component and to pass props to the existing SVG Elements like Rect , Circle and so on. But how can I programmatically create a random number of SVG elements and to attach them to the component ? Sadly, it is not specified in the documentation.

What do you mean by create an SVG Rect component and Random Number of SVG elements. Can you please elaborate — Ashwin Mothilal
– Ashwin Mothilal, Commented Feb 2, 2019 at 7:48
Exactly what i said..Create for example a Rect element and attach it to the Canvas..in some sorts of For cycles or similiar. — Claudio Ferraro
– Claudio Ferraro, Commented Feb 2, 2019 at 21:56
Will this repo be useful for you github.com/smooth-code/svgr — Ashwin Mothilal
– Ashwin Mothilal, Commented Feb 3, 2019 at 6:32

Jose Villalobos · Accepted Answer · 2019-02-02 06:24:38Z

0

I could not find anything on the react-native-svg also.

But this post could be helpfull: How to show SVG file on React Native?.

You have to convert the .svg to JSX like is answered there by Ihor Burlachenko, notice that react-native is deferent from react, in react-native you need to use the react-native-svg module to create the svg JSX component

answered Feb 2, 2019 at 6:24

Jose Villalobos

5595 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to add programmatically add an SVG element to a component using react-native-svg module?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related