Fullscreen Background Image in React Native

This post explains how to Set Background Image as Full Screen in React Native application. if you are the user of Whatsapp, Hike etc. then  you may have seen colorful background image in that application. Also you can customize the image and set is as background wallpaper for your application.

React Native provides a unified way of managing images and other media assets in your iOS and Android apps. Here in this example we are using ImageBackground component of react native application to set background image as full screen.

ImageBackground is a very simple and useful component.Put your component inside ImageBackground as a nested component and tweak a position of your component by using position.

Syntax :

return (
  <ImageBackground source={require('./image.png')} style={{width: '100%', height: '100%'}}>
    <Text>Inside</Text>
  </ImageBackground>
);

Set Background Image in React Native Application :

Lets follow the below steps to set image as fullscreen background in react native application.

Project Structure :

Inside background-image folder place your image.

Step-1: Create a new react native project, if you don’t know how to create a new project in react native just follow this tutorial.

Step-2: Open index.android.js  / index.ios.js  in your favourite code editor and erase all code and follow this tutorial.

Step-3: Through react , react-native  packages import all required components.

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

Step-4: Implement render method and return child component wrapped by ImageBackground component. You can set the background image by specifying the image path in source prop of ImageBackground component.

render() {
    return (
    <ImageBackground  source={require('./background-image/image1.jpg')}  style={styles.container} >
      <View style={styles.container}>
         <Text style={styles.headerText}>
           Setting background image in react native application
         </Text>
      </View>
    </ImageBackground>
    );
  }

Step-5 : Apply the below style sheet design.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: 'center',
    width: null,
    height: null,
  },
  headerText: {
    fontSize: 24,
    textAlign: "center",
    margin: 10,
    color: "white",
    fontWeight: "bold"
  }
});

Complete Source Code for App.js 

Lets see the complete source code that helps to set full screen background image in react native application.

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

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

export default class HomeActivity extends Component {
  render() {
    return (
    <ImageBackground  source={require('./background-image/image1.jpg')}  style={styles.container} >
      <View style={styles.container}>
         <Text style={styles.headerText}>
           Setting background image in react native application
         </Text>
      </View>
    </ImageBackground>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: 'center',
    width: null,
   height: null,
  },
  headerText: {
    fontSize: 24,
    textAlign: "center",
    margin: 10,
    color: "white",
    fontWeight: "bold"
  }
});

Screenshot :

This is all about setting background image in react native application. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.

Download Link : 
https://github.com/skptricks/React-Native/tree/master/Fullscreen%20Background%20Image%20in%20React%20Native