How to create simple vertical ScrollView in react native android iOS application and show multiple View components inside ScrollView vertically align center.
In this tutorial we would going create a simple react native application using ScrollView. ScrollView is a type of container component that can itself contain or host multiple child components like View, Button, Image ETC. Developer can add as many components in ScrollView as he required and all the View will be align vertically automatically. So let’s get started
Contents in this project Vertical ScrollView :
1. Start a fresh React Native project. If you don’t know how then read my this tutorial.
2. Add AppRegistry, StyleSheet, ScrollView, Text, Image, View component in import block.
1
|
import { AppRegistry, StyleSheet, ScrollView, Text, Image, View } from ‘react-native’;
|
3. Add ScrollView component in render’s return block.
1
2
3
4
5
6
7
8
9
10
11
12
|
render() {
return (
<ScrollView>
</ScrollView>
);
}
|
4. Add View inside the ScrollView.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
render() {
return (
<ScrollView>
<View>
</View>
</ScrollView>
);
}
|
5. Create custom Style sheet class just above the AppRegistry.registerComponent line. Using this Style we are setting up all the child elements which we would have added in View’s align center.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
const styles = StyleSheet.create({
MainContainer:
{
flex: 1,
// Set content’s horizontal alignment.
alignItems: ‘center’,
backgroundColor: ‘#FFF8E1’,
}
});
|
6. Call the Style class MainContainer in View .
1
2
3
4
5
6
7
8
9
|
<ScrollView>
<View style={styles.MainContainer}>
</View>
</ScrollView>
|
7. Define Two Text components and Two Image components in View.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<ScrollView>
<View style={styles.MainContainer}>
<Text style={{fontSize:50, textAlign: ‘center’}} >Scroll Me To See The Effect</Text>
<Image source={require(‘./images/sample_image.png’)} />
<Image source={require(‘./images/sample_image_new.png’)} />
<Text style={{fontSize:50, textAlign: ‘center’}} >Scroll View Ends Here.</Text>
</View>
</ScrollView>
|
8. Complete Source Code for index.android.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
|
import React, { Component } from ‘react’;
import { AppRegistry, StyleSheet, ScrollView, Text, Image, View } from ‘react-native’;
class Myproject extends Component {
render() {
return (
<ScrollView>
<View style={styles.MainContainer}>
<Text style={{fontSize:50, textAlign: ‘center’}} >Scroll Me To See The Effect</Text>
<Image source={require(‘./images/sample_image.png’)} />
<Image source={require(‘./images/sample_image_new.png’)} />
<Text style={{fontSize:50, textAlign: ‘center’}} >Scroll View Ends Here.</Text>
</View>
</ScrollView>
);
}
}
const styles = StyleSheet.create({
MainContainer:
{
flex: 1,
// Set content’s horizontal alignment.
alignItems: ‘center’,
backgroundColor: ‘#FFF8E1’,
}
});
AppRegistry.registerComponent(‘Myproject’, () => Myproject);
|
Screenshots :