How to use ImageBackground in React Native?

Apr 21, 2022 . Admin

Hi Guys,

This tutorial is focused on how to use background image in react native. This article goes into detail on react native ImageBackground example. if you want to see an example of how to use a full-screen background image in react native then you are in the right place. you can see how to set ImageBackground in react native. you will do the following things for how to implement ImageBackground in react native.

This example shows fetching and displaying an image from local storage.

First of all import a StyleSheet, View, ImageBackegroun, and Text from react-native. After then create an App() function. after then create the View and ImageBackground component. shows fetching and displaying image require a source prop in the ImageBackground component. The source prop shows fetching and displaying an image from local storage.

So, let's following example:

Step 1 - Create project

In the first step run the following command to create a project.

expo init ImageBackground

Step 2 - App.js

In this step, You will open the App.js file and put the code.

import React from 'react';
import { StyleSheet, View, ImageBackground, Text } from 'react-native';

export default function App() {
    return (
        <View style={styles.container}>
            <ImageBackground 
                source={require('./assets/new-bg.png')} 
                style={styles.bgimage}
                resizeMode="cover"
            >
                <Text style={styles.title}>Mywebtuts.com</Text>
            </ImageBackground>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex:1,
        marginTop:40,
    },
    bgimage: {
        flex:1,
        justifyContent: "center",
    },
    title: {
        color: "#FFFF",
        fontSize: 42,
        lineHeight: 84,
        fontWeight: "bold",
        textAlign: "center",
        backgroundColor: "red",
        marginBottom:40,
    },
});

Step 3 - Run project

In the last step run your project using bellow command.