How Taro’s New C‑API Empowers Native‑Level HarmonyOS Development

Overview

Over the past year Taro has evolved from an ArkTS‑based solution to a C‑API version that fully adapts to pure HarmonyOS, extending its compatible platform family to include H5, mini‑programs, React Native, and native HarmonyOS, enabling unified development across these environments.

The JD App built on pure HarmonyOS launched in September and achieved Huawei’s S‑level certification, with core shopping flows (home, search, product detail, cart, order, checkout, and user profile) implemented using the Taro On Harmony C‑API.

Today the C‑API version is open‑sourced, bringing richer style adaptation, more efficient rendering, and broader component support, allowing developers to create HarmonyOS apps with web‑style paradigms that match native performance.

Overall Technical Architecture

Taro For Harmony uses a React DSL to develop pure HarmonyOS apps and is organized into three layers:

ArkVM layer (top) : runs business code, React core, and minimal Taro runtime code.

CSSOM & TaroElement layer (middle) : processes commands from the runtime, handling node creation, binding, and property setting.

TaroRenderNode layer (bottom) : holds a virtual node tree that maps one‑to‑one with the actual screen node tree and creates corresponding Yoga layout nodes.

A VSync‑driven task pipeline ensures correct sequencing of style matching, measurement, layout, style application, and screen rendering.

Key Features

Extensive Component and API Support

The C‑API version fully supports React 18+, about 33 Taro components (View, Text, Image, Video, etc.), and common APIs such as getSystemInfo and getStorage. Complex APIs like createSelectorQuery and createIntersectionObserver have been re‑implemented in C++ for significant performance gains.

Comprehensive CSS Capabilities

Standard CSS styles, flex layout, pseudo‑classes/elements

Absolute and fixed positioning

Selectors and media queries

Units like vh, vw, and calc() CSS variables and safe‑area definitions

A custom C++ CSSOM engine handles parsing, matching, composition, and application of styles, while the Yoga layout engine ensures W3C‑compatible rendering.

Native‑Level Performance

Runtime logic is pushed down to C++: most of the TaroElement handling is moved to the native side, and parent‑child bindings are removed from ArkVM, dramatically improving element‑related performance. Direct calls to ArkUI’s C++ APIs create nodes, set properties, bind events, and render efficiently.

Optimized Long‑List Rendering

Specialized virtual‑list components provide lazy loading, pre‑loading, and node reuse, addressing performance challenges in large‑data scenarios.

Hybrid Native Rendering

When a required component or API is missing in Taro, the C‑API version allows mixing native pages or components within a Taro Harmony project, enabling seamless use of both Taro and native HarmonyOS components on the same page.

Getting Started

Installation

# Using npm
npm i @tarojs/plugin-platform-harmony-cpp
# Using pnpm
pnpm i @tarojs/plugin-platform-harmony-cpp

Plugin Configuration

import os from 'os'
import path from 'path'

const config = {
  // ...
  plugin: ['@tarojs/plugin-platform-harmony-cpp'],
  harmony: {
    // Currently only Vite is supported for Harmony builds
    compiler: 'vite',
    // Path to the Harmony project (see Huawei docs for creation guide)
    projectPath: path.join(os.homedir(), 'projects/my-business-project'),
    // Name of the generated .hap module, default is 'entry'
    hapName: 'entry',
  },
  // ...
}

Build Commands

# Build HarmonyOS app
taro build --type harmony_cpp
# Build native Harmony components
taro build native-components --type harmony_cpp

To compile a Harmony app while also building native components, add entryOption: false in the page config and optionally specify componentName for the exported component name.

export default {
  navigationBarTitleText: 'Hello World',
  componentName: 'MyComponent',
  entryOption: false,
}

Conclusion and Outlook

The Taro For Harmony C‑API version, proven in JD’s HarmonyOS app, offers superior performance, ecosystem support, and developer experience, making it one of the best framework choices for HarmonyOS development.

Future work includes multi‑threaded architecture upgrades and further C++‑based React integration to reduce frame drops and improve side‑rendering performance; these enhancements are currently in verification and testing phases.

Community contributions are welcomed—every suggestion and pull request helps drive Taro forward.