Setting Background Image in react-native

Setting a background image in React Native allows you to enhance the visual appearance of your app by placing an image behind other components. This is commonly done using the ImageBackground component provided by React Native.

The ImageBackground component is used to set an image as the background of a screen or view.
It allows other components like Text, View, and Button to be placed on top of the image.
Background images help improve UI design and create more attractive layouts.

Props in ImageBackground

The ImageBackground component provides several props to control the image, layout, and styling of the background.

source – Specifies the image source (local file or URL).
style – Applies styles to the ImageBackground container.
imageStyle – Applies styles specifically to the background image.
resizeMode – Controls how the image is resized (cover, contain, stretch, repeat, center).
blurRadius – Adds a blur effect to the background image.
defaultSource – Displays a placeholder image while loading (mainly for local images).
onLoad – Function called when the image finishes loading.
onError – Function called if the image fails to load.
onLoadStart – Function called when the image starts loading.
onLoadEnd – Function called when the image loading finishes.
imageRef – Provides a reference to the underlying image component.
children – Components placed inside ImageBackground that appear on top of the image.

Step-by-Step Implementation

Step 1: Create a React Native Project

Now, create a project with the following command.

npx create-expo-app app-name --template

Note: Replace the app-name with your app name for example : react-native-demo-app

Next, you might be asked to choose a template. Select one based on your preference as shown in the image below. I am selecting the blank template because it will generate a minimal app, as clean as an empty canvas in JavaScript.

It completes the project creation and displays a message: "Your Project is ready!" as shown in the image below.

Now go into your project folder, i.e., react-native-demo

cd app-name

Project Structure

Step 2: Run Application

Start the server by using the following command.

npx expo start

Then, the application will display a QR code.

1. For the Android users,

For the Android Emulator, press "a" as mentioned in the image below.
For Physical Device, Download the "Expo Go" app from the Play Store. Open the app, and you will see a button labeled "Scan QR Code." Click that button and scan the QR code; it will automatically build the Android app on your device.

2. For iOS users, simply scan the QR code using the Camera app.

3. If you're using a web browser, it will provide a local host link that you can use as mentioned in the image below.

Step 3: Start Coding

- Import libraries: Import required libraries at the top of the file.

JavaScript

import React from 'react'; // Import React library
import {
  View,                 // Import View component for layout
  TextInput,            // Import TextInput component for user input
  ImageBackground,      // Import ImageBackground component for background images
  StyleSheet,           // Import StyleSheet for styling
  Dimensions            // Import Dimensions to get screen dimensions
} from 'react-native';  // Import necessary components from react-native

- StyleSheet: Create a StyleSheet to style components like img and input.

JavaScript

// Get the height of the device screen
const screenHeight = Dimensions.get('window').height;

// Get the width of the device screen
const screenWidth = Dimensions.get('window').width;

// Define styles for the components
const styles = StyleSheet.create({
  img: {
      
    // Set the height to the screen height
    height: screenHeight,
    
    // Set the width to the screen width
    width: screenWidth, 
    
    // Center content vertically
    justifyContent: 'center',
    
    // Center content horizontally
    alignItems: 'center', 
  },
  input: {
      
    // Set the height of the input field
    height: 40, 
    
    // Add margin around the input field
    margin: 12, 
    
    // Set the border width
    borderWidth: 2,
    
    // Add padding inside the input field
    padding: 10, 
  },
});

- ImageBackground: This component is used to set a background image.

JavaScript

<ImageBackground
    source={{
        // URL of the background image
        uri:'https://media.geeksforgeeks.org/wp-content/uploads/20220217151648/download3.png', 
    }}
    
    // Stretch the image to fit the container
    resizeMode="stretch" 
    
    // Apply styles to the ImageBackground
    style={styles.img} 
>

It can be one of the following:

resizeMode: "center" | "contain" | "cover" | "repeat" | "stretch"

- TextInput: This component is used to take input from the user.

JavaScript

<TextInput
    placeholder="Geeks for Geeks " // Placeholder text for the input field
    style={styles.input} // Apply styles to the TextInput
/>

- BackgroundImg: This is a wrapper of ImageBackground and TextInput components with the View component.

JavaScript

// Define a functional component for displaying
// a background image with a text input
const BackgroundImg = () => {
  return (
    <View> {/* Wrapper View component */}
      {/* ImageBackground component to set a background image */}
      <ImageBackground
        source={{
        
          // URL of the background image
          uri: 'https://media.geeksforgeeks.org/wp-content/uploads/20220217151648/download3.png', 
        }}
        
        // Stretch the image to fit the container
        resizeMode="stretch"
        
        // Apply styles to the ImageBackground
        style={styles.img} 
      >
        <TextInput
          // Placeholder text for the input field
          placeholder="Geeks for Geeks "
          
          // Apply styles to the TextInput
          style={styles.input} 
        />
      </ImageBackground>
    </View>
  );
};

- App Component: Call the above Component in the App component, and also make sure to export the App.

JavaScript

// Define the main App component
export const App = () => {
  return (
    <View>
      <BackgroundImg />
    </View>
  );
};

Complete Source Code

App.js:

App.js

// Import React library
import React from 'react'; 

import {
  View,                 // Import View component for layout
  TextInput,            // Import TextInput component for user input
  ImageBackground,      // Import ImageBackground component for background images
  StyleSheet,           // Import StyleSheet for styling
  Dimensions            // Import Dimensions to get screen dimensions
} from 'react-native';  // Import necessary components from react-native

// Get the height of the device screen
const screenHeight = Dimensions.get('window').height;

// Get the width of the device screen
const screenWidth = Dimensions.get('window').width;

// Define a functional component for displaying
// a background image with a text input
const BackgroundImg = () => {
  return (
    <View> {/* Wrapper View component */}
      {/* ImageBackground component to set a background image */}
      <ImageBackground
        source={{
        
          // URL of the background image
          uri: 'https://media.geeksforgeeks.org/wp-content/uploads/20220217151648/download3.png', 
        }}
        
        // Stretch the image to fit the container
        resizeMode="stretch"
        
        // Apply styles to the ImageBackground
        style={styles.img} 
      >
        <TextInput
        
          // Placeholder text for the input field
          placeholder="Geeks for Geeks "
          
          // Apply styles to the TextInput
          style={styles.input} 
        />
      </ImageBackground>
    </View>
  );
};

// Define the main App component
export const App = () => {
  return (
    <View>
      <BackgroundImg />
    </View>
  );
};


// Define styles for the components
const styles = StyleSheet.create({
  img: {
    
    // Set the height to the screen height
    height: screenHeight,
    
    // Set the width to the screen width
    width: screenWidth, 
    
    // Center content vertically
    justifyContent: 'center', 
    
    // Center content horizontally
    alignItems: 'center', 
  },
  input: {
      
    // Set the height of the input field
    height: 40, 
    
    // Add margin around the input field
    margin: 12, 
    
    // Set the border width
    borderWidth: 2,
    
    // Add padding inside the input field
    padding: 10, 
  },
});

Output:

Setting Background Image in react-native

Props in ImageBackground

Step-by-Step Implementation

Step 1: Create a React Native Project

Project Structure

Step 2: Run Application

Step 3: Start Coding

Complete Source Code

Explore