How to Integrate ndk with ArkUi (ContentSlot with NodeContent)

Read the original article：How to Integrate ndk with ArkUi (ContentSlot with NodeContent)

Context

In HarmonyOS ArkUI, user interfaces often need dynamically changing content. For example, a given area may sometimes display text, sometimes an image, or even a video. To achieve this flexibility, ContentSlot and NodeContent are used together.

Description

• ContentSlot defines a “placeholder area” in the UI.
• NodeContent manages what components are placed into that area.
• ContentSlot only reserves the space, while NodeContent dynamically decides and updates the actual content.

Approach / Solution

import { nativeNode } from 'libNativeNode.so'; // Developer-implemented .so file.
import { NodeContent } from '@kit.ArkUI';

@Entry
@Component
struct Parent {
  private nodeContent: Content = new NodeContent();

  aboutToAppear() {
    // Create a node through the C API and add it to the nodeContent manager.
    nativeNode.createNativeNode(this.nodeContent);
  }

  build() {
    Column() {
      // Display the native components stored in the nodeContent manager.
      ContentSlot(this.nodeContent)
    }
  }
}

Key Takeaway

• ContentSlot acts as a flexible placeholder in the UI where content can be dynamically loaded.
• NodeContent is the content manager that determines what appears in the slot at runtime.
• Together, they allow the same UI area to display different components based on application logic or user state.
• This combination makes the interface modular, reusable, and highly adaptable, reducing duplicate code and improving maintainability.
• It also enables dynamic user experiences, such as switching between different views, messages, or media types without rebuilding the entire UI.
• Overall, using ContentSlot with NodeContent provides developers with a powerful pattern for building responsive, context-aware HarmonyOS applications.

Written by Ataberk Celiktas