Open In App

React Native ScrollView Component

Last Updated : 04 May, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

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 (Default: vertical). It is essential to provide the ScrollView Component with a bounded height since it contain unbounded-height children into a bounded container.

Advantages of using the ScrollView Component

The most popular use of the ScrollView Component is to display a few items of a limited size. All the child components (text, views, images, etc.) of a ScrollView Component are rendered, even if they are not currently visible on the screen. 

Disadvantages of using the ScrollView Component

The major drawback of using the ScrollView Component is its performance issues. Since the ScrollView component renders all its children components at once, it results in slow rendering and increased memory usage.

The ScrollView, A component in React Native is used to create scrollable containers. It’s perfect for scenarios where the content is too long to fit within the screen and needs smooth scrolling. For more in-depth coverage of ScrollView and other layout components, check out the React Native Course, where you'll learn how to optimize content rendering and scrolling.

Props in ScrollView:

Porp

Description

StickyHeaderComponent

Component used to render sticky headers. If not provided, the default ScrollViewStickyHeader component will be used.

alwaysBounceHorizontal

If true, the ScrollView bounces horizontally when it reaches the end, irrespective of whether the content is smaller than the ScrollView itself.

alwaysBounceVertical

If true, the ScrollView bounces vertically when it reaches the end irrespective of whether the content is smaller than the ScrollView itself.

automaticallyAdjustContentInsets

Controls whether iOS should automatically adjust the content inset for scroll views that are placed behind a navigation bar or tab bar/toolbar.

bounces

If true, the ScrollView bounces when it reaches the end of the content only when the content is larger than the ScrollView along the axis of the scroll direction.

bouncesZoom

If true, gestures can drive zoom past min/max and the zoom will animate to the min/max value at gesture ends.

canCancelContentTouches

If false, once tracking starts, won't try to drag if the touch moves

centerContent

If true, the ScrollView automatically centers the content when the content is smaller than the scroll view bounds.

contentContainerStyle

These styles will be applied to the scroll view content container which wraps all the child views.

contentInset

Specifies the amount by which the ScrollView content is inset from the edges of the ScrollView.

contentInsetAdjustmentBehavior

It is used to specifies how the safe area insets are used to modify the content area of the ScrollView.

contentOffset

Manually sets the starting scroll offset.

decelerationRate

A floating-point number that determines how quickly the scroll view decelerates after the user lifts their finger.

directionalLockEnabled

The ScrollView will try to lock to only vertical or horizontal scrolling while dragging if this is set to true.

disableIntervalMomentum

The ScrollView stops on the next index if this is set to true.

disableScrollViewPanResponder

If true, the default JS pan responder on the ScrollView is disabled, and full control over touches inside the ScrollView is left to its child components.

endFillColor

Sometimes a scrollview takes up more space than its content fills.

fadingEdgeLength

Fades out the edges of the scrolling content.

horizontal

If true, then scroll view's children are arranged horizontally in a row instead of vertically in a column.

indicatorStyle

The style of the scroll indicators

invertStickyHeaders

This is usually used with inverted ScrollViews. If sticky headers should stick at the bottom instead of the top of the ScrollView. 

keyboardDismissMode

It is used to determine whether the keyboard gets dismissed in response to a drag.

keyboardShouldPersistTaps

It is used to determine when the keyboard should stay visible after a tap.

maintainVisibleContentPosition

The scroll view will adjust the scroll position so that the first child that is currently visible and at or beyond minIndexForVisible will not change position if this is set to true

maximumZoomScale

It is used to denote the maximum allowed zoom scale.

minimumZoomScale

It is used to denote the minimum allowed zoom scale.

nestedScrollEnabled

Enables nested scrolling for Android API level 21+.

onContentSizeChange

It is a callback function that is called when the scrollable content view of the ScrollView changes.

onMomentumScrollBegin

It is a callback function that is called when the momentum scroll starts.

onMomentumScrollEnd

It is a callback function that is called when the momentum scroll ends.

onScroll

Fires at most once per frame during scrolling.

onScrollBeginDrag

It is a callback function that is called when the user begins to drag the scroll view.

onScrollEndDrag

It is a callback function that is called when the user stops dragging the scroll view and it either stops or begins to glide.

onScrollToTop

Fires when the scroll view scrolls to the top after the status bar has been tapped.

overScrollMode

It is used to override the default value of overScroll mode.

pagingEnabled

This can be used for horizontal pagination. If this is set to true, then the scroll view stops on multiples of the scroll view's size when scrolling. 

