Updated April 5, 2023
Introduction to React Native Background Image
A perfect background picture makes anything look nice to our eyes. Even in the case of applications or websites, pictures are required to be kept in the background as it makes the application or website look nicer to the users, and at the same time, it also conveys the context of the application and what it is going to show. React Native also provides us with an option of setting up background images in our applications created through react-native. Any picture can be used as a background image in react native.
Syntax:
<ImageBackground source={{
uri:
'https://images.pexels.com/photos/1978126/pexels-photo-1978126.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
}}
style={{flex: 1}}>
<Image source={{
uri:
'http://pngimg.com/uploads/new_year/new_year_PNG103.png',
}}
style={{
height: 130,
marginTop: 10,
width: 150,
}}>
<View>
<Text>
<Button>
</Button>
</Text>
</View>
</Image>
</ImageBackground>We can do the styling of Background Image using Stylesheet, and different React Native elements, including button, image, text, etc., can be imposed on this Background Image.
Examples of React Native Background Image
Given below are the examples mentioned:
Example #1
We have imported the PNG image in the background using its source URL. As the image doesn’t have its own background colour, so we set the background colour of the image using decoration. Photo and we have inserted the text above the image, displayed on the top.
Files components used for the proper execution of the code are:
App.js
import React from "react";
import { ImageBackground
, StyleSheet
, Text
, View } from "react-native";
const decoration = StyleSheet.create({
text: {
textAlign: "center",
color: "#ded1d1",
backgroundColor: "#91001fa9",
fontSize: 50,
},
photo: {
justifyContent: "center",
flex: 1,
backgroundColor: "#91001fa9",
},
docker: {
flexDirection: "column",
flex: 1,
}
});
const EDUCBA = () => (
<View style={decoration.docker}>
<Text style={decoration.text}>Alarm</Text>
<ImageBackground style={decoration.photo}
source={photo} >
</ImageBackground>
</View>
);
const photo = { uri: "http://pngimg.com/uploads/alarm_clock/alarm_clock_PNG93.png" };
export default EDUCBA;Output:
Example #2
We have imported an image in the background using its source URL. We have displayed different vector icons, PNG images, texts upon the background image in the application below.
Files components used for the proper execution of the code are:
App.js
import React from 'react';
import { Icon } from 'react-native-elements';
import {
SafeAreaView
, View
, Text
, ImageBackground
, StyleSheet
, Image
} from 'react-native';
const makeup = StyleSheet.create({
styloo: {
justifyContent: 'center',
alignItems: 'center',
},
titling: {
textAlign: 'center',
fontSize: 28,
padding: 10,
fontWeight: 'bold',
color: '#f2f531',
},
});
const EDUCBA = () => {
return (
<SafeAreaView style={decoration.docker}>
<ImageBackground
source={{
uri:
'https://images.pexels.com/photos/5686476/pexels-photo-5686476.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260',
}}
style={{flex: 1}}
>
<View style={makeup.styloo}>
<Text style={decoration.styletext}>
www.educba.com
</Text>
<Icon
name='star'
type='font-awesome'
color='#fafa14'
/>
<Image
source={{
uri:
'http://pngimg.com/uploads/santa_claus/santa_claus_PNG38508.png',
}}
style={{
height: 60,
marginTop: 100,
width: 60,
}}
/>
<Image
source={{
uri:
'https://cdn.educba.com/academy/wp-content/uploads/2020/05/cropped-website_logo_transparent_background_white.png',
}}
style={{
width: 200,
height: 60,
marginTop: 60
}}
/>
</View>
<View style={decoration.docker}>
<Text style={decoration.titleee}>
EDUCBA Wishes you
</Text>
<Text style={makeup.titling}>
<Icon
name='paw'
type='font-awesome'
color='#d42f84'
/>
Merry Chritmas
<Icon
name='paw'
type='font-awesome'
color='#d42f84'
/>
</Text>
</View>
</ImageBackground>
</SafeAreaView>
);
};
const decoration = StyleSheet.create({
titleee: {
fontSize: 28,
fontWeight: 'bold',
textAlign: 'center',
padding: 10,
color: '#a8f740',
},
docker: {
flex: 1,
padding: 10,
},
styletext:{
textAlign: 'center',
padding: 20,
color: '#c2fa6e',
}
});
export default EDUCBA;Output:
Example #3
Different PNG images are imposed on the background image using their respective URLs.
Files components used for the proper execution of the code are:
App.js
import React from 'react';
import { Icon } from 'react-native-elements';
import {
SafeAreaView
, View
, Text
, ImageBackground
, StyleSheet
, Image
} from 'react-native';
const makeup = StyleSheet.create({
styloo: {
justifyContent: 'center',
alignItems: 'center',
},
});
const EDUCBA = () => {
return (
<SafeAreaView style={decoration.docker}>
<ImageBackground
source={{
uri:
'https://images.pexels.com/photos/931177/pexels-photo-931177.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260',
}}
style={{flex: 1}}
>
<View style={makeup.styloo}>
<Text style={decoration.styletext}>
www.educba.com
</Text>
<Image
source={{
uri:
'http://pngimg.com/uploads/rose/rose_PNG67019.png',
}}
style={{
height: 60,
marginTop: 10,
width: 70,
}}
/>
<Image
source={{
uri:
'http://pngimg.com/uploads/rose/rose_PNG67016.png',
}}
style={{
width: 60,
height: 70,
marginTop: 10,
}}
/>
<Image
source={{
uri:
'http://pngimg.com/uploads/rose/rose_PNG67012.png',
}}
style={{
width: 70,
height: 70,
marginTop: 10,
}}
/>
<Image
source={{
uri:
'http://pngimg.com/uploads/rose/rose_PNG66980.png',
}}
style={{
width: 70,
height: 60,
marginTop: 10,
}}
/>
<Image
source={{
uri:
'http://pngimg.com/uploads/rose/rose_PNG66978.png',
}}
style={{
width: 70,
height: 60,
marginTop: 10,
}}
/>
<Image
source={{
uri:
'http://pngimg.com/uploads/rose/rose_PNG66830.png',
}}
style={{
width: 70,
height: 60,
marginTop: 10,
}}
/>
</View>
</ImageBackground>
</SafeAreaView>
);
};
const decoration = StyleSheet.create({
docker: {
flex: 1,
padding: 10,
},
styletext:{
textAlign: 'center',
padding: 20,
color: '#d2ff70',
backgroundColor: '#969c89a0',
},
});
export default EDUCBA;Output:
Example #4
Below, an image in the background is imported using its respective URL. After setting it in the background, we have created a button named “WISHES”, and below it, a PNG image is imported using its URL, and at the bottom, the text is displayed. The styling of these all elements is done using Stylesheet. When the “WISHES” button is clicked, a pop-up window is displayed with the “EDUCBA Wishes You HAPPY NEW YEAR” message.
Files components used for the proper execution of the code are:
App.js
import React from 'react';
import {
SafeAreaView
, View
, Text
, ImageBackground
, StyleSheet
, Image
, Button
, Alert
} from 'react-native';
const decoration = StyleSheet.create({
docker: {
flex: 1,
padding: 10,
},
styletext:{
textAlign: 'center',
marginTop: 250,
padding: 20,
color: '#d2ff70',
backgroundColor: '#8f2842a0',
},
});
const makeup = StyleSheet.create({
styloo: {
justifyContent: 'center',
alignItems: 'center',
},
});
const EDUCBA = () => {
return (
<SafeAreaView style={decoration.docker}>
<ImageBackground
source={{
uri:
'https://images.pexels.com/photos/1978126/pexels-photo-1978126.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
}}
style={{flex: 1}}
>
<View style={makeup.styloo}>
<Button
color="#841584"
title="WISHES"
onPress={() => Alert.alert('EDUCBA Wishes You HAPPY NEW YEAR')}
>
</Button>
<Image
source={{
uri:
'http://pngimg.com/uploads/new_year/new_year_PNG103.png',
}}
style={{
height: 130,
marginTop: 10,
width: 150,
}}
/>
</View>
<Text style={decoration.styletext}>
www.educba.com
</Text>
</ImageBackground>
</SafeAreaView>
);
};
export default EDUCBA;Output:
On code execution:
On clicking the “WISHES” button:
Conclusion
On the basis of the above article, we saw the concept of the background image. The background image is very much necessary for making our websites look beautiful to the customers’ eyes. This article will help the readers to understand and apply it in their own app creations.
Recommended Articles
This is a guide to React Native Background Image. Here we discuss the introduction to React Native Background Image along with examples. You may also have a look at the following articles to learn more –
