import { ImageBackground } from '@uhg-abyss/mobile';Usage
A common feature request from developers familiar with the web is a background-image. To handle this use case, you can use the
ImageBackground component, which has the same props as Image, and add whatever children to it you would like to layer on top of it.
The ImageBackground component is a specialized container that displays an image as the background of a view.
This component is an enhancement of React Native's core ImageBackground, tailored to integrate seamlessly with our design system.
Example
Resize Mode
The resizeMode prop controls how the image is resized within the bounds set by the style prop. It can be one of the following values:
ImageBackground Classes
| Class Name | Description |
|---|---|
| abyss-image-background-root | ImageBackground root element |
ImageBackground Props
| Prop Name | Type | Default | Description |
|---|---|---|---|
| capInsets | Insets | - | When the image is resized, the corners of the size specified by capInsets will stay a fixed size, but the center content and borders of the image will not be stretched. |
| height | Abyss.Size | - | Height of the image. |
| imageStyle | Abyss.Style<"Image"> | - | Object or array of objects defining the style of the Image component within the ImageBackground component with design tokens. |
| style | Abyss.Style<"ImageBackground"> | - | Object or array of objects defining the style of the ImageBackground component with design tokens. |
| tintColor | Abyss.Color | - | Changes the color of all non-transparent pixels to the tintColor. |
| width | Abyss.Size | - | Width of the image. |