ImageBackground

A common feature request from developers familiar with the web is 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.

You might not want to use <ImageBackground> in some cases, since the implementation is basic. Refer to <ImageBackground>‘s source code for more insight, and create your own custom component when needed.

import React from “react”;
import { ImageBackground, StyleSheet, Text, View } from “react-native”;

const image = { uri: “https://reactjs.org/logo-og.png” };

const App = () => (
Inside
);

const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: “column”
},
image: {
flex: 1,
resizeMode: “cover”,
justifyContent: “center”
},
text: {
color: “white”,
fontSize: 42,
fontWeight: “bold”,
textAlign: “center”,
backgroundColor: “#000000a0”
}
});

export default App;

Note that you must specify some width and height style attributes.

Reference#

Props#

Image Props#

Inherits Image Props.


imageStyle#

TYPE
Image Style

imageRef#

Allows to set a reference to the inner Image component

TYPE
Ref

style#

TYPE
View Style

Original Source: https://reactnative.dev/docs/imagebackground