@rnx-kit/babel-preset-metro-react-native

@rnx-kit/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 @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"],
};