How to Set Image as Background for a Screen in React Native

The mobile app user interface should be made beautiful to attract the attention of its users. In some scenarios, setting an image as the background for a screen can make the app looks more appealing and sexy.

In this blog post, let’s check how to make an image background for a screen in react native. You can use ImageBackground component from react native for this purpose. This component is very similar to background-image in the web.

ImageBackground component should be made parent and you can add as many children as you want. Specifying height and width is a must while using ImageBackground. Following is the snippet to use it.

return (
  <ImageBackground source={...} style={{width: '100%', height: '100%'}}>

Following is the complete react native example of using image background.

import React, { Component } from "react";
import { Text, StyleSheet, ImageBackground } from "react-native";

export default class App extends Component {
  constructor(props) {
    this.state = {};

  render() {
    return (
        <Text style={styles.header}>Hello World!</Text>
const styles = StyleSheet.create({
  container: {
    width: "100%",
    height: "100%",
    alignItems: "center",
    justifyContent: 'center'
  header: {
    fontSize: 48,
    color: "white",

The output of the react native example is as given in the screenshot below:

react native image background screen

I have created a Github repository for this react native image background example. You can check it out here.

Leave a Reply

%d bloggers like this: