Adding Full-Screen Background Image in React-Native

In this tutorial we are going to add full screen background cover to the mobile application with help of React Native. Before starting to implement this, you only needs very basic knowledge of React Native.

react-native-background-image

Final Output


Let’s start creating our component that holds the background image. I have created a ./src directory to the root of the project that keep separating my files. You are independent to keep your files, but its a good practice to keep the files separated.

For full screen background image, We are going to use React Native’s Image own component that helps us to include network images, static resources, temporary local images and images from the local disk.

Take a look on the code:

return(
    ;
);

We are using the in-built component Image, The source property of the component holds the image sources that is located on your application. You can set the network image as well. As the name suggests style property hold the applied styles on the Image component. Let’s create a file BackgroundImage.js on the following path: ./src/assets/BackgroundImage.js. This file hold our component for background image.

Full Code of our component for background image

File path: ./src/BackgroundImage.js

import React, {Component} from 'react';
import { Image } from 'react-native';


class BackgroundImage extends Component {
    render() {
        return(
            
        );
    }
}


module.exports = BackgroundImage;

Final Step:

Now let’s implement this BackgroundImage component to the index.ios.js file. Take a look on the complete codes of index.ios.js:

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';
import BackgroundImage from './src/BackgroundImage';

export default class rnBackgroundImage extends Component {
  render() {
    return (
        
            
                
                    Welcome to React Native!
                
                
                    To get started, edit index.ios.js
                
                
                    Press Cmd+R to reload,{'\n'}
                    Cmd+D or shake for dev menu
                
            
        
    );
  }
}

const styles = StyleSheet.create({
    backgroundImage: {
        flex: 1,
        resizeMode: 'cover',
        justifyContent: 'center',
        alignItems: 'center',
    },
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
        backgroundColor: 'rgba(0,0,0,0)'
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
        backgroundColor: 'rgba(0,0,0,0)'
    },
});

AppRegistry.registerComponent('rnBackgroundImage', () => rnBackgroundImage);

On line number 8 we have imported our component and implement on line number 14 to 25. Our BackgroundImage component holds child component that take cares through {this.props.children} on our component.

Posted by Jogesh Sharma

Jogesh Sharma is a web developer and blogger who loves all the things design and the technology, He love all the things having to do with PHP, WordPress, Joomla, Magento, Durpal, Codeigniter, jQuery, HTML5 etc. He is the author of this blog.