In this post I’ll be going over how to create a fullscreen background image for your views in React Native. While I’ll be focusing on fullscreen images in particular, this will actually directly apply to any background image, fullscreen or not.

Here’s a look at what we’ll be creating:

Image courtesy of Unsplash.

The key to creating a background image in React Native is to understand that the Image component, contrary to the img element in HTML, the ImageView on Android, or the UIImageView on iOS, is built to support subviews like any other component.

This means that rather than having the Image as a sibling and positioning it manually behind your other views, you can actually put your components within the Image. This allows us to directly contain components within the Image without tricks like absolute positioning.

That being said, let’s look at how that plays out. We’re going to create a BackgroundImage component that renders an Image with some content inside. The goal of this post is simply to show you how to achieve the effect, so I won’t be going into detail like passing an image resource to the BackgroundImage using props or state, for example.

Here’s a look at the start of our BackgroundImage class. Note that I’ll be using a fire.jpeg image for this example, so make sure you either download the photo and add it to your project, or use an image you already have available.

class BackgroundImage extends Component {

    render() {
        return (
            <Image source={require('./fire.jpeg')}>
                    
                    {this.props.children}
                    
            </Image>
        )
    }
}

But, this alone won’t be enough to achieve our desired effect. We’ll need to add a style to the Image to make it take up the full available space, and to have the actual photo fill the space available:

const styles = StyleSheet.create({
    backgroundImage: {
        flex: 1,
        width: null,
        height: null,
        resizeMode: 'cover'
    }
});

We’ll use flex to fill the available space, and set width and height to null in order to avoid the photo from being limited to it’s actual size. The resizeMode allows us to define how the photo will be resized, and I recommend reading over the available values to best determine which value suits your needs. For this case, we’ll be using cover to scale the photo while maintaining the original aspect ratio.

Now we can set the style on our Image component within the render function:

<Image source={require('./fire.jpeg')}
    style={styles.backgroundImage}>
    
    {this.props.children}
    
</Image>

With the style in place, we’re ready to add some content to the UI. We’ll be creating a TestBackgroundImage component that renders a Text component inside the BackgroundImage for this example, but you can add any child components that your design calls for the same way.

class TestBackgroundImage extends Component {
    render() {
        return (
            <BackgroundImage>
              <Text style={styles.text}>Fullscreen!</Text>
            </BackgroundImage>
        ) 
    }
}

const styles = StyleSheet.create({   
    text: {
        textAlign: 'center',
        color: 'white',
        backgroundColor: 'rgba(0,0,0,0)',
        fontSize: 32
    }
});

Go ahead and run the application, and you should see a result like the screenshot at the top of this post. And that’s all there is to it! A simple way to enhance the design of your React Native applications.

Full Source

For clarity, here’s the full source code in case you had any trouble following the snippets above:

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

class BackgroundImage extends Component {

    render() {
        return (
            <Image source={require('./fire.jpeg')}
                  style={styles.backgroundImage}>

                  {this.props.children}

            </Image>
        )
    }
}

class TestBackgroundImage extends Component {
    render() {
        return (
            <BackgroundImage>
              <Text style={styles.text}>Fullscreen!</Text>
            </BackgroundImage>
        ) 
    }
}

const styles = StyleSheet.create({
    backgroundImage: {
        flex: 1,
        width: null,
        height: null,
        resizeMode: 'cover'
    },

    text: {
        textAlign: 'center',
        color: 'white',
        backgroundColor: 'rgba(0,0,0,0)',
        fontSize: 32
    }
});