React Native Bundle DiscoveryQuick start
This setup is for a standard Metro project. Using Expo, Re.Pack, Rollipop or Rozenite? See Other setups.
Using an AI coding agent?
Skip the manual steps below and point your agent at the
setup-react-native-bundle-discovery skill.
1. Install
yarn add -D react-native-bundle-discovery # required: generates the report
yarn add -D react-native-bundle-discovery-ui # optional: browser UI
yarn add -D react-native-bundle-discovery-cli # optional: CLI2. Configure Metro
const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
+const { createSerializer } = require('react-native-bundle-discovery');
const config = {};
+if (process.env.BUNDLE_ANALYZER) {
+ config.serializer = {
+ customSerializer: createSerializer({
+ projectRoot: __dirname, // ⚠️ In a monorepo, use the monorepo root instead
+ }),
+ };
+}
module.exports = mergeConfig(getDefaultConfig(__dirname), config);The report is generated only when the BUNDLE_ANALYZER environment variable is set, so regular builds are unaffected.
See all options in createSerializer.
3. Build a release bundle
BUNDLE_ANALYZER=1 npx react-native bundle \
--entry-file index.js \
--platform ios \
--dev false \
--bundle-output ios/main.jsbundle \
--assets-dest ios/assetsThis writes metro-stats.json to your project root.
4. Explore the report
npx react-native-bundle-discovery-ui metro-stats.json # open in the browser
npx react-native-bundle-discovery-cli metro-stats.json # get recommendations in the terminal