CODEWITHSUNDEEP
react-nativereact-native-svg
pbachman
pbachman

Reputation: 1059

React native svg not rendered correct

We are working on a Vue/ReactNative project and have the strange phenomenon that in the Reactnative component react-native-svg (version 12.1.0) the SVG is not rendered correctly. In the browser it is rendered correctly.

The SVG itself was created with Adobe and uses CSS styles. Are not all CSS elements supported ?

We use the SVGs dynamically from an external Uri and not as a static file.

<svg-css-uri
    :key="'image_' + selectedItem.id"
    :height="200"
    :uri="selectedItem.picture.url"
  ></svg-css-uri>
</view>
    
    
mystyle: {
  marginLeft: 25,
  flex: 0.5,
  justifyContent: "center",
}

should like this

enter image description here

looks like this (wrong)

enter image description here

Upvotes: 3

Views: 17463

Answers (2)

Marmik Thakkar
Marmik Thakkar

Reputation: 128

There are 2 ways to use SVG images using react-native-svg

1. Converting to react components

You can convert your svg image to react components by using this playground.

Note: there is also a possibility to convert the image via CLI but I prefer playground as it is easier.

2. Using SVG files directly

For this, you might want to flow the steps mentioned in the docs here

Upvotes: 3

Arbnor
Arbnor

Reputation: 2352

I was able to render the SVG on iOS under React Native as follows: https://www.codepile.net/pile/7AP5vlmn (use this code)

Using https://react-svgr.com/playground/, I converted the SVG into a React Native component. You can then easily import and render from a .js file. This is how it looks on the iOS Simulator:

enter image description here

Upvotes: 2

Related Questions