How to use SVG or vector images in React native

How to use SVG images in React native:

SVG or Scalable vector graphics are better than .png or .jpeg files. Image files are not scalable, i.e. if we try to scale these files, they will loose the quality on large screen phones. You can use multiple images for each file, but that will increase the size of the final app.

Also, you have to generate multiple size images each time you are making a change.

SVG format is a vector format. We can use a single SVG file and it will look same irrespective of the screen size. SVG files, also known as Scalable vector graphics, is an XML based markup language.

Can we use SVG images with React native:

React native doesn’t have any component to use svg images. There is a third party library that is used to load svg images. Following are the two libraries we need to use:

react-native-svg

This library provides svg support on react native for both iOS and Android.

react-native-svg-transformer

By using this library, you can import SVG files in your react native project and it converts these svg files to react native components.

Let’s try these libraries in a react native project.

Add the libraries:

Create a new react native project and add these libraries.

yarn add react-native-svg

yarn add --dev react-native-svg-transformer

1. Create a custom shape:

react-native-svg provides different custom shape components. For example:

import React from 'react';
import Svg, {Rect} from 'react-native-svg';

import {StyleSheet, View} from 'react-native';

const App = () => {
  return (
    <View style={styles.container}>
      <Svg height="50%" width="50%" viewBox="0 0 100 100">
        <Rect
          x="15"
          y="15"
          width="70"
          height="70"
          stroke="blue"
          strokeWidth="2"
          fill="red"
        />
      </Svg>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default App;

It will draw a rectangle with 70px width and height.

2. SVG from a remote uri:

We need to use the SvgUri component to load a SVG image from an URI.

import React from 'react';
import {SvgUri} from 'react-native-svg';

import {StyleSheet, View} from 'react-native';

const App = () => {
  return (
    <View style={styles.container}>
      <SvgUri
        width="50%"
        height="50%"
        uri="http://thenewcode.com/assets/images/thumbnails/homer-simpson.svg"
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default App;

3. SVG with css:

SvgCssUri component is used for svg with css, or if there is any style element with the svg component.

import React from 'react';
import {SvgCssUri} from 'react-native-svg';

import {StyleSheet, View} from 'react-native';

const App = () => {
  return (
    <View style={styles.container}>
      <SvgCssUri
        width="50%"
        height="50%"
        uri="http://thenewcode.com/assets/svg/accessibility.svg"
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default App;

4. Use a local svg file:

To use a local svg file, you need to download the svg file and put it in the project folder. Create one new file metro.config.js, if you don’t have this file and put the below code:

/**
 * Metro configuration for React Native
 * https://github.com/facebook/react-native
 *
 * @format
 */

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'],
    },
  };
})();

You can now import this file as like a component and use it in other components:

import React from 'react';
import Logo from './logo.svg';

import {StyleSheet, View} from 'react-native';

const App = () => {
  return (
    <View style={styles.container}>
      <Logo width={200} height={100} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default App;

5. SVG xml string:

react-native-svg provides a component called SvgXml to load svg xml:

import React from 'react';
import {SvgXml} from 'react-native-svg';

import {StyleSheet, View} from 'react-native';

const xml = `
  <svg>
  ....
  ....
  </svg>
`;

const App = () => {
  return (
    <View style={styles.container}>
      <SvgXml width={200} height={100} xml={xml} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default App;

6. SVG xml string with style:

If the xml string contains style element, we can use the SvgCss component.

import React from 'react';
import {SvgCss} from 'react-native-svg';

import {StyleSheet, View} from 'react-native';

const xml = `
  <svg>
  ...
  ...
  <style>
  ...
  ...
  </style>
  </svg>
`;

const App = () => {
  return (
    <View style={styles.container}>
      <SvgCss width={200} height={100} xml={xml} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default App;

It is similar to the above example, i.e. you need to pass the xml value in the xml props.

CodeVsColor