metro-react-native-babel-preset

What is metro-react-native-babel-preset?

The metro-react-native-babel-preset package is a Babel preset for React Native applications. It includes the Babel plugins and configurations necessary to compile JavaScript code in a way that is compatible with the React Native platform. This preset helps developers by abstracting the complex Babel configurations required for React Native development.

What are metro-react-native-babel-preset's main functionalities?

Transform JSX

This code sample demonstrates how JSX is transformed into JavaScript that React Native can understand. The metro-react-native-babel-preset handles the necessary transformations behind the scenes.

import React from 'react';
import { View, Text } from 'react-native';

function MyComponent() {
  return (
    <View>
      <Text>Hello, world!</Text>
    </View>
  );
}

ESNext Features

This code sample shows the use of class properties, an ESNext feature. The preset allows developers to write modern JavaScript by transpiling features that are not natively supported by the React Native JavaScript engine.

class MyComponent extends React.Component {
  state = { greeting: 'Hello' };

  render() {
    return <Text>{this.state.greeting}, world!</Text>;
  }
}

Module Resolution

This code sample illustrates module resolution. The preset configures Babel to resolve modules in a way that is compatible with the Metro bundler used by React Native.

import myModule from 'my-module';

Other packages similar to metro-react-native-babel-preset

@babel/preset-env

The @babel/preset-env package is a widely-used Babel preset that allows developers to use the latest JavaScript features without worrying about browser compatibility. It is similar to metro-react-native-babel-preset in that it handles modern JavaScript features, but it is targeted towards web development rather than React Native.

@babel/preset-react

The @babel/preset-react package is a Babel preset specifically for React applications. It includes plugins that transform JSX and other React-specific syntax. It is similar to metro-react-native-babel-preset, but it does not include React Native-specific transformations and optimizations.

babel-preset-expo

The babel-preset-expo package is a Babel preset for Expo apps, which are built on top of React Native. It extends metro-react-native-babel-preset with additional Expo-specific configurations and plugins. It is similar but tailored for the Expo ecosystem.

README

metro-react-native-babel-preset

Babel presets for React Native applications. React Native itself uses this Babel preset by default when transforming your app's source code.

If you wish to use a custom Babel configuration by writing a babel.config.js file in your project's root directory, you must specify all the plugins necessary to transform your code. React Native does not apply its default Babel configuration in this case. So, to make your life easier, you can use this preset to get the default configuration and then specify more plugins that run before it.

Usage

As mentioned above, you only need to use this preset if you are writing a custom babel.config.js file.

Installation

Install metro-react-native-babel-preset in your app:

with npm:

npm i metro-react-native-babel-preset --save-dev

or with yarn:

yarn add -D metro-react-native-babel-preset

Configuring Babel

Then, create a file called babel.config.js in your project's root directory. The existence of this babel.config.js file will tell React Native to use your custom Babel configuration instead of its own. Then load this preset:

{
  "presets": ["module:metro-react-native-babel-preset"]
}

You can further customize your Babel configuration by specifying plugins and other options. See Babel's babel.config.js documentation to learn more.

Help and Support

If you get stuck configuring Babel, please ask a question on Stack Overflow or find a consultant for help. If you discover a bug, please open up an issue.