React Native ScrollView

Summary: In this tutorial, you’ll learn how to use the React Native ScrollView component to create scrollable content in your app.

Introduction to the React Native ScrollView component

When you have a list of components that are too large to fit on the screen, some components will be hidden. To view those components through scrolling, you can use a ScrollView component.

The ScrollView component allows you to scroll through a list of components. It supports both vertical and horizontal scrolling.

The ScrollView component always renders nested components once even though they are not visible on screen. This is known as eager rendering.

If you have a large list of nested components, the rendering will take time and decrease the app’s performance.

Here are the steps for using a ScrollView component:

First, import the ScrollView from the react-native library:

import { ScrollView } from 'react-native';Code language: JavaScript (javascript)

Second, wrap the components within the ScrollView component:

<ScrollView>
    { /* Nested components */ }
</ScrollView>Code language: HTML, XML (xml)

The ScrollView component always needs a bounded height to work properly. To do that, you set the height of the parent view with a bounded height and ensure all the parent views have bounded heights.

For example the following

<SafeAreaView style={{flex: 1}}>
   <ScrollView>
      {/* {children} */}
   </ScrollView>
</SafeAreaView>Code language: HTML, XML (xml)

ScrollView component always needs a bounded height and can be set by providing all parent views with a bounded height. make sure all parent views have bounded height.

Keep in mind that the ScrollView should always be bounded by height

The following example renders 30 Text components on the screen. Since there is a large number of components, some will be hidden:

import { StyleSheet, Text, SafeAreaView } from 'react-native'

const ScrollViewDemo = () => {

    // create Text components
    const children = [];
    for (let i = 0; i < 30; i++) {
        children.push(<Text style={styles.text} key={i}>Text {i}</Text>);
    }

    // render the Text components
    return (
        <SafeAreaView style={styles.container}>
            {children}
        </SafeAreaView>
    );
}

export default ScrollViewDemo;
const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    text: {
        fontSize: 40,
    }
});Code language: JavaScript (javascript)

The app renders all the Text components but the screen only shows some of them:

To view the hidden components via scrolling, we can wrap the Text components within a ScrollView as follows:

import { StyleSheet, Text, SafeAreaView, ScrollView } from 'react-native'

const ScrollViewDemo = () => {

    // create Text components
    const children = [];
    for (let i = 0; i < 30; i++) {
        children.push(<Text style={styles.text} key={i}>Text {i}</Text>);
    }

    // render the Text components
    return (
        <SafeAreaView style={styles.container}>
            <ScrollView>
                {children}
            </ScrollView>
        </SafeAreaView>
    );
}

export default ScrollViewDemo;

const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    text: {
        fontSize: 40,
    }
});Code language: JavaScript (javascript)

Now, you can scroll through the contents:

Summary

• Use the ScrollView component to create scrollable content in your app.
• The ScrollView component always renders all nested components once.
• The ScrollView component always needs a bounded height to work