Adding Full-Screen Background Image in React-Native

As a Web Designer / Developer, it’s very easy to implement Background Image through CSS with its background-image property and then define its value with the containing path. But in React Native it is slightly different. Let’s start building a simple landing page for a Yoga App.

Table of content

Simple Landing Page for Yoga App

Full-Screen Background Image

React Native has its built-in Image component. We will use this Image component to apply Full-Screen Background Image. We are going to use Stylesheet, Alert, TouchableOpacity, View and Image component in our app.

import React from 'react';
import { StyleSheet, Alert, View, Image, TouchableOpacity } from 'react-native';

After adding the dependency component, let’s going forward to creating the class and the render method.

export default class App extends React.Component {
    render() {
        
        return (
            <View style={styles.container}>
                <View style={styles.backgroundContainer}>
                    <Image style={styles.bakcgroundImage} source={require('./assets/yoga.png')} />
                </View>
                <View>
                    <Image style={styles.loginButton} source={require('./assets/button.png')} />
                </View>
            </View>
        );
    }
}

Take a close look to Image component’s source property, this property is required to use the Image component. You can apply a remote image URL or your images assets path to the source property.

We have used One more Image component to display the login button. But we can’t apply any event on clicking on Image component. We have to use TouchableOpacity component to apply an event on the button image.

<View>
    <TouchableOpacity onPress={this._onPressLogin}>
        <Image style={styles.loginButton} source={require('./assets/button.png')} />
    </TouchableOpacity>
</View>

Now make a function that handle the press event on TouchableOpacity component.

_onPressLogin() {
    Alert.alert('Button Pressed!');
}

It’s time to apply some stylesheet to make the Full-Screen background image with Stylesheet component.

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'flex-end',
    },
    backgroundContainer: {
        flex: 1,
        position: 'absolute',
        top: 0,
        left: 0,
        width: '100%',
        height: '100%',
    }, 
    bakcgroundImage: {
        flex: 1, 
        width: null, 
        height: null
    },
    loginButton: {
        marginBottom: 40
    }
});

If you run your code then you get the exact view that we have shown you for our yoga app. This is our full working codes. Or you can grab the working repository from the GitHub.

import React from 'react';
import { StyleSheet, Alert, View, Image, TouchableOpacity } from 'react-native';

export default class App extends React.Component {

    _onPressLogin() {
        Alert.alert('Button Pressed!');
    }

    render() {
        
        return (
            <View style={styles.container}>
                <View style={styles.backgroundContainer}>
                    <Image style={styles.bakcgroundImage} source={require('./assets/yoga.png')} />
                </View>
                <View>
                    <TouchableOpacity onPress={this._onPressLogin}>
                        <Image style={styles.loginButton} source={require('./assets/button.png')} />
                    </TouchableOpacity>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'flex-end',
    },
    backgroundContainer: {
        flex: 1,
        position: 'absolute',
        top: 0,
        left: 0,
        width: '100%',
        height: '100%',
    }, 
    bakcgroundImage: {
        flex: 1, 
        width: null, 
        height: null
    },
    loginButton: {
        marginBottom: 40
    }
});

Apply Blur on Full-Screen background Image

If you like to apply the blur effect on the background Image, then there is a property called blurRadius. This property accepts integer value that means the higher value will make the more blurry image. Let’s make our Full-Screen background Image a bit blurry.

<View style={styles.backgroundContainer}>
    <Image style={styles.bakcgroundImage} 
        blurRadius={10}
        source={require('./assets/yoga.png')} />
</View>

All the above codes and the images are available on GitHub.

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.