In this post, we are going to learn about the simpler way to add a full background image to your react native application.
This code will be build using the expo app. 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.
Step 1: Import ImageBackground Component
import { ImageBackground } from 'react-native'
import {
View,
Text,
StyleSheet,
TouchableOpacity,
Image,
Modal,
Alert,
SafeAreaView
} from 'react-native';
Add some template code to try this out
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.nintyzeros.com/designers/subtlepatterns/patterns/Amrican-pie.png',
}}>
Using ImageBackground in React Native
const App = () => {
return (
<SafeAreaView style={styles.container}>
<ImageBackground
style={{flex: 1}}
source={{
uri:
'https://www.nintyzeros.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://nintyzeros.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 style more adaptable add some stylesheets.
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,
}
});
Full code :
Add the Below code in App.js and run the code in emulator or an android device.
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.ninty.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,
}
});