EDUCBA

EDUCBA

MENUMENU
  • Free Tutorials
  • Free Courses
  • Certification Courses
  • 600+ Courses All in One Bundle
  • Login

React Native ScrollView

By Priya PedamkarPriya Pedamkar

Home » Software Development » Software Development Tutorials » React Native Tutorial » React Native ScrollView

React Native ScrollView

Introduction to React Native ScrollView

ScrollView is a react native component library, which allows us to implement scrolling of components with multi-child options, with the help of react native ScrollView library we can scroll vertically and horizontally both which gives user an awesome feeling while surfing on the apps, we need to mention in which direction it should scroll if we do not mention the direction it will scroll in vertical to scroll horizontal we need to mention horizontal: true(it default if horizontal: false).

Syntax:

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

<ScrollView
horizontal={set boolean value(true or false)}
style={we can define content container style here}
showsHorizontalScrollIndicator={set boolean value here (true or false)}
showsVerticalScrollIndicator={set boolean value(true or false)}
scrollEnabled:{set this property as boolean(true or false)}
>
<Image source={require('./images/Krunal.jpg')} style={[styles.image, { width: screenWidth }]}/>
<Text style={styles.welcome}> Welcome to React NativeWelcome to React Native</Text>
</ScrollView>

Attributes

  • alwaysBounceVertical: It will allow components to always vertically bounce.
  • onScroll: If we wanted to execute any activity on scroll we can do it inside the onScroll function.
  • horizontal: In case if we want to have horizontal scrolling we can set this attribute as true(horizontal=true)
  • contentContainerStyle: This is one type of styling in react native. Here it will be used for the contents of containers.
  • scrollEnabled: In case if we do not want to scroll our content we can set this property as false. Its value will be true if we do not define any.
  • bouncesZoom: It’s one kind of bouncing, here it will have min/max value for which it will bounce. In general, the bounce will not exceed the limit.
  • zoomScale: With this, we can set a scale for the current view. In case if we do not define its value it will be 1.0.
  • onContentSizeChange: We can perform some activity in this if any change in the size of the content happens.
  • maximumZoomScale: We can define here what would be the maximum zoom size. In case if we do not define maximumZoomSize it will be 1.0
  • minimumZoomScale: It is used to define the minimum zoom size which we can set for it. In case if we do not define it will be 1.0.
  • maximumZoomScale: In this case, we can define the maximum zoom scale value. In case if we do not define it will be 1.0.
  • minimumZoomScale: In this case, we define the minimum zoom scale value. In case if we do not define it then it will be 1.0.
  • centerContent: If the content is smaller as compared to the scroller it will come to the center if center content is set to be true. In case if the content is larger than the scroller this property will not work. In case if we do not define its value it will be false.
  • contentInset: If we want inset to scroll view content then we can use this parameter.
  • pagingEnabled: It will stop scrolling and it will give an option for pagination. It is only available for horizontal pagination.
  • scrollsToTop: It will allow you to move top to scroll view when the status bar is tapped and scrollsToTop is true. In case if we do not define its value it will be true only.
  • snapToAlignment: If we set snapToInterval value will be defined then, snapToAlignment creates a relationship of the snapping to the scroll view. It takes three params to start(set to the left horizontal), center(it will set to center) and end(it will set to the right horizontal)
  • showsHorizontalScrollIndicator: It will show an indicator basically for horizontal scrolling when it values are set to true.

Examples of React Native ScrollView

Given below are the given examples:

Example #1

In the below example we are displaying a list of products and we are not passing any attribute along with this. All the products are listing vertically. These products can be displayed horizontally, we need to pass horizontal=true.in the next example, we will change the view of products from vertical to horizontal.

Code:

import React, { Component } from "react";
import { ScrollView, StyleSheet, Text, View } from "react-native";
class App extends Component {
state = {
products: [
{ product: "Rice", id: 1 },
{ product: "Sweets", id: 2 },
{ product: "Fruits", id: 3 },
{ product: "Animals", id: 4 },
{ product: "humans", id: 5 },
{ product: "sport", id: 6 },
{ product: "kitchen", id: 7 },
{ product: "childrens", id: 8 },
{ product: "men", id: 9 },
{ product: "old people", id: 10 },
{ product: "shafty", id: 11 },
{ product: "transport", id: 12 }
] };
render() {
return (
<View>
<ScrollView>
{this.state.products.map((item, index) => (
<View key={item.id} style={styles.item}>
<Text>{item.product}</Text>
</View>
))}
</ScrollView>
</View>
);
}
}
const styles = StyleSheet.create({
item: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "left",
padding: 20,
margin: 2,
borderColor: "pink",
borderWidth: 3,
backgroundColor: "yellow"
}
});
export default App;

Output:

react native scrollview 1

Example #2

In this example, we are displaying products with horizontal scrolling. Because of its versatile nature, which is it can be designed according to the space and size of our app. In case if more space available horizontally we will set scrollbar horizontal and in case if more space available in vertical than we can use vertical scroller.

Code:

