Skip to main content

babel-preset-metro-react-native

@rnx-kit/babel-preset-metro-react-native provides a Babel preset for React Native applications that you can use as a drop-in replacement for metro-react-native-babel-preset).

Usage​

Add @rnx-kit/babel-preset-metro-react-native to your babel.config.js:

module.exports = {
  presets: ["@rnx-kit/babel-preset-metro-react-native"],
};

If you want to add additional plugins, you can pass an options object:

module.exports = {
  presets: [
    [
      "@rnx-kit/babel-preset-metro-react-native",
      {
        additionalPlugins: ["const-enum"],
      },
    ],
  ],
};

Notes on Bundle Size​

If you're looking to reduce the bundle size, here are a couple of things you can try.

Enable compiler assumptions​

Since 7.13.0, Babel can make certain assumptions about your code to reduce the amount of generated code. You can read more about it in Compiler assumptions.

Enable loose mode when transforming classes​

If you make heavy use of classes, but can't use compiler assumptions, you can enable looseClassTransform to remove helper functions:

module.exports = {
  presets: [
    [
      "@rnx-kit/babel-preset-metro-react-native",
      {
        looseClassTransform: true,
      },
    ],
  ],
};

This is equivalent to passing { loose: true } to @babel/plugin-transform-classes.

Enable experimental import/export support​

In your metro.config.js, enable experimentalImportSupport:

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: true,
        inlineRequires: true,
      },
    }),
  },
};

And disable import/export transformation in your babel.config.js:

module.exports = {
  presets: [
    [
      "@rnx-kit/babel-preset-metro-react-native",
      { disableImportExportTransform: true },
    ],
  ],
};

Doing this will help the minifier strip out some unused code, but make sure that your app still works after enabling it.

babel-plugin-lodash​

If you're using Lodash, you can get some reduction with babel-plugin-lodash. Add it to your babel.config.js like below:

module.exports = {
  presets: ["@rnx-kit/babel-preset-metro-react-native"],
  plugins: ["lodash"],
};