react-native-svg

metro.config.js

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

svg-file.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="289px" height="221px" viewBox="0 0 289 221" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
            <stop stop-color="#51AFF3" offset="0%"></stop>
            <stop stop-color="#54ADEF" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="75.7886165%" y1="43.1424984%" x2="51.7979495%" y2="63.5033829%" id="linearGradient-2">
            <stop stop-color="#3D9FE8" offset="0%"></stop>
            <stop stop-color="#298BD7" offset="100%"></stop>
        </linearGradient>
    </defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Group-3" transform="translate(0.059524, 0.500000)">
            <path d="M35.2159864,0 C32.2159864,59.3333333 53.7159864,112.666667 99.7159864,160 C145.715986,207.333333 208.54932,226.666667 288.215986,218 L288.215986,0 L35.2159864,0 Z" id="Path-2" fill="#3F95D8"></path>
            <g id="Sun" transform="translate(175.940476, 3.500000)">
                <ellipse id="Oval" fill="#F1F9FF" opacity="0.05" cx="50.5" cy="50.5" rx="50.5" ry="50"></ellipse>
                <ellipse id="Oval-Copy-2" fill="#F1F9FF" opacity="0.1" cx="50.5" cy="50.5" rx="28.5" ry="28"></ellipse>
                <circle id="Oval-Copy" fill="#F1F9FF" cx="50.5" cy="50.5" r="17.5"></circle>
                <rect id="Rectangle" fill="#FFFFFF" x="50" y="18" width="2" height="10"></rect>
                <rect id="Rectangle-Copy-4" fill="#FFFFFF" x="50" y="73" width="2" height="10"></rect>
                <rect id="Rectangle-Copy" fill="#FFFFFF" transform="translate(71.000000, 31.000000) rotate(40.000000) translate(-71.000000, -31.000000) " x="70" y="26" width="2" height="10"></rect>
                <rect id="Rectangle-Copy-2" fill="#FFFFFF" transform="translate(79.000000, 51.000000) rotate(90.000000) translate(-79.000000, -51.000000) " x="78" y="46" width="2" height="10"></rect>
                <rect id="Rectangle-Copy-6" fill="#FFFFFF" transform="translate(22.000000, 51.000000) rotate(90.000000) translate(-22.000000, -51.000000) " x="21" y="46" width="2" height="10"></rect>
                <rect id="Rectangle-Copy-3" fill="#FFFFFF" transform="translate(71.000000, 71.000000) rotate(-40.000000) translate(-71.000000, -71.000000) " x="70" y="66" width="2" height="10"></rect>
                <rect id="Rectangle-Copy-5" fill="#FFFFFF" transform="translate(31.000000, 71.000000) rotate(40.000000) translate(-31.000000, -71.000000) " x="30" y="66" width="2" height="10"></rect>
                <rect id="Rectangle-Copy-7" fill="#FFFFFF" transform="translate(31.000000, 31.000000) rotate(-40.000000) translate(-31.000000, -31.000000) " x="30" y="26" width="2" height="10"></rect>
            </g>
            <g id="Clouds" transform="translate(0.000000, 42.500000)" fill="#B5E0FF">
                <path d="M1.44047619,46.5 C-2.22619048,42.8333333 1.10714286,41 11.4404762,41 C26.9404762,41 63.9404762,42 67.9404762,39.5 C71.9404762,37 83.4404762,21 94.4404762,21 C105.440476,21 109.940476,25.5 119.940476,29.5 C129.940476,33.5 166.440476,38 170.440476,41 C174.440476,44 181.940476,56 119.940476,56 C57.9404762,56 18.9404762,55.5 11.4404762,52 C6.44047619,49.6666667 3.10714286,47.8333333 1.44047619,46.5 Z" id="Path-3"></path>
                <path d="M96.2318622,5.1 C95.4901524,4.36666667 96.164434,4 98.2547072,4 C101.390117,4 108.874643,4.2 109.683781,3.7 C110.492919,3.2 112.819191,0 115.044321,0 C117.26945,0 118.17973,0.9 120.202575,1.7 C122.22542,2.5 129.608805,3.4 130.417943,4 C131.227081,4.6 132.744214,7 120.202575,7 C107.660936,7 99.7718409,6.9 98.2547072,6.2 C97.2432847,5.73333333 96.569003,5.36666667 96.2318622,5.1 Z" id="Path-3-Copy" fill-opacity="0.5"></path>
                <path d="M177.440476,61.5 C175.107143,56.5 179.607143,52.8333333 190.940476,50.5 C207.940476,47 229.940476,50.5 243.440476,44.5 C256.940476,38.5 260.940476,28 268.940476,28 C275.254639,28 287.820694,32.4032557 287.834038,36.3131437 C287.904997,57.1043812 287.940476,67.5 287.940476,67.5 C257.438493,67.4477226 233.10516,66.9477226 214.940476,66 C196.775793,65.0522774 184.275793,63.5522774 177.440476,61.5 Z" id="Path-4"></path>
            </g>
            <path d="M81.9404762,140 C94.6071429,156.333333 112.27381,172.5 134.940476,188.5 C157.607143,204.5 179.27381,192.5 199.940476,152.5 L138.440476,110 C133.440476,107.666667 127.940476,108 121.940476,111 C115.940476,114 102.607143,123.666667 81.9404762,140 Z" id="Path-5" fill="url(#linearGradient-1)"></path>
            <path d="M287.940476,161.566176 C263.607143,139.89951 246.607143,129.566176 236.940476,130.566176 C227.27381,131.566176 193.27381,150.877451 134.940476,188.5 C158.001671,201.729787 176.668338,209.896454 190.940476,213 C246.157161,225.007138 288.440476,218.929022 288.440476,218 C288.440476,216.710784 288.27381,197.89951 287.940476,161.566176 Z" id="Path-6" fill="url(#linearGradient-2)"></path>
        </g>
    </g>
</svg>