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.

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

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

It can be one of the following:

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

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

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

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

Complete Source Code

App.js:

Output: