Learn how to use ImageBackground component to set a component's background image.
The ImageBackground
component lets you display an image as the background of another component in Expo and React Native apps. For example, you can set the background image of a screen in your app with ImageBackground
inside the screen's container view.
This component is conceptually similar to CSS's background-image
stylesheet property and the backgroundImage
DOM style property.
The ImageBackground
component accepts mostly the same props as the Image
component with a few differences. The style
prop is applied to a view that wraps an inner image; the imageStyle
prop is applied to the image itself. The imageRef
prop also is applied to the inner image.
import React from 'react';
import { ImageBackground, StyleSheet, Text, View } from 'react-native';
const image = { uri: "https://docs.expo.dev/static/images/tutorial/splash.png" };
const App = () => (
<View style={styles.container}>
<ImageBackground source={image} style={styles.image}>
<Text style={styles.text}>Elements</Text>
<Text style={styles.text}>in Front of</Text>
<Text style={styles.text}>Background</Text>
</ImageBackground>
</View>
);
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;
The example above renders a screen as following: