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 :
Also Read :
React Native Integrate Google Maps in Android iOS App Example Tutorial
React Native Set View Height Width in Percentage format Respect of Root View
React Native NetInfo Example to Detect Internet Connection Android iOS
React Native Show Floating Action Button Above ListView FlatList
Example of Share Post URL from React Native App to Facebook
