HStack#

The HStack component in the Scripting app provides a convenient way to arrange views horizontally with flexible alignment and spacing options. This component is essential for creating layouts that require side-by-side positioning of subviews.

HStackProps#

Properties#

1. alignment (optional)

   • Type: VerticalAlignment
   • Description: Specifies the vertical alignment of the subviews within the stack. Each subview is aligned according to the same vertical screen coordinate.
   • Default Value: "center"
   • Options:
     • "top": Align subviews to the top edge.
     • "center": Align subviews to the vertical center.
     • "bottom": Align subviews to the bottom edge.
     • "firstTextBaseline": Align subviews to the first text baseline.
     • "lastTextBaseline": Align subviews to the last text baseline.
   • Example:

     1<HStack alignment="top">
     2  <Text>Item 1</Text>
     3  <Text>Item 2</Text>
     4</HStack>

2. spacing (optional)

   • Type: number
   • Description: Specifies the distance between adjacent subviews. If not provided, the stack automatically determines the default spacing.
   • Default Value: undefined (uses default spacing)
   • Example:

     1<HStack spacing={15}>
     2  <Text>Item 1</Text>
     3  <Text>Item 2</Text>
     4</HStack>

3. children (optional)

   • Type:

     1(VirtualNode | undefined | null | (VirtualNode | undefined | null)[])[] | VirtualNode | undefined
   • Description: Specifies the subviews to be arranged in the stack. It can accept a single child, multiple children, or nested arrays of children.
   • Example:

     1<HStack>
     2  <Text>Item 1</Text>
     3  <Text>Item 2</Text>
     4  <Text>Item 3</Text>
     5</HStack>

VerticalAlignment#

VerticalAlignment is an enumerated type that specifies how subviews are aligned vertically in an HStack.

Options:#

• "top": Aligns the top edge of subviews.
• "center": Aligns subviews along the vertical center axis.
• "bottom": Aligns the bottom edge of subviews.
• "firstTextBaseline": Aligns subviews to the first baseline of the text content.
• "lastTextBaseline": Aligns subviews to the last baseline of the text content.

HStack Component#

Description#

The HStack component is a layout container that arranges its subviews in a horizontal line. It provides options for aligning views vertically and specifying the spacing between them.

Syntax#

1<HStack alignment="center" spacing={10}>
2  {children}
3</HStack>

Example 1: Basic Horizontal Stack#

1function Example1() {
2  return (
3    <HStack>
4      <Text>Item 1</Text>
5      <Text>Item 2</Text>
6      <Text>Item 3</Text>
7    </HStack>
8  )
9}

Example 2: Custom Spacing and Alignment#

1function Example2() {
2  return (
3    <HStack alignment="bottom" spacing={20}>
4      <Text>Aligned Bottom</Text>
5      <Text>With Spacing</Text>
6    </HStack>
7  )
8}

Example 3: Complex Children#

1function Example3() {
2  return (
3    <HStack spacing={10}>
4      {[1, 2, 3].map((item) => (
5        <Text key={item.toString()}>Item {item}</Text>
6      ))}
7    </HStack>
8  )
9}

Notes:#

• Ensure that all child components passed to HStack are valid VirtualNode elements.
• For advanced layouts, combine HStack with other components like VStack or Spacer.

See Also:#

• VStack for vertical stacking of views.
• Spacer to create flexible spacing in stacks.
• Text for rendering text content.

Diagram#

The following diagram shows how vertical alignments work within an HStack: