Stack

Stack is a component that arranges child elements in a stack layout either horizontally or vertically, and allows you to set spacing between child elements. You can specify the direction as horizontal or vertical using the direction property, and control the spacing between child elements using the gutter property. You can use Stack.Horizontal for horizontal arrangement and Stack.Vertical for vertical arrangement.

Signature

typescript

Stack: StackType;

Parameter

propsobject
The props object passed to the component.
- props.align'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline'
  The alignment value for child elements along the main axis (Flex direction). For example, in 'column' direction, 'center' places elements at the horizontal center, and 'stretch' expands elements to match the parent's width when their width is 'auto'. This value is applied to `alignItems`.
- props.justify'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly'
  The alignment value for child elements along the cross axis (perpendicular to Flex direction). For example, in 'column' direction, flex-start places elements at the top of the parent, and 'center' places them at the vertical center. This value is applied to `justifyContent`.
- props.direction'vertical' | 'horizontal' · 'vertical'
  The value that sets the direction in which child elements are arranged. Default value is 'vertical'.
- props.gutternumber | ReactElement
  The value that sets the spacing between child elements. When a number is provided, it sets the margin in pixels, and when a ReactElement is passed, that component is used as the spacing. Using a number allows for precise control of spacing, while using a ReactElement enables more complex custom spacing implementations.

Property

HorizontalStackHorizontal
Stack.Horizontal is a component that arranges child elements in a horizontal stack.

VerticalStackVertical
Stack.Vertical is a component that arranges child elements in a vertical stack.

Example

Example of arranging elements horizontally and vertically with a spacing of 16

tsx

import { Text } from 'react-native';
import { Stack } from '@granite-js/react-native';

export function StackExample() {
  return (
    <>
      <Stack gutter={16} direction="horizontal">
        <Text>Arrange horizontally with 16 spacing</Text>
        <Text>1</Text>
        <Text>2</Text>
        <Text>3</Text>
      </Stack>
      <Stack gutter={16} direction="vertical">
        <Text>Arrange vertically with 16 spacing</Text>
        <Text>1</Text>
        <Text>2</Text>
        <Text>3</Text>
      </Stack>
    </>
  );
}

Stack ​

Signature ​

Parameter ​

Property ​

Example ​