# Source: https://lynxjs.org/api/elements/built-in/view.md

# `<view>`

<APISummary />

A container element similar to HTML's `<div>`. Like `<div>`, `<view>` is a versatile container element that can hold other elements and serves as the foundation for building layouts. All attributes, events, and methods available on `<view>` can be used by other elements.

## Usage

### As a Drawing Container

**This is an example below:  view**

**Bundle:** `dist/main.lynx.bundle` | Web: `dist/main.web.bundle`

```tsx {7-22}
// Copyright 2024 The Lynx Authors. All rights reserved.
// Licensed under the Apache License Version 2.0 that can be found in the
// LICENSE file in the root directory of this source tree.

import type { ReactElement } from "react";

const RenderExample = () => {
  return (
    <view
      style={{
        borderLeftWidth: "15px",
        borderRightWidth: "60px",
        borderTopWidth: "100px",
        borderBottomWidth: "50px",
        borderColor: "green red",
        backgroundColor: "blue",
        width: "100vw",
        height: "500px",
      }}
    />
  );
};

const LayoutExample = () => {
  return (
    <view
      style={{
        width: "100vw",
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        marginTop: "100px",
      }}
    >
      <text
        style={{
          fontSize: "50px",
          padding: "30px",
          background: "red",
        }}
      >
        Hello World
      </text>
      <text
        style={{
          fontSize: "50px",
          marginTop: "50px",
          padding: "30px",
          background: "green",
        }}
      >
        Hello Lynx
      </text>
    </view>
  );
};

export const App = () => {
  const examples: ReactElement[] = [
    <RenderExample />,
    <LayoutExample />,
  ];

  return (
    <scroll-view scroll-orientation="vertical" style="padding:5px;width:100%; height:100%;">
      <text className="title">View Examples</text>
      {examples.map((example, index) => example)}
    </scroll-view>
  );
};

```



### As a Layout Container

**This is an example below:  view**

**Bundle:** `dist/main.lynx.bundle` | Web: `dist/main.web.bundle`

```tsx {24-56}
// Copyright 2024 The Lynx Authors. All rights reserved.
// Licensed under the Apache License Version 2.0 that can be found in the
// LICENSE file in the root directory of this source tree.

import type { ReactElement } from "react";

const RenderExample = () => {
  return (
    <view
      style={{
        borderLeftWidth: "15px",
        borderRightWidth: "60px",
        borderTopWidth: "100px",
        borderBottomWidth: "50px",
        borderColor: "green red",
        backgroundColor: "blue",
        width: "100vw",
        height: "500px",
      }}
    />
  );
};

const LayoutExample = () => {
  return (
    <view
      style={{
        width: "100vw",
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        marginTop: "100px",
      }}
    >
      <text
        style={{
          fontSize: "50px",
          padding: "30px",
          background: "red",
        }}
      >
        Hello World
      </text>
      <text
        style={{
          fontSize: "50px",
          marginTop: "50px",
          padding: "30px",
          background: "green",
        }}
      >
        Hello Lynx
      </text>
    </view>
  );
};

export const App = () => {
  const examples: ReactElement[] = [
    <RenderExample />,
    <LayoutExample />,
  ];

  return (
    <scroll-view scroll-orientation="vertical" style="padding:5px;width:100%; height:100%;">
      <text className="title">View Examples</text>
      {examples.map((example, index) => example)}
    </scroll-view>
  );
};

```



## Attribute

Attributes and their values are used to describe the behavior and appearance of elements.

### `name`

```ts
// DefaultValue undefined
name?: string
```

Used to specify the name of the element, generally for native to operate the corresponding node from the native side through `findViewByName`.

### `id`

```ts
// DefaultValue undefined
id?: string;
```

Used to specify the unique identity of the element, which can be used by the front-end API to find and operate the corresponding node, such as [`invoke`](/api/lynx-api/nodes-ref/nodes-ref-invoke.md).

```ts
id?: string;
```

### `style`

```ts
style?: string;
```

Used to apply inline styles to elements.

### `class`

```ts
class?: string;
```

Used to specify one or more class names for an element, which can be used in CSS to apply styles.

### `className`
 <Badge text="ReactLynx" />

```ts
className?: string;
```

