Stack

Vertical layout with spacing control

Import: import { Stack } from 'react-native-mantine';

Usage

import { Stack, Button , Badge } from 'react-native-mantine';

// Basic stack with spacing
<Stack spacing={16}>
  <Button>First</Button>
  <Button>Second</Button>
  <Button>Third</Button>
</Stack>

// Centered stack with padding
<Stack spacing={12} position="center" p="md">
  <Badge>Badge 1</Badge>
  <Badge>Badge 2</Badge>
</Stack>

Props

Prop	Type	Default	Description
`children` (required)	`React.ReactNode`		Components to be stacked vertically
`spacing`	`number`	`15`	Vertical spacing (gap) between stacked children in pixels
`position`	`string`		Horizontal alignment of children. Use "center" to center-align items
`style`	`ViewStyle`		Additional styles applied to the stack container
`fullWidth`	`boolean`		If true, sets width to 100% of parent container
`fullHeight`	`boolean`		If true, sets height to 100% of parent container
`p`	`string \| number`		Padding on all sides (accepts "xs", "sm", "md", "lg", "xl" or number)
`px`	`string \| number`		Horizontal padding (left and right)
`py`	`string \| number`		Vertical padding (top and bottom)
`pt`	`string \| number`		Padding top
`pb`	`string \| number`		Padding bottom
`pl`	`string \| number`		Padding left
`pr`	`string \| number`		Padding right
`m`	`string \| number`		Margin on all sides (accepts "xs", "sm", "md", "lg", "xl" or number)
`mx`	`string \| number`		Horizontal margin (left and right)
`my`	`string \| number`		Vertical margin (top and bottom)
`mt`	`string \| number`		Margin top
`mb`	`string \| number`		Margin bottom
`ml`	`string \| number`		Margin left
`mr`	`string \| number`		Margin right

Source on GitHub · npm