Row

Overview

The Row component is designed to arrange its child components in a horizontal sequence. This layout mechanism is essential for creating structured and organized UIs that require horizontal alignment of elements, such as toolbars, menus, or any content that follows a left-to-right or right-to-left flow.

Sample JSON

Below is a sample JSON object demonstrating how to define a Row component with various child components and style properties:

row.json

{
  "type": "row",
  "data": {
    "children": [
      {
        "type": "text",
        "data": {
          "text": "Hello World"
        },
        "style": {
          "fontStyle": "heading1",
          "fontSize": 18,
          "fontColor": "ff0000",
          "fontColorDark": "FFC0CB",
          "fontWeight": "bold",
          "maxLines": 2,
          "padding": {
            "top": 0,
            "bottom": 10,
            "left": 0,
            "right": 0
          }
        }
      },
      {
        "type": "text",
        "data": {
          "text": "Hello World 2"
        },
        "style": {
          "fontStyle": "heading1",
          "fontColor": "0000ff",
          "padding": {
            "top": 0,
            "bottom": 10,
            "left": 0,
            "right": 0
          }
        }
      }
    ]
  },
  "style": {
    "alignment": "center",
    "spacing": 10,
    "padding": {
      "top": 16,
      "bottom": 16,
      "left": 12,
      "right": 12
    }
  }
}

This results in the following output:

Hello World

Hello World 2

This JSON structure creates a Row component that horizontally aligns two Text components with specific styles. The alignment property is set to "center", meaning the children are centered vertically within the row. The spacing property defines a 10-pixel gap between each child component, and padding adds space around the entire set of children within the row.

Data Properties

The data properties define the content structure of the Row component. The following table lists the available data property for the Row component:

Property	Type	Required	Description
children	[Components]	true	An array of components to be displayed in a horizontal sequence.

Style Properties (Optional)

Style properties allow you to customize the layout and spacing of the Row component.

info

The style properties are optional. If you don't specify any style properties, the Row component will use default alignment, spacing, and padding.

The following table lists the available style properties for the Row component:

Property	Type	Platform	Required	Description
alignment	String	iOS	false	Aligns the children vertically within the row according to the specified guide. Common values are "top", "center", and "bottom".
spacing	Float	android, iOS	false	The gap between adjacent components.
horizontal_alignment	String	android	false	Specifies how to align the Row's children horizontally. Common values include "Start", "CenterHorizontally", or "End".
vertical_alignment	String	android	false	Specifies how to align the Row's children vertically. Common values include "Top", "CenterVertically", or "Bottom".
content_width	String	android	false	Defines how the width of the Row's content is measured. Common values include "WrapContent" or "MatchParent".
padding	JSON	android, iOS	false	The padding around the row component.

alignment

• Type: String (optional)
• Description: Specifies the vertical alignment of child components within the row. Common values include "top", "center", and "bottom", affecting how items are positioned along the cross axis.

spacing

• Type: Float (optional)
• Description: Defines the gap between adjacent components within the row. The value is in logical pixels.

horizontal_alignment

• Type: String (optional)
• Description: Specifies how to align the Row's children horizontally. Common values include "Start", "CenterHorizontally", and "End". This property affects the alignment along the main axis.

vertical_alignment

• Type: String (optional)
• Description: Specifies how to align the Row's children vertically. Common values include "Top", "CenterVertically", and "Bottom". This property affects the alignment along the cross axis.

content_width

• Type: String (optional)
• Description: Defines how the width of the Row's content is measured. Common values include "WrapContent" and "MatchParent". "WrapContent" means the Row will only be as wide as its children, while "MatchParent" means it will expand to fill the width of its parent.

padding

• Type: JSON (optional)
• Description: Defines the space around the component. The padding is specified for top, bottom, left, and right individually. Each subproperty is an integer representing the number of logical pixels for the padding.
  • top: The space above the component.
  • bottom: The space below the component.
  • left: The space to the left of the component.
  • right: The space to the right of the component.