BoxView
Flexible view container with styling props
Import: import { BoxView } from 'react-native-mantine';
Usage
import { BoxView, Text } from 'react-native-mantine';
<BoxView
p="md"
style={{
backgroundColor: '#e7f5ff',
borderRadius: 8
}}
>
<Text>Flexible container</Text>
</BoxView>Props
| Prop | Type | Default | Description |
|---|---|---|---|
fullWidth | boolean | false | Sets width to 100% of parent container |
fullHeight | boolean | false | Sets height to 100% of parent container |
p | number | "xs" | "sm" | "md" | "lg" | "xl" | Padding on all sides. Uses theme spacing values: xs=4, sm=8, md=12, lg=16, xl=20 | |
px | number | "xs" | "sm" | "md" | "lg" | "xl" | Horizontal padding (left and right) | |
py | number | "xs" | "sm" | "md" | "lg" | "xl" | Vertical padding (top and bottom) | |
pt | number | "xs" | "sm" | "md" | "lg" | "xl" | Padding top | |
pb | number | "xs" | "sm" | "md" | "lg" | "xl" | Padding bottom | |
pl | number | "xs" | "sm" | "md" | "lg" | "xl" | Padding left | |
pr | number | "xs" | "sm" | "md" | "lg" | "xl" | Padding right | |
m | number | "xs" | "sm" | "md" | "lg" | "xl" | Margin on all sides. Uses theme spacing values: xs=4, sm=8, md=12, lg=16, xl=20 | |
mx | number | "xs" | "sm" | "md" | "lg" | "xl" | Horizontal margin (left and right) | |
my | number | "xs" | "sm" | "md" | "lg" | "xl" | Vertical margin (top and bottom) | |
mt | number | "xs" | "sm" | "md" | "lg" | "xl" | Margin top | |
mb | number | "xs" | "sm" | "md" | "lg" | "xl" | Margin bottom | |
ml | number | "xs" | "sm" | "md" | "lg" | "xl" | Margin left | |
mr | number | "xs" | "sm" | "md" | "lg" | "xl" | Margin right | |
style | ViewStyle | Additional styles to apply to the view container | |
children | React.ReactNode | Content to be rendered inside the box | |
pointerEvents | 'auto' | 'none' | 'box-none' | 'box-only' | 'auto' | Controls touch handling behavior of the view |