In ReactLynx, use `className` to set CSS class names, equivalent to [`class`](#class).

### `data-*`

```ts
data-*?: any;
```

Used to specify additional information for the element, which can be obtained in [Event](/api/lynx-api/event/event.md#target).

### `flatten`
 <AndroidOnly />

```ts
flatten?: boolean;
```

Only available on Android platform, used to force specific nodes to create corresponding Android Views.

### `exposure-id`

```ts
// DefaultValue: undefined
exposure-id?: string
```

Specify whether the target node needs to listen to [exposure/disexposure events](/guide/interaction/visibility-detection/exposure-ability.md#monitor-exposure-of-the-entire-page).

### `exposure-scene`

```ts
// DefaultValue: undefined
exposure-scene?: string
```

Specify the exposure scene of the target node, and use it together with [`exposure-id`](#exposure-id) to uniquely identify the node that needs to monitor exposure.

### `exposure-ui-margin-*`

```ts
// DefaultValue: '0px'
exposure-ui-margin-top?: string;
exposure-ui-margin-right?: string;
exposure-ui-margin-bottom?: string;
exposure-ui-margin-left?: string;
```

Specify the boundary scaling value of the target node itself in the exposure detection, which affects the viewport intersection judgment of the target node. Each node can have its own boundary scaling value.

:::tip
On both Android and iOS platforms, you need to set [`enable-exposure-ui-margin`](#enable-exposure-ui-margin) for the current node; otherwise, it won't take effect. On the HarmonyOS platform, setting [`enable-exposure-ui-margin`](#enable-exposure-ui-margin) is not required for it to take effect.
:::

### `exposure-screen-margin-*`

```ts
// DefaultValue: '0px'
exposure-screen-margin-top?: string;
exposure-screen-margin-right?: string;
exposure-screen-margin-bottom?: string;
exposure-screen-margin-left?: string;
```

Specify the screen boundary scaling value referenced by the target node in the exposure detection task, which affects the viewport intersection judgment of the target node. Each node can have its own screen boundary scaling value.

:::tip
On both Android and iOS platforms, you need to set [`enable-exposure-ui-margin`](#enable-exposure-ui-margin) for the current node; otherwise, a positive value represents the scaling value of the target node's own boundaries, and a negative value represents the scaling value of the screen boundaries. On the HarmonyOS platform, setting [`enable-exposure-ui-margin`](#enable-exposure-ui-margin) is not required for it to take effect.
:::

### `exposure-area`

```ts
// DefaultValue: '0%'
exposure-area?: string
```

Specify the viewport intersection ratio of the target node that can trigger the exposure event. When it is greater than this ratio, the exposure event is triggered. When it is less than this ratio, the reverse exposure event is triggered. By default, the exposure event is triggered when the target node is exposed.

### `enable-exposure-ui-margin`

```ts
// DefaultValue: false
enable-exposure-ui-margin?: boolean
```

Specify whether the target node supports the [`exposure-ui-margin-*`](#exposure-ui-margin-) properties.

:::tip
Setting this to `true` will change the behavior of `exposure-screen-margin-*` on Android and iOS platforms, potentially causing lazy loading of scrollable containers to fail.
:::

### `enable-exposure-ui-clip`

```ts
// DefaultValue: false
enable-exposure-ui-clip?: boolean
```

Specify whether the exposure detection task takes into account the viewport clipping of the parent node. When set to `true`, nodes outside the parent node viewport cannot trigger exposure, and when set to `false`, nodes outside the parent node viewport can trigger exposure.

:::tip
By default, exposure detection only considers the viewport clipping of scrollable parent nodes. The viewport clipping of other parent nodes with width and height and `overflow: visible` has no effect on exposure detection. Setting `enable-exposure-ui-clip` for these parent nodes allows for more accurate viewport clipping determination.
:::

<img src="https://lf-lynx.tiktok-cdns.com/obj/lynx-artifacts-oss-sg/plugin/static/enable-exposure-ui-clip-en.png" width="100%" height="100%" />

### `accessibility-element`

```ts
// DefaultValue: image and text nodes are true by default, and other nodes are false by default
accessibility-element?: boolean
```

Set whether the node supports accessibility.

### `accessibility-label`

```ts
// DefaultValue: undefined
accessibility-label?: string
```

Set the content of the node voice broadcast.

If the `<text/>` node does not set this attribute, the `<text/>` node defaults to the `<text/>` content.

When a node turns on the `accessibility-element` attribute, it is recommended to set the `accessibility-label` at the same time, so that the meaning of the current node can be more clearly expressed.

### `accessibility-trait`

```ts
// DefaultValue: "none"
accessibility-traits?: "none" | "button" | "image" | "text"
```

Set the type characteristics of the node. The system will have specific supplements to the playback content for different types of nodes.

### `accessibility-elements`

```ts
// DefaultValue: undefined
accessibility-elements?: string
```

Customize the focus order of child nodes. This property is set on the parent node, and the focus order of its child nodes will be focused according to the order of the child node `id` specified by the `accessibility-elements` property.

If the parent node is set with the `accessibility-elements` property, only the child node with the `id` specified by the `accessibility-elements` property can be accessed, and other child nodes cannot be focused.

```tsx
<view
  style={{
    width: '100%',
    height: '250px',
    marginTop: '20px',
    display: 'linear',
    backgroundColor: 'grey',
  }}
  accessibility-elements="view-3,view-2,view-5,view-1,view-4"
>
  {[1, 2, 3, 4, 5].map((value) => {
    return (
      <view
        style={`height: 40px; margin: 5px; background-color: white;`}
        id={`view-${value}`}
        accessibility-element="true"
        accessibility-label={`view-${value}`}
      >
        <text>text-{value}</text>
      </view>
    );
  })}
</view>
```

### `accessibility-elements-a11y`

```ts
// DefaultValue: undefined
accessibility-elements-a11y?: string
```

The same as `accessibility-elements`, but the corresponding `id` is `a11y-id`.

### `accessibility-elements-hidden`

```ts
// DefaultValue: false
accessibility-elements-hidden?: boolean
```

Marks the current node and all its child nodes as non-accessible nodes.

### `accessibility-exclusive-focus`

```ts
// DefaultValue: false
accessibility-exclusive-focus?: boolean
```

This property can be set for any node. In accessibility mode, sequential navigation will only focus on the child nodes under these nodes.

:::tip
Usage scenario: Solve the problem of focus penetration in the pop-up mask: You can set this property to true for the mask node, so that the focus circulates inside the mask node and does not penetrate to other nodes under the mask.

```tsx
<view
  accessibility-element={false}
  style={{
    flexDirection: 'column',
    backgroundColor: backgroundColor,
    opacity: opacity,
    height: '200px',
  }}
>
  <view
    accessibility-element={false}
    accessibility-exclusive-focus={true}
    style={{
      flexDirection: 'column',
      backgroundColor: 'grey',
      opacity: 0.6,
      position: 'absolute',
      alignItems: 'center',
      width: '100%',
      top: '20px',
    }}
  >
    This node has accessibility-exclusive-focus set to true, so only the three
    text nodes inside it will be focused.
    <text style={{ fontSize: '20px' }}>overlap text 1</text>
    <text style={{ fontSize: '20px' }}>overlap text 2</text>
    <text style={{ fontSize: '20px' }}>overlap text 3</text>
  </view>
  <text style={{ fontSize: '20px', width: '30%' }}>bottom text 1</text>
  <text style={{ fontSize: '20px', width: '30%' }}>bottom text 2</text>
  <text style={{ fontSize: '20px', width: '30%' }}>bottom text 3</text>
</view>
```

:::

### `a11y-id`

```ts
// DefaultValue: undefined
a11y-id?: string
```

Different from `id`, it is used to identify barrier-free nodes separately.

### `ios-platform-accessibility-id`
 <IOSOnly />

```ts
// DefaultValue: undefined
ios-platform-accessibility-id?: string
```

Used to specify the accessibility identifier of a `UIView` in iOS. It is only used when the platform-level accessibility framework is accessed.

### `user-interaction-enabled`

```ts
// DefaultValue: true
user-interaction-enabled?: boolean
```

Specifies whether the target node and its child nodes can respond to Lynx touch events. This property does not affect platform-level gestures (such as scrolling of `scroll-view`).

:::tip
It is recommended to use [`pointer-events`](/api/css/properties/pointer-events.md) instead of `user-interaction-enabled`.
:::

### `native-interaction-enabled`

```ts
// DefaultValue: true for iOS and Harmony, false for Android
native-interaction-enabled?: boolean
```

Specify whether the target node consumes platform-layer touch events, affects platform-layer gestures (such as scrolling of `scroll-view`), does not affect Lynx touch events, and can achieve similar platform-layer gesture penetration/interception effects.

:::tip
On the Android platform, this setting only applies to `view` elements, and the corresponding Android View needs to be created for the node to take effect. It may also require setting [`flatten`](#flatten) to `false` for it to work.

Gesture interception effects only apply to sibling nodes, not parent-child nodes.
:::

### `block-native-event`

```ts
// DefaultValue: false
block-native-event?: boolean
```

Specify whether to block platform layer gestures outside Lynx when the target node is on the [event response chain](/guide/interaction/event-handling/event-propagation.md#event-response-chain), which can achieve an effect similar to blocking the platform layer side sliding back.

### `block-native-event-areas`

```ts
// DefaultValue: []
block-native-event-areas?: [string, string, string, string][]
```

Specifies a touch area that blocks platform-layer gestures outside of Lynx. When the target node is in the [event response chain](/guide/interaction/event-handling/event-propagation.md#event-response-chain) and a touch is placed in the specified area of ​​the target node, platform-layer gestures will be blocked, achieving an effect similar to preventing platform-layer side-swipe back.

This two-dimensional array contains arrays containing 4 elements. The 4 elements are `x`, `y`, `width`, and `height`, in units of `px` or `%`, representing the position, width, and height of the touch area within the target node.

For example, `[['0px', '0px', '50%', '50%'], ['50%', '50%', '50%', '50%']]` indicates that platform-layer gestures outside of Lynx will be blocked when touches are placed in the upper left and lower right areas of the node.

### `consume-slide-event`

```ts
// DefaultValue: []
consume-slide-event?: [number, number][]
```

Specifies the angle range within which all platform-level swipe gestures are blocked. When the target node is in the [event response chain](/guide/interaction/event-handling/event-propagation.md#event-response-chain) and the swipe angle is within this range, all platform-level swipe gestures are blocked. However, Lynx touch events continue to function, allowing front-end scrolling containers that consume swipes in the specified direction. However, native scrolling based on platform-level gestures is blocked.

This two-dimensional array contains several 2-element arrays, where the 2 elements are `start` and `end`, representing the start and end angles, respectively. The swipe angle is determined by the finger's press position and the finger's movement position.

For example, `[[-180, -135], [-45, 45], [135, 180]]` indicates that all platform-level swipe gestures are blocked when the swipe direction is horizontal, but they are enabled when the swipe direction is vertical.

<img src="https://lf-lynx.tiktok-cdns.com/obj/lynx-artifacts-oss-sg/lynx-website/assets/doc/consume_slide_event.jpg" width="70%" height="70%" />

### `event-through`

```ts
// DefaultValue: false
event-through?: boolean
```

Specifies whether Lynx consumes touch events from the platform layer when a touch is on the target node, allowing for effects similar to display-only, non-interactive displays.

This property supports inheritance; that is, if `event-through` is not set for a child node, it inherits the `event-through` value from its parent node. Its active region is affected by [`event-through-active-regions`](#event-through-active-regions). If not set, it defaults to the entire region of the target node.

:::tip
Setting this property to `true` only ensures that Lynx does not consume touch events from the platform layer. However, Lynx's parent node may consume touch events, causing touch-through to fail.
:::

### `event-through-active-regions`

```ts
// DefaultValue: []
event-through-active-regions?: [string, string, string, string][]
```

Specifies the effective area for [`event-through`](#event-through).

This two-dimensional array contains several arrays containing `4` elements, where the `4` elements are `x`, `y`, `width`, and `height`, in units of `px` or `%`, representing the position, width, and height of the touch area within the target node.

For example, `[['0px', '0px', '50%', '50%']]` indicates that if the touch is in the upper left area of ​​the node, Lynx will not consume touch events from the platform layer.

<img src="https://lf-lynx.tiktok-cdns.com/obj/lynx-artifacts-oss-sg/plugin/static/event-through-active-regions.png" width="100%" height="100%" />

### `enable-touch-pseudo-propagation`

```ts
// DefaultValue: true
enable-touch-pseudo-propagation?: boolean
```

Specify whether the target node supports the `:active` pseudo-class to continue bubbling up on the [event response chain](/guide/interaction/event-handling/event-propagation.md#event-response-chain).

### `hit-slop`

```ts
// DefaultValue: '0px' or {top: '0px', left: '0px', right: '0px', bottom: '0px'}
hit-slop?: object | string
```

Specify the touch event response hotspot of the target node, without affecting the platform layer gesture.

For example, `{top: '10px', left: '10px', right: '10px', bottom: '10px'}` or `10px` means the touch hotspot of the node is expanded by `10px`.

:::tip
Other factors with higher priority may cause the hot zone modification to fail, such as the node's view hierarchy ([`z-index`](/api/css/properties/z-index.md), [`translateZ`](/api/css/properties/transform.md), [`fixed`](/api/css/properties/position.md#fixed)) is relatively high, the parent node's [`overflow`](/api/css/properties/overflow.md) is `hidden`, etc.
:::

### `ignore-focus`

```ts
// DefaultValue: false
ignore-focus?: boolean
```

Specify whether to not grab focus when touching the target node. By default, the node grabs focus when clicking on it, which can achieve a similar effect of not closing the keyboard when clicking other areas.

This property supports inheritance, that is, when `ignore-focus` is not set on a child node, it will inherit the `ignore-focus` value of the parent node.

### `ios-enable-simultaneous-touch`
 <IOSOnly />

```ts
// DefaultValue: false
ios-enable-simultaneous-touch?: boolean
```

Specify whether to force trigger the [`touchend`](#touchend) event when the target node is on the [event response chain](/guide/interaction/event-handling/event-propagation.md#event-response-chain), which can solve the problem that the iOS end does not trigger the [`touchend`](#touchend) event but triggers the [`touchcancel`](#touchcancel) event (the [`touchmove`](#touchmove) event is also not continuous) in some scenarios.

### `__lynx_timing_flag`

```ts
__lynx_timing_flag?: string;
```

Add this flag to the current element to monitor the performance of the [lynx pipeline](/guide/spec.md#lynx-pipeline) it participates in.
When flagged, the lynx engine generates a [`PipelineEntry`](/api/lynx-api/performance-api/performance-entry/pipeline-entry.md) event once the element completes its final painting phase.
This event can be observed and analyzed by registering a [`PerformanceObserver()`](/api/lynx-api/performance-api/performance-observer/observe.md).For more detailed usage, see the [Marking Lynx Pipeline](/guide/performance/monitor-performance/timing-flag.md).

## Events

The front end can set [event handler property](/guide/interaction/event-handling/event-propagation.md#event-handler-property) on the element to monitor the runtime behavior of the element.

### `touchstart`

```ts
touchstart: TouchEvent;
```

It belongs to [touch event](/api/lynx-api/event/touch-event.md), which is triggered when the finger starts to touch the touch surface.

### `touchmove`

```ts
touchmove: TouchEvent;
```

It belongs to [touch event](/api/lynx-api/event/touch-event.md), which is triggered when the finger moves on the touch surface.

### `touchend`

```ts
touchend: TouchEvent;
```

It belongs to [touch event](/api/lynx-api/event/touch-event.md), which is triggered when the finger leaves the touch surface.

### `touchcancel`

```ts
touchcancel: TouchEvent;
```

It belongs to [touch event](/api/lynx-api/event/touch-event.md), which is triggered when the touch event is interrupted by the system or Lynx external gesture.

### `tap`

```ts
tap: TouchEvent;
```

It belongs to [touch event](/api/lynx-api/event/touch-event.md), which is triggered when the finger clicks on the touch surface.

:::tip
This event and the [`longpress`](#longpress) event are mutually exclusive in event monitoring, that is, if the front-end monitors both events at the same time, the two events will not be triggered at the same time, and [`longpress`](#longpress) takes precedence.
:::

### `longpress`

```ts
longpress: TouchEvent;
```

It belongs to the [touch event](/api/lynx-api/event/touch-event.md), which is triggered when the finger is long pressed on the touch surface, and the time interval between long press triggers is `500 ms`.

### `click`

```ts
click: TouchEvent;
```

This belongs to the [touch event](/api/lynx-api/event/touch-event.md), triggered when a finger clicks on the touch surface.

:::tip
This event differs slightly from the [`tap`](#tap) event, mainly in that the blocking distance threshold for the event is different from that of [target](/api/lynx-api/event/event.md#target). For details, please refer to [click](/api/lynx-api/event/touch-event.md#click).
:::

### `layoutchange`

```ts
layoutchange: LayoutChangeDetailEvent;
```

It belongs to [custom event](/api/lynx-api/event/custom-event.md), which is triggered when the target node layout is completed, and returns the position information of the target node relative to the LynxView viewport coordinate system.

### `uiappear`

```ts
uiappear: UIAppearanceDetailEvent;
```

It belongs to [custom event](/api/lynx-api/event/custom-event.md), which is triggered when the target node appears on the screen.

### `uidisappear`

```ts
uidisappear: UIAppearanceDetailEvent;
```

It belongs to [custom event](/api/lynx-api/event/custom-event.md), which is triggered when the target node disappears from the screen.

### `animationstart`

```ts
animationstart: AnimationEvent;
```

It belongs to [animation event](/api/lynx-api/event/animation-event.md), which is triggered when the Animation animation starts.

### `animationend`

```ts
animationend: AnimationEvent;
```

It belongs to [animation event](/api/lynx-api/event/animation-event.md), which is triggered when the Animation animation ends.

### `animationcancel`

```ts
animationcancel: AnimationEvent;
```

It belongs to [animation event](/api/lynx-api/event/animation-event.md), which is triggered when the Animation animation is canceled.

### `animationiteration`

```ts
animationiteration: AnimationEvent;
```

It belongs to [animation event](/api/lynx-api/event/animation-event.md), which is triggered every time the Animation animation is executed in a loop.

### `transitionstart`

```ts
transitionstart: TransitionEvent;
```

It belongs to [animation event](/api/lynx-api/event/animation-event.md), which is triggered when the Transition animation starts.

### `transitionend`

```ts
transitionend: TransitionEvent;
```

It belongs to [animation event](/api/lynx-api/event/animation-event.md), which is triggered when the Transition animation ends.

### `transitioncancel`

```ts
transitioncancel: TransitionEvent;
```

It belongs to [animation event](/api/lynx-api/event/animation-event.md), which is triggered when the Transition animation is canceled.

## Method

The front end can execute the element method through the [SelectorQuery](/api/lynx-api/nodes-ref/nodes-ref-invoke.md) API.

### `boundingClientRect`

```tsx
lynx
  .createSelectorQuery()
  .select('#box')
  .invoke({
    method: 'boundingClientRect',
    params: {
      iOSEnableAnimationProps: false, // Specifies whether to consider animation properties when calculating position on iOS; the default is false.
      androidEnableTransformProps: true, // Specifies whether to consider the transform attribute when calculating the position on Android. The default value is false.
      relativeTo: null, // Specify the reference node, relative to LynxView by default.
    },
    success: function (res) {
      console.log(res);
    },
    fail: function (error) {
      console.log(error);
    },
  })
  .exec();
```

The front end can call this method to obtain the width, height and position information of the target node.

### `takeScreenshot`

```tsx
lynx
  .createSelectorQuery()
  .select('#my-view')
  .invoke({
    method: 'takeScreenshot',
    params: {
      format: 'jpeg', // Specify the image format, supports jpeg and png, the default is jpeg.
      scale: 0.5, // Specify the image quality, 0 < scale <= 1, the default is 1, the smaller the value, the blurrier and smaller the size.
      androidEnablePixelCopy: false, // Specify whether to use PixelCopy to take screenshots on Android, the default is false.
    },
    success: function (res) {
      console.log(res);
    },
    fail: function (res) {
      console.log(res.code, res.data);
    },
  })
  .exec();
```

The front end can call this method to obtain the base64 image of the target node.

:::tip
This operation will take up time in the main thread, so you need to pay attention to the calling frequency.

On Android, you must set [`flatten`](#flatten) to `false` on the target node. For SDK versions 3.5 and newer, you can enable screenshots via [PixelCopy](https://developer.android.com/reference/android/view/PixelCopy) by setting the `androidEnablePixelCopy` parameter, which solves the issue of inability to take screenshots in Video/Surface nodes.
:::

### `requestAccessibilityFocus`

```ts
lynx
  .createSelectorQuery()
  .select('#customId')
  .invoke({
    method: 'requestAccessibilityFocus',
    params: {},
    success: function (res) {
      console.log(res);
    },
    fail: function (res) {
      console.log(res);
    },
  })
  .exec();
```

The front end can call this method to focus the accessibility focus on a barrier-free element.

## Compatibility

**Compatibility Table**
**Query:** `elements.view`

**Platform Support**

| Platform | Version Added | Notes |
|----------|---------------|-------|
| Android | 1.5 | - |
| iOS | 1.5 | - |
| HarmonyOS | 3.4 | - |
| Clay Android | 1.5 | - |
| Clay iOS | 1.5 | - |
| Clay Windows | 1.5 | - |
| Clay macOS | 1.5 | - |
| Web | ✅ Yes | - |

**Description:** view