React Native Mantine › Data display
Avatar
User avatar with fallback support
Import: import { Avatar } from 'react-native-mantine';
Usage
import { Avatar } from 'react-native-mantine';
// Avatar with image
<Avatar
src="https://example.com/avatar.jpg"
alt="John Doe"
size="lg"
/>
// Avatar with initials fallback
<Avatar
alt="Jane Smith"
color="blue"
size="md"
/>
// Avatar with custom content
<Avatar size="xl">
<CustomIcon />
</Avatar>Props
| Prop | Type | Default | Description |
|---|---|---|---|
src | string | null | Image URL to display in the avatar. If null or loading fails, placeholder will be shown | |
alt | string | Image alt text. Also used to generate initials for placeholder (e.g., "John Doe" becomes "JD") | |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number | "md" | Avatar size as predefined value or custom number in pixels |
radius | number | "xs" | "sm" | "md" | "lg" | "xl" | "xl" | Key of theme.radius or any valid number to set border-radius. Use "xl" for circular avatars |
color | MantineColor | "gray" | Avatar background color from theme, used when showing placeholder |
children | React.ReactNode | Custom placeholder component to show when image is not available. Takes precedence over initials | |
imageProps | Partial<ImageProps> | Additional props passed to the React Native Image component | |
style | ViewStyle | Additional styles to apply to the avatar container |