Space

Add consistent spacing between elements

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

Usage

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

// Vertical spacing
<Text>First element</Text>
<Space h="md" />
<Text>Second element</Text>

// Horizontal spacing
<View style={{ flexDirection: 'row' }}>
  <Badge>Item 1</Badge>
  <Space w="lg" />
  <Badge>Item 2</Badge>
</View>

// Custom spacing
<Space h={50} />
<Space w={100} />

Props

Prop	Type	Description
`w`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| number`	Width - key of theme.spacing or number for width in px
`h`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| number`	Height - key of theme.spacing or number for height in px
`style`	`ViewStyle`	Additional styles to apply to the space element
`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)

Source on GitHub · npm