import { Stack } from '@uhg-abyss/mobile/ui/Stack';

Stack arranges its children in a single column with even spacing. It renders children as-is (no wrapper View per child) and spacing comes from the React Native flex gap, so there are no margins to collapse or override.

align

justify

gap

() => {
  return (
    <Stack style={{ height: 260 }}>
      <Box padding="$core.spacing.200" color="$semantic.color.surface.container.primary">
        <Text color="$semantic.color.text.body.alt">Item 1</Text>
      </Box>
      <Box padding="$core.spacing.200" color="$semantic.color.surface.container.primary">
        <Text color="$semantic.color.text.body.alt">Item 2</Text>
      </Box>
      <Box padding="$core.spacing.200" color="$semantic.color.surface.container.primary">
        <Text color="$semantic.color.text.body.alt">Item 3</Text>
      </Box>
    </Stack>
  );
};

Gap

Use the gap prop to set the space between children. Accepts a $core.spacing.* token (e.g. $core.spacing.200) or a raw number in dp. Defaults to $core.spacing.200.

Align

Cross-axis (horizontal) alignment — React Native's alignItems. Types: 'stretch', 'flex-start', 'flex-end', 'center', 'baseline'. Defaults to 'stretch', so children fill the width unless you constrain them.

Justify

Main-axis (vertical) alignment — React Native's justifyContent. Types: 'flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly'. Give the Stack a height for justify to have room to work.

Stack Props

Name	Type	Default	Description
align	"center" | "flex-start" | "flex-end" | "stretch" | "baseline" | undefined	'stretch'	Cross-axis (horizontal) alignment
children	string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null | undefined		The elements to stack vertically. Rendered as-is, with no wrapper elements added around individual children.
gap	Space | undefined	'$core.spacing.200'	The space between children — a spacing token or a raw number.
justify	"center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly" | undefined	'flex-start'	Main-axis (vertical) alignment — React Native's justifyContent.

Stack Classes

Class Name	Description
abyss-stack-root	Stack root element