persistentScrollbar

Causes the scrollbars not to turn transparent when they are not in use.

pinchGestureEnabled

If true, ScrollView allows the use of pinch gestures to zoom in and out.

refreshControl

A RefreshControl component used to provide pull-to-refresh functionality for the ScrollView. 

scrollEnabled

If false, the view cannot be scrolled via touch interaction.

scrollEventThrottle

This controls how often the scroll event will be fired while scrolling.

scrollIndicatorInsets

The amount by which the scroll view indicators are inset from the edges of the scroll view.

scrollPerfTag

It is the tag used to log scroll performance on this scroll view. 

scrollToOverflowEnabled

If true, then scroll view can be programmatically scrolled beyond its content size.

scrollsToTop

If true, then scroll view scrolls to the top when the status bar is tapped.

showsHorizontalScrollIndicator

If true, shows a horizontal scroll indicator.

showsVerticalScrollIndicator

If true, shows a vertical scroll indicator.

snapToAlignment

The snapToAlignment will define the relationship of the snapping to the scroll view when snapToInterval is set to true.

snapToEnd

It is used in conjunction with snapToOffsets. The end of the list counts as a snap offset by default.

snapToInterval

If set, causes the scroll view to stop at multiples of the value of snapToInterval.

snapToOffsets

If set, causes the scroll view to stop at the defined offsets.

snapToStart

It is used in conjunction with snapToOffsets. The beginning of the list counts as a snap offset by default.

stickyHeaderIndices

An array of child indices determining which children get docked to the top of the screen when scrolling.

zoomScale

It is used to denote the current scale of the scroll view content.


Methods:

Method

Description

flashScrollIndicators()

This method is used to displays the scroll indicators momentarily.

scrollTo()

This method is used to Scrolls to a given x, y offset, either immediately, with a smooth animation

scrollToEnd()

If this is vertical ScrollView scrolls to the bottom. If this is horizontal ScrollView scrolls to the right.

scrollWithoutAnimationTo()

Deprecated, use scrollTo instead.

Now let’s start with the implementation.


Step-by-Step Implementation

Step 1: Create a React Native Project

Now, create a project with the following command.

npx create-expo-app app-name --template

Note: Replace the app-name with your app name for example : react-native-demo-app

Next, you might be asked to choose a template. Select one based on your preference as shown in the image below. I am selecting the blank template because it will generate a minimal app, as clean as an empty canvas in JavaScript.

It completes the project creation and displays a message: "Your Project is ready!" as shown in the image below.

Now go into your project folder, i.e., react-native-demo

cd app-name

Project Structure:

Step 2: Run  Application

Start the server by using the following command.

npx expo start

Then, the application will display a QR code.

  • For the Android users,
    • For the Android Emulator, press "a" as mentioned in the image below.
    • For Physical Device, Download the "Expo Go" app from the Play Store. Open the app, and you will see a button labeled "Scan QR Code." Click that button and scan the QR code; it will automatically build the Android app on your device.
  • For iOS users, simply scan the QR code using the Camera app.
  • If you're using a web browser, it will provide a local host link that you can use as mentioned in the image below.


Step 3: Working with App.js

Example: Now let’s implement the ScrollView. In the following example, we have a scrollable list of all sample items.

App.js:

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

class App extends Component {
  state = {
    // Sample data
    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> // use of ScrollView Component
          {this.state.items.map((item, index) => (
            <View key={item.id}>
              <View style={styles.summary}>
                <Text style={styles.summaryText}>
                  {item.item} <Text style={styles.amount}>
                      ${item.price}</Text>
                </Text>
                <Button title="Order" color="#FFC107" 
                      onPress={() => { }} />
              </View>
            </View>
          ))}
        </ScrollView>
      </View>
    );
  }
}

// Screen styles
const styles = StyleSheet.create({
  screen: {
    margin: 20,
  },
  summary: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    marginBottom: 20,
    padding: 10,
    shadowColor: "black",
    shadowOpacity: 0.26,
    shadowOffset: { width: 0, height: 2 },
    shadowRadius: 8,
    elevation: 5,
    borderRadius: 10,
    backgroundColor: "white",
  },
  summaryText: {
    fontFamily: "openSansBold",
    fontSize: 18,
  },
  amount: {
    color: "#C2185B",
  },
});

export default App;


Output:

  • Image:
ScrollView_in_rn


  • Video:




Next Article
React Native Tab Navigation Component
author
verma_anushka
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox