Specialized preset configuration for React Native environments that provides optimized transformations and import handling specifically for Taro React Native applications.
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
});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 compatibilityError Handling:
// Throws: Value "vue3" of option "framework" is not supported for React-Native
babelPresetTaro({}, { framework: 'vue3' }); // when TARO_ENV=rnConfigures 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';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
});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
];
}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);
}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 thrown for unsupported frameworks
throw new Error(`Value "${options.framework}" of option "framework" is not supported for React-Native`);The React Native preset requires the following peer dependencies:
@rnx-kit/babel-preset-metro-react-native@tarojs/taro-rnbabel-plugin-transform-imports-apiinterface 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;
}