or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

index.md

tile.json

tessl/npm-react-native--babel-preset

Babel preset for React Native applications with comprehensive JavaScript and TypeScript transformation plugins

Workspace: tessl
Visibility: Public
Created: 3 months ago
Last updated: 3 months ago
Describes: pkg:npm/@react-native/babel-preset@0.81.x

To install, run

npx @tessl/cli install tessl/npm-react-native--babel-preset@0.81.0

@react-native/babel-preset

@react-native/babel-preset is a comprehensive Babel preset specifically designed for React Native applications. It provides all necessary plugins and configurations to transform JavaScript and TypeScript code for React Native development, including JSX transformation, Flow and TypeScript stripping, modern JavaScript syntax transformation, and platform-specific optimizations.

Package Information

Package Name: @react-native/babel-preset
Package Type: npm
Language: JavaScript
Installation: npm install @react-native/babel-preset --save-dev

Core Imports

const preset = require("@react-native/babel-preset");

For direct access to specific functions:

const { getPreset, passthroughSyntaxPlugins } = require("@react-native/babel-preset");

Basic Usage

Default Preset Configuration

// babel.config.js
module.exports = {
  presets: ["@react-native/babel-preset"]
};

With Options

// babel.config.js
module.exports = {
  presets: [
    [
      "@react-native/babel-preset",
      {
        unstable_transformProfile: "hermes-stable",
        enableBabelRuntime: false,
        dev: true
      }
    ]
  ]
};

Programmatic Usage

const preset = require("@react-native/babel-preset");
const { getPreset } = require("@react-native/babel-preset");

// Using the main preset function
const config = preset(null, { dev: true });

// Using getPreset directly  
const directConfig = getPreset("const x = 1;", {
  unstable_transformProfile: "hermes-canary"
});

Capabilities

Main Preset Function

The primary export that returns Babel configuration based on environment and options.

/**
 * Main preset function that returns Babel configuration
 * @param babel - Babel instance (usually null when used as preset)
 * @param options - Configuration options object
 * @returns Babel configuration object
 */
function preset(babel, options): BabelConfig;

getPreset Function

Direct access to the preset generation logic with source code analysis.

/**
 * Generates preset configuration with source code analysis
 * @param src - Source code string to analyze (null for generic config)
 * @param options - Configuration options object
 * @returns Babel configuration object
 */
function getPreset(src, options): BabelConfig;

Passthrough Syntax Plugins

Array of syntax plugins for enabling experimental features without transformation.

/**
 * Array of syntax plugins for experimental features
 * Enables parsing of nullish coalescing and optional chaining
 */
const passthroughSyntaxPlugins: BabelPlugin[];

HMR Configuration

Hot Module Replacement configuration for development.

/**
 * Returns Babel configuration for Hot Module Replacement
 * @returns Babel config with react-refresh plugin
 */
function hmrConfig(): BabelConfig;

Configuration Options

Transform Profile Options

Controls the target JavaScript engine and transformation level.

interface TransformProfileOptions {
  /** Transform profile: 'default', 'hermes-stable', or 'hermes-canary' */
  unstable_transformProfile?: "default" | "hermes-stable" | "hermes-canary";
}

Feature Toggle Options

Controls which transformations and features are enabled.

interface FeatureOptions {
  /** Enable experimental JSX transform */
  useTransformReactJSXExperimental?: boolean;
  
  /** Disable static view configs codegen plugin */
  disableStaticViewConfigsCodegen?: boolean;
  
  /** Disable import/export to CommonJS transformation */
  disableImportExportTransform?: boolean;
  
  /** Enable lazy import transformation (boolean or function) */
  lazyImportExportTransform?: boolean | ((importSpecifier: string) => boolean);
  
  /** Enable development mode features */
  dev?: boolean;
  
  /** Disable deep import warnings in development */
  disableDeepImportWarnings?: boolean;
  
  /** Enable Babel runtime transformation */
  enableBabelRuntime?: boolean | string;
  
  /** Enable development tools */
  withDevTools?: boolean;
  
  /** Enable compact output */
  compact?: boolean;
}

Hermes Parser Options

Configuration for the Hermes parser plugin.

interface HermesParserOptions {
  /** Language types to parse */
  parseLangTypes?: string;
  
  /** React runtime target version */
  reactRuntimeTarget?: string;
  
  /** Additional Hermes parser options */
  hermesParserOptions?: Record<string, any>;
}

Complete Options Interface

interface PresetOptions extends TransformProfileOptions, FeatureOptions, HermesParserOptions {
  /** Enable experimental JSX transform */
  useTransformReactJSXExperimental?: boolean;
  
  /** Disable static view configs codegen plugin */
  disableStaticViewConfigsCodegen?: boolean;
  
  /** Disable import/export to CommonJS transformation */
  disableImportExportTransform?: boolean;
  
