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

> Babel preset for React Native applications

Latest version **4.0.1** (published 2026-09-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install @rnx-kit/babel-preset-metro-react-native
pnpm add @rnx-kit/babel-preset-metro-react-native
yarn add @rnx-kit/babel-preset-metro-react-native
bun add @rnx-kit/babel-preset-metro-react-native
```

## Health

**Score 55/100 (C)** — status: active.

Positive: no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads; no types; no esm support.

## Facts

| | |
|---|---|
| Version | 4.0.1 |
| Published | 2026-09-01 |
| First published | 2021-03-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=20.18 |
| Dependencies | 2 |
| Unpacked size | 14.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1733 |
| Author | Microsoft Open Source |
| Maintainers | jasonvmorse, acoates, rnbot, tido64, rnsdkbot, hansenyy, microsoft-oss-releases, microsoft1es |

## Links

- npm: https://www.npmjs.com/package/@rnx-kit/babel-preset-metro-react-native
- Repository: https://github.com/microsoft/rnx-kit
- Homepage: https://github.com/microsoft/rnx-kit/tree/main/packages/babel-preset-metro-react-native#readme
- npm.io page: https://npm.io/package/@rnx-kit/babel-preset-metro-react-native

## Dependencies (2)

- [@rnx-kit/console](https://npm.io/package/@rnx-kit/console.md) ^3.0.0
- [babel-plugin-const-enum](https://npm.io/package/babel-plugin-const-enum.md) ^1.0.0

## Recent versions

- 4.0.1 (latest) — 2026-09-01
- 4.0.0 — 2026-05-13
- 3.0.2 — 2026-02-10
- 3.0.1 — 2026-01-13
- 3.0.0 — 2025-08-27
- 2.0.0 — 2024-09-11
- 1.1.8 — 2024-04-09
- 1.1.7 — 2024-04-02
- 1.1.6 — 2023-11-07
- 1.1.5 — 2023-10-10
- 1.1.4 — 2023-01-20
- 1.1.3 — 2022-11-17
- 1.1.2 — 2022-11-03
- 1.1.1 — 2022-09-07
- 1.1.0 — 2022-03-15
- … 18 more at https://npm.io/package/@rnx-kit/babel-preset-metro-react-native/versions

## README

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

[![Build](https://github.com/microsoft/rnx-kit/actions/workflows/build.yml/badge.svg)](https://github.com/microsoft/rnx-kit/actions/workflows/build.yml)
[![npm version](https://img.shields.io/npm/v/@rnx-kit/babel-preset-metro-react-native)](https://www.npmjs.com/package/@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`](https://github.com/react/react-native/tree/v0.81.0/packages/react-native-babel-preset#readme)).

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

### 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](https://babeljs.io/docs/en/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:

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

This is equivalent to passing
[`{ loose: true }`](https://babeljs.io/docs/en/babel-plugin-transform-classes#loose)
to `@babel/plugin-transform-classes`.

### Enable experimental import/export support

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.

### `babel-plugin-lodash`

If you're using [Lodash](https://lodash.com), you can get some reduction with
[babel-plugin-lodash](https://github.com/lodash/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"],
};
```

---
_Source: https://npm.io/package/@rnx-kit/babel-preset-metro-react-native · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._