How to add multiple View, Images and Text inside Horizontal ScrollView in React Native application and change ScrollView background color using color style.
Horizontal ScrollView is very famous to show multiple menus in android and iOS application which can be scrolled on both directions left to right and right to left. This view is place on screen from Left to right and can be stretched according to its child elements. There is no limitation, Developer can add multiple Views inside it. But there is one limitation Horizontal ScrollView can be scroll only horizontally. So if you want to Scroll vertically then read my this tutorial.
Contents in this project Horizontal 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 View component in render’s return block.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
render() {
return (
<View>
</View>
);
}
|
4. Using Inline style set view background color.
|
1
2
3
4
5
6
7
8
9
10
11
|
render() {
return (
<View style={{backgroundColor: “#ECEFF1”}}>
</View>
);
}
|
5. Add ScrollView component inside View .
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
render() {
return (
<View style={{backgroundColor: “#ECEFF1”}}>
<ScrollView>
</ScrollView>
</View>
);
}
|
6. Set ScrollView’s prop as Horizontal = { true } . This makes this scroll view in Horizontal format. If you want to make this scroll view in vertical format then don’t add this prop.
|
1
2
3
4
5
6
7
8
9
|
<View style={{backgroundColor: “#ECEFF1”}}>
<ScrollView horizontal={true}>
</ScrollView>
</View>
|
7. Create a folder inside your project’s directory named as images . Just like i did in below screenshot :
8. Download All 5 images from below and paste them inside the images folder. These are the images we have been calling inside our Horizontal ScrollView.
9. Screenshot of images folder after adding these images.
10. Add 2 Text components and 5 Image components inside ScrollView .
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<View style={{backgroundColor: “#ECEFF1”}}>
<ScrollView horizontal={true}>
<Text style={{fontSize:20, textAlign: ‘center’}} >Scroll Me To See The Effect</Text>
<Image source={require(‘./images/ic_3d_rotation.png’)} />
<Image source={require(‘./images/ic_alarm.png’)} />
<Image source={require(‘./images/ic_insert_emoticon.png’)} />
<Image source={require(‘./images/ic_android.png’)} />
<Image source={require(‘./images/ic_face.png’)} />
<Text style={{fontSize:20, textAlign: ‘center’}} >Scroll View Ends Here.</Text>
</ScrollView>
</View>
|
11. 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
|
import React, { Component } from ‘react’;
import { AppRegistry, StyleSheet, ScrollView, Text, Image, View } from ‘react-native’;
class Myproject extends Component {
render() {
return (
<View style={{backgroundColor: “#ECEFF1”}}>
<ScrollView horizontal={true}>
<Text style={{fontSize:20, textAlign: ‘center’}} >Scroll Me To See The Effect</Text>
<Image source={require(‘./images/ic_3d_rotation.png’)} />
<Image source={require(‘./images/ic_alarm.png’)} />
<Image source={require(‘./images/ic_insert_emoticon.png’)} />
<Image source={require(‘./images/ic_android.png’)} />
<Image source={require(‘./images/ic_face.png’)} />
<Text style={{fontSize:20, textAlign: ‘center’}} >Scroll View Ends Here.</Text>
</ScrollView>
</View>
);
}
}
AppRegistry.registerComponent(‘Myproject’, () => Myproject);
|
Screenshots:
Also Read :
Change Text Font Size on Button Click in React Native Programmatically
React Native Solve Warning componentwillmount is Deprecated and will be Removed in the Next Major Version
React Native Hide Dismiss Keyboard on Touch Outside Example
How to Create Custom Trapezoid Shape View in React Native
Example of React Native Action Button | Floating Action Button
