Looking to incorporate SVGs into my React Native app led me to consider using react-native-svg-transformer. However, I hit a roadblock when attempting to merge the GitHub metro.config.js with my local version due to significant differences in the configuration files. Struggling to navigate this merge without causing any issues, I would greatly appreciate any guidance on how to proceed. Below is the code snippet for react-native-svg-transform:
const { getDefaultConfig } = require("metro-config");
module.exports = (async () => {
const {
resolver: { sourceExts, assetExts }
} = await getDefaultConfig();
return {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: false
}
}),
babelTransformerPath: require.resolve("react-native-svg-transformer")
},
resolver: {
assetExts: assetExts.filter(ext => ext !== "svg"),
sourceExts: [...sourceExts, "svg"]
}
};
})();
Here is a glimpse of my current metro.config.js:
"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: (() => {
var _ref = _asyncToGenerator(function*() {
return {
transform: { experimentalImportSupport: true, inlineRequires: false },
preloadedModules: false,
ramGroups: []
};
});
return function getTransformOptions() {
return _ref.apply(this, arguments);
};
})()
}
};
If you have any suggestions for an easier method to handle this situation, please do share them as well. Furthermore, I am aware of the production issues plaguing react-native-svg-uri on Android and would like to avoid those altogether - can anyone confirm if the same concerns apply to react-native-svg-transform? Appreciate your insights!