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

Extends React Native - ImageBackgroundopens in a new window props.

Name	Type	Default	Description
capInsets	Insets | undefined		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 be stretched. This is useful for creating resizable rounded buttons, shadows, and other resizable assets. More info in the official Apple documentation. See the official Apple documentationopens in a new window for more information.
disableDefaultProviderProps	boolean | undefined	false	If set to true, the component will not use the DefaultPropsProvider values. If you aren’t using the DefaultPropsProvider, this prop can be ignored.
height	Size | undefined		Height of the image component.
imageStyle	Style<"Image">		These styles will be applied to the Image component which is nested inside ImageBackground
rootTestID	string | undefined		Adds the passed in test ID to the root element of the component.
style	Style<"ImageBackground">		Style properties with Abyss token mapping
styles	Styles<ImageBackgroundClasses> | undefined		Add custom styles to component by class name with Abyss token mapping
testID	string | undefined		Using this prop will append -abyss and the name of the element class at the end of the testID passed in. If you want to only use string passed in on the root element, use the rootTestID prop instead. A unique identifier for this element to be used in UI Automation testing scripts.
tintColor	Color | undefined		Changes the color of all non-transparent pixels to the tintColor.
width	Size | undefined		Width of the image component.