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:

JavaScript

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.

JavaScript

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

module.exports = function (baseConfig) {
  const defaultConfig = mergeConfig(
    baseConfig,
    getDefaultConfig(__dirname),