React NativeScript

React NativeScript

  • Docs

›ELEMENTS: LAYOUT

INTRODUCTION

  • Introduction

GETTING STARTED

  • Quick Start
  • Environment Setup
  • Using React Devtools

CORE CONCEPTS

  • Native Access
  • Navigation
  • Node Roles
  • Modals
  • Plugins
  • Styling

SAMPLES

  • Apps

ELEMENTS: LAYOUT

  • AbsoluteLayout
  • DockLayout
  • FlexboxLayout
  • GridLayout
  • StackLayout
  • WrapLayout

ELEMENTS: COMPONENTS

  • ActivityIndicator
  • ActionBar
  • ActionItem
  • Button
  • DatePicker
  • Frame
  • HtmlView
  • Image
  • Label
  • ListView
  • ListPicker
  • NavigationButton
  • Page
  • Placeholder
  • Progress
  • ScrollView
  • SearchBar
  • SegmentedBar
  • Slider
  • Switch
  • TabView
  • TabViewItem
  • TextField
  • TextView
  • TimePicker
  • WebView

LICENCES

  • Licences
Edit

GridLayout

<gridLayout> is a React wrapper around GridLayout, a layout container that lets you arrange its child elements in a table-like manner.

The grid consists of rows, columns, and cells. A cell can span one or more rows and one or more columns. It can contain multiple child elements which can span over multiple rows and columns, and even overlap each other.

By default, <gridLayout> has one column and one row. You can add columns and rows by configuring the columns and the rows properties (which take an array of ItemSpec instances to describe their dimensionality).

You can set a fixed size for column width and row height or you can create them in a responsive manner:

  • "px": Indicates a fixed size.
  • "auto": Makes the column as wide as its widest child or makes the row as tall as its tallest child.
  • "star": Takes as much space as available after filling all auto and fixed size columns or rows.

See also:

  • Official top-level documentation
  • Detailed API specification

Examples

Grid layout with fixed sizing

The following example creates a simple 2-by-2 grid with fixed column widths and row heights.

import * as React from "react";

<gridLayout
  columns="115, 115"
  rows="115, 115"
>
  <label text="0,0" row={0} col={0} backgroundColor="#43b883"/>
  <label text="0,1" row={0} col={1} backgroundColor="#1c6b48"/>
  <label text="1,0" row={1} col={0} backgroundColor="#289062"/>
  <label text="1,1" row={1} col={1} backgroundColor="#43b883"/>
</gridLayout>

Licence: NativeScript Vue Artwork.

Grid layout with star sizing

The following example creates a grid with responsive design, where space is alotted proportionally to child elements.

import * as React from "react";

<gridLayout
  columns="*, 2*"
  rows="2*, 3*"
  backgroundColor="#3c495e"
>
  <label text="0,0" row={0} col={0} backgroundColor="#43b883"/>
  <label text="0,1" row={0} col={1} backgroundColor="#1c6b48"/>
  <label text="1,0" row={1} col={0} backgroundColor="#289062"/>
  <label text="1,1" row={1} col={1} backgroundColor="#43b883"/>
</gridLayout>

Licence: NativeScript Vue Artwork.

Grid layout with fixed and auto sizing

The following example create a grid with one auto-sized column and one column with fixed size. Rows have a fixed height.

import * as React from "react";

<gridLayout
   columns="80, auto"
   rows="80, 80"
   backgroundColor="#3c495e"
>
  <label text="0,0" row={0} col={0} backgroundColor="#43b883"/>
  <label text="0,1" row={0} col={1} backgroundColor="#1c6b48"/>
  <label text="1,0" row={1} col={0} backgroundColor="#289062"/>
  <label text="1,1" row={1} col={1} backgroundColor="#43b883"/>
</gridLayout>

Licence: NativeScript Vue Artwork.

Grid layout with mixed sizing and merged cells

The following example creates a complex grid with responsive design, mixed width and height settings, and some merged cells.

import * as React from "react";

<gridLayout
  columns="40, auto, *"
  rows="40, auto, *"
  backgroundColor="#3c495e"
>
  <label text="0,0" row={0} col={0} backgroundColor="#43b883"/>
  <label text="0,1" row={0} col={1} colSpan="2" backgroundColor="#1c6b48"/>
  <label text="1,0" row={1} col={0} rowSpan="2" backgroundColor="#289062"/>
  <label text="1,1" row={1} col={1} backgroundColor="#43b883"/>
  <label text="1,2" row={1} col={2} backgroundColor="#289062"/>
  <label text="2,1" row={2} col={1} backgroundColor="#1c6b48"/>
  <label text="2,2" row={2} col={2} backgroundColor="#43b883"/>
</gridLayout>

Licence: NativeScript Vue Artwork.

Props

NameTypeDescription
columnsstringA string value representing column widths delimited with commas.
Valid values: an absolute number, auto, or *.
A number indicates an absolute column width. auto makes the column as wide as its widest child. * makes the column occupy all available horizontal space. The space is proportionally divided over all star-sized columns. You can set values such as 3* and 5* to indicate a ratio of 3:5 in sizes.
rowsstringA string value representing row heights delimited with commas.
Valid values: an absolute number, auto, or *.
A number indicates an absolute row height. auto makes the row as tall as its tallest child. * makes the row occupy all available vertical space. The space is proportionally divided over all star-sized rows. You can set values such as 3* and 5* to indicate a ratio of 3:5 in sizes.

Extra props for child elements

Applies to direct children (not, e.g. grandchildren).

NameTypeDescription
rownumberSpecifies the row for this element. Combined with a col property, specifies the cell coordinates of the element.
The first row is indicated by 0.
colnumberSpecifies the column for the element. Combined with a row property, specifies the cell coordinates of the element.
The first column is indicated by 0.
rowSpannumberSpecifies the number of rows which this element spans across.
colSpannumberSpecifies the number of columns which this element spans across.

React NativeScript-specific props

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

Last updated by Jamie Birch
← FlexboxLayoutStackLayout →
  • Examples
    • Grid layout with fixed sizing
    • Grid layout with star sizing
    • Grid layout with fixed and auto sizing
    • Grid layout with mixed sizing and merged cells
  • Props
  • Extra props for child elements
  • React NativeScript-specific props
React NativeScript
Docs
Getting StartedUI Components Reference
Community
Stack OverflowChat on Slack in #reactTwitter
More
GitHub – React NativeScriptStarGitHub – Docs Site
Follow @LinguaBrowse
Copyright © 2021 Jamie Birch