React Native Mantine › Data display
BackgroundImage
Container with background image
Import: import { BackgroundImage } from 'react-native-mantine';
Usage
import { BackgroundImage, Text } from 'react-native-mantine';
<BackgroundImage
source={{ uri: 'https://unsplash.it/640/425' }}
radius="md"
style={{ height: 150 }}
>
<Text style={{ color: '#fff', padding: 16 }}>Content over image</Text>
</BackgroundImage>Props
| Prop | Type | Default | Description |
|---|---|---|---|
source (required) | ImageSourcePropType | Background image source | |
radius | MantineNumberSize | 0 | Key of theme.radius or any valid value to set border-radius |
children | React.ReactNode | Background image children | |
style | any | Additional styles | |
testID | string | Test identifier used by testing frameworks |