ScrollView is used to show + add multiple components inside a consistent View. In our previous tutorial we have learn about Creating a Simple Horizontal ScrollView in react native with multiple components, You can read that tutorial here. Now today we are going to learn about something new in Horizontal ScrollView, things you can do with Horizontal ScrollView. So in this tutorial we would going to create a react native app with Full Page Width Swipeable Horizontal ScrollView in both Android and iOS application example tutorial using pagingEnabled = { true } prop. The main feature of this tutorial is ” Each View has filled on complete mobile screen & The second view did not show until user swipe horizontally on screen .”
Contents in this project Full Page Width Swipeable Horizontal ScrollView in Android iOS React Native App:
1. Import StyleSheet, View, ScrollView, Text and Dimensions component in your project.
|
1
2
3
|
import React, { Component } from ‘react’;
import { StyleSheet, View, ScrollView, Text, Dimensions } from ‘react-native’;
|
2. Create a global variable above the class named as Device_Width. This variable is used store the current device width, So the current view expand all over the screen. We would retrieve the device width using Dimensions.get(‘window’).width inbuilt method.
|
1
|
var Device_Width = Dimensions.get(‘window’).width ;
|
3. Create a Root View in render’s return block. This would be our main view.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
render() {
return (
<View style={styles.MainContainer}>
</View>
);
}
|
4. Create ScrollView component inside the Root View.
horizontal = { true } : This prop would make the ScrollView Horizontal.
showsHorizontalScrollIndicator = {false} : This prop would hide the ScrollView’s own horizontal indicator bar.
pagingEnabled = { true } : This prop would only allows single view at a time on device screen and stops other views interrupting the opened view.
|
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}>
<ScrollView
horizontal = { true }
showsHorizontalScrollIndicator = {false}
pagingEnabled = { true } >
</ScrollView>
</View>
);
}
|
5. Now finally we would create 3 different View components inside the ScrollView. Each View has its unique background color.
|
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
|
render() {
return (
<View style={styles.MainContainer}>
<ScrollView
horizontal = { true }
showsHorizontalScrollIndicator = {false}
pagingEnabled = { true } >
<View style = { styles.FirstBlockStyle }>
<Text style={styles.TextStyle}> This is View 1 </Text>
{/* Put All Your Components Here Which you Want to Show Inside This View. */}
</View>
<View style = { styles.SecondBlockStyle }>
<Text style={styles.TextStyle}> This is View 2 </Text>
{/* Put All Your Components Here Which you Want to Show Inside This View. */}
</View>
<View style = { styles.ThirdBlockStyle }>
<Text style={styles.TextStyle}> This is View 3 </Text>
{/* Put All Your Components Here Which you Want to Show Inside This View. */}
</View>
</ScrollView>
</View>
);
}
|
6. Create Styles for All Views and Text component.
|
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
|
const styles = StyleSheet.create({
MainContainer :{
flex:1,
justifyContent: ‘center’,
alignItems: ‘center’
},
FirstBlockStyle:{
backgroundColor: ‘#00BCD4’,
justifyContent: ‘center’,
alignItems: ‘center’,
flexDirection: ‘row’,
width: Device_Width
},
SecondBlockStyle:{
backgroundColor: ‘#4CAF50’,
justifyContent: ‘center’,
alignItems: ‘center’,
flexDirection: ‘row’,
width: Device_Width
},
ThirdBlockStyle:{
backgroundColor: ‘#FF9800’,
justifyContent: ‘center’,
alignItems: ‘center’,
flexDirection: ‘row’,
width: Device_Width
},
TextStyle:{
fontSize : 30,
color: ‘#fff’,
textAlign : ‘center’,
fontWeight: ‘bold’
}
});
|
7. 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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
|
import React, { Component } from ‘react’;
import { StyleSheet, View, ScrollView, Text, Dimensions } from ‘react-native’;
var Device_Width = Dimensions.get(‘window’).width ;
export default class MainActivity extends Component {
render() {
return (
<View style={styles.MainContainer}>
<ScrollView
horizontal = { true }
showsHorizontalScrollIndicator = {false}
pagingEnabled = { true } >
<View style = { styles.FirstBlockStyle }>
<Text style={styles.TextStyle}> This is View 1 </Text>
{/* Put All Your Components Here Which you Want to Show Inside This View. */}
</View>
<View style = { styles.SecondBlockStyle }>
<Text style={styles.TextStyle}> This is View 2 </Text>
{/* Put All Your Components Here Which you Want to Show Inside This View. */}
</View>
<View style = { styles.ThirdBlockStyle }>
<Text style={styles.TextStyle}> This is View 3 </Text>
{/* Put All Your Components Here Which you Want to Show Inside This View. */}
</View>
</ScrollView>
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer :{
flex:1,
justifyContent: ‘center’,
alignItems: ‘center’
},
FirstBlockStyle:{
backgroundColor: ‘#00BCD4’,
justifyContent: ‘center’,
alignItems: ‘center’,
flexDirection: ‘row’,
width: Device_Width
},
SecondBlockStyle:{
backgroundColor: ‘#4CAF50’,
justifyContent: ‘center’,
alignItems: ‘center’,
flexDirection: ‘row’,
width: Device_Width
},
ThirdBlockStyle:{
backgroundColor: ‘#FF9800’,
justifyContent: ‘center’,
alignItems: ‘center’,
flexDirection: ‘row’,
width: Device_Width
},
TextStyle:{
fontSize : 30,
color: ‘#fff’,
textAlign : ‘center’,
fontWeight: ‘bold’
}
});
|
Screenshot in Android device :
Screenshots in iOS device :
Also Read :
Create Multi Line Text Breaking Text Line From Middle in React Native
React Native Get Object Value From Array and Show on Screen one by one
React Native Convert Complete Array Object To Single String Variable
Set onPress onClick to Image in React Native using TouchableOpacity
Run Android Emulator AVD Manager without Android Studio
