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	Description
align	"center" | "flex-start" | "flex-end" | "stretch" | "baseline" | undefined	'center'	Cross-axis (vertical) alignment — React Native's alignItems.
children	string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null | 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	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	"center" | "flex-start" | "flex-end" | "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	"wrap" | "nowrap" | "wrap-reverse" | undefined	'wrap'	React Native's flexWrap.

Group Classes

Class Name	Description
abyss-group-root	Group root element