---
title: native-component
---

## native-component

#### Some components in Smart MiniApp are native components created by the client.

### Native component

The following are these native components:

- [map](/en/miniapp/develop/miniapp/component/map/map)
- [ipc-player](/en/miniapp/develop/miniapp/component/media-component/ipc-player)
- [camera](/en/miniapp/develop/miniapp/component/media-component/camera)
- [native-video](/en/miniapp/develop/miniapp/component/media-component/native-video)
- [web-view](/en/miniapp/develop/miniapp/component/open/web-view)

### Things to note

When you debug code on the Tuya MiniApp IDE, the WebView-based simulation of native components is for reference only. It is recommended to test the miniapp on a real device to ensure it can work as expected after going live.

### Heterolayer rendering of native components

Heterolayer rendering can help to improve the rendering performance of some complex components (such as map and video) in WebView. Render the Native layer under the WebView layer and achieve rendering optimization through communication.

<Image src="/images/component/render.en-US.png"/>

In the upper WebView layer, leave an area for visual penetration to the native layer below. If there are elements overlaid, calculate the placeholder to the hotspot and then distribute events accordingly.

<Image src="/images/component/bridge.en-US.png"/>

#### Limitations of native components

In heterolayer rendering mode, a page is divided into two layers. The upper WebView layer renders WebView node and its child nodes. The lower Native layer renders native components.

1. Do not set the background color or image for the heterolayer-rendered native components and their parent nodes. Otherwise, the underlying native view will be obscured.
2. To set the background color and border, set the properties of `background-color` and `border`. The following figure uses the `map` component as an example to describe the style setting. The Native layer renders the native components, so the style of the background color and border should be passed to the Native layer for rendering. The style properties available to the native components are as follows:

| Property                   | Type   | Default | Required | Description                                                                 |
| -------------------------- | ------ | ------- | -------- | --------------------------------------------------------------------------- |
| border-width               | number | 0       | No       | The width of the border, in pixels (px).                                    |
| border-style               | string | solid   | No       | The style of the border. Valid values include `solid` and `dashed`.         |
| border-color               | string | #ffffff | No       | The color of the border, which must be specified in hexadecimal format.     |
| border-radius              | number | 0       | No       | The radius of the rounded corner on the border, in px.                      |
| border-radius-top-left     | number |         | No       | The radius of the top-left rounded corner on the border, in px.             |
| border-radius-top-right    | number |         | No       | The radius of the top-right rounded corner on the border, in px.            |
| border-radius-bottom-left  | number |         | No       | The radius of the bottom-left rounded corner on the border, in px.          |
| border-radius-bottom-right | number |         | No       | The radius of the bottom-right rounded corner on the border, in px.         |
| background-color           | string | #ffffff | No       | The color of the background, which must be specified in hexadecimal format. |

3. Nodes overlaid on top of the map must act as the child nodes of the native components, except for `popup` components. This is because only the child nodes of the native component are used as the hotspot for heterolayer rendering. The WebView layer takes over the gesture events in the hotspot. The Native layer processes the rest of the gesture events within the native component tags. Nodes outside the native component tags are not used as hotspots, so the WebView gestures overlaid on top of the native component will not work.
4. If you have pop-up windows overlaid on top of the map to listen for gesture events, call [ty.nativeDisabled(true)](/en/miniapp/develop/miniapp/api/other/nativeDisabled) when the pop-up window is displayed to let the map stop taking over gesture events. Call [ty.nativeDisabled(false)](/en/miniapp/develop/miniapp/api/other/nativeDisabled) when the pop-windows is closed to let the map continue to take over gesture events. This can reduce listening for the hotspot of the pop-up window and therefore improve performance.
5. To modify the layout style or toggle between show and hide through `ty:if`, add the updated properties to the native component to take effect. The native component notifies the Native layer of view sync only when the properties of its own component change.
6. Do not place the native components in the local scrolling area. The scrollable components such as `scroll-view` and `swiper` must not be nested in the outer layer. This is because the Native layer cannot listen for local scrolling events, and therefore the position of the component view cannot be updated in real time.

<Image src="/images/component/map.en-US.png"/>

### cover-view

The [cover-view](/en/miniapp/develop/miniapp/component/view-container/cover-view) component can be nested in some native components to avoid gestures overlaid on top of the native components from being intercepted.