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	Required	Description
align	'stretch' | 'flex-start' | 'flex-end' | 'center' | 'baseline' | undefined	'stretch'	-	Cross-axis (horizontal) alignment
children	React.ReactNode | undefined	-	-	The elements to stack vertically. Rendered as-is, with no wrapper elements added around individual children.
gap	Abyss.Space | undefined	'$core.spacing.200'	-	The space between children — a spacing token or a raw number.
justify	'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' | undefined	'flex-start'	-	Main-axis (vertical) alignment — React Native's justifyContent.

Below are the link(s) to the relevant GitHub type files:

Stack.types.ts

Stack Classes

Class Name	Description
abyss-stack-root	Stack root element