CODEWITHSUNDEEP
javascriptsvgreact-native
cbll
cbll

Reputation: 7219

How do I render svg images in React Native?

I've tried "react-native-remote-svg" and "react-native-svg-image"; neither of them manage to render the SVG file.

How do I handle SVG in React-native?

Example code:

import SVGImage from 'react-native-svg-image'

const EmailLogo = require('../static/others/Email.svg');

// Render etc....

                        <ButtonContainer>
                            <Button bgColor={colors.darkTeal} txtColor={colors.whiteText}
                                    onPress={this.onSignInPress.bind(this)}>
                                LOG IN WITH
                            </Button>
                            <SVGImage
                                style={{ width: 80, height: 80 }}
                                source={EmailLogo}
                            />
                        </ButtonContainer>

Result: It's a white square when it should be an email logo.

How does one handle SVG's properly in React-native?

Upvotes: 1

Views: 5339

Answers (2)

magneticz
magneticz

Reputation: 2440

I've been through this struggle. react-native-svg-icon helped me out, but there were some additional things that i had to do, to make it work.

First of all, this library uses react-native-svg underneath. And you need to convert your svg files into SVG objects that this library understands.

If your open your svg file with editor, it will look something like this

<svg xmlns="http://www.w3.org/2000/svg" viewBox="170.5 200.5 18.6 23">
  <defs>
    <style>.a{fill:#444;}.b{fill:#07b57a;}</style>
  </defs>
  <g transform="translate(171 201)">
    <path class="a" d="M18.1,22.5H-.5V-.5H18.1ZM.5,21.5H17.1V.5H.5Z"/>
    <rect class="b" width="5.4" height="1" transform="translate(9 5.4)"/>
    <path class="b" d="M4.4,7.3,3,5.9l.7-.7.7.7L6.6,3.7l.7.7Z"/>
    <rect class="b" width="5.4" height="1" transform="translate(9 10.5)"/>
    <path class="b" d="M4.4,12.4,3,11l.7-.7.7.7L6.6,8.8l.7.7Z"/>
    <rect class="b" width="5.4" height="1" transform="translate(9 15.6)"/>
    <rect class="b" width="2.5" height="1" transform="translate(3.2 15.6)"/>
  </g>
</svg>

You need to convert it to something like this

  entry: {
    svg: (
      <G transform="translate(171 201)">
        <Path fill="#444444" d="M-152.4-178H-171v-23h18.6V-178z M-170-179h16.6v-21H-170V-179z" />
        <Rect x="-161.5" y="-195.1" fill="#07B57A" width="5.4" height="1" />
        <Path
          fill="#07B57A"
          d="M-166.1-193.2l-1.4-1.4l0.7-0.7l0.7,0.7l2.2-2.2l0.7,0.7L-166.1-193.2z"
        />
        <Rect x="-161.5" y="-190" fill="#07B57A" width="5.4" height="1" />
        <Path
          fill="#07B57A"
          d="M-166.1-188.1l-1.4-1.4l0.7-0.7l0.7,0.7l2.2-2.2l0.7,0.7L-166.1-188.1z"
        />
        <Rect x="-161.5" y="-184.9" fill="#07B57A" width="5.4" height="1" />
        <Rect x="-167.3" y="-184.9" fill="#07B57A" width="2.5" height="1" />
      </G>
    ),
    viewBox: '0 0 18.6 23',
  }

This is a representation of the svg file in components of react-native-svg library. One thing you need to pay attention here, is viewbox of the svg file. I am not sure why, but most of the time, it is 'off center'. I will show in screenshots below. Because of that, it cannot be displayed by the react-native-svg-icon as well. To bring it to center you can use Adobe Illustrator, or some other online tool to edit svg. One i used is http://editor.method.ac/. So, I uploaded my svg, recentered it and downloaded it again. and used that svg file to create object in my react native code.

This is my initial svg file that i uploaded to the service. if you zoom out and press cmd+a (or ctrl+a) to select all, it will highlight svg icon, like in screenshot below. You should position it to the white part, either by dragging it, or by setting X and Y on top right corner to 0s. enter image description here

This is how it will look when centered enter image description here

Once you save that svg file, use it to convert it to javascript object with react-native-svg components, more info on that can be found here

Once you create you svg objects, you can use it with react-native-svg-icon. You will find how to do that in the link I shared above.

I know, this is a lot of pain and seemingly over complicated, and I spent quite some time to make it work, but it is the only way I managed to accomplish it.

One other option would be to convert your svgs into font icons with icomoon.com and use it with react-native-vector-icons. but it will only work if your svgs are drawn with only one color, as multicolored ones cannot be converted to fonts

P.S. I didn't try, but maybe, libraries that you tried to use might work with centered svg file that we got from online service. Let me know if it works, then it can be helpful to other users as well.

Upvotes: 1

Pir Shukarullah Shah
Pir Shukarullah Shah

Reputation: 4252

react-native-svg-image and react-native-svg-image uses WebView to render SVG files so it do not support local files at the moment. Its written it the docs.

Use react-native-svg-uri to render SVG images in React Native from an URL or a static file. to use react-native-svg-uri you will need to link react-native-svg as well. So read docs carefully.

Upvotes: 0

Related Questions