What is the use of ScrollView component in React Native ?

In this article, we are going to learn about the uses of the ScrollView Component. So firstly let’s know what is ScrollView? The ScrollView Component is an inbuilt react-native component that serves as a generic scrollable container, with the ability to scroll child components and views inside it. It provides the scroll functionality in both directions- vertical and horizontal. The default direction of the ScrollView component is vertical. For scrolling its components in the horizontal direction, it uses the props horizontal: true.  It is essential to provide the ScrollView Component with a bounded height since they contain unbounded-height children into a bounded container.

Syntax:

<ScrollView/>

Props in ScrollView:

• StickyHeaderComponent:  This property is used to render the sticky headers.
• alwaysBounceHorizontal: This property is used to bounce the ScrollView to the horizontal direction at the time it reaches the end. We have to provide the value of this prop to true.
• alwaysBounceVertical:  This property is used to bounce the ScrollView to the vertical direction at the time it reaches the end. We have to provide the value of this prop to true.
• automaticallyAdjustContentInsets: It is used to control the automatic adjustment of the content inset by iOS for scroll views.
• bounces: This property will bounce the ScrollView when it reaches the end of the content only if the content is larger than the ScrollView and the scroll direction axis. We have to provide the value of this prop to true.
• bouncesZoom:  This property will have min and max values for which it will animate.
• canCancelContentTouches: If the value of this property is false then at the start of the tracking if the touch moves it will not drag.
• centerContent: If the value of this property is true and the content is smaller than the scroller, ScrollView will automatically center the content.
• contentContainerStyle: It is used to style the content of the ScrollView containers
• contentInset: This property is used to inset the scroll view content by a specific amount.
• contentInsetAdjustmentBehavior: This property is used to identify how the safe area insets are used to modify the content area of the ScrollView.
• contentOffset: It is used to set the starting scroll offset manually.
• directionalLockEnabled: If the value of this prop is true then there will be horizontal or vertical scrolling only while dragging as  ScrollView will try to lock on them.
• disableIntervalMomentum: If the value of this prop is true then the ScrollView will stop on the next index during pagination this prop can be used.
• endFillColor: If the space taken by scroll view is more than the space taken by its content fills so to fill the rest of the scroll view with a color this prop can be used.
• fadingEdgeLength: This is used to fade out the scrolling content edges.
• horizontal: To have a horizontal scrolling of scrollview this prop can be used with true as its value.
• invertStickyHeaders: This prop is usually used with inverted ScrollViews.
• keyboardDismissMode: This is used to know if the keyboard gets dismissed in response to a drag.
• keyboardShouldPersistTaps: This is used to determine at what time the keyboard should stay visible after a tap.
• maximumZoomScale: This can be used to define what should be the maximum zoom size.
• minimumZoomScale: This can be used to define what should be the minimum zoom size.
• nestedScrollEnabled: It is used to enable nested scrolling for Android API level 21+.
• pagingEnabled: If the value is set to true then the scroll view stops scrolling. This can be used for horizontal pagination.
• persistentScrollbar: This prop stops the scrollbar from turning transparent when they are not in use.
• pinchGestureEnabled: If the value of this prop is true, then the ScrollView will allow the use of pinch to zoom in and out.
• refreshControl: It is used to provide the pull-to-refresh functionality.
• scrollEnabled: If the value of this prop is set to false, then there will be no scrolling of the content.
• scrollEventThrottle: It is used to control the firing of scroll events while scrolling. 
• scrollIndicatorInsets: It is used to determine the amount by which the scroll view indicators are inset from the edges of the scroll view.
• scrollToOverflowEnabled: If the value of this prop is true, then the scroll view will be scrolled beyond its content size.
• scrollsToTop: If the value of this prop is true, then the scroll view will move to the top when the status bar is tapped.
• showsHorizontalScrollIndicator: If the value of this property is true, then it will show a horizontal scroll indicator.
• showsVerticalScrollIndicator: If the value of this property is true, then it will show a vertical scroll indicator.
• snapToAlignment: If the snapToInterval is defined then. snapToAlignment is used to define the relationship of the snapping to the scroll view 
• snapToInterval: If this prop is set, then it makes the scroll view stop at multiples of the value of snapToInterval.
• snapToOffsets: If this prop is set, then it makes the scroll view stop at the defined offsets.
• snapToStart: It is used in conjunction with snapToOffsets. By default, The beginning of the list counts as a snap offset.
• zoomScale: This prop is used to set a scale for the view content.

USES OF SCROLLVIEW COMPONENT:

