title: Trouble integrating react-native-svg-transformer with my metro.config.js file
body: <p>I want to use svgs in my react native app. After a bit of searching, it seemed like react-native-svg-transformer was a good option. However, I got to the step where I was supposed to merge the github metro.config.js with my local metro.config.js, and I realized that my config file looks very different. I couldn't figure out how to merge them and I don't want to break anything, so any input would be much appreciated. Here is the react-native-svg-transform code:</p>
  
  <pre><code>const { getDefaultConfig } = require("metro-config");
  
  module.exports = (async () =&gt; {
    const {
      resolver: { sourceExts, assetExts }
    } = await getDefaultConfig();
    return {
      transformer: {
        getTransformOptions: async () =&gt; ({
          transform: {
            experimentalImportSupport: false,
            inlineRequires: false
          }
        }),
        babelTransformerPath: require.resolve("react-native-svg-transformer")
      },
      resolver: {
        assetExts: assetExts.filter(ext =&gt; ext !== "svg"),
        sourceExts: [...sourceExts, "svg"]
      }
    };
  })();
  </code></pre>
  
  <p>And here is my metro.config.js:</p>
  
  <pre><code>"use strict";
  function _asyncToGenerator(fn) {
    return function() {
      var gen = fn.apply(this, arguments);
      return new Promise(function(resolve, reject) {
        function step(key, arg) {
          try {
            var info = gen[key](arg);
            var value = info.value;
          } catch (error) {
            reject(error);
            return;
          }
          if (info.done) {
            resolve(value);
          } else {
            return Promise.resolve(value).then(
              function(value) {
                step("next", value);
              },
              function(err) {
                step("throw", err);
              }
            );
          }
        }
        return step("next");
      });
    };
  }
  
  const path = require("path");
  
  const ROOT_PATH = path.resolve(__dirname, "basic_bundle");
  
  module.exports = {
    cacheStores: [],
    maxWorkers: 1,
    projectRoot: ROOT_PATH,
    reporter: { update() {} },
    watchFolders: [path.resolve(__dirname, "../lib/polyfills")],
    server: { port: 10028 },
    resolver: {
      useWatchman: false
    },
  
    transformer: {
      assetRegistryPath: path.join(ROOT_PATH, "AssetRegistry"),
      babelTransformerPath: require.resolve("metro/src/reactNativeTransformer"),
      enableBabelRCLookup: false,
      enableBabelRuntime: false,
      getTransformOptions: (() =&gt; {
        var _ref = _asyncToGenerator(function*() {
          return {
            transform: { experimentalImportSupport: true, inlineRequires: false },
            preloadedModules: false,
            ramGroups: []
          };
        });
        return function getTransformOptions() {
          return _ref.apply(this, arguments);
        };
      })()
    }
  };
  </code></pre>
  
  <p>If anyone knows an easier way to do this, that would also be welcome. Additionally, I know that react-native-svg-uri has production issues on android, and I would really like to avoid those - does anyone know if react-native-svg-transform has the same issues? Thanks!</p>