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.

Process:
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: [
                            "@babel/preset-env",
                            "react",
                            "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 {
render(){
  return (
          <View>
                <MySVG height={100} width={100}/>
          </View>
   );
  }
}

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

Result:

HAPPY CODING…