Open In App

How to set Background Image in react-native ?

Last Updated : 24 May, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

In this article, we will see how to set background Image in react-native. In our project, we will simply set a background image and show a text input on top of it. Setting background images requires using the ImageBackground component in React Native. You can style it further to adapt to different screen sizes and resolutions. Let's watch a demo video of what we are going to develop.

Demo Video


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.

  • 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.
  • For iOS users, simply scan the QR code using the Camera app.
  • 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} 
>


Props in ImageBackground:

  • source: Source of Image to display. It can be from local storage or url.
  • resizeMode: Resizing of the image based on different mobile configurations.

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:



Next Article
How to create custom FAB(Floating Action Button) in React Native?
author
samiksharanjan
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox