metro

JavaScript bundler used by React Native

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 --platform [android] --dev false --entry-file [index.js] --bundle-output [bundle.js]

Enable verbose logging

$ npx react-native start --verbose

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 (ios, android).

--dev boolean

Development mode flag for the bundle (default: true).

--host host

Host to listen on (default: localhost).

--max-workers N

Specify the maximum number of workers for parallelization.

CONFIGURATION

$ // metro.config.js
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.