Search code examples
react-nativereact-native-svg

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

Solution

  • 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