Skip to main content

Metro

React Native uses Metro to build your JavaScript code and assets.

Configuring Metro​

Configuration options for Metro can be customized in your project's metro.config.js file. This can export either:

  • An object (recommended) that will be merged on top of Metro's internal config defaults.
  • A function that will be called with Metro's internal config defaults and should return a final config object.
tip

Please see Configuring Metro on the Metro website for documentation on all available config options.

In React Native, your Metro config should extend either @react-native/metro-config or @expo/metro-config. These packages contain essential defaults necessary to build and run React Native apps.

Below is the default metro.config.js file in a React Native template project:

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

/**
* Metro configuration
* https://metrobundler.dev/docs/configuration
*
* @type {import('metro-config').MetroConfig}
*/
const config = {};

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

Metro options you wish to customize can be done so within the config object.

Advanced: Using a config function​

Exporting a config function is an opt-in to managing the final config yourself β€” Metro will not apply any internal defaults. This pattern can be useful when needing to read the base default config object from Metro or to set options dynamically.

info

From @react-native/metro-config 0.72.1, it is no longer necessary to use a config function to access the complete default config. See the Tip section below.

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

module.exports = function (baseConfig) {
const defaultConfig = mergeConfig(baseConfig, getDefaultConfig(__dirname));
const {resolver: {assetExts, sourceExts}} = defaultConfig;

return mergeConfig(
defaultConfig,
{
resolver: {
assetExts: assetExts.filter(ext => ext !== 'svg'),
sourceExts: [...sourceExts, 'svg'],
},
},
);
};
tip

Using a config function is for advanced use cases. A simpler method than the above, e.g. for customising sourceExts, would be to read these defaults from @react-native/metro-config.

Alternative

const defaultConfig = getDefaultConfig(__dirname);

const config = {
resolver: {
sourceExts: [...defaultConfig.resolver.sourceExts, 'svg'],
},
};

module.exports = mergeConfig(defaultConfig, config);

However!, we recommend copying and editing when overriding these config values β€” placing the source of truth in your config file.

βœ… Recommended

const config = {
resolver: {
sourceExts: ['js', 'ts', 'tsx', 'svg'],
},
};

Learn more about Metro​