or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

babel-plugins.mdindex.mdmain-preset.mdreact-native.md
tile.json

react-native.mddocs/

React Native Support

Specialized preset configuration for React Native environments that provides optimized transformations and import handling specifically for Taro React Native applications.

Capabilities

React Native Preset Factory

Main entry point for React Native environments that extends the Metro React Native preset with Taro-specific optimizations.

/**
 * React Native preset factory function
 * @param {Object} _ - Babel API object (unused in current implementation)
 * @param {RNPresetOptions} options - RN-specific configuration options
 * @returns {RNBabelConfig} React Native Babel configuration
 */
function reactNativePreset(_, options = {}) { ... }

interface RNPresetOptions {
  /** Supported frameworks for React Native */
  framework?: 'react' | 'preact';
  /** Decorators before export syntax */
  decoratorsBeforeExport?: boolean;
  /** Use legacy decorators */
  decoratorsLegacy?: boolean;
}

interface RNBabelConfig {
  presets: any[];
  plugins: any[];
}

Usage Examples:

// Automatically used when TARO_ENV=rn
process.env.TARO_ENV = 'rn';

const config = babelPresetTaro({}, {
  framework: 'react',
  decoratorsLegacy: true
});

// Direct usage of RN preset
const rnPreset = require('babel-preset-taro/rn');
const rnConfig = rnPreset({}, {
  framework: 'preact',
  decoratorsBeforeExport: true
});

Framework Validation

Validates that the specified framework is supported in React Native environments.

/**
 * Framework validation for React Native
 * Throws error if unsupported framework is specified
 * @param {string} framework - Framework name to validate
 * @throws {Error} If framework is not 'react' or 'preact'
 */
function validateFramework(framework) { ... }

Supported Frameworks:

  • 'react' - Full React support with React Native preset
  • 'preact' - Preact support with React Native compatibility

Error Handling:

// Throws: Value "vue3" of option "framework" is not supported for React-Native
babelPresetTaro({}, { framework: 'vue3' }); // when TARO_ENV=rn

Taro RN API Import Transformation

Configures import transformations for Taro React Native APIs to enable tree shaking and optimized bundling.

/**
 * Transform imports plugin configuration for Taro RN APIs
 * Enables tree shaking and selective importing of Taro components and APIs
 */
interface ImportTransformConfig {
  packagesApis: Map<string, Set<string>>;
  usePackgesImport: boolean;
  packagesImport: PackageImportConfig;
}

interface PackageImportConfig {
  '^@tarojs/components(-rn)?$': {
    transform: string;
  };
  '^@tarojs/taro(-rn)?$': {
    transform: (importName: string) => string;
    skipDefaultConversion: boolean;
  };
}

API Lists Integration:

// Automatically imports API lists for transformation
const nativeApis = require('@tarojs/taro-rn/apiList.js');
const nativeLibs = require('@tarojs/taro-rn/libList.js');
const nativeInterfaces = nativeApis.concat(nativeLibs);

Import Transformations:

// Input: import { View, Text } from '@tarojs/components';
// Output: import View from '@tarojs/components-rn/dist/components/View';
//         import Text from '@tarojs/components-rn/dist/components/Text';

// Input: import { request, getSystemInfo } from '@tarojs/taro';
// Output: import request from '@tarojs/taro-rn/dist/api';
//         import getSystemInfo from '@tarojs/taro-rn/dist/lib/getSystemInfo';

Decorator Support

Configures decorator transformation for React Native environments with legacy compatibility.

/**
 * Decorator plugin configuration for React Native
 * @param {boolean} decoratorsBeforeExport - Decorators before export syntax
 * @param {boolean} decoratorsLegacy - Use legacy decorators (default: true)
 */
interface DecoratorConfig {
  decoratorsBeforeExport?: boolean;
  legacy: boolean;
}

Usage Examples:

// Legacy decorators (default)
const config = reactNativePreset({}, {
  decoratorsLegacy: true // or undefined
});

// Modern decorators
const modernConfig = reactNativePreset({}, {
  decoratorsLegacy: false,
  decoratorsBeforeExport: true
});

Built-in Plugin Integration

Automatically includes Taro-specific plugins for React Native optimization.

/**
 * Built-in plugins for React Native preset
 * - Metro React Native preset
 * - Transform imports API plugin
 * - Decorators plugin  
 * - Remove define config plugin
 */
interface BuiltinPlugins {
  presets: [typeof MetroReactNativePreset];
  plugins: [
    typeof TransformImportsApiPlugin,
    typeof DecoratorsPlugin,
    typeof RemoveDefineConfigPlugin
  ];
}

Environment Detection

Automatic Activation

The React Native preset is automatically activated when the TARO_ENV environment variable is set to 'rn'.

// Automatic RN preset selection
if (process.env.TARO_ENV === 'rn') {
  const presetForReactNative = require('./rn');
  return presetForReactNative(_, options);
}

Node Environment Setup

Ensures proper Node environment setup for React Native development.

/**
 * Node environment initialization
 * Sets NODE_ENV to 'development' if not already set
 */
if (!process.env.NODE_ENV) {
  process.env.NODE_ENV = 'development';
}

Error Handling

Framework Validation Errors

// Error thrown for unsupported frameworks
throw new Error(`Value "${options.framework}" of option "framework" is not supported for React-Native`);

Dependency Requirements

The React Native preset requires the following peer dependencies:

  • @rnx-kit/babel-preset-metro-react-native
  • @tarojs/taro-rn
  • babel-plugin-transform-imports-api

Types

interface NativeApiList {
  /** List of native APIs available in Taro RN */
  apis: string[];
  /** List of native libraries available in Taro RN */
  libs: string[];
}

interface TransformResult {
  /** Import path for the transformed module */
  transform: string | ((importName: string) => string);
  /** Skip default import conversion */
  skipDefaultConversion?: boolean;
}