Adding a background image in React Native - Image & ImageBackground

Bookmark

In this tutorial, we’ll learn how to add a background image in React Native using either the Image component with absolute positioning or ImageBackground.

Let’s now change our previous component to display a background image and a centered text with the name of our app.

First, change our component to display the name and description of our app as follows:

const App = (props) => {
  return (
    <View style = { styles.container } >

      <View style= { styles.logoContainer }>
        <Text style = { styles.logoText }>
          Newzzz
        </Text>
        <Text style = { styles.logoDescription }>
          Get your doze of daily news!
        </Text>

      </View>
    </View>
  );
}

Also, open the styles.js file and add the following styles:

const styles = StyleSheet.create({
    container: {
        flex: 1,
        fontFamily: "-apple-system, BlinkMacSystemFont Segoe UI",
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "orange"
    },
    logoContainer:{
        alignItems: "center",
    },
    logoText: {
        fontSize: 24,
        fontWeight: '600',
        color: 'white'
    },
    logoDescription:{
        fontSize: 15,
        fontWeight: '600',
        color: 'white'
    }
});

This is the screenshot of our UI, now:

React Native Example

We have used the backgroundColor property to set orange as the color of the container <View>.

This is good but what if we want something more fancy? We can use an image as a background.

In React Native, we can include images using either the <Image> or <ImageBackground> components. What’s the difference between these two components?

With the release of React Native v0.50+, the <Image> component can not have nested content anymore (See this link) but we can use <ImageBackground> instead if we want to create nested content.

If you try to add other children inside the <Image> component, you’ll get the following error:

The <Image> component cannot contain children. If you want to render content on top of the image, consider using the <ImageBackground> component or absolute positioning.

React Native UI

Latest from react native tutorial

Bookmark This Article

Your browser doesn't support automatic bookmarking. You can:

  1. Press Ctrl+D (or Command+D on Mac) to bookmark this page
  2. Or drag this link to your bookmarks bar:
Bookmark This

Clicking this bookmarklet when on any page of our site will bookmark the current page.

Using Image with absolute positioning

Go to the App.js file and start by importing the Image component:

import {
  View,
  Text,
  Button,
  Image,
} from 'react-native';

Next, change the App component as follows:

const App = (props) => {
  return (
    <View style={styles.container} >
      <Image style= { styles.backgroundImage } source=>
      </Image>
      <View style={styles.logoContainer}>
        <Text style={styles.logoText}>
          Newzzz
        </Text>
        <Text style={styles.logoDescription}>
          Get your doze of daily news!
        </Text>
      </View>
    </View>
  );
}

Next, add the following style object inside the styles.js file:

    backgroundImage:{
        position: 'absolute',
        top: 0,
        left: 0,
        bottom: 0,
        right: 0,
        opacity: 0.3
    },

Here is a screenshot of our view:

React Native Image Example

That’s nice! We achieved this using the <Image> component with absolute positioning.

Using ImageBackground

Another way is to use <ImageBackground>.

In your App.js file, start by importing <ImageBackground>:

import {
  View,
  Text,
  Button,
  Image,
  ImageBackground,
} from 'react-native';

Next, change the App component as follows:

const App = (props) => {
  return (
    <View style = { styles.container } >
    <ImageBackground  style= { styles.backgroundImage } source= >

      <View style= { styles.logoContainer }>
        <Text style = { styles.logoText }>
          Newzzz
        </Text>
        <Text style = { styles.logoDescription }>
          Get your doze of daily news!
        </Text>

      </View>
      </ImageBackground>
    </View>
  );
}

Next, change the backgroundImage style as follows:

    backgroundImage:{
        flex: 1,
        width: '100%',
        height: '100%',
        justifyContent: "center",
        alignItems: "center",
        opacity: 0.7
    },

This is the screenshot of our view:

BackgroundImage Example