@react-native/metro-config

What is @react-native/metro-config?

@react-native/metro-config is a configuration package for Metro, the JavaScript bundler used by React Native. It allows developers to customize the Metro bundler's behavior, such as transforming files, resolving modules, and optimizing the build process.

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

Custom Transformer

This feature allows you to specify a custom transformer for Metro. In this example, the configuration is set to use the 'react-native-typescript-transformer' to handle TypeScript files.

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

const config = getDefaultConfig(__dirname);

config.transformer = {
  babelTransformerPath: require.resolve('react-native-typescript-transformer')
};

module.exports = config;

Custom Resolver

This feature allows you to customize the resolver settings. In this example, the configuration is modified to include additional file extensions like 'ts' and 'tsx' for TypeScript support.

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

const config = getDefaultConfig(__dirname);

config.resolver = {
  sourceExts: ['jsx', 'js', 'ts', 'tsx']
};

module.exports = config;

Asset Plugins

This feature allows you to specify asset plugins for Metro. In this example, the configuration is set to use 'expo-asset/tools/hashAssetFiles' to handle asset files.

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

const config = getDefaultConfig(__dirname);

config.transformer = {
  assetPlugins: ['expo-asset/tools/hashAssetFiles']
};

module.exports = config;

Other packages similar to @react-native/metro-config

metro

Metro is the JavaScript bundler for React Native. It provides the core functionalities for bundling JavaScript code and assets. While @react-native/metro-config is specifically for configuring Metro, the 'metro' package itself includes the bundler and its core functionalities.

haul

Haul is an alternative JavaScript bundler for React Native. It is highly customizable and integrates with Webpack, allowing developers to leverage the extensive Webpack ecosystem. Compared to @react-native/metro-config, Haul offers more flexibility through Webpack's configuration options.

webpack

Webpack is a popular JavaScript module bundler. While it is not specifically designed for React Native, it can be configured to work with React Native projects. Webpack offers a wide range of plugins and configuration options, making it a powerful alternative to Metro when used with the appropriate loaders and plugins.

README

@react-native/metro-config

Installation

yarn add --dev @react-native/js-polyfills metro-config metro-react-native-babel-transformer metro-runtime @react-native/metro-config

Note: We're using yarn to install deps. Feel free to change commands to use npm 3+ and npx if you like

Testing

To run the tests in this package, run the following commands from the React Native root folder:

1. yarn to install the dependencies. You just need to run this once
2. yarn jest packages/metro-config.