Taro 3 React Native Support: Design and Implementation of the RN Platform

The proposal announces the open‑source collaboration between 58.com Frontend Channel and JD Aotu Lab to bring Taro 3 React Native support, introducing a major refactor of the RN solution.

Overview : Taro now enables React Native development using the same React syntax, addressing the lack of RN support after upgrading to Taro 3.

Motivation : Community demand for RN compatibility remains, but Taro 3 broke existing RN workflows.

Design Summary : The solution rebuilds the compilation pipeline using Metro, aligns runtime modules with Taro 3 standards, and provides flexible RN app integration.

Compilation Changes :

Unified Metro bundler replaces Webpack for RN builds, improving speed and clarity.

Support for sourceRoot, outputRoot, designWidth, defineConstants, alias, env, terser, csso, sass, etc., while copy, plugins, and presets are not supported.

Example Metro transformer pseudo‑code: var upstreamTransformer = require("metro-react-native-babel-transformer"); const { transform } = require("@tarojs/taro-rn-transformer/app"); module.exports.transform = function({ src, filename, options }) { if (filename === 'index.js') { return upstreamTransformer.transform(transform({ src, filename, {pages, ...options}})); } return upstreamTransformer.transform({src, filename, options}); };

Babel configuration merges platform‑specific aliases (e.g., @tarojs/components → @tarojs/components-rn ).

Runtime Changes :

New createReactNativeApp and createPageConfig wrappers expose Taro’s app, page, and router objects to RN.

Global Current object provides app , page , and router references.

Hooks such as useDidShow , useDidHide , and navigation events are supported.

API Adaptations include tabBar, VideoContext, CameraContext, AudioContext, file system, WebSocket, and event channels, mostly built on Expo modules or React Native primitives.

Component Adaptations add VirtualList (FlatList), MovableView/Area (Animated + PanResponder), Label, PickerView (Ant Design), Navigator, Audio/Video (Expo‑AV), Camera (Expo‑Camera), and Canvas (react‑native‑canvas).

App Integration :

App name is configurable via app.config.ts and registered with AppRegistry.registerComponent .

Supports RN versions ≥0.60, with optional version selection.

Native modules are optional; missing modules trigger warnings instead of blocking execution.

Known Defects :

Vue or jQuery cannot be used for RN development.

Design differs from Mini‑Program and H5, requiring synchronization with Metro updates.

Adaptation Strategy :

Code written for Taro React works on RN after compatibility layers.

Native dependencies must be added to the host project or shell.

RN styling is a CSS subset; full compatibility may require manual adjustments.

Author : Chen Zhiqing, Frontend Architect at 58.com and member of the technical committee.