• Scrolls Child Components: ScrollView Component is a container that is used to scroll the child components and views inside it.
• All elements are rendered: The ScrollView Component is used when we want to render all the child components  (text, views, images, etc.) on the screen. Child components that are currently not even visible on the screen are also rendered by ScrollView Component.
• Limited Size of data: When we have a few items of limited size we can use the ScrollView Component. The most popular use of the ScrollView Component is that it displays a few items of limited size as it works best to present a small number of things of a limited size.
• Maintaining Component State:  ScrollView loads all the data to be displayed on screen all at once immediately after the component is loaded. Thus, the entire content (data list) is mounted altogether then it renders the data and also maintains the state of the data.
• ScrollView Component can be used when we want to render generic content in a scrollable container.

Now let’s start with the implementation:

Step 1: Open your terminal and install expo-cli by the following command.

npm install -g expo-cli

Step 2: Now create a project by the following command.

expo init myapp

Step 3: Now go into your project folder i.e. myapp

cd myapp

Project Structure:

gfg

Example: In the following example, we have a scrollable list of all sample items.

Javascript

import React, { Component } from "react";
import { Text, View, StyleSheet, ScrollView } from "react-native";

class App extends Component {
    state = {
        items: [
            { item: "Item 1", price: "10", id: 1 },
            { item: "Item 2", price: "20", id: 2 },
            { item: "Item 3", price: "30", id: 3 },
            { item: "Item 4", price: "40", id: 4 },
            { item: "Item 5", price: "50", id: 5 },
            { item: "Item 6", price: "60", id: 6 },
            { item: "Item 7", price: "70", id: 7 },
            { item: "Item 8", price: "80", id: 8 },
            { item: "Item 9", price: "90", id: 9 },
            { item: "Item 10", price: "100", id: 10 },
            { item: "Item 11", price: "110", id: 11 },
            { item: "Item 12", price: "120", id: 12 },
            { item: "Item 13", price: "130", id: 13 },
            { item: "Item 14", price: "140", id: 14 },
            { item: "Item 15", price: "150", id: 15 },
        ],
    };
    render() {
        return (
            <View style={styles.screen}>
                <ScrollView style={styles.container}>
                    {this.state.items.map((item, index) => (
                        <View key={item.id}>
                            <View style={styles.text}>
                                <Text>
                                    {item.item} <Text style={styles.amount}>
                                        ${item.price}</Text>
                                </Text>
                            </View>
                        </View>
                    ))}
                </ScrollView>
            </View>
        )
    }
}
const styles = StyleSheet.create({
    screen: {
        margin: 20,
    },
    text: {
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between",
        marginBottom: 20,
        padding: 10,
        borderRadius: 10,
        backgroundColor: "green",

    },
    amount: {
        color: "#C2185B",
    },
});
export default App;

Start the server by using the following command.

npm run android

Output: 

Example 2: In this example, we have created the ScrollView Component in a horizontal direction.

Javascript

import React, { Component } from "react";
import { Text, View, StyleSheet, ScrollView } from "react-native";

class App extends Component {
    state = {
        items: [
            { item: "Item 1", price: "10", id: 1 },
            { item: "Item 2", price: "20", id: 2 },
            { item: "Item 3", price: "30", id: 3 },
            { item: "Item 4", price: "40", id: 4 },
            { item: "Item 5", price: "50", id: 5 },
            { item: "Item 6", price: "60", id: 6 },
            { item: "Item 7", price: "70", id: 7 },
            { item: "Item 8", price: "80", id: 8 },
            { item: "Item 9", price: "90", id: 9 },
            { item: "Item 10", price: "100", id: 10 },
            { item: "Item 11", price: "110", id: 11 },
            { item: "Item 12", price: "120", id: 12 },
            { item: "Item 13", price: "130", id: 13 },
            { item: "Item 14", price: "140", id: 14 },
            { item: "Item 15", price: "150", id: 15 },
        ],
    };
    render() {
        return (
            <View style={styles.screen}>
                <ScrollView horizontal={true} style={styles.container}>
                    {this.state.items.map((item, index) => (
                        <View key={item.id}>
                            <View style={styles.text}>
                                <Text style={{ fontSize: 22 }}>
                                    {item.item} <Text style={styles.amount}>
                                        ${item.price}</Text>
                                </Text>
                            </View>
                        </View>
                    ))}
                </ScrollView>
            </View>
        )
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    screen: {
        margin: 20,
    },
    text: {
        marginLeft: 20,
        padding: 10,
        borderRadius: 10,
        backgroundColor: "green",
    },
    amount: {
        color: "red",
    },
});
export default App;

Explanation: In this example, we wanted that the component should be scrolled in a horizontal direction hence for that we have given “true” value to the horizontal prop of the ScrollView Component.

Output: 

Reference: https://reactnative.dev/docs/scrollview