<view> · Hyperview

The <view> element is a basic building block for UI layouts. Using flexbox styling, nested views can create sophisticated components that can scale and adapt to different screen sizes. Views can also serve as a viewport onto scrolling content.

Some examples of views:

<body>
  <view style="FlexHorizontal">
    <text>Basic view</text>
    <text>With Horizontal Layout</text>
  </view>

  <view style="FlexVertical">
    <text>Basic view</text>
    <text>With Vertical Layout</text>
  </view>

  <view
    style="Short FlexHorizontal"
    scroll="true"
    scroll-orientation="horizontal"
  >
    <text>This</text>
    <text>view</text>
    <text>will</text>
    <text>scroll</text>
    <text>horizontally</text>
  </view>

  <view style="Short FlexVertical" scroll="true" scroll-orientation="vertical">
    <text>This</text>
    <text>view</text>
    <text>will</text>
    <text>scroll</text>
    <text>vertically</text>
  </view>

</body>

Structure

A <view> element can only appear anywhere within a <screen> element.

Behavior attributes

A <view> element accepts the standard behavior attributes, including all triggers (press, refresh, visible, etc).

`safe-area`

Type	Required
boolean, false (default)	No

If true, the body will be rendered in the safe area of the mobile device (avoiding notches at the top or bottom). Note that safe-area will only have an effect if scroll is false.

Deprecation note: support for this attribute will be removed in a future release. Instead, implement the custom safe-area element.

`style`

Type	Required
string	No

A space-separated list of styles to apply to the element. See Styles. Note that text style rules cannot be applied to a <view>.

`content-container-style`

Type	Required
string	No

A space-separated list of styles to apply to the content container element of a scroll view. See Styles. Note that text style rules cannot be applied to a <view>, and this attribute only has an effect when scroll is true.

`scroll`

Type	Required
true, false (default)	No

An attribute indicating whether the content in the can be scrollable. The style rules of the view will determine the viewport size.

`scroll-orientation`

Type	Required
vertical (default), horizontal	No

An attribute indicating the direction in which the view will scroll.

`scroll-to-input-offset`

Type	Required
number	No (defaults to 120)

An attribute defining an additional scroll offset to be applied to the view, when a <text-field> is focused. Only valid in combination with attribute scroll set to "true".

`shows-scroll-indicator`

Type	Required
true (default), false	No

An attribute indicating whether the scroll bar should be shown. Attribute scroll should be set in for this to have any effect.

`id`

Type	Required
string	No

A global attribute uniquely identifying the element in the whole document.

`hide`

Type	Required
false (default), true	No

If hide="true", the element will not be rendered on screen. If the element or any of the element's children have a behavior that triggers on "load" or "visible", those behaviors will not trigger while the element is hidden.

`avoid-keyboard`

Type	Required
true, false (default)	No

An attribute to solve the common problem of views that need to move out of the way of the virtual keyboard. It can automatically adjust the position of its children based on the keyboard height. This is useful when you want keyboard avoiding behavior in non-scrollable views. It is applied only in iOS since Android has built-in support for avoiding keyboard.

For the avoid-keyboard functionality to work correctly, the parent element directly containing the element with avoid-keyboard should have the same height as the screen.

`sticky`

Type	Required
false (default), true	No

If sticky="true", the element will remain fixed at the top of the screen when scrolling. This should be used in conjunction with an immediate parent view with scroll="true" and scroll-orientation="vertical".

`keyboard-dismiss-mode`

Type	Required
none (default), `on-drag`, `interactive`	No

An attribute that controls the virtual keyboard behavior when the scrollable view is interacted with. Note: interactive value is only supported on iOS. When set to this value, the keyboard is dismissed interactively with the drag and moves in synchrony with the touch, dragging upwards cancels the dismissal. On Android this is not supported and it will have the same behavior as none. Attribute scroll should be set in for this to have any effect.