Flex

Flexible box layout with full control

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

Usage

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

// Row layout with gap
<Flex
  direction="row"
  justify="space-between"
  align="center"
  gap="md"
>
  <Badge>Item 1</Badge>
  <Badge>Item 2</Badge>
</Flex>

// Column layout
<Flex direction="column" gap="sm">
  <Badge>Item 1</Badge>
  <Badge>Item 2</Badge>
</Flex>

// Wrap layout
<Flex wrap="wrap" gap="md">
  <Badge>Item 1</Badge>
  <Badge>Item 2</Badge>
  <Badge>Item 3</Badge>
</Flex>

Props

Prop	Type	Default	Description
`direction`	`'row' \| 'row-reverse' \| 'column' \| 'column-reverse'`	`'row'`	Flex direction - defines the main axis direction
`wrap`	`'nowrap' \| 'wrap' \| 'wrap-reverse'`	`'nowrap'`	Flex wrap behavior - whether items wrap to new lines
`align`	`'flex-start' \| 'flex-end' \| 'center' \| 'stretch' \| 'baseline'`		Align items along the cross axis (align-items property)
`justify`	`'flex-start' \| 'flex-end' \| 'center' \| 'space-between' \| 'space-around' \| 'space-evenly'`		Justify content along the main axis (justify-content property)
`gap`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| number`		Gap between flex items from theme.spacing or number for gap in px
`columnGap`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| number`		Column gap from theme.spacing or number for gap in px
`rowGap`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| number`		Row gap from theme.spacing or number for gap in px
`children`	`React.ReactNode`		Flex container children
`style`	`ViewStyle`		Additional styles to apply to the flex container
`p`	`string \| number`		Padding on all sides (inherited from BoxView)
`px`	`string \| number`		Padding horizontal (inherited from BoxView)
`py`	`string \| number`		Padding vertical (inherited from BoxView)
`pt`	`string \| number`		Padding top (inherited from BoxView)
`pb`	`string \| number`		Padding bottom (inherited from BoxView)
`pl`	`string \| number`		Padding left (inherited from BoxView)
`pr`	`string \| number`		Padding right (inherited from BoxView)
`m`	`string \| number`		Margin on all sides (inherited from BoxView)
`mx`	`string \| number`		Margin horizontal (inherited from BoxView)
`my`	`string \| number`		Margin vertical (inherited from BoxView)
`mt`	`string \| number`		Margin top (inherited from BoxView)
`mb`	`string \| number`		Margin bottom (inherited from BoxView)
`ml`	`string \| number`		Margin left (inherited from BoxView)
`mr`	`string \| number`		Margin right (inherited from BoxView)
`fullWidth`	`boolean`		Takes 100% width (inherited from BoxView)
`fullHeight`	`boolean`		Takes 100% height (inherited from BoxView)

Source on GitHub · npm