React native svg not rendered correct

Question

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

looks like this (wrong)

Answer 1

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

Answer 2

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: