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

Group arranges its children in a row with even spacing. Spacing comes from the React Native flex gap, and children wrap by default when they run out of room.

align

justify

gap

wrap

grow

() => {
  return (
    <Group style={{ height: 160 }}>
      <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>
    </Group>
  );
};

Gap

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

Justify

Main-axis (horizontal) alignment — React Native's justifyContent. Types: 'flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly'.

Grow

Set grow so children expand to fill the row. By default (preventGrowOverflow) children take an equal share of the row.

Group Props

Name	Type	Default	Required	Description
align	'stretch' | 'flex-start' | 'flex-end' | 'center' | 'baseline' | undefined	'center'	-	Cross-axis (vertical) alignment — React Native's alignItems.
children	React.ReactNode | undefined	-	-	The elements to arrange horizontally. Rendered as-is unless grow is set, in which case each child is wrapped so it can expand (see grow).
gap	Abyss.Space | undefined	'$core.spacing.200'	-	The space between children — a spacing token or a raw number.
grow	boolean | undefined	false	-	If set, each child is wrapped in a growing container (flexGrow: 1) so children expand to fill the row. Each item must be a direct JSX child of Group — a helper component that renders multiple elements via Fragment counts as one child, and its items will stack instead of growing side by side.
justify	'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' | undefined	'flex-start'	-	Main-axis (horizontal) alignment — React Native's justifyContent.
preventGrowOverflow	boolean | undefined	true	-	When grow is set, keeps children to an equal share of the row (flexBasis: 0) instead of growing from their content size. Only applies with grow.
wrap	'nowrap' | 'wrap' | 'wrap-reverse' | undefined	'wrap'	-	React Native's flexWrap.

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

Group.types.ts

Group Classes

Class Name	Description
abyss-group-root	Group root element