ScrollView Component in React Native

ScrollView is a React Native component that provides a scrollable area for its content.

import { ScrollView } from "react-native";

It can be used for both vertical and horizontal scrolling.

Import ScrollView from the react-native package.

import { ScrollView } from "react-native";

You can also import it together with other components.

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

<ScrollView>

    <Text>
        Welcome to React Native
    </Text>

</ScrollView>

All content placed inside the ScrollView becomes part of the scrollable area.

<ScrollView>

    <Text>Chapter 1</Text>

    <Text>Chapter 2</Text>

    <Text>Chapter 3</Text>

    <Text>Chapter 4</Text>

    <Text>Chapter 5</Text>

</ScrollView>

The user can scroll through the content when it exceeds the available screen space.

Vertical scrolling is the default behavior of ScrollView.

<ScrollView>

    <Text>Item 1</Text>
    <Text>Item 2</Text>
    <Text>Item 3</Text>
    <Text>Item 4</Text>
    <Text>Item 5</Text>

</ScrollView>

The user can move up and down through the content.

Horizontal scrolling can be enabled using the horizontal prop.

<ScrollView horizontal>

    <View>
        <Text>One</Text>
    </View>

    <View>
        <Text>Two</Text>
    </View>

    <View>
        <Text>Three</Text>
    </View>

</ScrollView>

The user can move from left to right through the content.

The horizontal prop changes the main scrolling direction from vertical to horizontal.

<ScrollView horizontal={true}>

    <Text>React</Text>

    <Text>Native</Text>

    <Text>Mobile</Text>

</ScrollView>

You can also write simply:

<ScrollView horizontal>

View components are commonly placed inside ScrollView.

<ScrollView>

    <View style={styles.card}>
        <Text>Course 1</Text>
    </View>

    <View style={styles.card}>
        <Text>Course 2</Text>
    </View>

</ScrollView>

The style prop can be used to style the ScrollView itself.

const styles = StyleSheet.create({

    container: {
        flex: 1,
        padding: 20
    }

});

<ScrollView style={styles.container}>

    <Text>
        Scrollable Content
    </Text>

</ScrollView>

The contentContainerStyle prop is used to style the content container inside the ScrollView.

const styles = StyleSheet.create({

    content: {
        padding: 20
    }

});

<ScrollView
    contentContainerStyle={styles.content}
>

    <Text>
        Scrollable Content
    </Text>

</ScrollView>

Padding can be added to the content container to create space around the content.

const styles = StyleSheet.create({

    content: {
        padding: 20
    }

});

<ScrollView
    contentContainerStyle={styles.content}
>

    <Text>
        Welcome
    </Text>

</ScrollView>

ScrollView is useful for displaying a small or moderate number of cards.

<ScrollView>

    <View style={styles.card}>
        <Text>HTML Course</Text>
    </View>

    <View style={styles.card}>
        <Text>CSS Course</Text>
    </View>

    <View style={styles.card}>
        <Text>React Course</Text>
    </View>

</ScrollView>

Images can also be displayed inside a ScrollView.

<ScrollView>

    <Image
        source={require("./assets/image1.jpg")}
        style={styles.image}
    />

    <Image
        source={require("./assets/image2.jpg")}
        style={styles.image}
    />

</ScrollView>

This can be useful for simple image galleries.

Long forms can use ScrollView so that users can access fields that are below the visible screen.

<ScrollView>

    <Text>Name</Text>

    <TextInput
        placeholder="Enter name"
    />

    <Text>Email</Text>

    <TextInput
        placeholder="Enter email"
    />

    <Text>Address</Text>

    <TextInput
        placeholder="Enter address"
    />

</ScrollView>

ScrollView is useful for screens containing long descriptions, instructions or terms and conditions.

<ScrollView>

    <Text style={styles.description}>

        React Native is a framework for
        building mobile applications using
        React and JavaScript.

        This text can continue for many
        lines and the user can scroll
        through it.

    </Text>

</ScrollView>

The showsVerticalScrollIndicator prop controls whether the vertical scroll indicator is displayed.

<ScrollView
    showsVerticalScrollIndicator={false}
>

    <Text>
        Scrollable Content
    </Text>

</ScrollView>

Setting it to false hides the vertical indicator.

The showsHorizontalScrollIndicator prop controls the horizontal scroll indicator.

<ScrollView
    horizontal
    showsHorizontalScrollIndicator={false}
>

    <Text>Item 1</Text>
    <Text>Item 2</Text>
    <Text>Item 3</Text>

</ScrollView>

The onScroll prop can be used to respond to scrolling.

<ScrollView
    onScroll={() => {
        console.log("Scrolling");
    }}
>

    <Text>
        Long Content
    </Text>

