Beautifully designed mobile applications always start with a nice background. Having a good background in your application, it does not matter if it is a login screen, a welcome screen, an onboarding screen, or a dashboard.
For adding a background image in React Native applications, you should use the ImageBackground component. ImageBackground is meant to be a container that allows putting all your text, buttons, and other UI elements over the image.
Here, you will learn how to add a background image to a React Native application by implementing both local and remote images.
Steps to Display an Image Background in a React Native App:
Step 1: Import Components
At the beginning, it is necessary to import ImageBackground from react native library together with other layout components.
import React from 'react';
import { StyleSheet, Text, View, ImageBackground } from 'react-native';Step 2: Implementing the Component
The ImageBackground component accepts the source prop, and in this property, you can pass a local image file or a remote URL. Additionally, you have to provide some layout styles, such as flex: 1, which means that your image should cover the whole screen.
Option A: Using a Local Image
Use the require() syntax to include static image files in your project folders.
export default function App() {
return (
<View style={styles.container}>
<ImageBackground
source={require('./assets/background.jpg')}
resizeMode="cover" style={styles.backgroundImage} >
<Text style={styles.text}>Welcome to the App</Text>
</ImageBackground>
</View>
); }Option B: Using a Remote Network Image
Supply an object with a URI string. Make sure that when using network images, you have proper styles for visible width and height.
export default function App() {
return (
<View style={styles.container}>
<ImageBackground
source={{ uri: 'https://example.com' }}
resizeMode="cover"
style={styles.backgroundImage} >
<Text style={styles.text}>Welcome to the App</Text>
</ImageBackground>
</View>
); }Step 3: Define Styles
Styles must be defined accurately so that the Imagebackground should not be longer than its child component and in order to use ImageBackground as a display on the entire screen, StyleSheet.create should be used.
const styles = StyleSheet.create({
container: {
flex: 1,
},
backgroundImage: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
text: {
color: 'white',
fontSize: 24,
fontWeight: 'bold',
},
});Conclusion
The ImageBackground component is a straightforward way of creating interesting backgrounds for React Native applications. If you use either local images that load faster or network images with dynamic content, the ImageBackground component allows you to place all your elements on top of the image.
FAQ
1. What is ImageBackground used for in React Native?
It acts like a regular image component of react native, but with an option to place buttons and other text, etc., onto it.
2. Can we use local and remote images along with the ImageBackground component?
Yes. We can either use the require() function for local images or also provide a URI for remote images.
3. Does the ImageBackground component influence the performance of an application?
Using optimized images does not take much system resources, but very big or not compressed images can significantly increase the memory usage as well as the loading time of an application.
