ImageBackground - React Native

What is ImageBackground in React Native?

With Expo and React Native projects, you can use the ImageBackground React Native component to display an image as the background of another component. For instance, you can use React Native ImageBackground inside the screen's container view to set the background picture of a screen in your app.

The backgroundImage DOM style property and the background-image stylesheet property of CSS are semantically related to this element. The React Native ImageBackground tag requires a source, that is, the link to the image file you want to use as background.

How to Use React Native ImageBackground?

The ImageBackground component accepts, with a few exceptions, essentially the same props as the Image component. A view that wraps an inner image is given the style prop, and the picture itself is given the imageStyle prop. Moreover, the inner image is affected by the imageRef prop.

ImageBackground Props

The React Native ImageBackground component accepts all the props of the Image component. Other than that, it accepts the following props :

Image Props : Inherits Image Props.

• accessible: It is of Boolean type and the default value is false. When true, the picture serves as an accessibility element.
• accessibilityLabel: It is of string type.The text that the screen reader reads when the user clicks on a picture.
• alt: When a user interacts with a picture, the screen reader will read an alternate text description of the image that is defined by a string. By using this, this element will be marked as accessible by default.
• blurRadius: It is of inqteger type. The blur radius of the image's blur filter.
• capInsets iOS : The image's borders and center content will expand when it is enlarged, but the corners of the size provided by capInsets will remain fixed. For making rounded buttons, shadows, and other resizable components, this is helpful. More details may be found in the Apple documentation.
• crossOrigin: A keyword string indicating the CORS fetching mode to employ for the image resource. It functions similarly to HTML's cross-origin property.
• defaultSource : A still picture to show while the image source loads.
• fadeDuration : It is specific to android. Duration of the fade animation in milliseconds.
• height : Height of the image component.
• loadingIndicatorSource : This attribute, is like source, denotes the source utilised to produce the image's loading indication. The loading indication is shown until the picture is prepared for display, which usually happens after the image has been downloaded.
• onError : Invoked on load error.
• onLayout : Invoked on layout changes or on the mount.
• onload : Triggered after a load is completed.
• onLoadEnd : Invoked after a successful or unsuccessful load.
• onLoadStart : Invoked on load start.
• width : Width of the image component.
• tintColor : All non-transparent pixels' colours are adjusted to the tintColor.
• src : a string identifying the image's remote URL. The source prop is subordinate to this prop.
• source : The image's source, which might be a local file resource or a remote URL. This prop may additionally have several remote URLs that are supplied along with their width, height, and sometimes scale or other URI parameters. Afterward, based on the estimated size of the image container, the native side will select the ideal uri to show.
• backfaceVisibility : Whether or not a rotated image's rear face should be seen is determined by the attribute.
• overlayColor: Choosing an overlayColor will result in the image's rounded edges' leftover space being filled with a solid color. This is helpful in situations when the Android implementation of rounded corners is not supported.
• resizeMode : When the frame doesn't match the raw image dimensions, the resizeMode setting decides how to resize the picture. It has a default value of cover.
• objectFit: When the frame doesn't match the raw image dimensions, objectFit decides how to resize the picture.
• Other common props are backgroundColor, borderBottomLeftRadius, borderBottomRightRadius, borderColor, borderRadius, borderTopLeftRadius, borderTopRightRadius, and borderWidth.

Examples of React Native ImageBackground

To understand the use of React Native ImageBackground component, now let us set up a new React Native project by the following commands :

Now to run the project, use the below command :

Now in the App.js file, write the following code :