import React, { Component } from "react";
import { ScrollView, StyleSheet, Text, View } from "react-native";
class App extends Component {
state = {
products: [
{ product: "Rice", id: 1 },
{ product: "Sweets", id: 2 },
{ product: "Fruits", id: 3 },
{ product: "Animals", id: 4 },
{ product: "humans", id: 5 },
{ product: "sport", id: 6 },
{ product: "kitchen", id: 7 },
{ product: "childrens", id: 8 },
{ product: "men", id: 9 },
{ product: "old people", id: 10 },
{ product: "shafty", id: 11 },
{ product: "transport", id: 12 }
] };
render() {
return (
<View>
<ScrollView
showsHorizontalScrollIndicator={false}
style={styles.contentContainerStyle}
horizontal={true}
showsVerticalScrollIndicator={false}
>
{this.state.products.map((item, index) => (
<View key={item.id} style={styles.item}>
<Text>{item.product}</Text>
</View>
))}
</ScrollView>
</View>
);
}
}
const styles = StyleSheet.create({
item: {
alignItems: "left",
justifyContent: "space-between",
flexDirection: "row",
padding: 20,
backgroundColor: "yellow",
margin: 2,
borderWidth: 3,
borderColor: "pink"
},
contentContainerStyle: {
backgroundColor: "green",
paddingVertical: 10,
marginTop: 40
}
});
export default App;

Output:

react native scrollview 2

Conclusion

React native scrollview allows us to represent a list of items in the various formats, with scrolling of multi-child options components that create an interactive UI for customers to see the products with ease.

Popular Course in this category
React JS Redux Training (1 Course, 5 Projects)1 Online Courses | 5 Hands-on Projects | 18+ Hours | Verifiable Certificate of Completion | Lifetime Access
4.5 (5,487 ratings)
Course Price

View Course

Related Courses

Recommended Articles

This is a guide to React Native ScrollView. Here we discuss the introduction to React Native ScrollView along with attributes and examples. You may also have a look at the following articles to learn more –

  1. React Native Layout
  2. React Native FlatList
  3. React Native SectionList
  4. React Native State

React JS Redux Training (1 Course, 4 Projects)

1 Online Courses

5 Hands-on Projects

18+ Hours

Verifiable Certificate of Completion

Lifetime Access

Learn More

0 Shares
Share
Tweet
Share
Primary Sidebar
React Native Tutorial
  • Basic
    • What is React Native?
    • React Versions
    • React Constructor
    • React Native Architecture
    • React Native Libraries
    • React Components Libraries
    • React Native Components
    • React Component Library
    • React Component Lifecycle
    • React Native Framework
    • React Higher Order Component
    • React Ternary Operator
    • React Native Charts
    • React Native Layout
    • React Native Grid
    • React Native Fetch
    • React Native Modal
    • React Native SVG
    • Button in React Native
    • React List Components
    • React Native Element
    • React Native FlatList
    • React Native SectionList
    • react native dropdown
    • React Native Menu
    • React Native State
    • React State Management
    • React Native Tabs
    • React Native Tab Bar
    • React Format
    • React-Native Switch
    • React Native Firebase
    • React Native Flexbox
    • React Native StatusBar
    • React Native ScrollView
    • React Native ListView
    • React Native TextInput
    • React Native Table
    • React-Native Border Style
    • React Native Search Bar
    • React-Native StyleSheet
    • React Native Vector Icons
    • React Native Login Screen
    • React Native Splash Screen
    • React Native Image Picker
    • React Native Navigation
    • React Native Swift
    • React Controlled Input
    • React Fragment
    • React Native Color
    • React Portals
    • React Refs
    • React shouldComponentUpdate()
    • React ComponentDidMount()
    • React componentWillUpdate()
    • React Native Orientation
    • React Native Animation
    • React Native Form
    • React Props
    • React Native Linear Gradient
    • React Native AsyncStorage
    • React Error Boundaries
    • React Native Progress Bar
    • React-Native Calendar
    • React Native Linking
    • React Native DatePicker
    • React Native Image
    • React Native Drawer
    • React Native Drawer Navigation
    • React Native Fonts
    • React Native Overlay
    • React Native OneSignal
    • React Native Template
    • React Native Router
    • React Router Transition
    • React Dispatcher
    • React Native Redux
    • React JSX
    • React native keyboardavoidingview
    • React Native Permissions
    • React Redux Connect
    • React Native Material
    • React Native Gesture Handler
    • React Native Theme
    • React Native Accessibility
    • React Native Justify Content
    • MobX React Native
    • React Native Authentication
    • React Native UUID
    • React Native Geolocation
    • React Native Debugger
    • React Native Carousel
    • React Native Local Storage
    • React Native TypeScript
    • React Bootstrap
    • React Native SQLite
    • React Native Interview Questions
Footer
About Us
  • Blog
  • Who is EDUCBA?
  • Sign Up
  • Corporate Training
  • Certificate from Top Institutions
  • Contact Us
  • Verifiable Certificate
  • Reviews
  • Terms and Conditions
  • Privacy Policy
  •  
Apps
  • iPhone & iPad
  • Android
Resources
  • Free Courses
  • Java Tutorials
  • Python Tutorials
  • All Tutorials
Certification Courses
  • All Courses
  • Software Development Course - All in One Bundle
  • Become a Python Developer
  • Java Course
  • Become a Selenium Automation Tester
  • Become an IoT Developer
  • ASP.NET Course
  • VB.NET Course
  • PHP Course

© 2020 - EDUCBA. ALL RIGHTS RESERVED. THE CERTIFICATION NAMES ARE THE TRADEMARKS OF THEIR RESPECTIVE OWNERS.

EDUCBA Login

Forgot Password?

EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

*Please provide your correct email id. Login details for this Free course will be emailed to you
Book Your One Instructor : One Learner Free Class

Let’s Get Started

This website or its third-party tools use cookies, which are necessary to its functioning and required to achieve the purposes illustrated in the cookie policy. By closing this banner, scrolling this page, clicking a link or continuing to browse otherwise, you agree to our Privacy Policy

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

*Please provide your correct email id. Login details for this Free course will be emailed to you

Special Offer - React JS Redux Training (1 Course, 4 Projects) Learn More