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%'}}>
    <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: