{"id":19331,"library":"babel-preset-react-native","title":"babel-preset-react-native","description":"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.","status":"deprecated","version":"4.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/facebook/metro/tree/master/packages/metro-react-native-babel-preset","tags":["javascript","babel","preset","react-native"],"install":[{"cmd":"npm install babel-preset-react-native","lang":"bash","label":"npm"},{"cmd":"yarn add babel-preset-react-native","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-preset-react-native","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"This is a CommonJS Babel preset, typically defined in .babelrc as a string. No ESM import path exists.","wrong":"import { reactNative } from 'babel-preset-react-native';","symbol":"default","correct":"module.exports = { presets: ['babel-preset-react-native'] };"},{"note":"In .babelrc, Babel resolves the preset name; 'react-native' is the shorthand, 'babel-preset-react-native' also works but is longer.","wrong":"{\n  \"presets\": [\"babel-preset-react-native\"]\n}","symbol":"react-native","correct":"{\n  \"presets\": [\"react-native\"]\n}"},{"note":"ESM import does not work because the package only provides a CommonJS module. Use require() for programmatic use.","wrong":"import preset from 'babel-preset-react-native';","symbol":"require('babel-preset-react-native')","correct":"const preset = require('babel-preset-react-native');"}],"quickstart":{"code":"{\n  \"presets\": [\"react-native\"]\n}","lang":"javascript","description":"Minimal .babelrc configuration to use the deprecated babel-preset-react-native in React Native apps using Babel 6."},"warnings":[{"fix":"Replace 'babel-preset-react-native' with 'metro-react-native-babel-preset' in your Babel config.","message":"babel-preset-react-native is deprecated. Use metro-react-native-babel-preset for React Native v0.57+.","severity":"deprecated","affected_versions":">=0.57"},{"fix":"Install metro-react-native-babel-preset@5 or later, which supports Babel 7.","message":"babel-preset-react-native@4 only supports Babel 6, not Babel 7. React Native v0.57 requires Babel 7.","severity":"breaking","affected_versions":">=0.57"},{"fix":"Ensure your .babelrc includes the preset to restore defaults, and avoid removing essential plugins for RN.","message":"Defining a custom .babelrc completely overrides React Native's default Babel config, including necessary transforms.","severity":"gotcha","affected_versions":"*"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run 'npm install babel-preset-react-native --save-dev' (or the correct package for your RN version).","cause":"The package is not installed or is not in node_modules.","error":"Error: Cannot find module 'babel-preset-react-native'"},{"fix":"Upgrade to metro-react-native-babel-preset which exports a function compatible with Babel 7.","cause":"Using babel-preset-react-native@4 with Babel 7 which expects function exports.","error":"Error: Plugin/Preset files are not allowed to export objects, only functions."},{"fix":"Remove 'babel-preset-react-native' from your Babel config and dependencies.","cause":"Both old and new presets are configured, causing duplicate transforms.","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."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}