Setting 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.

How to use ImageBackground

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.

Example

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

const image = { uri: "https://docs.expo.io/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 like this:

Text rendered on top of an image background