Center

Center content both horizontally and vertically

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

Usage

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

// Basic centering
<Center style={{ height: 100 }}>
  <Text>Centered content</Text>
</Center>

// Full width and height
<Center fullWidth fullHeight>
  <Text>Centered in full container</Text>
</Center>

// With padding
<Center p="xl" style={{ height: 120 }}>
  <Badge>Centered badge</Badge>
</Center>

Props

Prop	Type	Description
`children`	`React.ReactNode`	Content that should be centered horizontally and vertically
`inline`	`boolean`	Inline center (not applicable in React Native, prop exists for API compatibility)
`style`	`ViewStyle`	Additional styles to apply to the center 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