babel-preset-expo is a comprehensive Babel preset designed specifically for Expo and React Native projects. It extends the default React Native preset with advanced features including tree shaking, bundle splitting, React Server Components support, Hermes compilation optimization, dead-code elimination, and modern development tools integration.
npm install babel-preset-expoThe preset is used in Babel configuration files, not imported directly in application code:
// babel.config.js
module.exports = {
presets: ['babel-preset-expo']
};For TypeScript configurations or programmatic usage:
import type { BabelPresetExpoOptions } from 'babel-preset-expo';
import babelPresetExpo from 'babel-preset-expo';With options:
module.exports = {
presets: [
['babel-preset-expo', {
// Configuration options
jsxRuntime: 'automatic',
reanimated: true,
web: { /* web-specific options */ },
native: { /* native-specific options */ }
}]
]
};// babel.config.js - Minimal setup
module.exports = {
presets: ['babel-preset-expo']
};
// With platform-specific configuration
module.exports = {
presets: [
['babel-preset-expo', {
jsxRuntime: 'automatic', // Use React 17+ automatic JSX
reanimated: true, // Enable Reanimated plugin
web: {
disableImportExportTransform: true // Enable tree shaking on web
},
native: {
lazyImports: true // Enable lazy imports on native
}
}]
]
};babel-preset-expo is built around several key components:
Core preset function that returns Babel transformation configuration based on platform and options.
function babelPresetExpo(
api: ConfigAPI,
options?: BabelPresetExpoOptions
): TransformOptions;Configuration options for customizing preset behavior per platform or globally.
interface BabelPresetExpoPlatformOptions {
/** Disable or configure the decorators plugin */
decorators?: false | { legacy?: boolean; version?: number };
/** Enable Reanimated plugin (default: true) */
reanimated?: boolean;
/** Enable Worklets plugin (default: true) */
worklets?: boolean;
/** JSX runtime mode (default: 'automatic') */
jsxRuntime?: 'classic' | 'automatic';
/** JSX import source (default: 'react') */
jsxImportSource?: string;
}Configuration for babel-plugin-react-compiler with extensive environment options.
interface ReactCompilerOptions {
enableUseMemoCachePolyfill?: boolean;
compilationMode?: 'infer' | 'strict';
panicThreshold?: 'none' | 'all_errors' | 'critical_errors';
environment?: ReactCompilerEnvironment;
runtimeModule?: string | null;
}Build-time optimizations including tree shaking, lazy imports, and environment variable inlining.
interface PerformanceOptions {
/** Enable lazy imports for better startup performance */
lazyImports?: boolean;
/** Disable import/export transform for tree shaking */
disableImportExportTransform?: boolean;
/** Transform profile for Hermes optimization */
unstable_transformProfile?: 'default' | 'hermes-stable' | 'hermes-canary';
/** Minify typeof window checks */
minifyTypeofWindow?: boolean;
}React Server Components configuration with client/server boundary handling.
interface ServerComponentsSupport {
/** Server environment detection */
isServer: boolean;
/** React Server Components environment */
isReactServer: boolean;
/** Transform import.meta polyfill */
unstable_transformImportMeta?: boolean;
}Simplified Babel preset optimized specifically for web and server-side rendering environments.
function webPreset(
babel: unknown,
options?: WebPresetOptions
): BabelPreset;
interface WebPresetOptions {
/** Disable import/export transform for tree shaking */
disableImportExportTransform?: boolean;
/** Lazy import/export transform configuration */
lazyImportExportTransform?: any;
/** Enable Babel runtime helpers */
enableBabelRuntime?: boolean;
}Internal preset used automatically when platform === 'web' or in server environments.
Set of packages that should not be lazily initialized due to side effects.
export const lazyImports: Set<string>;
// Contains: ['expo', 'expo-asset', 'expo-task-manager']Available as named export from source or CommonJS module:
// ES module import
import { lazyImports } from 'babel-preset-expo/build/lazyImports';
// CommonJS require
const { lazyImports } = require('babel-preset-expo/lazy-imports-blacklist.js');Main configuration interfaces for TypeScript users.
import type { ConfigAPI, TransformOptions } from '@babel/core';
export type BabelPresetExpoOptions = BabelPresetExpoPlatformOptions & {
/** Web-specific settings that override global options */
web?: BabelPresetExpoPlatformOptions;
/** Native-specific settings that override global options */
native?: BabelPresetExpoPlatformOptions;
};
export type BabelPresetExpoPlatformOptions = {
/** Disable or configure the @babel/plugin-proposal-decorators plugin */
decorators?: false | { legacy?: boolean; version?: number };
/** Enable or disable adding the Reanimated plugin by default (default: true) */
reanimated?: boolean;
/** Enable or disable adding the Worklets plugin by default (default: true) */
worklets?: boolean;
/** Change the policy for handling JSX (default: 'automatic') */
jsxRuntime?: 'classic' | 'automatic';
/** JSX import source when using automatic runtime (default: 'react') */
jsxImportSource?: string;
/** Enable lazy imports for better startup performance */
lazyImports?: boolean;
/** Disable import/export transform for tree shaking */
disableImportExportTransform?: boolean;
/** Disable deep import warnings */
disableDeepImportWarnings?: boolean;
/** Disable Flow type stripping transform */
disableFlowStripTypesTransform?: boolean;
/** Enable or configure Babel runtime transform */
enableBabelRuntime?: boolean | string;
/** Transform profile for Hermes optimization */
unstable_transformProfile?: 'default' | 'hermes-stable' | 'hermes-canary';
/** React Compiler configuration */
'react-compiler'?: false | ReactCompilerOptions;
/** Enable typeof window runtime checks optimization */
minifyTypeofWindow?: boolean;
/** Enable import.meta transform to globalThis registry */
unstable_transformImportMeta?: boolean;
};