How to use react-native-reanimated with react-native-svg-transformer?

[iamrohitagg]

I am trying to change my metro.config.js file for the third step as recommended. But i have already changed my metro.config.js for react-native-svg-transformer, and if I do some changes the svg package does not work for me.


Here is my metro.config.js

const {
  wrapWithReanimatedMetroConfig,
} = require("react-native-reanimated/metro-config");

/**
 * Metro configuration
 * https://facebook.github.io/metro/docs/configuration
 *
 * @type {import('metro-config').MetroConfig}
 */
const config = async () => {
  const defaultConfig = getDefaultConfig(__dirname);
  const {
    resolver: { sourceExts, assetExts },
  } = defaultConfig;

  return mergeConfig(defaultConfig, {
    transformer: {
      babelTransformerPath: require.resolve("react-native-svg-transformer"),
      getTransformOptions: async () => ({
        transform: {
          experimentalImportSupport: false,
          inlineRequires: true,
        },
      }),
    },
    resolver: {
      assetExts: assetExts.filter((ext) => ext !== "svg"),
      sourceExts: [...sourceExts, "svg"],
    },
  });
};

module.exports = config;

[MatiPl01]

Hey @iamrohitagg!

Sorry for the late response. Your configuration doesn't work if you add wrapWithReanimatedMetroConfig here?

module.exports = wrapWithReanimatedMetroConfig(config);

Can you paste the error message you get?

Addint wrapWithReanimatedMetroConfig is recommended but not required so you can skip this step if it is problematic.