Edit

WrapLayout

<wrapLayout> is a React wrapper around WrapLayout, a layout container that lets you position items in rows or columns, based on the orientation property. When the space is filled, the container automatically wraps items onto a new row or column.

See also:

• Official top-level documentation
• Detailed API specification

Examples

Default wrap layout

The following example creates a row of equally-sized items. When the row runs out of space, the container wraps the last item on a new row.

import * as React from "react";

<wrapLayout backgroundColor="#3c495e">
  <label
    text="first"
    width="30%"
    height="30%"
    backgroundColor="#43b883"}
  />
  <label
    text="second"
    width="30%"
    height="30%"
    backgroundColor="#1c6b48"}
  />
  <label
    text="third"
    width="30%"
    height="30%"
    backgroundColor="#289062"}
  />
  <label
    text="fourth"
    width="30%"
    height="30%"
    backgroundColor="#289062"}
  />
</wrapLayout>

Licence: NativeScript Vue Artwork.

Vertical wrap layout

The following example creates a column of equally-sized items. When the row runs out of space, the container wraps the last item on a new column.

import * as React from "react";

<wrapLayout orientation="vertical" backgroundColor="#3c495e">
  <label
    text="first"
    width="30%"
    height="30%"
    backgroundColor="#43b883"}
  />
  <label
    text="second"
    width="30%"
    height="30%"
    backgroundColor="#1c6b48"}
  />
  <label
    text="third"
    width="30%"
    height="30%"
    backgroundColor="#289062"}
  />
  <label
    text="fourth"
    width="30%"
    height="30%"
    backgroundColor="#289062"}
  />
</wrapLayout>

Licence: NativeScript Vue Artwork.

Props

Name	Type	Description
orientation	string	Specifies the stacking direction. Valid values: horizontal (arranges items in rows) and vertical (arranges items in columns). Default value: horizontal.
itemWidth	number	Sets the width used to measure and layout each child. Default value: Number.NaN, which does not restrict children.
itemHeight	number	Sets the height used to measure and layout each child. Default value is Number.NaN, which does not restrict children.

Extra props for child elements

None.

React NativeScript-specific props

None for <wrapLayout>, nor for any of its children.