</ScrollView>

Scroll events can be useful for advanced UI behavior.

The scroll event provides information about the current scroll position.

<ScrollView
    onScroll={(event) => {

        const y =
            event.nativeEvent.contentOffset.y;

        console.log(y);

    }}
>

    <Text>
        Scroll Content
    </Text>

</ScrollView>

The contentOffset can be used to inspect the current scroll position.

The scrollEventThrottle prop can control the frequency of scroll event updates.

<ScrollView
    onScroll={(event) => {
        console.log(
            event.nativeEvent.contentOffset.y
        );
    }}
    scrollEventThrottle={16}
>

    <Text>
        Scroll Content
    </Text>

</ScrollView>

This is mainly useful when an application needs to respond to scrolling continuously.

A ScrollView can support pull-to-refresh behavior using RefreshControl.

import {
    ScrollView,
    RefreshControl
} from "react-native";

It is commonly used when refreshing data from an API.

A basic refresh setup can use state to control the refreshing status.

const [refreshing, setRefreshing] =
    useState(false);

const refreshData = () => {

    setRefreshing(true);

    setTimeout(() => {
        setRefreshing(false);
    }, 1000);

};

The ScrollView can then use this state with RefreshControl.

Flexbox can be used to arrange content inside a ScrollView.

const styles = StyleSheet.create({

    content: {
        alignItems: "center",
        padding: 20
    }

});

<ScrollView
    contentContainerStyle={styles.content}
>

    <Text>
        Welcome
    </Text>

</ScrollView>

A ScrollView can be placed inside a screen container to create a scrollable page.

<View style={styles.container}>

    <ScrollView
        contentContainerStyle={styles.content}
    >

        <Text style={styles.title}>
            Student Profile
        </Text>

        <Text>
            Student information...
        </Text>

    </ScrollView>

</View>

Choosing the correct component becomes important as the amount of data in an application grows.

• Long profile pages
• Registration forms
• Settings screens
• Terms and conditions
• Course descriptions
• Small image galleries
• Dashboard pages with moderate content
• Vertical or horizontal content sections

ScrollView is especially useful when the content is known and is not an extremely large collection of repeated items.

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

export default function App() {

    return (
        <View style={styles.container}>

            <ScrollView
                contentContainerStyle={styles.content}
            >

                <Text style={styles.title}>
                    React Native Course
                </Text>

                <View style={styles.card}>
                    <Text style={styles.heading}>
                        Introduction
                    </Text>

                    <Text>
                        Learn the basics of React Native
                        and mobile app development.
                    </Text>
                </View>

                <View style={styles.card}>
                    <Text style={styles.heading}>
                        Components
                    </Text>

                    <Text>
                        Learn View, Text, Image and
                        other React Native components.
                    </Text>
                </View>

                <View style={styles.card}>
                    <Text style={styles.heading}>
                        Projects
                    </Text>

                    <Text>
                        Build practical mobile
                        applications.
                    </Text>
                </View>

            </ScrollView>

        </View>
    );
}

const styles = StyleSheet.create({

    container: {
        flex: 1
    },

    content: {
        padding: 20
    },

    title: {
        fontSize: 28,
        fontWeight: "bold",
        marginBottom: 20
    },

    card: {
        padding: 20,
        marginBottom: 15,
        borderRadius: 10,
        backgroundColor: "lightgray"
    },

    heading: {
        fontSize: 20,
        fontWeight: "bold",
        marginBottom: 8
    }

});

• Using ScrollView for extremely large lists.
• Forgetting to give the screen an appropriate layout.
• Using unnecessary nested ScrollViews.
• Putting too much content into a ScrollView without considering performance.
• Using horizontal scrolling without considering the available screen width.
• Ignoring keyboard behavior when building long forms.

Understanding the amount and type of content helps you choose the appropriate scrolling component.

• Use ScrollView for pages and moderate amounts of content.
• Use contentContainerStyle for content layout.
• Use horizontal when horizontal scrolling is required.
• Hide scroll indicators when appropriate.
• Use scroll events only when they are needed.
• Consider RefreshControl for pull-to-refresh screens.
• Use FlatList for large collections of repeated data.
• Avoid unnecessary nesting of scrollable containers.

ScrollView
 ↓
Choose Direction
 ↓
Vertical / Horizontal
 ↓
Add Content
 ↓
Apply Styles
 ↓
Handle Scroll Events
 ↓
Optional Refresh
 ↓
Check Content Size
 ↓
Use FlatList for Large Lists
 ↓
Complete Scrollable Screen

ScrollView is an important component for creating scrollable mobile screens. You will use it frequently for forms, profiles, settings, course pages and other screens containing moderate amounts of content.