babel.config.js

A reference for Babel configuration file.

For the complete documentation index, see llms.txt. Use this Use this file to discover all available pages.

Babel is used as the JavaScript compiler to transform modern JavaScript (ES6+) into a version compatible with the JavaScript engine on mobile devices.

Each new Expo project created using npx create-expo-app configures Babel automatically and uses babel-preset-expo as the default preset. There is no need to create a babel.config.js file unless you need to customize the Babel configuration.

Create babel.config.js

If your project requires a custom Babel configuration, you need to create the babel.config.js file in your project by following the steps below:

1. Navigate to the root of your project and run the following command inside a terminal. This will generate a babel.config.js file in the root of your project.

2. The babel.config.js file contains the following default configuration:

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
  };
};

3. If you make a change to the babel.config.js file, you need to restart the Metro bundler to apply the changes and use --clear option from Expo CLI to clear the Metro bundler cache:

babel-preset-expo

babel-preset-expo is the default preset used in Expo projects. It extends the default React Native preset (@react-native/babel-preset) and adds support for decorators, tree-shaking web libraries, and loading font icons.