8

Adding Full-Screen Background Image in React-Native

 3 years ago
source link: https://webomnizz.com/adding-full-screen-background-image-in-react-native/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

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.


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK