babel-preset-react-native

4.0.1 verified Sat Apr 25 auth: no javascript deprecated

A Babel preset for React Native applications, providing the default Babel configuration used by React Native's Metro bundler. This preset is deprecated and has been replaced by metro-react-native-babel-preset for React Native v0.57 and later. The last version (4.0.1) supports Babel 6; users on newer versions must migrate. Key differentiator: it was the official preset before React Native switched to Babel 7, enabling custom Babel configs while preserving baseline transforms.

Common errors

error Error: Cannot find module 'babel-preset-react-native' ↓

cause The package is not installed or is not in node_modules.

fix

Run 'npm install babel-preset-react-native --save-dev' (or the correct package for your RN version).

error Error: Plugin/Preset files are not allowed to export objects, only functions. ↓

cause Using babel-preset-react-native@4 with Babel 7 which expects function exports.

fix

Upgrade to metro-react-native-babel-preset which exports a function compatible with Babel 7.

error Warning: `metro-react-native-babel-preset` is included in the project's config while `babel-preset-react-native` is also present. Please remove the old preset. ↓

cause Both old and new presets are configured, causing duplicate transforms.

fix

Remove 'babel-preset-react-native' from your Babel config and dependencies.

Warnings

deprecated babel-preset-react-native is deprecated. Use metro-react-native-babel-preset for React Native v0.57+. ↓

fix Replace 'babel-preset-react-native' with 'metro-react-native-babel-preset' in your Babel config.

breaking babel-preset-react-native@4 only supports Babel 6, not Babel 7. React Native v0.57 requires Babel 7. ↓

fix Install metro-react-native-babel-preset@5 or later, which supports Babel 7.

gotcha Defining a custom .babelrc completely overrides React Native's default Babel config, including necessary transforms. ↓

fix Ensure your .babelrc includes the preset to restore defaults, and avoid removing essential plugins for RN.

Install

npm install babel-preset-react-native

yarn add babel-preset-react-native

pnpm add babel-preset-react-native

Imports

default

wrong

import { reactNative } from 'babel-preset-react-native';

correct

module.exports = { presets: ['babel-preset-react-native'] };

This is a CommonJS Babel preset, typically defined in .babelrc as a string. No ESM import path exists.

react-native
wrong
```
{
  "presets": ["babel-preset-react-native"]
}
```
correct
```
{
  "presets": ["react-native"]
}
```
In .babelrc, Babel resolves the preset name; 'react-native' is the shorthand, 'babel-preset-react-native' also works but is longer.
require('babel-preset-react-native')
wrong
```
import preset from 'babel-preset-react-native';
```
correct
```
const preset = require('babel-preset-react-native');
```
ESM import does not work because the package only provides a CommonJS module. Use require() for programmatic use.

Quickstart

Minimal .babelrc configuration to use the deprecated babel-preset-react-native in React Native apps using Babel 6.

{
  "presets": ["react-native"]
}