React Native Create Full Screen Image Background Tutorial

React native full-screen background image tutorial. This quick guide will show you how to create full-screen image background in react native app using the expo cli.

Expo is a stalwart free and open-source tool that helps developers build around React Native, which allows building native iOS and Android applications faster with just JavaScript and React.

This tutorial will describe how to insert a full-screen image in react native application’s background using the View, Text, Image, StyleSheet, SafeAreaView, and ImageBackground sub modules.

How to Use Image to Make Fullscreen Background in React Native

  • Step 1: Download React Native CLI
  • Step 2: Install React Native App
  • Step 3: Create Full Screen Image Background Component
  • Step 4: Register Component in App Js
  • Step 5: Run App on Device

Download React Native CLI

The Node 12 LTS or higher has to pre-added in your development machine.

Head over to command prompt, type the given command and hit enter to download the Expo CLI.

# npm
npm install -g expo-cli

# yarn
yarn global add expo-cli

Install React Native App

If you haven’t created the react native app yet, go ahead and use the expo cli command to download the latest version of the application.

expo init RnBlogProject

Next, enter into the project directory.

cd RnBlogProject

Create Full Screen Image Background Component

First, create the fullscreenbg_component.js file; this will be the location for the fullscreen background component.

Next, import View, Text, Image, StyleSheet, SafeAreaView, and ImageBackground submodules from the main ‘react-native package.

Create class; define the functions using the react-native modules to create the image background within the class. Make sure to keep the background image in the assets folder of your project.

Now, update code the in fullscreenbg_component.js file.

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


const FullscreenBgComponenet = () => {
  return (
    <SafeAreaView style={styles.wrapper}>
      <ImageBackground
        style={{flex: 1}}
        source={require('./assets/bg-pattern.jpg')}>
        <View style={styles.container}>
          <View style={styles.align}>
            <Image
              source={require('./assets/user.png')}
              style={{
                width: 200,
                height: 200,
                marginTop: 200
              }}
            />
            <Text style={styles.title}>
              React Native Fullscreen Image Background Example
            </Text>
          </View>
        </View>
      </ImageBackground>
    </SafeAreaView>
  );
};

export default FullscreenBgComponenet;

const styles = StyleSheet.create({
  wrapper: {
    flex: 1,
  },
  title: {
    color: 'white',
    padding: 20,
  },  
  align: {
    justifyContent: 'center',
    alignItems: 'center',
  }
});

Register Component in App Js

In this step, eventually open the app js file, you must import FullscreenBgComponenet and add the FullscreenBgComponenet in the app js file.

Open the App.js file; and add the following code.


import React from 'react';

import FullscreenBgComponenet from './fullscreenbg_component.js'


export default function App() {
  return (
    <FullscreenBgComponenet/>
  );
}

Run App on Device

Lastly, we need test the app on the device; first, install the Expo Client on your smartphone.

You can get the expo client either from Google Play Store or App Store.

Then, scan the visible QR code but before that make sure to run either of the suggested command.

# npm
npm start

# yarn
yarn start

Wait for some time while your project is being compiled. Ensure that your development machine and smartphone are on the same network; you will see your app on your smartphone.

React Native Create Full Screen Image Background Tutorial

Summary

This step-by-step tutorial taught us how to add an image to create a fullscreen background in react native application using the built-in react-native modules.