React Native Mantine › Data display
Image
Responsive image with placeholder
Import: import { Image } from 'react-native-mantine';
Usage
import { Image } from 'react-native-mantine';
<Image
source={{ uri: 'https://unsplash.it/640/425' }}
width={150}
height={150}
radius="md"
fit="cover"
alt="Random landscape"
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
source (required) | ImageSourcePropType | Image source | |
width | number | Image width | |
height | number | Image height | |
fit | 'contain' | 'cover' | 'fill' | 'none' | 'scale-down' | 'cover' | Image fit |
radius | MantineNumberSize | 0 | Key of theme.radius or any valid value to set border-radius |
placeholder | React.ReactNode | Placeholder to show when image is loading | |
errorMessage | string | 'Failed to load image' | Error message to show when image fails to load |
errorPlaceholder | React.ReactNode | Custom error placeholder | |
alt | string | Image alt text for accessibility | |
onLoad | () => void | Called when image loads | |
onError | (error: NativeSyntheticEvent<ImageErrorEventData>) => void | Called when image fails to load | |
style | any | Additional styles | |
testID | string | Test identifier used by testing frameworks |