How to make Metro (React Native packager) ignore certain directories

The configuration for this has a habit of changing between RN versions. See below for version-specific instructions on creating a config file, loading the config file and clearing the cache.

For React Native >= 0.64(?)

This is speculative as 0.64 is not yet released, but a rename from blacklist to exclusionList made in metro 0.60 is due to land in RN in 0.64.

In your project root create metro.config.js with the contents:

const exclusionList = require('metro-config/src/defaults/exclusionList');

// exclusionList is a function that takes an array of regexes and combines
// them with the default exclusions to return a single regex.

module.exports = {
  resolver: {
    blacklistRE: exclusionList([/dist\/.*/])
  }
};

For React Native >= 0.59, < 0.64

In your project root create metro.config.js with the contents:

const blacklist = require('metro-config/src/defaults/blacklist');

// blacklist is a function that takes an array of regexes and combines
// them with the default blacklist to return a single regex.

module.exports = {
  resolver: {
    blacklistRE: blacklist([/dist\/.*/])
  }
};

For React Native >= 0.57, < 0.59

In your project root create rn-cli.config.js with the contents:

const blacklist = require('metro-config/src/defaults/blacklist');

// blacklist is a function that takes an array of regexes and combines
// them with the default blacklist to return a single regex.

module.exports = {
  resolver: {
    blacklistRE: blacklist([/dist\/.*/])
  }
};

For React Native >= 0.52, < 0.57

In your project root create rn-cli.config.js with the contents:

const blacklist = require('metro').createBlacklist;

module.exports = {
  getBlacklistRE: function() {
    return blacklist([/dist\/.*/]);
  }
};

For React Native >= 0.46, < 0.52.

In your project root create rn-cli.config.js with the contents:

const blacklist = require('metro-bundler').createBlacklist;

module.exports = {
  getBlacklistRE: function() {
    return blacklist([/dist\/.*/]);
  }
};

For React Native < 0.46.

In your project root create rn-cli.config.js with the contents:

const blacklist = require('react-native/packager/blacklist');

module.exports = {
  getBlacklistRE: function() {
    return blacklist([/dist\/.*/]);
  }
};

All versions < 0.59

Have your CLI command use this config by passing the --config option:

react-native run-ios --config=rn-cli.config.js

(The config file should be automatically picked up by RN >= 0.59, ever since it was renamed metro.config.js)

All versions: Note on caching

Be aware that your blacklisted items may have already been included in the cache by the packager in which case the first time you run the packager with the blacklist you may need to reset the cache with --reset-cache

More Related Contents:

Leave a Comment Cancel reply