@expo/metro-config

What is @expo/metro-config?

@expo/metro-config is a configuration package for Metro, the JavaScript bundler used by React Native. It provides a set of default configurations optimized for Expo projects, making it easier to set up and customize the Metro bundler for your React Native applications.

What are @expo/metro-config's main functionalities?

Default Configuration

This feature provides a default configuration for Metro bundler, optimized for Expo projects. It simplifies the setup process by providing sensible defaults.

const { getDefaultConfig } = require('@expo/metro-config');

const defaultConfig = getDefaultConfig(__dirname);

module.exports = defaultConfig;

Custom Configuration

This feature allows you to customize the default Metro configuration. For example, you can add custom file extensions to the resolver.

const { getDefaultConfig } = require('@expo/metro-config');

const defaultConfig = getDefaultConfig(__dirname);

defaultConfig.resolver.sourceExts.push('cjs');

module.exports = defaultConfig;

Asset Plugins

This feature allows you to add custom asset plugins to the Metro configuration. For example, you can add a plugin to hash asset files.

const { getDefaultConfig } = require('@expo/metro-config');

const defaultConfig = getDefaultConfig(__dirname);

defaultConfig.transformer.assetPlugins = ['expo-asset/tools/hashAssetFiles'];

module.exports = defaultConfig;

Other packages similar to @expo/metro-config

metro-config

metro-config is the official configuration package for Metro bundler. It provides a flexible way to customize the Metro bundler for React Native projects. Unlike @expo/metro-config, it does not come with Expo-specific defaults.

haul

haul is an alternative JavaScript bundler for React Native that offers more customization options compared to Metro. It can be used as a replacement for Metro and provides its own set of configuration options, making it more flexible but also more complex to set up.

README

@expo/metro-config

This package contains the default Metro config that is required for bundling apps with Expo CLI. Refer to the Expo metro.config.js docs to learn more.

metro.config.js

// Learn more https://docs.expo.io/guides/customizing-metro
const { getDefaultConfig } = require('expo/metro-config');

/** @type {import('expo/metro-config').MetroConfig} */
const config = getDefaultConfig(__dirname);

module.exports = config;

Exotic

As of SDK 51, the exotic transformer has been fully removed in favor of the default @expo/metro-config transformer. The export @expo/metro-config/transformer no longer exists.

Most of the Exotic mode performance benefits have been integrated in the default Expo CLI bundling pipeline (e.g. less AST cloning, faster worker creation), and as such, the feature no longer needs to be enabled/disabled. Setting mode: "exotic" will no longer have any additional effects over the default.

Ensure you extend the @expo/metro-config/babel-transformer when customizing babel. Learn more: Extending the Babel transformer.