React Native ScrollView Component

Last Updated : 14 Jan, 2026

The ScrollView is an inbuilt React Native component used to display scrollable content inside a container. It allows users to move through content that does not fit on the screen.

  • Supports vertical and horizontal scrolling (vertical by default).
  • Allows multiple child components to be placed inside it.
  • Requires a bounded height to properly display scrollable content.
JavaScript 
import React from 'react';
import { ScrollView, Text } from 'react-native';

export default function App() {
  return (
    <ScrollView>
      <Text>Hi Geeks</Text>
      <Text>Welcome to React Native</Text>
      <Text>Scroll to see more</Text>
    </ScrollView>
  );
}
  • ScrollView wraps multiple Text components to make the content scrollable.
  • The text items are displayed in a vertical list that users can scroll through.

To use a ScrollView in React Native, we need to import the ScrollView component from react-native.

import { ScrollView } from 'react-native';

Syntax:

<ScrollView>
   {/* Add scrollable content here */}
</ScrollView>

For a deeper understanding of ScrollView and other layout components, explore the React Native Course to learn how to build optimized and responsive mobile interfaces.

Props for ScrollView Component

ScrollView props are used to control how content is displayed, scrolled, and interacted with inside a ScrollView in React Native. They allow developers to customize scrolling behavior, appearance, and user interactions.

1. Layout & Content

Controls how the content inside the ScrollView is positioned, sized, and displayed.

  • StickyHeaderComponent: Custom component used to render sticky headers.
  • centerContent: Centers content when it is smaller than the ScrollView.
  • contentContainerStyle: Applies styles to the inner content container.
  • contentInset: Adds spacing between content and the edges of the ScrollView.
  • contentInsetAdjustmentBehavior: Controls how safe-area insets adjust the content.
  • contentOffset: Sets the initial scroll position.
  • endFillColor: Fills empty space when content is smaller than the view.
  • fadingEdgeLength: Fades the edges of scrollable content.
  • horizontal: Displays children in a horizontal row instead of vertically.
  • invertStickyHeaders: Makes sticky headers stick to the bottom instead of the top.
  • maintainVisibleContentPosition: Keeps visible items in place when content changes.
  • stickyHeaderIndices: Specifies which child items should stick to the top.

2. Scrolling Behavior

Defines how the ScrollView moves, bounces, and responds during scrolling.

  • alwaysBounceHorizontal: Enables horizontal bouncing even when content is small.
  • alwaysBounceVertical: Enables vertical bouncing even when content is small.
  • bounces: Allows bouncing when reaching the end of content.
  • decelerationRate: Controls how fast scrolling slows down after release.
  • directionalLockEnabled: Locks scrolling to one direction while dragging.
  • disableIntervalMomentum: Stops scrolling at the next snap point.
  • overScrollMode: Controls overscroll behavior.
  • pagingEnabled: Enables page-by-page scrolling.
  • scrollEnabled: Enables or disables scrolling.
  • scrollToOverflowEnabled: Allows scrolling beyond content size.
  • scrollsToTop: Scrolls to top when the status bar is tapped.

3. Indicators & Appearance

Controls the visibility and styling of scroll bars and indicators.

  • indicatorStyle: Sets the style of scroll indicators.
  • persistentScrollbar: Keeps scrollbars visible even when not scrolling.
  • scrollIndicatorInsets: Adds spacing around scroll indicators.
  • showsHorizontalScrollIndicator: Displays the horizontal scrollbar.
  • showsVerticalScrollIndicator: Displays the vertical scrollbar.

4. Zooming

Manages zooming behavior and scale of ScrollView content.

  • bouncesZoom: Allows zooming beyond limits with bounce effect.
  • maximumZoomScale: Sets the maximum zoom level.
  • minimumZoomScale: Sets the minimum zoom level.
  • pinchGestureEnabled: Enables pinch-to-zoom gestures.
  • zoomScale: Sets the current zoom level.

5. Keyboard Handling

Controls how the keyboard behaves when interacting with the ScrollView.

  • keyboardDismissMode: Controls when the keyboard hides during scrolling.
  • keyboardShouldPersistTaps: Determines if taps keep the keyboard open.

6. Touch & Gesture Control

Manages how touch and gesture interactions are handled.

  • canCancelContentTouches: Allows touches to be canceled when dragging starts.
  • disableScrollViewPanResponder: Disables the default touch handling.

7. Nested Scrolling

Enables scrolling inside another scrollable view on Android.

  • nestedScrollEnabled: Enables nested scrolling on Android.

8. Refresh Control

Adds pull-to-refresh functionality to the ScrollView.

  • refreshControl: Adds pull-to-refresh functionality.

9. Snapping & Pagination

Controls snapping behavior and page-wise scrolling.

  • snapToAlignment: Aligns items when snapping.
  • snapToEnd: Enables snapping to the end of content.
  • snapToInterval: Snaps scrolling to fixed distances.
  • snapToOffsets: Snaps to specific offsets.
  • snapToStart: Enables snapping to the beginning.

10. Events & Callbacks

Provides functions that are triggered during different scrolling actions.

  • onContentSizeChange: Triggered when content size changes.
  • onMomentumScrollBegin: Called when momentum scrolling starts.
  • onMomentumScrollEnd: Called when momentum scrolling ends.
  • onScroll: Fired continuously while scrolling.
  • onScrollBeginDrag: Triggered when dragging starts.
  • onScrollEndDrag: Triggered when dragging stops.
  • onScrollToTop: Fired when scrolling to the top via status bar.
  • scrollEventThrottle: Controls how often scroll events fire.
  • scrollPerfTag: Used to log scroll performance.

Methods for ScrollView Component

ScrollView methods allow developers to programmatically control the scrolling behavior of a ScrollView. They are used to scroll, move, and manage the view dynamically.

  • flashScrollIndicators(): Displays the scroll indicators briefly.
  • scrollTo(): Scrolls to a specific x and y position, either instantly or with animation.
  • scrollToEnd(): Scrolls to the bottom for vertical ScrollView or to the right for horizontal ScrollView.
  • scrollWithoutAnimationTo() : Scrolls without animation (use scrollTo() instead).

Implementing ScrollView Component

It involves setting up a scrollable container in React Native that enables users to smoothly view and navigate content that extends beyond the screen’s visible area.

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

This will launch the Expo DevTools and display a QR code in the terminal and browser.

How to run the app:

  • Android Emulator: Press a in the terminal to open the app in the Android emulator.
  • Android Physical Device: Install Expo Go from the Play Store, open it, tap Scan QR Code, and scan the QR code to run the app.
  • iOS Device: Open the Camera app and scan the QR code to launch the app.
  • Web Browser: Click the localhost link shown in the terminal or browser to run the app in the web.

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 
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}>
        // use of ScrollView Component  
        <ScrollView> 
          {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:

Advantages of using the ScrollView Component

ScrollView works best for small amounts of content that need smooth scrolling.

  • Suitable for displaying a limited number of items.
  • Renders all child components at once.
  • Provides smooth scrolling experience.

Disadvantages of using the ScrollView Component

ScrollView is not optimized for handling large or complex data sets.

  • Can lead to performance issues.
  • High memory usage due to rendering all items.
  • Slower rendering for large content lists.
Comment

Explore