React Native Mantine › Miscellaneous
Paper
Container with shadow and border radius
Import: import { Paper } from 'react-native-mantine';
Usage
import { Paper, Text } from 'react-native-mantine';
// Basic paper
<Paper p="md" shadow="sm" radius="md">
<Text>Content goes here</Text>
</Paper>
// Paper with border
<Paper p="lg" radius="md" withBorder>
<Text>Card with border</Text>
</Paper>
// Elevated card
<Paper p="xl" shadow="lg" radius="lg">
<Text>Elevated card</Text>
</Paper>Props
| Prop | Type | Default | Description |
|---|---|---|---|
shadow | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | Key of theme.shadows to apply shadow elevation effect | |
radius | number | "xs" | "sm" | "md" | "lg" | "xl" | "sm" | Key of theme.radius or any valid number to set border-radius |
p | number | "xs" | "sm" | "md" | "lg" | "xl" | 0 | Padding from theme.spacing (xs, sm, md, lg, xl), or number to set padding in pixels |
withBorder | boolean | false | Adds border with theme.colors.gray[3] in light mode and theme.colors.dark[4] in dark mode |
children | React.ReactNode | Paper content | |
style | ViewStyle | Additional styles to apply to the paper container |