@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:

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

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

`js
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.

$3

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.

$3

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

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

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

$3

In your metro.config.js, enable experimentalImportSupport:

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

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

`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.

$3

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

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