

- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
What is a ScrollView component and how to use it in React Native?
The ScrollView is a scrolling container that can accommodate multiple components and views. It is one of the core components in reactnative and using it you can scroll both vertically and horizontally.
ScrollView will map to its native equivalent based on the platform it is running. So on android the view will map to <ScrollView>, on iOS it will be <UIScrollView> and <div> on the web environment.
Example 1: Scrolling vertical using ScrollView
In this example the ScrollView has a View along with a Text component and it is wrapped inside a View.
To work with ScrollView import the component first −
import { Text, View, StyleSheet, ScrollView} from 'react-native';
The data to be displayed inside ScrollView is stored inside names in state object as shown below −
state = { names: [ {'name': 'Ben', 'id': 1}, {'name': 'Susan', 'id': 2}, {'name': 'Robert', 'id': 3}, {'name': 'Mary', 'id': 4}, {'name': 'Daniel', 'id': 5}, {'name': 'Laura', 'id': 6}, {'name': 'John', 'id': 7}, {'name': 'Debra', 'id': 8}, {'name': 'Aron', 'id': 9}, {'name': 'Ann', 'id': 10}, {'name': 'Steve', 'id': 11}, {'name': 'Olivia', 'id': 12} ] }
The data i.e this.state.names is an array. The map() method is used on the array and the name is displayed inside View->Text Component as shown below −
<ScrollView> {this.state.names.map((item, index) => (<View key = {item.id} style = {styles.item}><Text>{item.name}</Text></View>)) } </ScrollView>
ScrollView works best for static data which is of small size.But if you want to work around with dynamic that can be a huge list best to make use of the FlatList component.
Here is the full code for ScrollView.
import React, { Component } from "react"; import { Text, View, StyleSheet, ScrollView} from 'react-native'; class ScrollViewExample extends Component { state = { names: [ {'name': 'Ben', 'id': 1}, {'name': 'Susan', 'id': 2}, {'name': 'Robert', 'id': 3}, {'name': 'Mary', 'id': 4}, {'name': 'Daniel', 'id': 5}, {'name': 'Laura', 'id': 6}, {'name': 'John', 'id': 7}, {'name': 'Debra', 'id': 8}, {'name': 'Aron', 'id': 9}, {'name': 'Ann', 'id': 10}, {'name': 'Steve', 'id': 11}, {'name': 'Olivia', 'id': 12} ] } render(props) { return ( <View style={{flex :1, justifyContent: 'center', margin: 15 }}> <ScrollView> {this.state.names.map((item, index) => (<View key = {item.id} style = {styles.item}><Text>{item.name}</Text></View>)) } </ScrollView> </View> ); } } export default ScrollViewExample; const styles = StyleSheet.create ({ item: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', padding: 30, margin: 2, borderColor: '#2a4944', borderWidth: 1, backgroundColor: '#d2f7f1' } })
Output
Example 2: Scrolling horizontally using ScrollView
By default ScrollView displays data vertically. To display the data horizontally use the props
horizontal={true} as shown below −
<ScrollView horizontal={true}> {this.state.names.map((item, index) => (<View key = {item.id} style = {styles.item}><Text>{item.name}</Text></View>)) } </ScrollView>
import React, { Component } from "react"; import { Text, View, StyleSheet, ScrollView} from 'react-native'; class ScrollViewExample extends Component { state = { names: [ {'name': 'Ben', 'id': 1}, {'name': 'Susan', 'id': 2}, {'name': 'Robert', 'id': 3}, {'name': 'Mary', 'id': 4}, {'name': 'Daniel', 'id': 5}, {'name': 'Laura', 'id': 6}, {'name': 'John', 'id': 7}, {'name': 'Debra', 'id': 8}, {'name': 'Aron', 'id': 9}, {'name': 'Ann', 'id': 10}, {'name': 'Steve', 'id': 11}, {'name': 'Olivia', 'id': 12} ] } render(props) { return ( <View style={{flex :1, justifyContent: 'center', marginTop: 100 }}> <ScrollView horizontal={true}> {this.state.names.map((item, index) => (<View key = {item.id} style = {styles.item}><Text>{item.name}</Text></View>)) } </ScrollView> </View> ); } } export default ScrollViewExample; const styles = StyleSheet.create ({ item: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', padding: 30, margin: 2, borderColor: '#2a4944', borderWidth: 1, height:100, backgroundColor: '#d2f7f1' } })
Output
- Related Questions & Answers
- What is a View component and how to use it in React Native?
- What is the FlatList component and how to use it in React Native?
- What is the SectionList component and how to use it in React Native?
- What is React Native?
- What is a state in react native?
- What are props in react native?
- How to display loading indicator in React Native?
- How to load data from a server in React Native?
- How to display Material Chip View in React Native?
- What is SignalR and how to use it?
- Adding an animated loader and splash screen in a React Native app
- What is a continue statement in Java and how to use it?
- What is a break statement in Java and how to use it?
- Create multiple picker(dropdown) dynamically in React Native
- Explain the importance of SafeViewArea in React Native?