React Native recently launched a new named as ImageBackground with new version specially to give support for Image Background, because before this component we need define View or Text background as Transparent in order to place above image. Using this component we can easily create full background images within a few seconds. This component is official and you can find its documentation here. So in this tutorial we would going to implement ImageBackground Component in iOS Android React Native App Example Tutorial.
Note : Before the ImageBackground component if we use Image as Background then it would show us a block of background on the Image and this errors specially comes in iOS devices, To remove this error we have to use backgroundColor: ‘transparent’ in the style of Text or View component, but now there is no need to use this kind of style attribute.
Contents in this project ImageBackground Component in iOS Android React Native App Example Tutorial:
1. Import Platform, StyleSheet, View, Text and ImageBackground component in your project.
|
1
2
3
|
import React, { Component } from ‘react’;
import { Platform, StyleSheet, View, Text, ImageBackground } from ‘react-native’;
|
2. Create a Root View in render’s return block, This view is our main view.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
render() {
return (
<View style={styles.MainContainer}>
</View>
);
}
|
3. Creating ImageBackground component with a Text component inside it, you can palace any View or any Component according to your requirement. This type of functionality is called as Background image via Nesting in react native.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
render() {
return (
<View style={styles.MainContainer}>
<ImageBackground
source = {{ uri: ‘/wp-content/uploads/2018/02/motorcycle.jpg’ }}
style = {styles.imageStyle} >
<Text style={{color: ‘#fff’, fontSize: 20, textAlign: ‘center’}}>Hello Guys Welcome to ReactNativeCode</Text>
</ImageBackground>
</View>
);
}
|
4. Creating Style.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
const styles = StyleSheet.create({
MainContainer :{
flex:1,
paddingTop: (Platform.OS) === ‘ios’ ? 20 : 0,
alignItems: ‘center’,
justifyContent: ‘center’,
},
imageStyle:{
width: 200,
height: 300,
justifyContent: ‘flex-end’,
alignItems: ‘center’
}
});
|
5. Complete source code for App.js File :
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
import React, { Component } from ‘react’;
import { Platform, StyleSheet, View, Text, ImageBackground } from ‘react-native’;
export default class App extends Component{
render() {
return (
<View style={styles.MainContainer}>
<ImageBackground
source = {{ uri: ‘/wp-content/uploads/2018/02/motorcycle.jpg’ }}
style = {styles.imageStyle} >
<Text style={{color: ‘#fff’, fontSize: 20, textAlign: ‘center’}}>Hello Guys Welcome to ReactNativeCode</Text>
</ImageBackground>
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer :{
flex:1,
paddingTop: (Platform.OS) === ‘ios’ ? 20 : 0,
alignItems: ‘center’,
justifyContent: ‘center’,
},
imageStyle:{
width: 200,
height: 300,
justifyContent: ‘flex-end’,
alignItems: ‘center’
}
});
|
Screenshot in Android device:
Screenshot in iOS device:
Also Read :
React Native Generate Random Number Between 1 to 100 in Android iOS
React Native Solve Unrecognized Font Family Material Design Icons Error in iOS MAC
Dynamically Add Values in String Array List in React Native on button click
React Native Count TextInput Inside Text Length Automatically
React Native Scroll Down To Bottom and Scroll To Top in ListView Android iOS Example
