Question 33075 in React native Question posted in
The official React Native documentation can be found here.

Problem displaying SVG images in React Native

I’m having trouble displaying an SVG image in my React Native app. When I try to display it in my React Native app, it gets distorted and doesn’t look as expected.

Here is how the image should appears:

Expected rendering

And here is how it looks in my React Native app:

Rendering into react native

I’ve included the SVG image file that I’m using here: [file attachment] To display the image I tried the following both method:

import AltoDark from '@/assets/image/profil/alto_dark.svg';
...
<View>
//first method
<AltoDark/>
// second method
<SvgXml xml={AltoDark} />
</View>

my package.json is the following one

 "react-native-svg": "10.1.0",
 "react-native-svg-transformer": "^1.0.0",

and my metro config is

const {getDefaultConfig} = require('metro-config');

module.exports = (async () => {
  const {
    resolver: {sourceExts, assetExts},
  } = await getDefaultConfig();
  return {
    transformer: {
      babelTransformerPath: require.resolve('react-native-svg-transformer'),
    },
    resolver: {
      assetExts: assetExts.filter(ext => ext !== 'svg'),
      sourceExts: [...sourceExts, 'svg'],
    },
  };
})();

The svg file can be found here: https://pastebin.com/kPW2Qr32. Anyone suggest what might be causing this issue and how I can fix it so that the image looks correct in my React Native app?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    In my svg file i change the objectBoundingBox dimension. I went from 1x1 to 2x2. Then I played with the before last argument of the transform="matrix()" to adjust the horizontal position of the image. I went from 0.160427to 0.760427

    <pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0_595_4081" transform="matrix(0.00191705 0 0 0.000715206 0.160427 0.0851681)"/>
</pattern>

    <pattern id="pattern0" patternContentUnits="objectBoundingBox" width="2" height="2">
<use xlink:href="#image0_595_4081" transform="matrix(0.00191705 0 0 0.000715206 0.760427 0.0851681)"/>
</pattern>

  2. 0

    I follow the below steps while using an SVG image in React Native app.

    1. Convert SVG to JSX element from here.
    2. Create a .tsx file and paste the JSX element.
    3. Give a desirable name & export the JSX element as a functional component.
    4. Use it like this in your component.
    import AltoDark from '../../components';

...
...


<AltoDark/>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search