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

Last Updated on August 15, 2019.

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%'}}>
    <Text>Inside</Text>
  </ImageBackground>
);

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) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <ImageBackground
        source={{
          uri:
            "https://cdn.pixabay.com/photo/2019/07/16/11/14/banff-4341560_960_720.jpg"
        }}
        style={styles.container}
      >
        <Text style={styles.header}>Hello World!</Text>
      </ImageBackground>
    );
  }
}
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: