Preset Configuration

Core preset function that returns Babel transformation configuration based on platform and build environment.

Capabilities

Main Preset Function

The primary export that creates Babel transformation configuration.

/**
 * Creates Babel preset configuration for Expo and React Native projects
 * @param api - Babel ConfigAPI providing environment information
 * @param options - Platform-specific and global configuration options
 * @returns Babel TransformOptions with presets and plugins
 */
function babelPresetExpo(
  api: ConfigAPI, 
  options?: BabelPresetExpoOptions
): TransformOptions;

Usage Examples:

// Basic usage in babel.config.js
module.exports = {
  presets: ['babel-preset-expo']
};

// With global options
module.exports = {
  presets: [
    ['babel-preset-expo', {
      jsxRuntime: 'automatic',
      reanimated: true,
      'react-compiler': {
        compilationMode: 'strict'
      }
    }]
  ]
};

// With platform-specific options
module.exports = {
  presets: [
    ['babel-preset-expo', {
      web: {
        disableImportExportTransform: true,
        minifyTypeofWindow: false
      },
      native: {
        lazyImports: true,
        unstable_transformProfile: 'hermes-stable'
      }
    }]
  ]
};

Options Interface

Main options interface combining platform-specific and global settings.

interface BabelPresetExpoOptions extends BabelPresetExpoPlatformOptions {
  /** Web-specific settings that override global options */
  web?: BabelPresetExpoPlatformOptions;
  /** Native-specific settings that override global options */
  native?: BabelPresetExpoPlatformOptions;
}

Platform Detection

The preset automatically detects the target platform and applies appropriate optimizations:

• Web: Detected via webpack bundler or explicit platform setting
• Native: iOS and Android platforms using Metro bundler
• Server: Server-side rendering environments
• React Server: React Server Components environments

Configuration Resolution

Options are resolved in this priority order:

1. Platform-specific options (web or native)
2. Global options (root level)
3. Default values based on environment detection

Environment Variables

The preset automatically inlines these environment variables at build time:

• process.env.EXPO_OS - Target platform ('web', 'ios', 'android')
• process.env.EXPO_SERVER - Server environment boolean
• process.env.NODE_ENV - Development/production mode (production builds only)
• __DEV__ - Development mode boolean (production builds only)
• Platform.OS - React Native Platform.OS value (production builds only)
• typeof window - Window object type check optimization

Default Plugin Configuration

The preset automatically includes these plugins based on environment:

Always Included:

• @babel/preset-react - JSX transformation
• Custom define plugin - Environment variable inlining
• Client references plugin - RSC boundary detection
• Environment restricted imports - Server/client import validation

Conditionally Included:

• react-refresh/babel - Fast Refresh (development only)
• babel-plugin-react-compiler - React Compiler (when enabled)
• react-native-reanimated/plugin - Reanimated support (when package detected)
• react-native-worklets/plugin - Worklets support (when package detected)
• babel-plugin-react-native-web - Web compatibility (web platform only)
• Expo Router plugin - File-based routing (when expo-router detected)

Error Handling

The preset validates configuration and throws descriptive errors for:

• Missing required dependencies (e.g., React Compiler without babel-plugin-react-compiler)
• Invalid option combinations
• Deprecated options with migration guidance