@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 Expo apps.

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

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.

If you'd like to use different transformers (e.g. Sucrase) for different files, you can still create a custom transformer and refine it for your project needs.

Custom transformers

Caution: This is an advanced feature for developers who need to speed up the bundling of very large apps.

You can use @expo/metro-config/transformer to create a custom multi-rule transformer. This is useful for running fewer transformations on node modules and speeding up bundling.

metro.transformer.js

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

module.exports = createExoticTransformer({
  transpileModules: ['@stripe/stripe-react-native'],
  // You can uncomment the following lines to add any extra node_modules paths in a monorepo:
  //   nodeModulesPaths: [
  //     'node_modules',
  //     // Generally you'll add this when your config is in `apps/my-app/metro.config.js`
  //     '../../node_modules',
  //     // If you have custom packages in a `packages/` folder
  //     '../../packages',
  //   ],
});

Then use it in your project:

metro.config.js

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

const config = getDefaultConfig(__dirname);

// Use the new transformer
config.transformer.babelTransformerPath = require.resolve('./metro.transformer');

// Optionally, you can add support for the `react-native` resolver field back
// doing this will increase bundling time and size as many community packages ship untransformed code using this feature.
// Other packages like `nanoid` use the field to support `react-native` so you may need to enable it regardless.
// defaultConfig.resolver.resolverMainFields.unshift('react-native');

module.exports = config;