How to Add Full Screen Background Image in React Native
This tutorial offers an exorbitantly easy method to add a full background image to React Native application using the ImageBackground component.
For React Native full background image example, we are using the profoundly popular expo.io ecosystem; it is a free open source toolchain to develop React Native programs for iOS, Android, and Web.
Sometimes we need to display a fullscreen background image in React native app; it is usually required for developing splash screens.
Import ImageBackground Component
import { ImageBackground } from 'react-native'
We need to import a few more components to add style, image, text, and view.
So, also import the couple of more components:
In another step, make the react-native template ready and pour some text within.
const App = () => {
return (
<SafeAreaView style={styles.container}>
<View style={styles.container}>
<Text style={styles.title}>
React Native Background Image Example
</Text>
</View>
</SafeAreaView>
);
};
export default App;
Next up propel the ImageBackground component within the defined above code, it implied the static image resource has been evoked.
<ImageBackground
source={require('image-url-goes-here')}
style={{width: 200, height: 200}}
/>
But for the example, we are using the third-party url and observing how to pass the network requests for images within the ImageBackground component.
<ImageBackground
style={{flex: 1}}
source={{
uri:
'https://www.toptal.com/designers/subtlepatterns/patterns/moroccan-flower-dark.png',
}}>
We can also pass the URI Data images within the ImageBackground component, and it will look something like this:
<ImageBackground
style={{width: 100, height: 100}}
source={{
uri:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=='
}}
/>
Using ImageBackground in React Native
const App = () => {
return (
<SafeAreaView style={styles.container}>
<ImageBackground
style={{flex: 1}}
source={{
uri:
'https://www.toptal.com/designers/subtlepatterns/patterns/moroccan-flower-dark.png',
}}>
<View style={styles.container}>
<Text style={styles.title}>
React Native Background Image Example
</Text>
<View style={styles.contentCenter}>
<Image
source={{
uri:
'https://media4.giphy.com/media/9oHZQ2gEez8ti/giphy.gif',
}}
style={{
width: 60,
height: 60,
marginTop: 100
}}
/>
<Text style={styles.textStyle}>
The Big Bang Theory
</Text>
</View>
</View>
</ImageBackground>
</SafeAreaView>
);
};
export default App;
To make the UI exorbitantly engaging, define some style.
const styles = StyleSheet.create({
container: {
flex: 1,
},
title: {
fontSize: 25,
padding: 15,
color: 'white',
fontWeight: 'bold',
textAlign: 'center',
},
contentCenter: {
justifyContent: 'center',
alignItems: 'center',
},
textStyle: {
color: 'white',
padding: 10,
}
});
Final Code for React Native Background Image Example:
This code directly goes into the App.js file:
import {
View,
Text,
Image,
StyleSheet,
SafeAreaView,
ImageBackground,
} from 'react-native';
import React from 'react';
import {
View,
Text,
Image,
StyleSheet,
SafeAreaView,
ImageBackground,
} from 'react-native';
const App = () => {
return (
<SafeAreaView style={styles.container}>
<ImageBackground
style={{flex: 1}}
source={{
uri:
'https://www.toptal.com/designers/subtlepatterns/patterns/moroccan-flower-dark.png',
}}>
<View style={styles.container}>
<Text style={styles.title}>
React Native Background Image Example
</Text>
<View style={styles.contentCenter}>
<Image
source={{
uri:
'https://media4.giphy.com/media/9oHZQ2gEez8ti/giphy.gif',
}}
style={{
width: 60,
height: 60,
marginTop: 100
}}
/>
<Text style={styles.textStyle}>
The Big Bang Theory
</Text>
</View>
</View>
</ImageBackground>
</SafeAreaView>
);
};
export default App;
const styles = StyleSheet.create({
container: {
flex: 1,
},
title: {
fontSize: 25,
padding: 15,
color: 'white',
fontWeight: 'bold',
textAlign: 'center',
},
contentCenter: {
justifyContent: 'center',
alignItems: 'center',
},
textStyle: {
color: 'white',
padding: 10,
}
});
The final output will look like this:
This was it; you can easily add a background image to React Native by following this method, and it can save a lot of your precious time.