React Native ScrollView

The ScrollView is a generic scrollable container, which scrolls multiple child components and views inside it. In the ScrollView, we can scroll the components in both direction vertically and horizontally. By default, the ScrollView container scrolls its components and views in vertical. To scroll its components in horizontal, it uses the props horizontal: true (default, horizontal: false).

Props of ScrollView

alwaysBounceVertical	onScroll	horizontal
contentContainerStyle	scrollEnabled	bouncesZoom	zoomScale
onScrollBeginDrag	onContentSizeChange	maximumZoomScale	minimumZoomScale
onScrollBeginDrag	onContentSizeChange	maximumZoomScale	minimumZoomScale
onScrollEndDrag	centerContent	contentInset	refreshControl
pagingEnabled	scrollsToTop	snapToAlignment	showsHorizontalScrollIndicator
snapToStart	snapToEnd	indicatorStyle	showsHorizontalScrollIndicator

React Native ScrollView Example

In this example, we create a vertical ScrollView using Text and Button components.

App.js

1. import React, { Component } from ‘react’;  
2. import { AppRegistry, ScrollView, Image, Text, Button, StyleSheet } from ‘react-native’;  
3.   
4. export default class ScrolledViewExample extends Component {  
5.     onPressButton() {  
6.         alert(‘You clicked the button!’)  
7.     }  
8.   
9.     render() {  
10.         return (  
11.             <ScrollView >  
12.                 <Text style={{fontSize:20}}>Scroll me plz</Text>  
13.                 <Button title={‘Button 1’} onPress={this.onPressButton} />  
14.                 <Text style={{fontSize:20}}>React Native Example of ScrollView</Text>  
15.                 <Button title={‘Button 2’} onPress={this.onPressButton}/>  
16.                 <Text style={{fontSize:20}}>React Native ScrollView Example</Text>  
17.                 <Button title={‘Button 3’} onPress={this.onPressButton}/>  
18.                 <Text style={{fontSize:20}}>If you like</Text>  
19.                 <Button title={‘Button 4’} onPress={this.onPressButton}/>  
20.                 <Text style={{fontSize:20}}>Scrolling down</Text>  
21.                 <Button title={‘Button 5’} onPress={this.onPressButton}/>  
22.                 <Text style={{fontSize:20}}>Scrolling down</Text>  
23.                 <Button title={‘Button 6’} onPress={this.onPressButton}/>  
24.                 <Text style={{fontSize:20}}>What’s the best</Text>  
25.                 <Button title={‘Button 7’} onPress={this.onPressButton}/>  
26.                 <Text style={{fontSize:20}}>What’s the best</Text>  
27.                 <Button title={‘Button 8’} onPress={this.onPressButton}/>  
28.                 <Text style={{fontSize:20}}>Framework around?</Text>  
29.                 <Button title={‘Button 9’} onPress={this.onPressButton}/>  
30.                 <Text style={{fontSize:20}}>Framework around?</Text>  
31.                 <Button title={‘Button 10’} onPress={this.onPressButton}/>  
32.                 <Text style={{fontSize:20}}>React Native</Text>  
33.                 <Button title={‘Button 11’} onPress={this.onPressButton}/>  
34.                 <Text style={{fontSize:20}}>Scroll me plz</Text>  
35.                 <Button title={‘Button 12’} onPress={this.onPressButton} />  
36.                 <Text style={{fontSize:20}}>Scroll me plz</Text>  
37.                 <Button title={‘Button 13’} onPress={this.onPressButton}/>  
38.                 <Text style={{fontSize:20}}>If you like</Text>  
39.                 <Button title={‘Button 14’} onPress={this.onPressButton}/>  
40.                 <Text style={{fontSize:20}}>If you like</Text>  
41.                 <Button title={‘Button 15’} onPress={this.onPressButton}/>  
42.                 <Text style={{fontSize:20}}>Scrolling down</Text>  
43.                 <Button title={‘Button 16’} onPress={this.onPressButton}/>  
44.             </ScrollView>  
45.         );  
46.     }  
47. }  
48. // skip this line if you are using Create React Native App  
49. AppRegistry.registerComponent(‘AwesomeProject’, () => ScrolledViewExample);  

Output:

React Native Horizontal ScrollView Example

The horizontal ScrollView scrolls the components and views from left to right. It will be implemented by setting the props horizontal to true (horizontal={true}).

App.js

1. import React, { Component } from ‘react’;  
2. import { AppRegistry, ScrollView, View, Image, Text, Button, StyleSheet } from ‘react-native’;  
3.   
4. export default class ScrolledViewExample extends Component {  
5.     onPressButton() {  
6.         alert(‘You clicked the button!’)  
7.     }  
8.   
9.     render() {  
10.         return (  
11.             <ScrollView  horizontal={true} style={styles.container}>  
12.                 <Text style={{fontSize:22, padding: 10}}>Horizontal ScrollView</Text>  
13.                 <View style={[{ width: 220,height: 70,padding: 10 }]}>  
14.                     <Button  
15.                         onPress={this.onPressButton}  
16.                         title=”Button 1″  
17.                         color=”#FF3D00″  
18.                     />  
19.                 </View>  
20.                 <Text style={{fontSize:22, padding: 10}}>javatpoint</Text>  
21.                 <View style={[{ width: 220,height: 70,padding: 10 }]}>  
22.                     <Button  
23.                         onPress={this.onPressButton}  
24.                         title=”Button 2″  
25.                         color=”#3D00FF”  
26.                     />  
27.                 </View>  
28.                 <Text style={{fontSize:22, padding: 10}}>React Native ScrollView Example</Text>  
29.                 <View style={[{ width: 220,height: 70,padding: 10 }]}>  
30.                     <Button  
31.                         onPress={this.onPressButton}  
32.                         title=”Button 3″  
33.                         color=”#FFFF3D”  
34.                     />  
35.                 </View>  
36.                 <Text style={{fontSize:22, padding: 10}}>If you like</Text>  
37.                 <View style={[{ width: 220,height: 70,padding: 10 }]}>  
38.                     <Button  
39.                         onPress={this.onPressButton}  
40.                         title=”Button 4″  
41.                         color=”#FF3DFF”  
42.                     />  
43.                 </View>  
44.                 <Text style={{fontSize:22, padding: 10}}>Scrolling horizontal</Text>  
45.                 <View style={[{ width: 220,height: 70,padding: 10 }]}>  
46.                     <Button  
47.                         onPress={this.onPressButton}  
48.                         title=”Button 5″  
49.                         color=”#3DFF00″  
50.                     />  
51.                 </View>  
52.             </ScrollView>  
53.         );  
54.     }  
55. }  
56. const styles = StyleSheet.create({  
57.     container:{  
58.         flex: 1,  
59.     },  
60. /*    buttonStyle:{ 
61.         height: 50, 
62.         width: 70, 
63.     }*/  
64. })  
65. // skip this line if you are using Create React Native App  
66. AppRegistry.registerComponent(‘AwesomeProject’, () => ScrolledViewExample);  

Output: