ImageBackground

Learn background images with ImageBackground.

What is ImageBackground?

ImageBackground lets you place text or other components on top of an image. Like Image it takes a source; unlike Image it also allows children.

Typical usage: open <ImageBackground source={'{...}'}>, put <Text> or <View> inside, then close with </ImageBackground>. The image stays in the back, the children in front.

The difference from Image: Image is a self-closing tag (ends with />), while ImageBackground is a container (with opening and closing tags). That is why it accepts children.

Using ImageBackground

ImageBackground takes source and style props. You must set width and height in style; otherwise the image is invisible. Children stack on top of the image automatically.

Example: open <ImageBackground source={'{ uri: 'https://.../bg.png' }'} style={'{ width: 300, height: 200 }'}>, put <Text style={'{ color: 'white' }'}>Hello</Text> inside. The text appears white over the image.

To improve readability you can add a semi-transparent layer. You do that with rgba colors or a second <View>.

Exercise Write a card with a background image

Write an <ImageBackground>. Give it source={'{ uri: 'https://example.com/bg.png' }'} and a style with width: 300 and height: 200. Put a white <Text> inside. Export the App function.

Show example solution

function App() {
  return (
    <ImageBackground
      source={{ uri: 'https://example.com/bg.png' }}
      style={{ width: 300, height: 200 }}>
      <Text style={{ color: 'white' }}>Hello</Text>
    </ImageBackground>
  );
}
export default App;

Test yourself

What can ImageBackground hold?
- Children like text or View
- Only a color
- Only a number
- Only an empty value
Show answer

Only a number — ImageBackground has opening and closing tags and takes children.

Import ImageBackground

import { ____ } from 'react-native';

Show answer

import { ImageBackground } from 'react-native';

ImageBackground parts

source

Background image
children

Foreground items
style

Box size
color: white

Text color

Next lesson: Image size

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies