Using SVG in Latest React Native Version 0.57

SVG with React Native

SVG is a vector format that can scale to any size without losing quality, and it can do this while having a comparatively low file-size too. SVG is amazing like that and preferred implementation on React Native Platform.

1) Install the Popular React Native SVG Library

npm install react-native-svg@latest --save

2) Link the Library without a miss.

react-native link react-native-svg

3) Install SVG Transformer, which converts the SVG files into React Components during compilation

npm install react-native-svg-transformer --save

4) Create a file if not present name “ rn-cli.config.js” and add the following.

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"]

5) Create a file if not present name “ webpack.config.js ” and add the following.

const webpack = require("webpack"); 
module.exports = {
entry: ["react-hot-loader/patch", "./index.web.js"],
devServer: { hot: true },
plugins: [ new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin() ],
module: {
rules: [{
test: /\.js?$/,
exclude: /node_modules/,
loader: "babel-loader",
query: {
babelrc: false,
presets: [
"module:metro-react-native-babel-preset" ],
plugins: ["react-hot-loader/babel"]
{test: /\.svg$/,
exclude: /node_modules/,
use: [{
loader: "@svgr/webpack"
resolve: {
alias: {
"react-native": "react-native-web"}, extensions: [".web.js", ".js", ".web.jsx", ".jsx"],
mainFields: ["browser", "main"]

6) Import the SVG as a component

import MySVG from '/image/svgname.svg'
class MyComponent implements React.Component {
return (
<MySVG height={100} width={100}/>

7) Important Notes:
a) Remove all the comments from the SVG File.
b) Titles in the SVG are to be removed (as of now)



Tech Enthusiast, Technopreneur and loves to code

Tech Enthusiast, Technopreneur and loves to code