metro
TLDR
Start Metro bundler
$ npx react-native start
Start with cache reset$ npx react-native start --reset-cache
Start on specific port$ npx react-native start --port [8082]
Bundle for production$ npx react-native bundle --entry-file [index.js] --bundle-output [bundle.js]
Enable verbose logging$ npx react-native start --verbose
SYNOPSIS
metro [options]
DESCRIPTION
Metro is the JavaScript bundler used by React Native. It compiles and bundles JavaScript code and assets, handles module resolution, and provides hot reloading during development.
Metro is optimized for React Native's requirements with fast incremental builds.
PARAMETERS
--port port
Server port.--reset-cache
Clear bundler cache.--verbose
Verbose output.--config file
Config file path.--entry-file file
Entry point file.--bundle-output file
Output bundle file.--platform platform
Target platform.
CONFIGURATION
$ // metro.config.js
module.exports = {
resolver: {
sourceExts: ['js', 'jsx', 'ts', 'tsx'],
},
transformer: {
getTransformOptions: async () => ({
transform: { experimentalImportSupport: false },
}),
},
};
module.exports = {
resolver: {
sourceExts: ['js', 'jsx', 'ts', 'tsx'],
},
transformer: {
getTransformOptions: async () => ({
transform: { experimentalImportSupport: false },
}),
},
};
CAVEATS
React Native specific. Cache issues may require reset. Port conflicts with multiple instances.
HISTORY
Metro was developed by Facebook (Meta) as the bundler for React Native, optimized for mobile development workflows.
SEE ALSO
react-native(1), webpack(1), babel(1), expo(1)
