# XComponentNode

The **XComponentNode** provide APIs a XComponentNode – a **\<XComponent>** in the component tree. You can write EGL/OpenGL ES and media data and display it on the **\<XComponent>**, whose rendering type can be dynamically modified.

> **NOTE**
>
> The initial APIs of this module are supported since API version 11. Newly added APIs will be marked with a superscript to indicate their earliest API version.
> 
> **XComponentNode** is not available in DevEco Studio Previewer.

## Modules to Import

```ts
import { XComponentNode } from "@ohos.arkui.node";
```

## XComponentNode

### constructor

constructor(uiContext: UIContext, options: RenderOptions, id: string, type: XComponentType, libraryName?: string)

Constructor used to create an XComponentNode.

**System capability**: SystemCapability.ArkUI.ArkUI.Full

**Parameters**

| Name     | Type                                                        | Mandatory| Description                                                        |
| ----------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
| uiContext   | [UIContext](js-apis-arkui-UIContext.md)                      | Yes  | UI context. For details about how to obtain it, see [[Obtaining UI Context](./js-apis-arkui-node.md#obtaining-ui-context).|
| options     | [RenderOptions](./js-apis-arkui-builderNode.md#renderoptions) | Yes  | Parameters for creating an XComponentNode.                              |
| id          | string                                                       | Yes  | Unique ID of the **\<XComponent>**. The value can contain a maximum of 128 characters. For details, see [XComponent](../arkui-ts/ts-basic-components-xcomponent.md#xcomponent).|
| type        | [XComponentType](../arkui-ts/ts-basic-components-xcomponent.md#xcomponenttype10) | Yes  | Type of the **\<XComponent>**. For details, see [XComponent](../arkui-ts/ts-basic-components-xcomponent.md#xcomponent).|
| libraryName | string                                                       | No  | Name of the dynamic library generated during compilation at the native layer. For details, see [XComponent](../arkui-ts/ts-basic-components-xcomponent.md#xcomponent).|

> **NOTE**
>
> You need to explicitly specify **selfIdealSize** in **RenderOptions**. Otherwise, the XComponentNode's content size is empty and therefore no content is displayed.

### onCreate

onCreate(event?: Object): void

Called when the XComponentNode loading is complete.

**System capability**: SystemCapability.ArkUI.ArkUI.Full

**Parameters**

| Name  | Type  | Mandatory  | Description                                      |
| ----- | ------ | ---- | ---------------------------------------- |
| event | object | No   | Context of the **\<XComponent>** object. The APIs contained in the context are defined by you at the C++ layer.|

### onDestroy

onDestroy(): void

Called when the XComponentNode is destroyed.

**System capability**: SystemCapability.ArkUI.ArkUI.Full

### changeRenderType

changeRenderType(type: NodeRenderType): boolean

Changes the rendering type of the XComponentNode.

**System capability**: SystemCapability.ArkUI.ArkUI.Full

**Parameters**

| Name| Type                                                    | Mandatory| Description              |
| ------ | ------------------------------------------------------------ | ---- | ------------------ |
| type   | [NodeRenderType](./js-apis-arkui-builderNode.md#noderendertype) | Yes| Target rendering type.|

**Return value**

| Type| Description                  |
| ---- | ---------------------- |
| boolean | Whether the rendering type is changed successfully.|

## Example

```ts
import { NodeController, FrameNode, XComponentNode, NodeRenderType } from "@ohos.arkui.node"
import { UIContext } from '@ohos.arkui.UIContext';

class XComponentNodeController extends NodeController {
  private xComponentNode: MyXComponentNode | null = null;
  private soName: string = "nativerender" // This .so file is compiled and generated by you using the N-API.

  constructor() {
    super();
  }

  makeNode(context: UIContext): FrameNode | null {
    this.xComponentNode = new MyXComponentNode(context, {
      selfIdealSize: { width: 200, height: 200 }
    }, "xComponentId", XComponentType.SURFACE, this.soName);
    return this.xComponentNode;
  }

  changeRenderType(renderType: NodeRenderType): void {
    if (this.xComponentNode) {
      this.xComponentNode.changeRenderType(renderType);
    }
  }
}

class MyXComponentNode extends XComponentNode {
  onCreate(event: Object) {
    // do something when XComponentNode has created
  }

  onDestroy() {
    // do something when XComponentNode is destroying
  }
}

@Entry
@Component
struct Index {
  build() {
    Row() {
      Column() {
        NodeContainer(new XComponentNodeController())
      }
      .width('100%')
      .height('100%')
    }
    .height('100%')
  }
}
```