Home » React JS

How to add React Native App Background Image?

In this article, we will learn how to add a background image to react native application?
Submitted by Godwill Tetah, on February 13, 2020

Adding a background image is as easy as adding an image to react-native applications.

As usual, we always begin by importing the necessary components which in this case will include ImageBackground.

You should take note of the name of the component. It is not the one you usually see in CSS.

To add an Image Background, we must import the component as usual.
The ImageBackground component has taken several properties similar to that of the Image component like the source property which is the source of the image and other properties like the style and more which can be seen on the official documentation of react-native.

https://facebook.github.io/react-native/docs/image

Just like with the Image component, the background image can take a local image and the image from a URL.

The example below gets an image from a URI and displays it as the background.

Open your App.js file and type the following,

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

export default function App () {
  return (
  <ImageBackground source={{uri:'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTdncnwIlxMYCGXAGLqXWpyQzlLySodA1-_YEl9EH0kdVqoLPlt'}}
 style={{width: '100%', height: '100%'}}
 resizeMode={"contain"}
 >

  <Text style={{color: 'gold'}}> I LOVE YOU </Text>
  </ImageBackground>

);

}

Output

Thanks for coding with me! See you @ the next article. Feel free to drop a comment or question. God Bless You!