  /** Enable lazy import transformation */
  lazyImportExportTransform?: boolean | ((importSpecifier: string) => boolean);
  
  /** Enable development mode features */
  dev?: boolean;
  
  /** Disable deep import warnings in development */
  disableDeepImportWarnings?: boolean;
  
  /** Enable Babel runtime transformation */
  enableBabelRuntime?: boolean | string;
  
  /** Enable development tools */
  withDevTools?: boolean;
  
  /** Enable compact output */
  compact?: boolean;
  
  /** Transform profile for different JS engines */
  unstable_transformProfile?: "default" | "hermes-stable" | "hermes-canary";
  
  /** Hermes parser configuration */
  hermesParserOptions?: Record<string, any>;
}

Core Types

/** Babel configuration object returned by the preset */
interface BabelConfig {
  /** Preserve comments in output */
  comments: boolean;
  
  /** Enable compact output */
  compact: boolean;
  
  /** Configuration overrides for different file types and conditions */
  overrides: BabelOverride[];
}

/** Babel configuration override for specific conditions */
interface BabelOverride {
  /** Test function or pattern to match files */
  test?: (filename: string) => boolean;
  
  /** Babel plugins to apply */
  plugins: BabelPlugin[];
}

/** Babel plugin configuration */
type BabelPlugin = string | [string, any] | Function | [Function, any];

Built-in Transformation Plugins

The preset includes numerous Babel plugins for comprehensive code transformation:

Core JavaScript Transformations

@babel/plugin-transform-react-jsx: JSX syntax transformation
@babel/plugin-transform-modules-commonjs: ES modules to CommonJS
@babel/plugin-transform-classes: ES6 classes transformation
@babel/plugin-transform-arrow-functions: Arrow function transformation
@babel/plugin-transform-async-to-generator: Async/await transformation
@babel/plugin-transform-destructuring: Destructuring assignment transformation

Modern JavaScript Features

@babel/plugin-transform-optional-chaining: Optional chaining (?.) support
@babel/plugin-transform-nullish-coalescing-operator: Nullish coalescing (??) support
@babel/plugin-transform-logical-assignment-operators: Logical assignment operators
@babel/plugin-transform-numeric-separator: Numeric separator support
@babel/plugin-transform-optional-catch-binding: Optional catch binding

React Native Specific Transformations

@react-native/babel-plugin-codegen: Static view config code generation
babel-plugin-syntax-hermes-parser: Hermes parser syntax support
babel-plugin-transform-flow-enums: Flow enum transformation
@babel/plugin-transform-react-jsx-source: JSX source location (dev)
@babel/plugin-transform-react-jsx-self: JSX self prop (dev)

Type System Support

@babel/plugin-transform-flow-strip-types: Flow type annotation removal
@babel/plugin-transform-typescript: TypeScript transformation
@babel/plugin-transform-class-properties: Class property transformation
@babel/plugin-transform-private-methods: Private method transformation

Platform-Specific Behavior

Hermes Engine Optimization

The preset provides specialized configurations for React Native's Hermes JavaScript engine:

hermes-stable: Optimized for stable Hermes features
hermes-canary: Includes experimental Hermes features with additional polyfills
default: Standard configuration for other JavaScript engines

Development vs Production

Automatically detects environment and applies appropriate transformations:

Development: Includes HMR support, JSX source mapping, deep import warnings
Production: Optimized output with minimal runtime overhead

Error Handling

The preset handles various transformation edge cases:

TypeScript Detection: Automatically applies TypeScript transformations for .ts and .tsx files
Flow Type Handling: Strips Flow types while preserving enums
Import Path Warnings: Warns about deprecated deep React Native imports in development
Engine Compatibility: Adjusts transformations based on target JavaScript engine capabilities

Usage Examples

Custom Babel Configuration

// babel.config.js
module.exports = {
  presets: [
    [
      "@react-native/babel-preset",
      {
        unstable_transformProfile: "hermes-stable",
        disableImportExportTransform: false,
        lazyImportExportTransform: (importSpecifier) => {
          // Custom lazy import logic
          return importSpecifier.includes("react-native");
        },
        dev: process.env.NODE_ENV === "development"
      }
    ]
  ],
  plugins: [
    // Additional plugins can be added here
  ]
};

Metro Configuration Integration

// metro.config.js
const { getDefaultConfig } = require("metro-config");

module.exports = (async () => {
  const config = await getDefaultConfig(__dirname);
  
  config.transformer.babelTransformerPath = require.resolve("metro-react-native-babel-transformer");
  
  return config;
})();

Programmatic Configuration

const { getPreset } = require("@react-native/babel-preset");

// Generate configuration for specific source code
const sourceCode = `
  import React from 'react';
  const Component = () => <div>Hello</div>;
`;

const config = getPreset(sourceCode, {
  dev: true,
  unstable_transformProfile: "hermes-canary"
});

console.log(config.plugins.length); // Number of plugins applied