Support for React Native 0.72.0+

[Hmoulvad]

The metro config of React Native changes as of 0.72.0: https://react-native-community.github.io/upgrade-helper/?from=0.71.8&to=0.72.0-rc.3

Can you help with a implementation guide for that?

Currently trying

const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');

/**
 * Metro configuration
 * https://facebook.github.io/metro/docs/configuration
 *
 * @type {import('metro-config').MetroConfig}
 */

const defaultConfig = getDefaultConfig(__dirname);

const config = {
  transformer: {
    babelTransformerPath: require.resolve('react-native-svg-transformer'),
  },
  resolver: {
    assetExts: defaultConfig.assetExts.filter(ext => ext !== 'svg'),
    sourceExts: [...defaultConfig.sourceExts, 'svg'],
  },
};

module.exports = mergeConfig(defaultConfig, config);

But resolves in:

defaultConfig.sourceExts is not iterable.
TypeError: defaultConfig.sourceExts is not iterable
    at Object.<anonymous> (/Users/hbm-mbpro/Projects/AO/metro.config.js:18:35)
    at Module._compile (node:internal/modules/cjs/loader:1267:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1321:10)
    at Module.load (node:internal/modules/cjs/loader:1125:32)
    at Module._load (node:internal/modules/cjs/loader:965:12)
    at Module.require (node:internal/modules/cjs/loader:1149:19)
    at require (node:internal/modules/helpers:121:18)
    at module.exports (/Users/hbm-mbpro/Projects/AO/node_modules/cosmiconfig/node_modules/import-fresh/index.js:28:9)
    at loadJs (/Users/hbm-mbpro/Projects/AO/node_modules/cosmiconfig/dist/loaders.js:9:18)
    at Explorer.loadFileContent (/Users/hbm-mbpro/Projects/AO/node_modules/cosmiconfig/dist/createExplorer.js:230:12)

Thanks in advance!

[Hmoulvad]

Found a way around this:

const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
const defaults = require('metro-config/src/defaults/defaults');

/**
 * Metro configuration
 * https://facebook.github.io/metro/docs/configuration
 *
 * @type {import('metro-config').MetroConfig}
 */

const config = {
  transformer: {
    babelTransformerPath: require.resolve('react-native-svg-transformer'),
  },
  resolver: {
    assetExts: defaults.assetExts?.filter(ext => ext !== 'svg'),
    sourceExts: [...defaults.sourceExts, 'svg'],
  },
};

module.exports = mergeConfig(getDefaultConfig(__dirname), config);

Stolen from: reactwg/react-native-releases#54 (reply in thread)